Webデザインで使える!「色」の特徴を知ろう

Webデザインで使える!「色」の特徴を知ろう

こんにちわ!今日はWebデザインにおける「色」についてお話します。
今回このテーマを選んだ経緯として、初心者の方はよくこんな経験があるのではないかなと思うのですが、Webサイトを作成する際、メインカラーやアクセントカラーについて悩んだことはありませんか?
私は今でも日々悩んでいます…(^^;)配色って難しいですよね。
仕事上、ディレクターの方々からよく「今回のページは○○っぽい感じで作ってほしい!」と言われることが多いのですが、それをいかに具現化し、読む人へそのイメージを伝えられるかがデザイナーの見せ所です。
そこで、色が持っている印象をうまく使えたら、もっと簡単に、もっと素敵なサイトを作れるのではないかと思い、色について調べてみました。

透明感のある配色

nivea

まずは透明感です。化粧品関係や女性向けのWebサイトには欠かせないイメージですね。
透明感を表すときによく使用されるのは青色です。青色の濃淡の力を借りることで、透明感やみずみずしさを表現できます。例としてNIVEA様のサイトを利用させていただきました。

niveaa

大体の配色は上記のようになっていますが、青の濃淡の他に、白色部分も大きく設けることによって透けている感じを強める要素となっています。
なお透明感のあるサイトを再現する上で気をつけたいのが「黄色」です。黄色はガスを連想させるため、NGと言われています。また、あまり高彩度な青色は使用しない方がきれいな透明感を表現できます。

信頼感のある配色


pana

次に信頼感のあるデザインです。学校や医療のサイトではよく重要視されているイメージですが、「Web上でやりとりする」という意味では、信頼感というのはどのWebサイトにおいても非常に大切な要素であると思います。上記の例はパナソニック様の医療サイトページの一部を参考にさせていただきました。
メインカラーとしては青や黒、そして紺色が一般的な信頼感にある色といわれています。というのも、日本では古くから男性の衣服の色として使われている伝統的な色で、リクルートスーツでは黒に次いでフォーマルな色とされているからです。迷ったら紺色を使うのもありですね!

panaa

信頼感のある雰囲気を作り出すためには、とにかく低彩度で作成するのがコツとなります!高彩度を中心として作成すると、どうしても活発さが前面にでてしまうため、ややおしつけがましい印象となってしまう可能性が高いです。低彩度は堅実な印象を与えますので、高彩度色を使用する場合はアクセント程度で使用しましょう。

爽快感のある配色

clo

最後にさわやかさです。爽快感は主に緑色で表現が可能です。上記はクロレッツ様のサイトですが、全面的に緑を使用しています!緑という色は葉の色を連想させるため、明るくても暗くてもあまり重たくならないのが特徴です。アクセントカラーやメインカラー、どちらでも使用しやすいカラーだそうです。
ちなみに、緑色は信号や非常口など、Webにおいては「了解」「安心」の意味で使われています。また、目に優しい色といわれ、リラックスさせる効果もあるため、工場や病院などストレスを軽減させたい場所でもよく使われています。

color

カラーサンプルを見てもほぼほぼ緑です。緑はたくさん使ってもくどくなりにくいカラーであるのがよく分かりますね!

色の特徴をとらえよう!

まとめとなりますが、今回私が学んだことにより日本の伝統が関わっていたり、自然の力が作用していたりなど、まず色についての様々なうんちくを知ることができました。そうした色の持つ特徴を知ることで、特徴を知らない時よりも配色について悩む時間が減り、そしてもっと良いWebデザインへの一歩へ繋がっていくのではないかと思います!
今回は「ウェブ配色コーディネートカタログ(著者:坂本邦夫)」の本を熟読しこのような記事を書かせていただきました。本に記載されているWebサイトは最新のものではないかもしれませんが、色の概念というのはずっと変わらないものが多いので、非常に勉強になりました。Webデザインの配色で悩んでいる方にも是非お勧めしたい一冊です。
また、サイトの色を抽出するのにとても便利なWeb Site Color Picker様も利用させていただきました。ありがとうございました。


Previous: 読ませるページデザインのセオリー Next: 文字詰めについて

© 2017 ALL CONNECT Inc. All Rights Reserved.