色彩心理とは?色ごとの印象とWebデザインでの活かし方を初心者向けに解説

色彩心理の基本

まずは色彩心理という言葉が何を指しているのか、色ごとにどんな印象を持たれやすいのか、なぜ色から印象を受けるのかを押さえましょう。

色彩心理とは何か

色彩心理とは、色を見たときに人が受ける気持ちや印象、連想するイメージのことで、それを調べる研究分野を指すこともあります。

たとえば赤を見て「情熱的」「危ない」と感じたり、青を見て「落ち着いている」「冷たい」と感じたりするのが、色彩心理の身近な例です。

ただし、色が人の気持ちや行動にどう影響するかの研究は、まだ発展の途中です。

色彩心理の研究を整理した心理学の論文でも、理論的・実証的な研究は初期の段階にあり、研究結果が出そろう前に結論を急ぎやすい分野だと指摘されています(Elliot, A. J.「Color and psychological functioning: a review of theoretical and empirical work」Frontiers in Psychology, 2015(英語))。

そのためこの記事では、色の印象を「こう感じる人が多い」という傾向として扱い、「この色を使えば必ずこうなる」という決まりとしては扱いません。

色ごとの一般的な印象

代表的な色について、よく持たれる印象と、使い方によっては出てしまう印象、Webでよく使われる場面をまとめました。

色	よく持たれる印象	使い方によっては出やすい印象(注意)	Webでよく使われる場面
赤	情熱・活気・食欲	危険・攻撃的	セールの告知、飲食店、エラー表示
オレンジ	親しみ・陽気・温かさ	安っぽい・騒がしい	飲食店、子ども向け、申し込みボタン
黄	明るさ・楽しさ・注意	幼い・落ち着かない	注意書き、子ども向け、マーカー
緑	自然・安心・健康	地味・保守的	環境・健康のサービス、完了や成功の表示
青	誠実・冷静・落ち着き	冷たい・よそよそしい	銀行、IT企業、医療
紫	上品・神秘的・高級	近寄りがたい・不安	美容、占い、高級商品
ピンク	やさしい・かわいい・華やか	甘すぎる・幼い	コスメ、ベビー用品、スイーツ
茶	温もり・素朴・安定	地味・古めかしい	カフェ、木製品、和風のお店
白	清潔・シンプル・広がり	冷たい・物足りない	医療、シンプルなデザイン、背景全般
黒	高級・力強さ・洗練	重い・威圧的	高級ブランド、ファッション
グレー	落ち着き・中立・都会的	あいまい・寂しい	背景や補足の文字、ビジネス向け

この表は、よく見られる傾向をまとめた目安で、決まりではありません。

同じ色に「よい印象」と「よくない印象」の両方が並んでいるように、どちらに受け取られるかは、次の章で紹介する要因によって変わります。

暖色(赤・オレンジなど温かく感じる色)と寒色(青など冷たく感じる色)の印象は、暖色・寒色とは?で詳しく解説しています。

なぜ色から印象を受けるのか

色から印象を受ける理由の1つは、その色をよく見かけるものからの連想です。

赤から火や太陽、青から空や海、緑から植物を思い浮かべるように、身近なものと結びついた色は、そのものの印象を引き継ぎやすくなります。

もう1つは、社会のルールとして覚えた色の意味です。

日本では、安全に関わる表示の色が日本産業規格(JIS)の「安全色」で決められていて、私たちは日常生活の中でその意味を自然に覚えています。

安全色	主な意味	身近な使用例
赤	防火・禁止・停止	消火器、立入禁止の標識、緊急停止ボタン
黄	警告・注意	警告標識、踏切の遮断機
緑	安全状態・進行	非常口の標識、救急箱
青	指示・誘導	保護めがね着用などの指示標識

表は、国土交通省の資料に引用されたJIS Z 9103(安全色)の内容から、主なものを抜き出したものです(国土交通省「案内用図記号について」(PDF))。

「赤は危ない」「緑は安全」という印象は、色そのものの力というより、こうしたルールに繰り返し触れて身についたものだと考えられます。

色彩心理の印象が変わる4つの要因

同じ色でも、受け取られ方はいつも同じではありません。

ここでは、色の印象を変える代表的な4つの要因を、見本と一緒に見ていきます。

要因1:トーン(明るさと鮮やかさ)

1つめは、色の明るさ(明度)と鮮やかさ(彩度)の組み合わせである「トーン」です。

