UIデザインの判断に「なんとなく」は存在しません。優れたUIには必ず心理学的な根拠があります。
この記事では、UX心理学・認知バイアス・行動心理などUI/UXデザインに使える119の法則を体系的にまとめました。特に「認知心理学 UX」「認知心理学 Webデザイン」の観点から、ユーザーが画面をどう見て、どう理解し、どう選ぶのかをUI設計へ接続します。
UIXHEROのUXリファレンスは、心理学・認知科学・行動経済学の知見を「UIデザインに使える判断軸」として体系化した119記事のリファレンス集です。
この記事でわかること
- UX心理119法則の全体像（7カテゴリで体系化）
- 認知心理学をUX・Webデザインへ翻訳する考え方
- UIデザインに使える心理原理と認知バイアス
- UX心理 → UI設計 → UIコンポーネントの具体的なつながり
- 法則をUIに活かす4つの実践パターン
UX心理はUI設計の「なぜ」を説明するレイヤーです。具体的な設計原則は → UIデザイン原則まとめ で解説しています。
UX心理法則を個別に深く理解したい方は → 📚 UX心理法則 119記事一覧を見る
→ サイト全体の入口は UXデザイン完全ガイド から
認知心理学をUX・Webデザインに使うとは
認知心理学は、人が「見る・気づく・覚える・選ぶ・判断する」仕組みを扱います。UXデザインでは、この知見を画面設計の判断に変換します。たとえば、ユーザーはすべての文章を丁寧に読むわけではなく、見出し、余白、ボタン、馴染みのある配置から意味を素早く推測します。
Webデザインで重要なのは、ユーザーを説得する前に、理解に必要な思考コストを下げることです。人は多くの場合、最小限の労力で判断しようとする「認知的倹約家」として振る舞います。だからこそ、情報を詰め込むより、見つけやすく、比べやすく、迷わず次へ進める構造が必要になります。
| UX/Webデザインの問い | 認知心理学の観点 | UIでの使い方 |
|---|---|---|
| どこを最初に見ればよいか | 注意・知覚 | 視覚的階層とコントラストで主役を作る |
| 情報量が多すぎないか | ワーキングメモリ・認知負荷 | チャンク化と段階的開示で分ける |
| 何を選べばよいか | 意思決定・ヒューリスティック | 選択肢を減らし、推奨やデフォルトを明示する |
| 覚えなくても使えるか | 記憶・再認 | 思い出させず見て選べるUIにする |
このページは、認知心理学の用語を暗記するためではなく、「なぜこのUIは迷うのか」「どの原則を使えば改善できるのか」を判断するための入口です。
UX心理の3レイヤー構造における役割
UX心理（UXリファレンス）は「なぜ（Why）」を担うレイヤーです。UIXHEROはUIデザインを3つのレイヤーで体系化しています。
| レイヤー | 問い | 役割 |
|---|---|---|
| UX心理（Why） | なぜユーザーはそう感じ・行動するか | 人間の認知・感情・行動の仕組みを理解する |
| UI原則（What） | どう設計すればよいか | 心理法則をUIの判断基準へ翻訳する |
| UIコンポーネント（How） | どう形にするか | 原則を実装可能な部品として具体化する |
具体例：ヒックの法則の場合
UX心理（Why） ヒックの法則：選択肢の数が増えるほど意思決定にかかる時間は対数的に増加する
↓
UI原則（What） 選択肢を減らす：選択肢は最小限に絞り、推奨を明示する
↓
UIコンポーネント（How） Select / Radio Button / Command Palette
心理法則を知ることで、「なぜこのUIが使いにくいか」を言語化でき、「どう改善するか」の判断精度が上がります。
実務では、心理法則を単独で使うよりも、対象画面の課題に合わせて組み合わせます。たとえばLPなら「視覚的階層」「ヒックの法則」「社会的証明」、フォームなら「認知負荷」「エラー防止」「フィードバック」、学習体験なら「間隔効果」「テスティング効果」「ピーク・エンドの法則」が判断の起点になります。
UX心理学119の法則｜7つのカテゴリ構造
カテゴリ 01｜認知・知覚の法則
人間がどのように情報を「見て・処理するか」
UIデザインで最初に理解すべきのが認知・知覚の仕組みです。人間の脳は一度に処理できる情報量に上限があり、視覚的な処理には特定のパターンがあります。
代表10法則
| 法則 | 核心 | UI応用 |
|---|---|---|
| 認知負荷 (Cognitive Load) | ワーキングメモリの処理限界。負荷が高すぎると離脱・ミスが増える | 情報を段階的に開示する / 一画面一タスク |
| ミラーの法則 | 短期記憶で保持できるのは7±2チャンク | ナビゲーションは7項目以内 / Tabsは5〜7個まで |
| ゲシュタルト原則 | 近い・似ている・閉じた要素をグループと認識する | 近接で関連要素をまとめる / 共通外枠でグループ化 |
| 図と地の関係 | 前景（図）と背景（地）を区別する知覚 | モーダルは背景を暗くして前景を際立たせる |
| 変化の見落とし | 注意が向いていない変化は気づかれない | フィードバックは変化した場所の近くに表示する |
| 非注意による見落とし | 集中中は明らかな変化も見えない | 重要な通知は作業の流れを遮断しない位置に |
| 選択的注意 | 自分に関係ある情報だけを拾い読みする | ユーザーが探しているものをラベル・見出しで明示する |
| 視覚的階層 | サイズ・コントラスト・位置で重要度を伝える | H1 > H2 > 本文の視覚的差を明確に設計する |
| F字型パターン | ユーザーはページを「F」の形でスキャンする | 重要情報を左上・最初の2行に集中させる |
| Z字型パターン | シンプルなページではZ字型にスキャンする | CTAをZの終点（右下）に配置する |
カテゴリ 02｜行動・意思決定の法則
人間がどのように「選択・行動するか」
UXデザインで最も直接的に役立つカテゴリ。ユーザーの行動をデザインで誘導・促進する原理を扱います。
主要な意思決定法則
意思決定速度に影響する法則
ヒックの法則 (Hick's Law) 選択肢の数が増えるほど、意思決定にかかる時間は対数的に増加する。 → ナビゲーション項目を絞る / 複数ステップに分割する
フィッツの法則 (Fitts's Law) ターゲットが大きく・近いほど、操作時間が短くなる。 → 重要なボタンを大きく / タッチターゲットを44px以上に
選択の質に影響する法則
選択のパラドックス (Paradox of Choice) 選択肢が多すぎると満足度が下がり、選択を避けるようになる。 → デフォルト値を設定する / 選択肢に推奨を明示する
デフォルトバイアス (Default Bias) 人はデフォルト（初期設定）をそのまま使いがち。 → 最適なデフォルトを慎重に設計する（倫理的に）
決定疲れ (Decision Fatigue) 判断を繰り返すほど意思決定の質が下がる。 → 重要な選択は最初に配置する / 選択数を減らす
選択誘導に関わる法則
おとり効果 (Decoy Effect) 3択に「劣る選択肢」を追加することで、狙いの選択肢を選ばせやすくなる。 → 料金プランの設計に応用（倫理的範囲内で）
その他の意思決定バイアス
アンカリング効果 / フレーミング効果 / 埋没費用効果 / 現状維持バイアス / 過去への偏重 (Present Bias) / 双曲割引 (Hyperbolic Discounting) / 目標勾配効果 (Goal Gradient Effect) / コミットメントと一貫性 / マッピング (Mapping)
カテゴリ 03｜記憶・学習の法則
人間がどのように「覚え・学ぶか」
UIデザインにおける記憶の設計は「覚えさせない（Recognition over Recall）」が基本原則です。ユーザーに記憶を強要しないUIが優れたUIです。
| 法則 | 核心 | UI応用 |
|---|---|---|
| ピーク・エンドの法則 | 体験の頂点と終わりが記憶に残る | チェックアウト完了画面を充実させる |
| フォン・レストルフ効果 | 目立つものが記憶に残る | CTAを視覚的に際立たせる |
| ザイガルニク効果 | 未完了タスクが記憶に残りやすい | プログレスバーで「続きがある」を示す |
| エビングハウスの忘却曲線 | 学習した内容は急速に忘れる | オンボーディングは分割して繰り返す |
| 連続位置効果 | リストの最初と最後が記憶されやすい | 重要項目をリストの先頭か末尾に |
| ジェネレーション効果 | 自分で生成した情報は記憶に残りやすい | 検索や入力を促すUIでエンゲージメントを高める |
| 間隔効果 | 繰り返し露出で記憶が定着する | Emailリマインダー / 再訪促進 |
| 自己参照効果 | 自分に関連する情報は記憶されやすい | 「あなたの」「あなただけの」表現を使う |
| テスティング効果 | 思い出す練習が記憶を定着させる | クイズ・チェックリストで理解確認 |
| 二重符号化理論 | 言語と視覚の両方で処理すると記憶に残る | テキスト＋アイコンのセット表示 |
→ 関連記事：オンボーディング設計 / 段階的開示
カテゴリ 04｜感情・動機の法則
人間がどのように「感じ・動機づけられるか」
感情はUXの核心です。「また使いたい」と思わせるのは機能ではなく感情体験です。
美的ユーザビリティ効果 (Aesthetic Usability Effect) 美しいUIはユーザーの許容度を上げる。「きれいだから使いやすく感じる」。ただし機能の代替にはならない。
内発的動機 (Intrinsic Motivation) 報酬ではなく「やりたいからやる」状態がエンゲージメントの理想。 → 達成感・自律性・成長感の設計
ゲーミフィケーション (Gamification) ゲームの仕組み（ポイント・バッジ・レベル）を非ゲームに応用する。 → 進捗表示・ストリーク・達成バッジ
可変報酬 (Variable Reward) 予測できない報酬が最もエンゲージメントを高める。 → フィードの無限スクロール / 通知の不確実性
フロー状態 (Flow State) 能力と難易度が釣り合ったとき、没頭状態（フロー）が生まれる。 → 段階的な難易度設計 / 集中を妨げない UI
ユーザーの喜び (User Delight) 期待を超えた小さな驚きと喜び。マイクロインタラクション・エンプティステートのイラスト。
その他の感情・動機法則
単純接触効果 (Mere Exposure Effect) / 心理的所有感 (Psychological Ownership) / IKEAエフェクト (IKEA Effect) / 心理的リアクタンス (Psychological Reactance) / 好意の原則 (Liking Principle) / 互恵性 (Reciprocity) / 希少性 (Scarcity) / 権威バイアス (Authority Bias) / バンドワゴン効果 (Bandwagon Effect)
カテゴリ 05｜バイアス・ヒューリスティック
人間の「思い込みと判断の歪み」
人間の判断は常に合理的ではありません。認知バイアスを理解することで、ユーザーの誤判断を防ぐUIと、逆に不正に利用するダークパターンを見分けられます。
代表10バイアス
| バイアス | 核心 | UI設計上のリスク |
|---|---|---|
| 確証バイアス | 自分の信念を裏付ける情報を優先して探す | 情報の偏りを助長するアルゴリズムに注意 |
| 利用可能性ヒューリスティック | 思い出しやすいものを頻度・確率が高いと判断する | エラー表示の誇張がリスク誤判断を生む |
| 代表性ヒューリスティック | 典型例に似ているものを同じカテゴリと判断する | ユーザーの先入観と異なるUIは拒否される |
| 楽観バイアス | 自分には悪いことが起きないと思いやすい | セキュリティ警告が無視されやすい |
| ダニング・クルーガー効果 | 能力の低い人ほど自分の能力を過大評価する | 初心者向けUIに難しさを感じさせない設計が必要 |
| 誤った合意効果 | 自分の考えが他者にも共有されていると思う | ユーザーリサーチなしの設計につながる |
| 自己奉仕バイアス | 成功は自分のおかげ、失敗は環境のせいと考える | エラーの責任をユーザーに帰着させるUIを避ける |
| 後知恵バイアス | 結果を知った後に「最初からわかっていた」と思う | ユーザビリティテスト後の設計判断に影響する |
| 期待バイアス | 期待通りのものを見ようとする | UIテストで予期した動作を「見た」と誤認する |
| 調査バイアス | アンケートの設問の仕方で回答が変わる | UXリサーチの設計に直結する |
カテゴリ 06｜UXデザイン手法・フレームワーク
UI/UX設計の思考フレームワーク
個別の心理法則ではなく、UXデザインのプロセス・手法・評価フレームワークをまとめたカテゴリです。
| 手法・フレームワーク | 概要 |
|---|---|
| ジョブ理論 (Jobs to Be Done) | ユーザーが「何を達成したいか」から設計する |
| カノモデル (Kano Model) | 機能の種類（当たり前・魅力的・一次元的）を分類する |
| ペルソナ (Persona) | 典型的なユーザー像を具体化する |
| OODAループ (OODA Loop) | 観察→判断→行動→評価のサイクル |
| ダブルループ学習 (Double-Loop Learning) | 仮定を疑い、根本から学習する |
| リーンスタートアップ (Lean Startup) | 最小限で検証し、学習する方法論 |
| エビデンスベースドデザイン (Evidence-Based Design) | データ・研究に基づいてUIを設計する |
| リアクティブオンボーディング (Reactive Onboarding) | ユーザーの行動に反応するオンボーディング設計 |
カテゴリ 07｜倫理・ダークパターン
UIの「悪用」と「誠実な設計」
UX心理の知識は、ユーザーを「助ける」ためにも「騙す」ためにも使えます。このカテゴリでは、意図的にユーザーの意思決定を歪める「ダークパターン」と、その回避を扱います。
コンファームシェイミング (Confirm Shaming) 拒否ボタンに「いいえ、私は損を受け入れます」のような自己否定的なラベルをつける手法。ユーザーの感情を操作する典型的なダークパターン。
スラッジ (Sludge) 意図的に操作を難しくして、望ましくない行動（解約など）を妨げる。退会手続きを複雑にするのが典型例。
バナーブラインドネス (Banner Blindness) 広告に似た要素はユーザーが自動的に無視する。重要な情報を広告っぽいデザインにしない。
善意の欺瞞 (Benevolent Deception) ユーザーの利益のための意図的な不透明性（例：「仮想の処理時間」表示でユーザーに価値を感じさせる）。倫理的判断が必要。
守備的設計 (Defensive Design) 悪意ある操作・誤操作・予期しない使われ方からシステムを守る設計。
UXリファレンス 全119記事一覧
アルファベット順（代表30法則）
アフォーダンス / アンカリング効果 / 注意経済 (Attention Economy) / バンドワゴン効果 / 変化の見落とし / 認知負荷 / コミットメントと一貫性 / 決定疲れ / おとり効果 / デフォルトバイアス / ドハティの閾値 / 双曲割引 / フィッツの法則 / フレーミング効果 / ゲシュタルト原則 / 目標勾配効果 / ホーソン効果 / ヒックの法則 / ホックモデル (Hook Model) / IKEAエフェクト / ヤコブの法則 / カノモデル / メンタルモデル / ミラーの法則 / ピーク・エンドの法則 / シグニファイア (Signifier) / テスラーの法則 (Tesler's Law) / フォン・レストルフ効果 / ウェーバーの法則 / ザイガルニク効果
UX心理をUIデザインに活かす4つの方法
UX心理の知識をUIに接続するための実践パターンです。
1. 認知負荷を減らす
「考えさせない」UIを設計する。情報を一度に全部見せない。一画面一タスクに絞る。
2. 選択肢を減らす
「選ばせすぎない」UIを設計する。多すぎる選択肢は意思決定を止める。
- 関連法則：ヒックの法則 / 選択のパラドックス / 決定疲れ
- 関連UI原則：選択肢を減らす / 見つけやすさ
- 関連コンポーネント：Select / Radio Button / Command Palette
3. 視覚階層を作る
「重要なものが目に飛び込む」UIを設計する。情報の優先順位を視覚で伝える。
- 関連法則：ゲシュタルト原則 / 視覚的階層 / フォン・レストルフ効果
- 関連UI原則：コントラスト / 視覚的階層 / 近接
- 関連コンポーネント：Badge / Card / Button（Primary階層）
4. フィードバックを出す
「今何が起きているか」を常に伝えるUIを設計する。不安を取り除く。
- 関連法則：ドハティの閾値 / ザイガルニク効果 / ピーク・エンドの法則
- 関連UI原則：状態の可視化 / フィードバック
- 関連コンポーネント：Toast / Progress Bar / Loading
よくある実務例
LP・サービスサイト
ファーストビューでは、ユーザーは短時間で「自分向けか」「信頼できるか」「次に何をすべきか」を判断します。視覚的階層で主役を明確にし、バンドワゴン効果や権威バイアスは根拠として控えめに使います。過剰な希少性や煽りは、短期CVより信頼を損なうリスクがあります。
フォーム・申し込み導線
フォームでは、認知負荷と不安が離脱につながります。エラー防止、フィードバック、認知的アクセシビリティを使い、入力前に条件を示し、入力中に状態を返し、完了後に安心できる終わり方を作ります。
ナビゲーション・一覧ページ
一覧やナビゲーションでは、ユーザーに思い出させるのではなく、見て選べる状態を作ります。認知負荷、ミラーの法則、思い出させず見て選べるUIを組み合わせ、分類、ラベル、検索、フィルターを整理します。
次に読む記事
UX心理の重要法則から深掘りする
- ヒックの法則 (Hick's Law) — 選択肢と意思決定時間の関係
- フィッツの法則 (Fitts's Law) — タッチターゲットの設計基準
- ヤコブの法則 (Jakob's Law) — ユーザーはなじみのあるUIを期待する
- 認知負荷 (Cognitive Load) — ワーキングメモリの限界を設計に活かす
- 認知的倹約家 — 人はできるだけ考えずに判断したい
- ピーク・エンドの法則 (Peak-End Rule) — 体験の「記憶」を設計する
UI原則で設計に接続する
- 選択肢を減らす — ヒックの法則をUIルールへ
- 視覚的階層 — ゲシュタルト・コントラストをUIへ
- 段階的開示 — 認知負荷を下げる設計
- フィードバック — ドハティの閾値をUIルールへ
- 誤操作を防ぐ — エラー設計の心理的根拠
UIコンポーネントで形にする
- Button — 視覚的階層・アフォーダンスの実装
- Select — 選択肢削減の実装
- Modal Dialog — 図と地の関係・割り込み設計
- Toast — フィードバック・ドハティの閾値の実装
- Progress Bar — ザイガルニク効果の実装
まとめ｜UX心理学はUI設計の「なぜ」を説明する
UXデザインはセンスではなく、人間の認知・行動・感情の理解に基づく設計です。
本記事では、UI/UXデザインに役立つ心理学法則を7カテゴリ119項目で整理しました。
- 認知・知覚
- 意思決定
- 記憶・学習
- 感情・動機
- 認知バイアス
- UXフレームワーク
- 倫理・ダークパターン
心理法則を理解することで「なぜそのUIが機能するのか」を説明できるようになります。
さらに体系的に学びたい方は → UXリファレンス119記事一覧へ
UXデザインを体系的に学ぶ
UX心理の「なぜ」を理解したら、次は「何を」設計するか、「どう」形にするかを学ぼう。
UIデザイン3レイヤー
- UIデザイン完全ガイド — UX心理・UI原則・UIコンポーネントの3レイヤーを一本化
- UIデザイン原則まとめ — 心理法則をUI設計のルールへ翻訳する65原則
- UIコンポーネント完全ガイド — 原則を「実装可能な部品」として形にする60コンポーネント
UIXHEROの他のリソース
- UXリサーチ一覧（29本） — ユーザー調査の手法体系
- インタビュー技術一覧（22本） — インタビューの技術棚
- エンジニアリング一覧（15本） — フロントエンド設計原則
- アクセシビリティ一覧（11本） — 誰もが使えるUI設計
→ 全体像を見る: UXデザイン完全ガイド
