ブランドの印象を左右する配色・Webサイトの色選びで迷っていませんか？

イメージ形成に重要！サイトの配色はどうやって決めればいいの?

ロゴやCIが既にある企業ならコーポレートカラーがありますね。ですが、新しい企業・サービスはこれからブランドイメージを作っていくことが多いため、サイトのイメージカラーで迷われる方も多いのではないでしょうか。なぜこの色を使うかという理由は今後のブランド形成に関わる大切な要素です。

私たち制作側は、様々な情報をもとに最も適した配色を行う必要があります。色ではまってしまうこともあり、ポイントを押さえ効果的な色をしっかり選べるよう、色彩理論、流行、新しい技術などを取り入れていくことが大切です。

ここでは、色選びで迷わないためのポイントや、便利なツールについてご紹介します!

好きな色ではなく「どのような方に届けたいか」で選ぶ

対象のユーザーに適した配色

個人によって異なりますが、性別、年代などの属性によって、文化、色覚、色の嗜好に違いがあります。どんなユーザーにサービスや商品を使ってもらいたいでしょうか。ユーザーにとって好ましい色を絞りましょう。

例えば、幼稚園のサイトを寒色や無彩色でクールに作った場合、閲覧者は、ちぐはぐな感じを受けるでしょう。求めるイメージと異なると自分の欲しい情報ではないと判断しますよね。幼稚園なら元気で温かい印象の方が安心感を与えます。このようにターゲットの心が動く色を選ぶことが大切です。

また、色の識別については、女性の方が微妙な色の違いが分かる方が多いそうです。3色型色覚の方が多いのですが、4つの錐体細胞を持つ4色型色覚の方が女性に多く見られるということでした。年代では加齢により色覚変化が起こり、高齢になると視界が黄みがかって見えたり、青が識別しにくくなる方が多いようです。ターゲット層によって色使いの配慮が必要です。

色の持つ心理効果を取り入れる

色は人の心と体に影響を与えます。
赤系の色は交感神経を刺激し心拍数や体温を上げます。青系の色は副交感神経に作用して心を落ち着かせ、時間を短く感じさせます。

また、青は「信頼」、緑は「調和」、オレンジは「親しみ」など、それぞれ色の持つイメージがあります。明るい色は軽い印象、暗い色は重い印象を与えるなどの感覚に作用する力もあります。このような色の効果をユーザーに合わせて取り入れていきたいですね。

色ごとの色彩心理についてはこちらでもご紹介しています。

色彩の心理効果

人の心と体に影響を与える色彩の力とは? 購入予定が無くても、商品のカラーバリエーションを見て「自分だったらこの色がいいな」と、無意識で選んだことはありませんか?　また、商品購入時、ブランドや性能が気に入っても、欲しい色が […]

色彩の理論を参考にする

色相が決まったら次は配色です。配色に迷ったら下記のような色彩や配色の理論から色を選んでみましょう。

ベースカラー・メインカラー・アクセントカラー

基調となるベースカラー（背景）、メインカラー（サイトのイメージカラー）、アクセントカラー（目立たせたい箇所、CTAなどに使用）を選択します。美しいとされるおおよその割合はベースカラーが70%、メインカラーが25%、アクセントカラーが5%です。

メインカラー決定後、ベースカラーを選びましょう。
ベースカラーは背景としての読みやすさ、メインカラーとのバランスで白やグレー、淡い色が多いですね。
アクセントカラーは、メインカラーの補色や反対色を選ぶと視線誘導に効果があり、メリハリがでます。

イメージに合ったカラートーンの使用

色の属性には「色相」「彩度」「明度」の3つがあります。同じ色相でも彩度、明度によってイメージが変わります。
彩度、明度をまとめてグループにしたものがPCCSの表すカラートーンです。
こちらで分かりやすく解説されています。
PCCSとは | 色彩関連情報 | DICカラーデザイン株式会社

優しい印象のペール・トーン、明るく鮮やかなブライトトーン、大人っぽい印象のダーク・トーンなど。PCCSトーンマップは、わかりやすくイメージに合ったトーンを選びやすいです。

色彩調和論

配色の法則で有名なのが色彩学者ジャッドの色彩調和論です。

明瞭性の原理…コントラストのはっきりした配色は調和する。トリコロールなど。

秩序の原理…規則的に配置された色は調和する。類似色相、ダイアード、トライアド、テトラードなど。

なじみの原理…自然界の色の変化は調和する。ナチュラルハーモニーなど。

類似性の原理…色相、トーンなどで類似した配色は調和する。トーン・オン・トーン、トーナルなど。

調和された配色サンプルを探せるツール
「配色ジェネレータ」を使おう

多くの配色パターンから選べ、カラーコードをコピーできるので選びやすく便利な配色ジェネレータをご紹介します。美しいパターンをたくさん見ることができるので楽しく、思いがけない配色や使ってみたい色の組合わせが見つかるのではないでしょうか。

色指定が可能なジェネレータ

Colormind、ColorSpace（グラデーションも作成可能）、 Adobe Color CC

感覚・イメージから配色を選べる

Color Hunt、Dopely Colors

サイトの配色イメージで選べる

Happy Hues

グラデーション作成ジェネレータ（配色なし）

Front-end Tools、Mesh（こちらはcssコードではなく画像でダウンロード）