鮮やかさ(彩度)とは、色が原色のようにはっきりしているか、グレーが混ざってくすんでいるかの度合いのことです。

ビビッドで派手な色は「彩度が高い」、グレーがかった落ち着いた色(いわゆるくすみカラー)は「彩度が低い」と言います。

「赤」「青」といった色みの種類(色相)が同じでも、トーンが変わると印象は大きく変わります。

同じ赤の色相でも、トーンによって受ける印象が変わる

左の鮮やかな赤は元気で情熱的、中央の淡い赤はやさしくかわいらしい、右の暗い赤は落ち着いた格調のある印象になります。

「赤=情熱」のように色名だけで印象を決めず、どのトーンの赤なのかまで考えることが大切です。

明るさと鮮やかさの印象は、明るい色・暗い色の印象の違いとは?と鮮やかな色・くすんだ色の印象の違いとは?、トーンを使った配色は明度・彩度を使った配色とは?で解説しています。

色相・明度・彩度そのものの意味は、色の三属性とは?で解説しています。

要因2:組み合わせる色

2つめは、一緒に使う色です。

人は1色だけを見ているのではなく、周りの色との組み合わせで全体の印象を受け取るからです。

同じ赤のボタンでも、組み合わせる色で全体の印象が変わる

左の黒と組み合わせた赤は力強く大人っぽい印象に、右の淡いピンクと組み合わせた赤は明るく親しみやすい印象になります。

色ごとの印象を考えるときは、1色ずつではなく、配色全体でどう見えるかを確かめましょう。

要因3:使われる場所や場面(文脈)

3つめは、その色が「何に」「どんな場面で」使われているか、つまり使われる場所や場面(文脈)です。

先ほどの論文では、青いリボンは「1位」を表すよい印象になる一方、肉に青い色が付いていれば「腐っている」という悪い印象になる、という例が挙げられています。

Webでも、同じ赤が場面によってまったく違う意味を持ちます。

左は「入力に問題がある」、右は「お得な情報」。同じ赤でも文脈で意味が変わる

左の入力フォームの赤は「エラー」を、右のバッジの赤は「お得なセール」を伝えています。

同じ画面でこの2つの意味の赤を混ぜて使うと、ユーザーが「これはエラー?」と迷う原因になります。

要因4:文化や年代、個人の経験

4つめは、見る人の側の違いです。

先ほどの論文でも、色の効果は文化・性別・年齢・課題の種類・色の種類といった条件によって左右されると述べられています。

同じ色でも、育った国や地域、年代、その色にまつわる個人的な思い出によって、好き嫌いや受け取る印象は変わります。

海外向けのサイトや、幅広い年代に届けたいデザインでは、自分の感覚だけで色の印象を判断しないようにしましょう。

届けたい相手から色を考える方法は、ターゲットに合わせた色選びとは?で解説しています。

色彩心理をWebデザインに活かす方法

ここからは、色彩心理の傾向をWebデザインで使うときの考え方を、4つのポイントで紹介します。

伝えたい印象を言葉にしてから色を選ぶ

色彩心理を活かす第一歩は、色を選ぶ前に「どんな印象を伝えたいか」を言葉で決めることです。

「信頼できる」「親しみやすい」のように言葉が決まっていれば、上の早見表を手がかりに色の候補を絞り込めるからです。

たとえば会計ソフトのサイトで「信頼」と「親しみやすさ」を伝えたいなら、広い面積には落ち着いた青を使い、ボタンなどの狭い面積に温かみのあるオレンジを入れる、という組み立て方ができます。

目的から色を選ぶ考え方はデザインの目的と配色とは?、商品の特徴から色を選ぶ手順は商品・サービスに合わせた色選びとは?で解説しています。

Webで決まった意味を持つ色と両立させる

Webでは、赤はエラーや削除、緑は完了や成功、というように、操作の結果を伝える色の使い方が広く定着しています。

印象づくりのために選んだ色が、こうした「決まった意味を持つ色」とぶつかると、ユーザーを混乱させてしまいます。

Webデザインでは、ロゴやヘッダーなどに使い、サイトの印象を決める主役の色を「メインカラー」と呼びます(色の役割分担はベースカラー・メインカラー・アクセントカラーとは?で解説しています)。

たとえばメインカラーに赤を使うサイトでは、ブランドの赤とエラーの赤を、形と言葉で見分けられるようにします。

