同じ商品でも、パッケージやボタンの色が変わると「高級そう」「安心できそう」「目立つ」といった印象が変わることがあります。
色が人の認知や感情、行動と関係することは心理学でも研究されています。ただし、「青なら信頼される」「赤なら売れる」のような色ごとの万能な心理効果が確立しているわけではありません。Webデザインで色を使うときに大切なのは、色彩心理を”売るための公式”として扱うことではなく、ブランド、文脈、UIの意味、アクセシビリティを合わせて設計することです。
色は本当に人の行動へ影響する?
色によって人の印象や注意、感情の受け取り方が変わることがあります。こうした色と心理・行動の関係を扱う考え方を一般に「色彩心理」といいます。
- 同じお菓子でも、黒いパッケージだと少し高級そうに見える
- セール売場で赤が多いと「目立つ」「活気がある」と感じることがある
- 病院や金融サービスで落ち着いた配色を見ると、印象が変わることがある
- エラー表示が周囲と同じ色だと、異常に気づきにくい
- 同じCTAでも背景と強くコントラストがつく色の方が見つけやすい
色と心理的な反応の関係を扱った研究はあります。ElliotとMaierのレビュー(2014年)では、色が感情・認知・行動に影響し得ることが整理されています。一方で、同じレビューは文脈や個人差などの境界条件が重要で、実務へ強い一般化をするにはまだ注意が必要とも述べています。
たとえば「赤を見ると認知成績が下がる」という研究は知られていますが、その後のメタ分析(Gnambsら, 2020年)では、初期研究ほど強い効果が再現されず、出版バイアスを補正すると頑健な効果を支持しにくいという結果も報告されています。つまり、赤=必ず焦る、青=必ず信頼する、緑=必ず安心する、という辞書を作るのは危険です。
色彩心理は、一部で実証されている効果がある一方、「この色を使えば必ず売上が上がる」といった断定的な言説の多くは、厳密な実証実験に基づいていないものも含まれる、発展途上の分野だという点は正直に押さえておきたいところです。色の効果は「絶対的な法則」というより「多くの人に当てはまりやすい傾向」として捉え、最終的にはターゲット層の反応をABテストなどで確認する姿勢が実務では欠かせません。
Webでは「色の心理」より「色の役割」を先に決める
UIで実務的なのは、色に一貫した役割を与えることです。
| 役割 | 例 |
|---|---|
| Primary | 主要な操作・ブランドの中心色 |
| Success | 完了・成功状態 |
| Warning | 注意が必要な状態 |
| Error / Destructive | エラー・削除など慎重な操作 |
| Neutral | 背景・補助情報・無効状態 |
というように、同じ意味には同じ色を使う方が、ユーザーは状態を学習しやすくなります。ただし「成功は必ず緑」「エラーは必ず赤」と固定する必要はありません。プロダクトのブランドや既存のデザインシステムとの整合性も重要です。
色だけで意味を伝えない
ここはアクセシビリティ上、とても重要です。「赤ならエラーだと分かるから、文章は不要」としてしまうと、色覚特性や表示環境によって意味が伝わらない可能性があります。たとえばエラーなら、色・アイコン・「入力してください」などの文章・該当項目との位置関係を組み合わせます。色は意味を補強する情報として使い、唯一の手がかりにしないようにします。
CTAは「赤なら売れる」「緑なら安心」では決めない
CTAボタンの色は、Webマーケティングで心理効果と結びつけられがちです。しかし「赤いボタンならCVRが高い」「緑なら安心して押される」と一般化することはできません。重要なのは、周囲から十分に目立っているか、押せる要素だと分かるか、CTAのラベルが明確か、背景とのコントラストが足りているか、同じ画面に同等の強さのCTAが乱立していないかです。ブランドカラーが青なら補色に近いオレンジが目立つこともありますし、モノトーンのサイトなら黒でも十分に強いCTAになります。「何色か」より「その画面の中でどう機能しているか」を見ます。
コントラストは心理効果より優先する
どれだけブランドに合う色でも、文字が読めなければUIとして失敗です。WCAGでは通常のテキストについて、背景とのコントラスト比4.5:1以上を求める達成基準があります(大きな文字では3:1以上)。配色時は、見た目だけでなくコントラストチェッカーで数値確認する習慣をつけます。
文化によって色のイメージが変わることもある
色から連想されるイメージは、国や文化によって変わることがあります。日本で死を連想させる色は「黒」ですが、中国では「白」、エジプトでは「黄」が同じ役割を持つとされます。日本では聖徳太子の「冠位十二階」で最上位が紫だったことから、紫には「高貴」というイメージが今も残っているとも言われています。海外向けにも公開されるグローバルなWebサイトを作る場合は、日本国内での色のイメージだけで判断せず、対象国の文化的な意味も調べておくと、意図しない失礼にあたるデザインを避けられます。
色を決めるときの実務フロー
- まず役割を決める: 「信頼されたいから青」ではなく、ブランドカラー・背景・本文・CTA・成功・警告・エラーの役割を先に整理する
- ブランドとの整合性を見る: 既存ロゴや商品写真、ブランドガイドラインがあるなら、それを優先する
- セマンティックカラーを統一する: 同じ色を「成功」と「削除」の両方に使うなど、意味がぶつからないようにする
- アクセシビリティを確認する: コントラストだけでなく、色なしでも状態が理解できるか確認する
- 成果を求めるなら実データで検証する: 購入率やクリック率への影響を知りたいなら、一般的な色彩心理の表ではなく、自分のサイトでA/Bテストや行動データを確認する
まとめ
- 色は人の印象や行動に影響し得るが、「この色ならこの心理効果」という単純な対応表ではない
- UIでは、色の心理効果より「役割の一貫性」を先に決める方が実務的
- 色だけで意味を伝えず、アイコンや文章と組み合わせてアクセシビリティを確保する
- 色のイメージは国・文化によって異なるため、海外向けサイトでは特に注意が必要
- ブランド→UI上の意味→視認性→アクセシビリティ→実データ、の順で考えると再現性がある
色や見た目が人の意思決定にどう影響するかをさらに深掘りしたい方には、説得・影響力の心理学の名著もおすすめです。
