First impression : 人はWebサイトを見た瞬間に印象を決めている
Webサイトを作成する際に、配色はなぜ重要なのでしょうか。はじめに下記Webサイトの配色を見てください。配色のみで、何かのブランドを想像できるでしょうか？
上記のサイトは日本コカ・コーラ社のサイトです。この配色だけを見て何かしらのブランドが想像ができたならば、あなたは色を見てブランドのイメージを決めたということになります。それは、文章を1文字も読まず、配色だけで印象を決めたということですね。他にも、赤と白で配色されたブランドのロゴには以下のようなものがあります。
私たちは普段、新しいWebサイトを見た瞬間に「〇〇っぽいサイトだな」とか「〇〇系だな」など無意識にそのサイトを何かのカテゴリーに当てはめ、イメージを作っているのです。その全体的なイメージは色によるものです。
カナダのカールトン大学で行われた研究のレポートによると、人の脳はWebサイトが表示されてから１秒の1／20の時間で印象を決定しているという結果が発表されました。詳細内容としては、被験者に50ミリ秒（つまり1/20秒）Webサイトを表示させて、Webサイトを評価するというもので、結果は長時間表示させて評価したものと、ほぼ一致した結果が得られました。つまり短時間でも長時間でも、人がWebサイトを見て受ける印象にさほど変化がないということです。
このことから、ユーザーはあなたのWebサイトを見た瞬間に印象を決めていることになります。ですから、そのファーストインプレッションはとても重要であり、私たちはWebサイトを制作する際にブランドイメージに沿った配色を考えるのは必須なのです。配色は人がブランドを共感する上で、大切な要素の一つです。
人がブランドに共感する配色とは
人がブランドに共感する配色とはターゲットユーザーが求める‘色のイメージ’とブランドの‘ブランドパーソナリティ’（ブランドパーソナリティとはブランドが持つ性格のことですね）がマッチしたものです。なので配色を考える際は２軸で考えるとわかりやすいです。
まず1つ目の軸は「ターゲットユーザーが求めるイメージ」ですが、これはブランドが色で確立されている場合とされていない場合があります。 例えば、コカ・コーラのサイトが突如、青い背景に変わっていたらユーザーは全く違うブランドのWebサイトに来てしまったかのように思い、驚いてしまうでしょう。 そのように、色でブランドイメージが確立されているものに関してはユーザーもサイトを訪れるときは赤と白の配色をなにかしら想定していますし、ロゴに合わせた色を考慮することは当然考えておくべきです。
一方でイメージカラーが確立されていないブランドは、色彩が持つ心理（ピンクは優しい、青は清潔・冷静など）やターゲットユーザーに合わせた色を考えていきます。 例えば20代から30代の女性が産婦人科のサイトを探していたとして、その産婦人科のサイトが黒背景であればユーザーは戸惑ってしまいます。 ユーザーは「優しさ、暖かさ」などが印象に残る色を想定してサイトに訪れてくると当然予測できるので、ターゲットユーザーが求めている目的のイメージに沿った配色を選ばないと、共感は得られないでしょう。
また、ユーザーがWebサイトで情報を得るということは何かしらの目的があって検索をしているので、ターゲットユーザーがどんな人なのかを知らなければなりません。 インターネット上では見えない場所で情報が発生し、拡散している可能性があるので、Googleアラートやgoogleキーワード検索、yahooリアルタイムなど無料でユーザーの動向が調べられるので、確認するのをお勧めします。
次に2つ目の軸は「ブランドのブランドパーソナリティ」ですが、これは相手にどんなことを感じてほしいのかというブランド側からの色伝達の意図ということです。 ブランドパーソナリティを決めるところから始まり、ターゲットユーザーに対するコミュニケーションの方向性なども含みます。ブランドパーソナリティを考えずにコミュニケーションをしていると、どんなにデザインされた意図のあるサイトでも人に共感してもらえないサイトになってしまいます。
上記の2軸がマッチすると、ターゲットユーザーに正しくブランドパーソナリティが伝わるWebサイトになるでしょう。 このことをWebサイトを作成する前に決めておかなければ、後々サイトのリニューアルする際など、コストも時間もかかってしまい面倒になりますね。そのようなことを省くために初期の段階で、ターゲットユーザーの動向と色伝達の意図を考えておくのは大切なことです。
ブランドサイトから見る配色について
では実際にブランドサイトではどんな配色をしているのかブランドパーソナリティを交えて見てみましょう！
ロゴに合わせて青でまとめられたページです。 ロゴに合わせることで色の印象が強く与えられるサイトになります。 一般的に飲食で青は食欲を減退させると言われていますが、ポカリスエットの青色からイメージできるものは爽快感ですよね！ サイトでは青空と海が爽やかさをもたらしパッケージから連想できるイメージにマッチしています。 画像の持つイメージとブランドを印象づける配色が、相乗効果を生み、ブランドをより強化しています。
またこのサイトの配色パターンは「同系色」の部類に入り、色相が同じで明度・彩度などを変化させた色の組み合わせです。 同系色のメリットは統一感がありすっきりとして見えます。色の印象を強く与えるので、製品のサイト（パッケージに沿った色）なんかでよく見かけます。
こちらのサイトもパッケージの色を連想させる配色です。 ダノンビオのサイトは曲線の黄色や背景のベージュから女性的で柔らかい印象を受けます。コアターゲットは渡辺満里奈さんを起用しているところや、競合のヨーグルトの価格を比較して、子持ちの主婦30代～40代くらいなのかなと想定できます。 こちらのサイトもサイトから受けるイメージとブランドパーソナリティが合わさっていることがわかりますね。
配色パターンですが、「隣接色」の部類に入ります。 色相環で同じような色系統に属する色の組合せです。つながっている雰囲気がありつつ、異なる色相なのでサイトにリズムが出ます。 このサイトは赤色だけが緑系統では対比の色ですが、この色を引き立たせたい場所に入れることで誘目性が高くなります。（誘目性とは色が人目を引く度合いのことです。例えば、交通標識の警戒標識や消防の救助隊員の服装などは人の目に止まりますね。 良いとされているのは、暖色系（赤、黄、橙）の高彩度の色が効果が高いとされ、寒色系（青、緑、紫）などの色だと低いとされています。） 対比の色はアクセントカラーとしてもよく用いられます。
配色の振り分けについて
実際の配色方法はたくさんありますが、私は大体ベースカラー・メインカラー・アクセントカラーの3色を決め、サイト全体を100%とした際の割合を振り分けています。 大体60％はデザインの全体的なトーン、サイトのベースとなる色（ベースカラー）。30％は視覚的に印象的な効果を作成するための色味（メインカラー）で10％は アクセントカラーを用います。 これらを目安として用いて必要な場合は足したりしてバランスを見ましょう。
白ベースが約６割（全体的なトーン）、黄色ベースが約３割（コンテンツカラー）、黒ベースが1割（アクセントカラー、見出し部分）。 またターゲットユーザーは外国人なので日本の和を印象付けるインターフェイスとなっています。
こちらは黄色ベースが結構占めてます。7割くらいでしょうか。白ベースが約２割（コンテンツカラー）、黒ベースが1割（アクセントカラー、見出し部分） 食事をするときの楽しげな雰囲気が伝わったきます。 またこちらのサイトはブランドが色で確立されていないものに入るでしょう。キューピーマスタード＝黄色とは想像できないので、色彩が持つ心理やターゲットユーザーに合わせた色を考えています。 黄色は明るく活発なイメージで食欲を増進させる効果があります。
更に効果的な配色にするためには
視認性と可読性を意識してみましょう。 視認性とは文字のみやすさで可読性とは文字の読みやすさです。 配色においては、背景と文字が重なったときのコントラストのことで、見やすく、読みやすい配色とは明度差が大きくはっきりしているものが良いとされています。白背景の黒文字はよくみえますよね。 逆に、明度と彩度が近いもの同士だと読みにくいものになってしまいます。
NextStep
配色が苦手だなと感じる方は、まずWebサイト作る際のリサーチ段階で、競合のブランドサイトを見てその中から参考にしたいサイトを一覧にまとめてみましょう。 そしてまとめた各ブランドサイトはどんな性格を持っているのかパーソナリティ性は何か想定して言語化してみます。 これをすると業界の配色パターンもわかり、尚且つ各サイトのブランドパーソナリティが理解できれば自分がサイトの制作をする際、配色の参考にするサイトを見つける近道になります。 要は言語化することで自分の考えるブランドパーソナリティに近いブランドサイトの配色を参考にできるということです。
また先ほど述べた、色の配色パーセンテージの方法として大体の色を分析してくれるツールがあります。
WebSiteColorPicker
Webサイトの色分析しパーセンテージを出してくれます。
pictaculous
カラーパターンを抽出してカラーパレット作成してくれます。
とても便利ですね！
別の方法としては、Webサイトのスクリーンショットをとり、それにぼかしをかけることで大体の配色分割がわかりやすくなります。 写真などいらない要素は削除してみると更にわかりやすくなります。
実際の配色方法についてはWebサイトだけに限らず、洋服のデザイン、雑誌や本、建築物など様々なデザインから考えることもできます。 配色方法について理解が深まると、Webサイトだけではなく日常生活でも役に立つことがあるでしょう。 例えば部屋の家具選び、料理の盛りつけなど楽しくなりますよね！ デザインは、人々が日々の暮らしをより良く快適に、楽しくなるように考えられてきたものなので、より良くする為の一つの要素として配色についても考えてみてはいかがでしょうか。