フレームワーク活用ガイドひとことで言うと#
「ユーザーの脳が処理しなければならない情報量を減らし、本来のタスクに集中できるUIを設計する手法」。人間のワーキングメモリには限界がある。その限界を超える情報や選択肢を提示すると、ユーザーは混乱し、離脱する。「考えさせない」UIが最良のUI。
押さえておきたい用語#
- ワーキングメモリ
- 情報を一時的に保持しながら処理する脳の作業領域を指す。容量は7±2チャンク（ミラーの法則）とされ、UIで一度に提示する情報量の上限の根拠になる。
- 内在的負荷（Intrinsic Load）
- タスク自体の本質的な複雑さから生じる認知負荷である。確定申告の手続きは本質的に複雑であり、UI設計では分割で軽減する。
- 外在的負荷（Extraneous Load）
- UIの設計が悪いために生じる余計な認知負荷のこと。わかりにくいラベル、不要な情報、一貫性のないレイアウトが原因。デザイナーが削減すべき対象。
- 段階的開示（Progressive Disclosure）
- 最初は最低限の情報だけ見せ、必要に応じて詳細を表示するテクニック。認知負荷を下げる代表的な手法。
認知負荷デザインの全体像#
こんな悩みに効く#
- 画面に情報を盛り込みすぎて、ユーザーがどこから見ればいいかわからない
- フォームの入力エラーが多く、途中離脱が発生している
- 新機能を追加するたびにUIが複雑になり、既存ユーザーからの不満が増えている
基本の使い方#
認知負荷には3つの種類があり、それぞれ対策が異なる。
- 内在的負荷（Intrinsic Load）: タスク自体の複雑さ。確定申告の手続きは本質的に複雑
- 外在的負荷（Extraneous Load）: UIの設計が悪いために生じる余計な負荷。わかりにくいラベル、不要な情報、一貫性のないレイアウト
- 関連的負荷（Germane Load）: 学習や理解のために使われる良い負荷。チュートリアル、ヘルプテキスト
デザイナーが減らすべきは外在的負荷。内在的負荷はタスクを分割することで軽減し、関連的負荷は適切に維持する。
UIの設計を見直し、不必要な認知負荷を減らす。
- 不要な要素を削除する: 使われていない機能やリンクを非表示にする
- 視覚的階層を明確にする: サイズ、色、余白で情報の重要度を視覚的に伝える
- 一貫性を保つ: 同じ操作には同じUIパターンを使う
- デフォルト値を設定する: ユーザーが判断しなくて済む選択肢をあらかじめ設定する
- チャンキング: 関連する情報をグループ化する（電話番号を3桁-4桁-4桁に分ける）
- 認識>記憶: ユーザーに思い出させるのではなく、選択肢を提示する
- 段階的開示: 最初は最低限の情報だけ見せ、必要に応じて詳細を表示する
ポイント: 1つの画面で1つのタスクに集中させるのが最も効果的な負荷削減。
内在的負荷が高いタスクを小さなステップに分割して提示する。
分割の手法:
- ウィザード形式: 入力フォームを複数ステップに分ける（1画面に3〜5項目）
- プログレスバー: 全体の中で今どこにいるかを示す
- セクション分け: 1つの画面内でも、論理的なまとまりで区切る
- スマートデフォルト: 最も一般的な選択をデフォルトにして、判断回数を減らす
デザインの認知負荷をユーザーテストで客観的に評価する。
テスト方法:
- タスク完了時間: 同じタスクの所要時間を改善前後で比較
- エラー率: 操作ミスやフォーム入力エラーの発生率
- タスク成功率: 初めてのユーザーがタスクを完了できる割合
- 思考発話法: ユーザーに考えていることを口に出してもらい、迷いのポイントを特定
ポイント: 数字だけでなく、ユーザーの「ん？」という表情を観察する。一瞬でも迷った箇所は改善の余地がある。
具体例#
状況: 大手保険会社のオンライン申し込みフォーム。完了率が32%。入力項目が30問あり、1画面にすべて表示されていた。
認知負荷の分析:
| 負荷の種類 | 問題点 |
|---|---|
| 外在的負荷 | 30項目が1画面に表示され、圧倒される |
| 外在的負荷 | 専門用語（「被保険者」「免責金額」）が説明なく使われている |
| 内在的負荷 | 保険の選択自体が複雑（プラン、補償額、特約の組み合わせ） |
改善施策:
- ウィザード化: 30項目を5ステップ（各6項目以下）に分割
- 用語の平易化: 「被保険者」→「保険に入る方」、「免責金額」→「自己負担額」
- スマートデフォルト: 最も選ばれるプランをデフォルトに設定
- 段階的開示: 特約のオプションは「詳しく見る」をクリックしたら展開
- プログレスバー: 「ステップ 2/5 - お客様情報」と表示
| 指標 | 改善前 | 改善後 |
|---|---|---|
| フォーム完了率 | 32% | 58%（+81%） |
| 平均入力時間 | 12分 | 7分 |
| 入力エラー率 | 23% | 8% |
| 「入力方法がわからない」問い合わせ | 月50件 | 月12件 |
30項目を5ステップに分割し、専門用語を平易化するだけで完了率が81%向上。入力エラー率も23%→8%に低下した。
状況: 従業員300名のBtoB SaaS。管理ダッシュボードに30以上のウィジェットが表示され、新規ユーザーの初月離脱率が40%。「何を見ればいいかわからない」がNPSコメントの最多。
改善施策:
- ダッシュボードを「概要」「詳細」の2層に分離
- 概要画面はKPI 3つ＋アクション2つに限定
- 詳細は「もっと見る」で展開（段階的開示）
- 初回ログイン時に3ステップのガイドツアーを表示
| 指標 | 改善前 | 改善後 |
|---|---|---|
| 初月離脱率 | 40% | 18% |
| 初回ログインから目標設定までの到達率 | 25% | 67% |
| 「使いやすい」回答率（NPS調査） | 22% | 58% |
| サポート問い合わせ件数 | 月180件 | 月65件 |
情報を「減らす」のではなく「段階的に見せる」ことで、初心者の離脱を55%削減しながら、パワーユーザーが必要なデータにもアクセスできる設計を両立させた。認知負荷デザインは「機能を削る」こととは違う。
状況: 地方のクリニック（患者の65%が65歳以上）がオンライン診療予約を導入。予約完了率が12%と極めて低く、結局電話予約に戻るケースが大半。
認知負荷の分析:
- 1画面に「診療科選択」「医師選択」「日時選択」「保険証アップロード」が並列表示
- 選択肢が多すぎる（診療科15個、医師8人、時間帯30スロット）
- 「予約確定」と「仮予約」の違いがわからない
改善施策:
- 1画面1選択の完全ウィザード化（全4ステップ）
- 診療科を「よく予約される科」3つを大きく表示、残りは「その他」に
- 医師選択を省略（診療科＋日時で自動アサイン）
- ボタンサイズを60ptに拡大、文字サイズを18pxに
| 指標 | 改善前 | 改善後 |
|---|---|---|
| オンライン予約完了率 | 12% | 54% |
| 電話予約からの転換率 | 8% | 38% |
| 予約にかかる平均時間 | 8分 | 2分30秒 |
選択肢を減らし、1画面1タスクを徹底した結果、オンライン予約完了率は**12%→54%**に向上。電話予約からの転換率も8%→38%に改善された。
やりがちな失敗パターン#
- シンプルにしすぎて情報が足りない — 認知負荷を減らすためにすべてを削ると、必要な情報まで失われる。「このタスクに必要な情報は何か」を明確にし、不要なものだけを削る
- デザイナーの感覚だけで判断する — デザイナーは毎日そのUIを見ているので、初見ユーザーの感覚がわからなくなる。ユーザーテストで実際の認知負荷を検証する
- ステップ分割しすぎる — 1画面1項目まで分割すると、ステップ数が多くなりすぎて逆効果。1ステップ3〜7項目が目安。全体のステップ数は5以下
- ユーザーの学習を完全に排除しようとする — 関連的負荷（学習のための良い負荷）まで削ると、ユーザーがツールを習得できなくなる。初回のガイドやチュートリアルは適切に提供する
まとめ#
認知負荷デザインは、ユーザーの脳への負担を最小化してタスクに集中できるUIを作る手法。外在的負荷を削減し、内在的負荷をステップ分割で軽減することがポイント。まずは自社のUIでユーザーが「迷っている箇所」を観察し、不要な要素の削除やフォームの分割から始めよう。