色によって人が感じる心理的効果は異なるものです。効果的な配色をしてウェブサイトの売り上げを伸ばしましょう。
そのための基本として、違和感のない配色が重要です。ウェブサイトのカラーバランスがバラバラで目がチカチカするようなものや、本来与えるべき印象とかけ離れた色づかいをすることによって、残念な結果を招いてしまうものです。
このサイトは何度もリニューアルをしてきました。ようやく落ち着いた色づかいにすることができ、よって良い印象を持ってもらうことができました。結果としてサイトの滞在時間やPVを伸ばすことができました。単純に色だけで可能になったわけではなく、デザイン全体の影響もありますが、総合的に考えると色づかいによる効果が大きいと個人的には感じています。
あまり、公にしたくない情報ではあるのですが、当サイトではボタンの色を赤系統のエンジから緑に変えた途端にPVが1.5〜2倍弱くらいまで増えました。
このように、売れるウェブサイトにするには配色は無視できないほど大きな要素だと思いますので、基本を学んで自分のウェブサイトに活かしてみてはいかがでしょうか。この記事では配色のヒントや配色を決定する際に参考になるサイトや考え方をまとめていますので、あなたのウェブサイトに役立ててください。
心理的効果
人が色に対して感じる感情は、一般的に暖色系は温かさやぬくもりなど、寒色系はクールな感じ寒さ、涼しさなどを感じさせる。彩度（明るさ）が上がるほとその傾向は高くなり、逆に下がればそのように感じなくなるといわれています。下の図を参照ください。
明度と彩度の違い
明度と彩度の違いはとてもわかりにくいものです。原色と白と黒の割合によって表現されます。原色そのものが彩度が強いといいます。彩度が低いのは白や黒の割合が多いものをいいます。原色に白の割合が多いものが明度が高いといい、原色に黒の割合が大物が明度が低いといいます。
このように説明してもわかりにくいと思いますので、下の図を見てください。
彩度
明度
彩度は色の鮮やかさを意味する。物体の分光反射率が平坦になる程、彩度は低くなる。また、色相によって彩度が高いときの明度が異なる。彩度の変化を示す例を3つ挙げる。
明度は色の明るさを意味する。明度の高低は、物体の反射率との相関性が高い。光の明暗に関して、明るさ (brightness, luminousity) があるが同様の知覚内容を指していると言える。
引用先：彩度と明度についてwiki
本当にわかりにくいですが、なんとなく理解されたでしょうか。もう少し見てみましょう。
１.高明度・高彩度の場合
鮮やかな色づかいの場合は、すっきりして活発な印象を与えます。
２.高明度・底彩度の場合
やわらかな明るさを感じさせます。
３.底明度・底彩度の場合
重たく・重厚なイメージを感じさせます。
上記の例１を基にして明度と彩度を変えただものです。
１.暖色系や鮮やかな色合いは欲求を刺激するといわれています。たとえば、食欲や性欲などの生命の根本に関わる色合いを関連業界やスポーツなど活発なイメージを表したい業界によく使っているのは想像がつくのではないでしょうか。
２.寒色系や明度彩度の低い重厚なカラーは信頼感を重視するコンサルティング業界や士業・高級家具や伝統的な業界でよく利用されています。
３.高明度で底彩度の配色はナチュラルな商品を扱っているメーカーやあるいは美容室、手作り雑貨やフラワー・ウェディングなどそのようなイメージを出したい業界によく使われているのではないでしょうか。
配色技法
イラストレーターを使っているなら、様々な配色の技法をすぐに利用することができます。種類が多すぎるためここでは代表的なものに触れるだけにします。ご了承ください。
配色を決めてくれるウェブサービス「Paletton」で作成した画像を参考に説明します。
アイデンティティー
１色を中心に関連した色をつかいます。一色のみの色づかいであるが明度や彩度を調整することで色合いの差を出します。
アナロジー
30度の角度上にある類似色で構成する配色、まとまりのある落ち着いた感じになります。
トライアド
三角形上の配色を使うことでカラフルであるが、バランス感の高い配色になります。下の画像は正三角形なっていません、Palettonを使う場合はご自分で調整してください。
テーラード
トライアドより、さらにカラフルな配色になります。下の画像は正四角形なっていません、Palettonを使う場合はご自分で調整してください。
まとめ
このように、ウェブサイトのカラーを決めるにはある程度基礎知識を知っておくことによって、大きく基準からずれたカラーデザインを避けることができ、まとまりのあるデザインを作れるのではないでしょうか。そのような失敗をしないために、カラーについて解説させていただきました。
また、当サイトの例ではアメリカのフィナンシャルタイムスの色使いを参考にして制作しました。（あくまで参考にしただけです。比べてみるとわかると全然違うのがわかると思います。）このサイトはいいなーと思う色使いがあったら参考にしてみるといいかもしれません。
最後に、初心者でも手軽にベストな配色を選べるウェブサービスを紹介していますので、関連色と対比色をさっく出してウェブサイトの作成に役立ててください。
１.カラーチャートをもとに手軽にウェブサイトの色づかいを決めるためのウェブサービスやアプリをまとめています。「ホームページのカラー選びで役立つWebサイト・ツール」をご覧ください。
２.ホームページのデザインを作る際に大切なことをまとめています。
ホームページ作成の勘所②デザイン編
