インターフェース設計の心理学：ユーザー体験を向上させる 7 つの原則
30秒で要点
画面は「きれいか」だけでなく、頭が一度に処理できる量と直感で分かる手がかりで使いやすさが決まります。ここでは UI でよく使う心理学の原則を 7 つに絞って整理します。
進め方 — 1 画面・1 フローにつき、原則は 1〜2 個だけ選ぶ。全部盛ると原因が分からなくなります。
7つの原則（かんたんな言い換え）
| # | 名前 | 一言 | UIでの例 |
|---|---|---|---|
| 1 | 認知負荷 | 一度に見せすぎない | フォームを段階に分ける |
| 2 | ゲシュタルト | 近いものはグループ | 関連項目をまとめて並べる |
| 3 | ヒックの法則 | 選択肢が多いと迷う | メニュー項目を絞る |
| 4 | フィッツの法則 | 大きく近いほど押しやすい | 主ボタンを大きく・届きやすい位置に |
| 5 | ピーク・エンド | 印象はピークと最後で決まる | 完了画面を丁寧に作る |
| 6 | アフォーダンス | 押せる・入力できるが分かる | ボタンらしい見た目・状態変化 |
| 7 | メンタルモデル | よくある型に合わせる | 一般的な UI パターンを踏襲 |
原則ごとの使いどころ
1. 認知負荷を下げる
買い物・申込みなど 情報が多いフロー で最優先。1 画面 1 テーマ、進捗表示、不要な文言の削除が基本です。
2. ゲシュタルトでまとめる
一覧・設定・ダッシュボードで有効。ラベル・余白・枠で「まとまり」を作ると、探す時間が減ります。
3. 選択肢を減らす（ヒック）
ナビ・フィルター・プラン選択で有効。おすすめ・デフォルトを 1 つ示し、詳細は「もっと見る」に逃がします。
4. 押しやすさ（フィッツ）
スマホでは特に重要。よく使う操作は大きく・親指の届く位置に。削除など危険な操作は小さく＋確認を入れます。
5. 最後の印象（ピーク・エンド）
申込完了・決済完了・オンボーディング終了で有効。エラー直後は説明と次の一手を丁寧に。
6. 操作が分かる（アフォーダンス）
新規ユーザーが多い画面で有効。リンクは下線や色、ボタンは枠とホバーで「押せる」と伝えます。
7. よくある型に合わせる（メンタルモデル）
新機能より 既存の Web の型（カート、ハンバーガーメニュー等）に合わせると学習コストが下がります。ターゲットの年代・文化で「当たり前」が違う点だけ注意します。
システム1とシステム2の使い分け
| 場面 | 向き | 例 |
|---|---|---|
| 日常操作 | 直感（システム1） | タップ、スクロール、一覧から選ぶ |
| 重要な決定 | 確認（システム2） | 購入確認、契約条項、金額の再表示 |
詳しくは システム1とシステム2 を参照してください。
改善の3ステップ
- 観察 — どこで止まるか（離脱・エラー・所要時間）
- 原則を1つ選ぶ — 上の表から当てはまるものを決める
- 前後で比較 — 同じ指標で効果を見る（期間・件数を先に決める）
チェック（はい／いいえ）
- [ ] 1 画面に「やること」が 1 つに絞れているか
- [ ] 主ボタンは見つけやすく、危険操作は誤タップしにくいか
- [ ] 完了・エラー時にユーザーが次に何をすればよいか分かるか
- [ ] 改善を数字で見る約束（指標・期間）があるか