【保存版】Web制作の現場で駆使するUI/UXの心理学　12の法則【色彩編】

はじめに

Webサイトやアプリの制作において、「使いやすい」「わかりやすい」という言葉は頻繁に使われます。しかし、何をもって使いやすいとするのか、その基準は曖昧になりがちです。なぜなら、使いやすさは個人の感覚だけでなく、人間の脳が情報を処理する仕組みに深く関わっているからです。

私たちデザイナーがWebサイトを設計する際、実は個人のセンスや感覚だけに頼ることはありません。そこには、先人たちの数多くの実験や研究によって裏付けられた色彩心理学や認知科学の法則が存在します。

ユーザーが画面を見たとき、脳はどう反応し、どんな行動をとるのか。

この記事では、私たちが実際の案件において、コンバージョン率の向上や離脱率低下などの具体的な成果を出すために意識しているUI/UX 12の法則を徹底解説します。色彩がユーザー体験に与える影響を紐解き、具体的な実用例もご紹介しますので、ぜひサイト改善の参考にしてみてください。

1. 孤立効果（フォン・レストルフ効果）

孤立効果（von Restorff Effect）
他と違うものが、記憶と視線を独占する。
1933年にドイツの精神科医ヘドヴィグ・フォン・レストルフが提唱。
似たような要素が並んでいる中で、一つだけ色や形状が異なるものは、他のものよりも記憶に残りやすく、注意を引きつけるという心理現象です。

実用例

価格表の中で「おすすめプラン」のボタンだけ色を変える。

通知バッジに鮮やかな赤色を使用する。

2. 暗黙の期待（色彩のコンテクスト効果）

色彩のコンテクスト効果（Color Context Effect）
周りの環境によって、色の見え方は180度変わる。
色彩心理学やデザイン学において古くから研究されている現象。
同じ色であっても、背景や隣り合う色との関係性によって、明るさや鮮やかさ、さらには受ける印象までが全く違って知覚される現象です。

実用例

高級ブランドサイトでは「黒」をエレガントに、セールサイトでは「黒」を力強さや安さの強調として使い分ける。

3. 同化効果（ベゾルト効果）

同化効果 / ベゾルト効果（Bezold Effect）
隣り合う色が混ざり合い、境界線が溶けていく。
ドイツの気象学者・文様の研究者であるヴィルヘルム・フォン・ベゾルトが発見。
ある色に別の色が細かく挿入されると、対比されずにむしろ挿入された色に同化して見えてしまう現象です。

実用例

細かなグリッドデザインやテキストの背景色において、文字の色が背景の印象を左右することを考慮して配色を決定する。

4. 60：30：10の法則

60：30：10の法則（The 60-30-10 Rule）
美しい画面を作る、デザインの絶対比率。
インテリアやウェブデザインで広く使われる配色の方程式。
ベースカラーを60%、メインカラーを30%、アクセントカラーを10%の割合で配置すると、最もバランスが良く、視覚的に美しい構成になるという法則です。

実用例

背景を白、ブランドカラーの青、重要なボタンをオレンジで構成する。

5. ミラーの法則（色彩への応用）

ジョージ・ミラーの法則（Miller’s Law）
人間の脳が一度に覚えられる、情報の限界値。
1956年に米国の心理学者ジョージ・ミラーが提唱。
人間が短期的に記憶できる情報の塊の数は、個人差を含めても「7個前後（5個から9個）」が限界であるという心理学的な法則です。

実用例

一つの画面で使う主要な色数を絞り、カテゴリー分けやタグ付けの色も5〜7色以内に収めてユーザーの混乱を防ぐ。

6. プルキンエ現象（色彩の明度法則）

プルキンエ現象（Purkinje Effect）
暗闇が訪れるとき、青い花が鮮やかに浮かび上がる。
1819年にチェコの生理学者ヤン・エヴァンゲリスタ・プルキニェが発見。
周囲が暗くなるにつれて、人間の目の感度が赤い光（長波長）から青い光（短波長）へとシフトし、暗がりでは青や緑のものが明るく見えるようになる現象です。