エラーは薄い赤の背景の枠に「×」や「!」のアイコンと「入力内容を確認してください」のような文言をセットで表示し、ボタンは赤の塗りで見せる、というように役割ごとに見せ方を分けると、ユーザーが迷いにくくなります。

エラーや完了を伝える色の決め方は状態色とは?で解説しています。

操作の状態を色で伝える方法は、状態色とは?で解説しています。

ボタンの色は「印象」より「目立つか」で選ぶ

「赤いボタンは押されやすい」のように、特定の色に行動を促す力があるという話をよく見かけますが、どの色にすれば必ず押されやすくなる、という正解の色はありません。

ボタンで大切なのは、背景や周りの色から浮き上がって見えるかどうかです。

色を変えた効果は、ボタンが押された割合を変更前後で比べるか、A/Bテストで確かめましょう。

A/Bテストとは、専用のツールを使って、訪れた人の半分には赤いボタン、残りの半分には緑のボタンというように2つの案を自動で出し分け、どちらがよく押されたかを数字で比べる方法です(CTAボタンとは?でも紹介しています)。

ボタンの色の選び方は、CTAを目立たせるカラーとは?で詳しく解説しています。

色の印象だけで情報を伝えない

色彩心理を活かすときも、大事な情報を色だけで伝えないことが大切です。

色の見え方は人によって違い、赤と緑のように見分けにくい組み合わせがある人もいるからです。

色の見え方の違い(色覚の多様性)については、色のアクセシビリティとは?で解説しています。

Webのアクセシビリティ(高齢の方や障害のある方、色の見え方が人と違う方、明るい屋外でスマートフォンを見ている人など、誰でも問題なく使えるようにすること)の国際的なガイドラインであるWCAGでも、色だけで情報を伝えないことが基準になっています(WCAG 2.2 達成基準 1.4.1、WAICによる日本語訳)。

アクセシビリティの全体像やWCAGの考え方は、アクセシビリティとは?で解説しています。

エラーなら「×」のアイコンや説明の文字を、注意なら「注意」という言葉を添えるなど、色以外の手がかりも用意しましょう(色だけに頼らないデザインとは?)。

また、黄色のように明るい色は、白い背景の上で文字色に使うと読めなくなります。

黄色も白もとても明るい色どうしで明るさの差がほとんどないため、文字と背景の境目がぼやけてしまうからです。

色の印象だけでなく、読みやすさもコントラスト比(背景色と文字色の明るさの差を数値にしたもの。差が小さいと文字が背景に溶け込みます)で確かめましょう。

実践のポイント

色彩心理をデザインに取り入れるときに確かめたいことと、よくある疑問をまとめます。

色を決める前のチェックリスト

ここまでの内容を、色を決める前に確かめたい5つの項目にまとめました。

• 色の効果を「決まり」として書いたり説明したりしていない(「〜と感じる人が多い」程度に受け止める)
• 色名だけでなく、トーンと組み合わせる色まで含めて印象を確かめた
• ブランドの色と、エラーや完了など決まった意味を持つ色を見分けられる
• 色だけで情報を伝えず、アイコンや言葉も添えた
• 文字と背景のコントラスト比を確かめた

よくある質問

• Q. 色彩心理は科学的に証明されている?
  A. 色が気持ちや行動に影響するかについては研究が続いていますが、まだ発展の途中で、条件によって結果が変わることも分かっています。
  「この色なら必ずこうなる」と言い切れるものは少ないので、デザインでは傾向として参考にする程度にとどめましょう。
• Q. 自分の好きな色を使ってはいけない?
  A. 使ってもかまいません。
  ただし色を選ぶ基準は「自分の好み」ではなく「届けたい相手に伝えたい印象」なので、好きな色が伝えたい印象と合っているかを確かめてから使いましょう。

まとめ

色彩心理とは、色を見たときに人が受ける気持ちや印象のことで、色ごとに「こう感じる人が多い」という一般的な傾向があります。

ただし色の印象は、トーン、組み合わせる色、使われている文脈、見る人の文化や経験によって変わるので、決まりとして扱わないことが大切です。

Webデザインでは、伝えたい印象を言葉にしてから色を選び、決まった意味を持つ色との両立、ボタンの目立ちやすさ、色以外の手がかりまで含めて確かめましょう。

まずはよく使うWebサイトを1つ開き、メインカラーからどんな印象を受けるかを言葉にして、その印象がトーンや組み合わせる色のどこから来ているかを考えてみましょう。