誰でも個人的に好きな色があり、Webサイトを作る時にもその色を優先して使う傾向があります。自分の思い通りにサイトを構築するのはすごく楽しいですよね。でも、それで理想のお客さんを集めることができるかどうかは別問題。実際、Webコピーライティングやページのデザイン・レイアウトの良し悪しだけでなく、配色も訪問者に与える印象に影響を与えていることがわかっていて、熟練したデザイナーは色の意味、企業のブランドなどを考えて使う色を慎重に計画しています。
では、プロのデザイナーはどうやってホームページで使う色を選んでいるのでしょうか？見た目に素晴らしいだけでなく、お客さんにも好感を与えて商品やサービスの購入につなげる色の選び方…もちろんプロには及びませんが、実はいくつかの基本事項を押さえておけば、僕たちのような素人でも適切な色を選んで使うことができるのです。
もしあなたが今後Webサイトを自分で作成する予定があるなら、あるいは今お持ちのWebサイトのカラーリングに満足していないのなら、今回の記事が次のホームページ作成・改良のときにきっと参考になると思います…
目次
インターネットの世界では、Webサイトは家やオフィスと同じようなものです。お客さんがホームページのURLを入力すれば必ず同じ場所にたどり着け、実際の店舗と同じようにあなたの提供する商品やサービスについて詳しく知るきっかけを得られます。
ところが多くの場合、その時お客さんには商品やサービスを購入する準備が整っていません。とりあえず値段を知りたい場合や他社の商品と比較したい場合、商品について他のユーザーの意見を聞きたい場合など、購入前の情報収集の段階でもホームページはよく利用されます。ということは、あなたの商品やサービスを購入してもらうまでには、お客さんに最低でも2回はホームページを訪問してもらう前提でいなければならないということです。
では、ホームページを訪れたお客さんにもう一度同じページに来てもらうためには、どうすれば良いでしょうか？実店舗であればまず住所があって、そこに行くまでの最寄駅からのアクセス方法をお客さんにお伝えします。こうすれば、お客さんは一旦お店を離れた後でも、好きな時に同じ場所に戻ってこれるはずです。これらがインターネット上ではURLであり、SEO対策に相当します。
でも、実際同じ場所に行った時に予想とは全然違ったものがあったら、お客さんはどう思うでしょうか。昔懐かしのお店に行ったら、いつの間にか閉店していて別の店になっていた…あるいは、ある人突然マクドナルドが赤ではなく黒の看板を掲げていた…もしあなたがその場にいたら、きっと頭の中が混乱するはずです。
こういう思いをお客さんにさせないために、正しいURLを入力したら正しい場所に着いたということを、お客さんにきちんと伝えなければなりません。それが実店舗では看板であり、Webサイトではレイアウトや配色になるのです。なので、もしあなたの方ですでに確立されたブランドカラーがある場合、ホームページの配色も絶対にその色を外してはいけません。
でも、ただWebサイトの色が違うだけで、そんなに大きな違いが出てくるものなのでしょうか？答えはYesです。実際アメリカのKissmetricsが行った調査によると、正しい色を選択することで消費者のブランド認識度が80%も増加したとのことです。さらに付け加えると、人は初めて見るWebサイトの印象をたったの20分の1秒で決めてしまうというGoogleのデータがあります。これほどの短い間で訪問者に正しいメッセージを伝えるためには、カラーリングを上手に使うというのはとても有効な対策の1つなのです。
色には見た人にある特定の心理状態を誘導する力があることがわかっていて、下のチャートに示すように有名企業はこの力を利用してロゴをつくっています。
引用：The Logo Company. Psycology of Color in Logo Design.
例えば、お客さんに信頼性を伝えたいと考えている企業は青を好んで使い、暖かさを伝えたい企業はオレンジを使い、平穏なイメージを伝えたいなら緑…という感じです。専門家によると、ブランドの個性は最終的に誠実、興奮、能力、洗練、頑丈の5つのどこかに分類される（参考文献：Jennifer Arker. Dimension of Brand Personality）とのことで、企業は色をうまく使って自分たちの個性を表現しようとしているのです。この企業が発するメッセージと、お客さんが企業に望むことが一致した場合に、商品やサービス購入への道が大きく開けると言えます。
つまり、あなたがWebサイトを構築する時には、まず商品やサービスの最大のウリを決め、それに見合った色を選んで使うようにすると、あなたの発するメッセージがお客さんに正しく伝わりやすくなるのです。その時にこのチャートはきっと参考になると思うので、ぜひ使ってみてください。
そしてもう1つ、お客さんの色の好みも押さえておきたいところです。どんなに欲しい商品でも、好みの色がなかったら買わないといったことがよくあるからです。例えば男性の57%、女性の35%は青が好きだという報告があります（Crazy Egg. 3 popular colors for websites – When & how to use them. ）。この報告によると、青が一番嫌いという人は男性でたった1%みられるだけなので、配色に迷ったらとりあえず青を使えば無難です。
もちろん常に青が最適というわけではなく、あなたがお客さんに発するメッセージにより好ましい色は変わってきます。例えば上の表からすると、お客さんに若々しくエネルギッシュなイメージを伝えたいなら、赤を使う方が効果的ということになります。
メインで使う色を決めたら、次はサブで使う色の決定です。サブの色を決めるには、メインで使う色との相互関係を考えなければなりません。メインの色と相性のいいサブの色は何か？これを考えるには、学校の美術の時間に習った「カラーホイール」の理論が便利です。
簡単におさらいすると、まず光の三原色（赤・青・黄）があり、原色のうち2つを混ぜることで3種類の2次色（緑、オレンジ、紫）が生まれます。さらに原色の1つと隣り合った2次色の1つを混ぜ合わせることで3次色を6種類つくって、できた12色を円形に並べます。これがカラーホイールです（色の三原色は印刷物に関する理論なので、ここでは議論から外します）。
このカラーホイールを使って色の組み合わせを考えていくのですが、この時一般的に使われる配色のパターンが3つあるので、それぞれについて下に簡単に解説します。
補色：ホイール上の向かい合った色を組み合わせます。お互いが相手の色を強調しすぎる難点がありますが、配色で賑やかなイメージを伝えたい時にはこの選び方が適しています。
赤を基準色にした補色のカラースキーム例
単色：補色とは対照的に、メインの色の明度や彩度を変えてサブで使う方法です。この色の使い方は、メインとサブの色がケンカをしないので、比較的安全な配色と言えます。見た目にシンプルなウェブサイトを目指すなら、この色の使い方が適しています。
青を基準色にした単色のカラースキーム例
類似色：カラーホイールで隣り合った色をサブに使う方法です。補色と単色のちょうど中間のようなイメージで、目にうるさすぎず調和のとれたデザインになりやすい特徴があります。
黄色を基準色にした類似色のカラースキーム例
ちなみに、カラーホイールを使って補色や類似色を決めるには、この例で使ったAdobe Color CCというツールを使うのが便利です。
第3段階までに決めてきたことを参考に、クリック用のボタンなどに使うアクセントカラーを決めます。アクセントカラーは背景に同化しないように目立つ色を使い、「孤立効果」という心理現象を応用してお客さんの目につきやすくします。孤立効果とは「周りから目立つものほど認識・記憶されやすい」というもので、例えば下の見本のように…
引用：StudioPress. Digital Pro Theme
こんなページがあったとき、左下の赤いボタンがやけに気になりませんか？もともと赤は人の注意を引きつける色ですが、ここでは背景色の淡い灰色によってさらにボタンが強調されて、人の目に飛び込みやすくなっているのです。この例のように、適切なサブカラーを選ぶと、Webサイトのデザイン全体の印象を損なうことなくCall To Actionの部分を最大限に目立たせることができます。
幸いにも、このような配色のしかたはお客さんの立場でも受け入れやすいことが、過去の研究で示されています。Karen B. Schlossの論文“Aesthetic response to color combinations: preference, harmony, and similarity”によると、人は一般的にコントラストが強い色同士の組み合わせを好まないが、ある形をコントラストで強調した場合には逆で、コントラストが強いほど好ましいと思うようです。また、Xiaoyan Dengの論文“Consumer preferences for color combinations: An empirical analysis of similarity-based color relationships”でも、人は基本的に色のコントラストを好まないが、ある部分の強調として使われたときは例外であると結論づけています。
以上から、たとえあなたがコントラストの強い2色を選んだとしても、使い方次第でお客さんの好みにマッチしたデザインになることがわかります。デザインとして優れた配色になる上、孤立効果も加わって強調部分をクリックしたくなるようなWebサイトを作ることができるのです。
ここまでの理論を元にして、実際にあなたのWebサイトでどのような配色をするかを考えていきます。ここまで読んでくれたあなたの頭の中には、きっと「背景、メイン、サブ」の3種類の色が思い浮かんでいることと思います。でも、他にももっと使いたい色があったりすれば、どうしたらいいでしょうか？そもそも、Webサイトには何種類まで違う色を使えるのでしょうか？
結論としては、決まったルールはありません。もしあなたが賑やかな見た目のホームページを作りたいなら、4種類でも5種類でも使っていけないということはないのです。ただ、色の種類が増えるほどバランスのとれた配色にするのが難しいということは覚えておく必要があるでしょう。もしあなたがたくさんの色を使いたいなら、場合によってはプロのデザイナーにお願いする方がいいかもしれません。
そういうわけで、プロのデザイナーではない僕たちがWebサイトを自作するにあたって、基本的に使う色は「背景用の色（ベースカラー）・主役の色（メインカラー）・アクセント用の色（アクセントカラー）」の3色と決めてしまう方が無難です。この3色をカラーホイールを使って決めるのです。選び方は上に紹介した補色・単一色・類似色の3つが一般的ですが、もちろんこの3種類のいずれかで選ばなければいけないわけではありません。いろいろと試行錯誤しながら、ベストなイメージになるものを選んでください。
あともう1つ。色の種類だけでなく、3つの色を使う割合を考える必要があります。たとえ3つの色の選択が完璧だったとしても、色の分配で間違えてしまうとWebサイトの見た目にまとまりがなくなってしまいます。
では、どうやって分配に差をつけましょうか？どうやら背景：メイン：サブ＝60：30：10くらいが1つの基準になりそうです（Crazy Egg. 3 Time-Tested Ways To Pick The Perfect Website Color Combination）。この配色の法則にしたがうと…
以上を参考にしながら、あとはトライアンドエラーでいろいろ試してみてください。きっと徐々にスキルが上がっていって、そのうち新しいサイトを作るときにパターン決めが苦にならなくなってくるでしょう。
それでは今回の記事のまとめです。
AWAI認定コピーライター
SEO contents institute認定コピーライター
何事も“超一流の専門家から学ぶ”をポリシーとしており、コピーライティング業界で世界最高の権威である全米コピーライター協会(AWAI)でライティングの基礎を習得後、SEOコピーライティングのパイオニアHeather-Lloyd Martin、コンテンツマーケティングの世界的第一人者Brian ClarkにWebコピーライティングを学ぶ。
さらにAWAIでビジネス用Webサイト作成スキルを習得、知識ゼロの状態から自社サイトSuper Clear Contentsを立ち上げる。その経験とインターネット業界の動向をふまえて、個人事業主や副業サラリーマンに向けて最新のビジネス用Webサイト構築方法を提供している。
View Comments
大変、勉強になりました。カラーリングに関して、深く考えてみたいと思います。