実用例

ダークモードのデザインにおいて、日中と同じ鮮やかすぎる青は眩しく感じ、沈んだ赤は見づらくなるため、彩度や明度を調整する。

7. 面積効果

面積効果（Area Effect）
小さな色見本と、大きな壁。その色は同じではない。
色彩学における視覚的な錯覚の一種。
同じ色であっても、面積が大きくなるほど明るい色はより明るく鮮やかに、暗い色はより暗く感じられるようになるという現象です。

実用例

カラーパレット上の小さな色見本だけで背景色を決めず、実際の画面全体に塗った際の見え方を必ず確認する。

8. 順応効果（色順応）

色順応（Chromatic Adaptation）
照明が変わっても、脳は「本当の白」を見失わない。
人間の視覚システムに備わった自動ホワイトバランス機能。
特定の照明の下に長くいると、目の細胞がその光に慣れ、周囲の環境色を脳内で自動的に補正して本来の色を正しく認識しようとする現象です。

実用例

Webサイト内の背景色を統一すると、ページ移動時の急激な色順応が起きないため、画面のチカチカ感や目の疲労を抑えられる。

9. 対比効果（同時対比・継時対比）

対比効果（Color Contrast）
隣り合うことで、お互いの個性を尖らせる。
色彩調和論における最も基本的な視覚現象。
2つ以上の色を同時に、または並べて見たときに、それぞれの色の違い（明度・彩度・色相）が強調され、単体で見るよりも差が大きく感じられる現象です。

実用例

グレーの文字を置くときは、白背景よりも黒背景の方が文字がより浮き出て見える。アクセシビリティの確保に必須。

10. プルシュリッヒ効果（色の進出・後退）

プルシュリッヒ効果（Pulfrich Effect）
色によって、目の前の距離感は歪められる。
1922年にドイツの物理学者カール・プルフルリッヒが発表。
赤や黄などの暖色（進出色）は実際より手前に飛び出して見え、青などの寒色（後退色）は実際よりも奥に引っ込んで遠くにあるように見える現象です。

実用例

重要なバナーやボタンに進出色を使い、背景や装飾要素に後退色を使うことで、画面に奥行きと優先順位を作る。

11. 残像効果（補色残像）

残像効果（Afterimage Effect）
消えたはずの色が、白い壁に幻影を残す。
網膜の視細胞（視覚のセンサー）の疲労によって起こる生理現象。
特定の色をじっと見続けた後に視線を白い面に移すと、網膜の興奮の反動により、その色の反対色がぼんやりと浮かび上がって見える現象です。

実用例

強烈な赤色のバナーの横に白い余白があると、ユーザーの目に緑色の残像が残り、不快感を与える可能性があるため、配色の彩度を調整する。

12. ベゾルト・ブリュッケ効果

ベゾルト・ブリュッケ現象（Bezold-Brücke Shift）
光の強さが、色の「名前」さえも変えてしまう。
ベゾルトとブリュッケという2人の科学者によって確認された現象。
光の強さを極端に強くしたり弱くしたりすると、光の波長そのものは変わっていないにもかかわらず、人間の目には色味が変化したように知覚される現象です。

実用例

高輝度なディスプレイで見る際と、省電力モードで見る際でロゴの色印象が変わらないよう、デバイス環境を想定した色の選定を行う。

まとめ

Web制作における色彩の選択は、単なるデコレーションではありません。

今回ご紹介した12の法則は、いずれもユーザーの脳がどのように情報を整理し、感情を動かすかを示したガイドラインです。

• 注目させたいなら「孤立効果」や「進出色」を活用する。
• 使いやすさを守るなら「7±2の法則」や「対比効果」を意識する。
• 心地よさを提供するなら「60-30-10の法則」でバランスを整える。

これらの心理学的根拠をデザインに取り入れることで、主観に頼らない、根拠のあるデザインが可能になります。私たちデザイナーは、ユーザーの無意識に働きかけ、ストレスのない最高の体験を構築できるよう日々努力しています。