UXの法則集
(lawsofux.com)- ユーザーインターフェースを設計する際に、デザインの使いやすさと認知心理の観点からデザイナーが考慮すべき30以上の心理学ベースの原則とパターンを集めたコレクション
- 認知と知覚、意思決定、フィードバックと反応、没入と動機づけ、情報の構造化、ゲシュタルト原則、ユーザー行動パターン、設計原則、時間とタスク管理に分類して整理
- 各法則の詳細では、法則の定義、主要な示唆、由来、実務への適用のためにさらに読むべきリンクを含む
認知と知覚
1. 美的ユーザビリティ効果 (Aesthetic-Usability Effect)
ユーザーは、美的に美しいデザインほど使いやすいと認識する傾向がある
- 視覚的に魅力的なデザインは、ユーザーの脳でポジティブな反応を引き起こし、実際のユーザビリティ以上によく機能すると信じさせる
- ユーザーはデザインが美しいと、些細なユーザビリティ上の問題により寛容になる
- 一方で、視覚的魅力がユーザビリティ上の問題を覆い隠し、ユーザビリティテストで問題が発見されないリスクも存在する
- 1995年にHitachi Design CenterのMasaaki KurosuとKaori KashimuraがATM UIの26種類のバリエーションを252人にテストした研究で初めて確認された。美的魅力と知覚された使いやすさの相関は、美的魅力と実際の使いやすさの相関より強かった
2. 認知バイアス (Cognitive Bias)
判断で生じる体系的な思考の誤りであり、世界に対する認識と意思決定能力に影響を与える
- 人間はすべての状況を分析する代わりに、過去の経験に基づく経験則（ヒューリスティック）によって精神的エネルギーを節約する
- このような精神的ショートカットは迅速な意思決定を可能にする一方、気づかないうちに判断や意思決定の過程に影響を与える
- 代表的な例: 確証バイアス（confirmation bias）— 既存の信念を支持する情報を好む傾向
- Amos TverskyとDaniel Kahnemanは1972年に認知バイアスの概念を導入し、人間の判断と意思決定が合理的選択理論とは異なることを再現可能な実験で立証した
3. 認知負荷 (Cognitive Load)
インターフェースを理解し、相互作用するために必要な精神的リソースの量
- 入ってくる情報量が利用可能な精神的余裕を超えると、課題が難しくなり、細部を見落とし、圧倒される感覚を覚える
- 内在的認知負荷（intrinsic）: 目標に関連する情報を記憶し、新しい情報を吸収するために必要な努力
- 外在的認知負荷（extraneous）: コンテンツ理解には役立たないがリソースを消費する精神的処理（不要なデザイン要素など）
- John Swellerは1980年代後半に認知負荷理論を開発し、George Millerの情報処理理論を拡張して、教授設計によって学習者の認知負荷を減らせると主張した
4. 選択的注意 (Selective Attention)
環境内の刺激の一部、主に目標に関連する刺激にのみ注意を集中する過程
- ユーザーは自分の目標に関連する情報にのみ選択的に注意を向け、残りは無視する
- インターフェース設計では、主要な情報と行動を視覚的に目立たせることでユーザーの注意を確保できる
- 不要な視覚要素は注意を分散させ、目標達成を妨げる
5. ワーキングメモリ (Working Memory)
課題完了に必要な情報を一時的に保持し、操作する認知システム
- ワーキングメモリの容量は限られており、インターフェースがこの限界を超える情報を要求するとユーザビリティが低下する
- Millerの法則、チャンク化、認知負荷と密接に関連する
- 設計では、ユーザーが一度に記憶しなければならない情報量を最小化することが重要
意思決定
6. 選択過多 (Choice Overload)
多数の選択肢を提示されると圧倒される傾向で、「選択のパラドックス」と混同されることもある
- 選択肢が多すぎると、ユーザーの意思決定能力を損ない、体験全体への満足度にも悪影響を与える
- 比較が必要な場合は、関連項目の並列比較（side-by-side comparison）機能を提供することで過負荷を緩和できる
- おすすめ商品の強調、検索やフィルタリングツールなどで選択肢を事前に絞り込むのが効果的
- Alvin Tofflerが1970年の著書 Future Shock で「overchoice」という用語を初めて導入した
- Hickの法則と密接に関連する
7. Hickの法則 (Hick's Law)
意思決定にかかる時間は、選択肢の数と複雑さに応じて増加する
- 応答時間が重要な状況では、選択肢を最小限にして意思決定時間を短縮する必要がある
- 複雑な作業はより小さな段階に分解して、認知負荷を減少させること
- 推奨オプションを強調してユーザーの選択を促し、新規ユーザーには段階的オンボーディングを適用する
- ただし、過度に単純化すると抽象化されてかえって混乱を招くことがあるため注意が必要
- Googleホームページ: 検索行為に必要な意思決定を最小化し、他のコンテンツを取り除くことでシンプルさを確保
- Slackの段階的オンボーディング: 最初からすべての機能を公開せず、ボットを通じてまずメッセージ機能を学習させ、その後で追加機能を段階的に紹介する
- 1952年にイギリスの心理学者William Edmund Hickとアメリカの心理学者Ray Hymanが刺激の数と反応時間の関係を研究して定式化した
8. メンタルモデル (Mental Model)
システムがどのように動作するかについて、自分たちが知っていると思っていることに基づく圧縮モデル
- ユーザーは過去の経験から形成された期待値を新しい製品に転移する
- ユーザーの既存のメンタルモデルを活用すれば、新たなモデルを学習する代わりに課題そのものに集中できる優れた体験を構築できる
- Jakobの法則と直接つながっている
フィードバックと反応
9. Dohertyしきい値 (Doherty Threshold)
コンピューターとユーザーが互いを待たない速度（400ms以下）で相互作用すると、生産性は急増する
- システムフィードバックを400ms以内に提供し、ユーザーの注意を維持して生産性を向上させる
- 体感パフォーマンス（perceived performance）を活用して応答時間を改善し、待機の認識を減らせる
- アニメーションは、バックグラウンドでの読み込みや処理中にユーザーを視覚的に没入させる手段となる
- 進行状況バー（progress bar）は、正確性に関係なく待ち時間に耐えやすくする
- 意図的に遅延を加えると、プロセスの知覚された価値を高め、信頼感を与えられる場合がある（実際の処理時間が短くても）
- 1982年にWalter J. DohertyとAhrvind J. ThadaniがIBM Systems Journalで発表し、従来の標準である2秒ではなく400ms以内の応答時間を要件として設定した
10. Fittsの法則 (Fitts's Law)
対象を獲得するまでの時間は、対象までの距離と対象の大きさに比例する
- タッチターゲットは、ユーザーが正確に選択できるだけ十分に大きく設定する必要がある
- タッチターゲット間には十分な間隔を確保する必要がある
- 速い動作と小さなターゲットは、速度と精度のトレードオフにより高いエラー率を招く
- モバイル機器でインタラクティブなボタンを大きくする慣行はこの法則に由来する
- 1954年に心理学者Paul Fittsが人間の運動システムを研究し、対象までの移動時間が距離に比例し、大きさに反比例することを実証した
没入と動機づけ
11. フロー (Flow)
活動を行う際、エネルギーに満ちた集中、完全な没入、楽しさの感情に完全に浸っている精神状態
- フローは、課題の難易度とユーザーのスキルレベルが均衡しているときに生じる
- 難しすぎる課題は挫折感を、簡単すぎる課題は退屈さを引き起こす
- ユーザーがどのような行動を取り、何が達成されたのかを理解できる適切なフィードバックを提供することが、フロー設計の鍵となる
- 不要な摩擦を取り除き、システムの応答性を最適化することで、インターフェースからの離脱を防ぐ
- 1975年に心理学者Mihály Csíkszentmihályiが「Flow」の概念を提示し、作業療法などさまざまな分野で広く引用されている
12. 目標勾配効果 (Goal-Gradient Effect)
目標に近づくほど、その目標に到達しようとする傾向が強まる
- ユーザーは作業の完了に近づくほど、より速く作業を進める
- 人工的な進捗状態を提供すること（例：すでに一部が埋まっているスタンプカード）は、動機づけに効果的
- 明確な進捗表示（progress indicator）を提供して、ユーザーに作業完了への動機を与える
- Clark Hullが1932年に提唱した仮説：ネズミは餌に近づくほど、徐々により速く走る
- Uberが待ち時間の認知管理に活用した事例
13. ツァイガルニク効果（Zeigarnik Effect）
人は完了した課題よりも、未完了または中断された課題のほうをよく記憶する
- 追加コンテンツの存在を知らせる明確なシグニファイアを提供し、コンテンツ探索を促す
- 目標に向けた人工的な進捗状態の提供は、課題完了への動機を高める
- 明確な進捗表示（progress indication）によって、ユーザーに完了への動機を与える
- ソ連の心理学者Bluma Zeigarnikが1920年代に記憶に関する研究で、未完了の課題は完了した課題より記憶しやすいことを発見
情報の構造化
14. チャンキング（Chunking）
個々の情報の断片を分解したうえで、意味のある全体としてグループ化するプロセス
- チャンキングにより、ユーザーはコンテンツを容易にスキャンし、目的に合った情報をすばやく特定して処理できる
- 視覚的に区別されたグループと明確な階層構造でコンテンツを構造化すると、ユーザーの情報評価と処理のしかたに適合する
- コンテンツを独立したモジュールとしてグループ化し、区切り線（rule）を適用し、階層構造を提供することで、根底にある関係性の理解を支援する
- George A. Millerの1956年の論文 "The Magical Number Seven, Plus or Minus Two" に由来する用語
15. ミラーの法則（Miller's Law）
通常の人は作業記憶に7（±2）個の項目しか保持できない
- 「魔法の数字7」を不要なデザイン上の制約の正当化根拠として使わないこと
- コンテンツをより小さなチャンクに整理し、ユーザーが容易に処理・理解・記憶できるよう支援する
- 短期記憶の容量は、個人の事前知識と状況的文脈によって変わる
- 1956年にGeorge Millerは、即時記憶の範囲と絶対判断の双方が、およそ7つの情報の断片に制限されると主張した
16. 系列位置効果（Serial Position Effect）
ユーザーはシリーズの最初と最後の項目を最もよく記憶する傾向がある
- リストやシリーズの最初と最後に重要な情報またはアクションを配置するのが効果的
- ナビゲーションで最も重要な項目を一番左と一番右に配置する実務上の根拠
- 初頭効果（primacy effect）と新近効果（recency effect）の組み合わせ
ゲシュタルト原則（Gestalt Principles）
17. 共通領域の法則（Law of Common Region）
明確な境界を持つ領域を共有する要素は、グループとして知覚される傾向がある
- 要素または要素グループの周囲に枠線を追加すると、容易に共通領域を作成できる
- 要素の背後に背景色を設定して共通領域を作ることもできる
- 共通領域は明確な構造を生み出し、要素とセクション間の関係をすばやく効果的に理解するのを助ける
- ゲシュタルト心理学のグループ化原則（近接、類似、連続、閉合、接続）の1つ
18. 近接の法則（Law of Proximity）
互いに近い、または隣接するオブジェクトは、一緒にグループ化される傾向がある
- 近接性は、近くにあるオブジェクトとの関係を設定するために活用される
- 近くにある要素は、類似した機能や特性を共有しているものとして知覚される
- Google検索結果ページ：各結果の間隔が全体的なスキャンしやすさに寄与し、各結果を関連情報のクラスターとして効果的にグループ化する
- ゲシュタルト心理学の中核的なグループ化原則
19. 簡潔性の法則 / Prägnanzの法則（Law of Prägnanz）
人は曖昧または複雑なイメージを、可能な限り最も単純な形として知覚し解釈する
- 認知的努力が最小化される解釈を好む傾向がある
- デザインにおいて視覚要素をシンプルかつ明確に保つことの根拠
- 「よい形の法則（Law of Good Figure）」とも呼ばれる
20. 類似性の法則（Law of Similarity）
人間の目は、類似した要素を、たとえ離れていても1つの完全な図、形、またはグループとして知覚する傾向がある
- 視覚的に類似した要素（色、形、大きさ）は、同じ機能または意味を持つものとして知覚される
- インターフェースで関連機能のボタンを視覚的に一貫してデザインする根拠
21. 均一連結の法則（Law of Uniform Connectedness）
視覚的に接続された要素は、接続されていない要素よりも、より関連しているものとして知覚される
- 線、色、フレーム、またはその他の視覚的属性によって要素間のつながりを表現する
- 共通領域や近接性よりも強力なグループ化シグナルを提供できる
- ゲシュタルトのグループ化原則の5番目のカテゴリ（Connectedness）に該当
ユーザー行動パターン
22. Jakobの法則（Jakob's Law）
ユーザーはほとんどの時間を他のサイトで過ごす。したがって、ユーザーは自分がすでに知っている他のサイトと同じように動作することを好む
- ユーザーは、慣れ親しんだ製品で形成した期待値を、似た外観の別の製品へ転移する
- 既存のメンタルモデルを活用すれば、ユーザーは新しいモデルの学習ではなく課題そのものに集中できる
- 変更を導入する際は、一定期間ユーザーが従来版を継続利用できるようにして、不協和を最小化する
- YouTubeの2017年リデザイン事例：デスクトップユーザーに新しいMaterial Design UIを先行表示しつつ、従来版に戻すオプションを提供してメンタルモデルの不一致を防いだ
- Jakob Nielsen（Nielsen Norman Group共同創設者）が提唱
23. 能動的ユーザーのパラドックス（Paradox of the Active User）
ユーザーはマニュアルを読まず、すぐにソフトウェアを使い始める
- ユーザーは学習よりも即時の行動を好み、説明書やチュートリアルを飛ばす傾向がある
- インターフェースは、明示的な教育なしでも直感的に使えるよう設計すべき
- コンテキスト内ヒント、ツールチップ、段階的開示（progressive disclosure）などを通じたインライン学習支援が必要
24. Peak-Endルール（Peak-End Rule）
人は、経験のすべての瞬間の合計や平均ではなく、ピークと最後の瞬間に感じた感情にもとづいて経験を判断する
- ユーザー体験の旅路における、最も強烈な瞬間と最後の瞬間に特に注意を払うべき
- 製品が最も役立つ、価値がある、または楽しい瞬間を特定し、ユーザーを喜ばせるよう設計する
- 人はポジティブな体験よりも、ネガティブな体験をより鮮明に記憶する
- Mailchimp：最初のメール送信完了時に、単純な確認モーダルではなく、イラスト、さりげないアニメーション、ユーモアを活用して、ストレスになりうる瞬間を和らげた
- Uber：人々の時間や待ち時間の認知に注目し、リクエスト後のキャンセル率を減少させ、ネガティブな感情のピークを防いだ
- 1993年のKahneman、Fredricksonらの研究で実証：被験者は不快な経験の2つのバージョンのうち、終盤がややましなより長いバージョンを繰り返すことを選んだ
視覚的な区別と記憶
25. Von Restorff効果 / 孤立効果（Von Restorff Effect）
複数の似たオブジェクトがあるとき、他と異なる1つが最もよく記憶される可能性が高い
- 重要な情報や主要なアクションは、視覚的に独特にしなければならない
- 視覚的強調を乱用すると、要素同士が競合したり、広告と誤認されたりするリスクがある
- コントラストを伝える際は色だけに依存せず、色覚異常またはロービジョンのユーザーを考慮する
- モーションでコントラストを伝える際は、モーション感受性の高いユーザーにも配慮すべき
- 1933年にドイツの精神科医であり小児科医でもあったHedwig von Restorffが研究で発見：類似項目のリストにおいて、1つだけ独特で孤立した項目の記憶が向上する
26. 初頭-新近効果 → 系列位置効果（Serial Position Effect）
ユーザーは、シリーズの中で最初と最後の項目を最もよく記憶する傾向がある
- （14番の項目を参照 — 上記の「情報構造化」セクションで詳しく説明）
設計原則
27. Teslerの法則 / 複雑性保存の法則（Tesler's Law）
どのようなシステムにも、減らすことのできない一定量の複雑性が存在する
- 優れた設計では、開発者がスマートなデフォルトやアルゴリズムなどを通じて複雑性の大部分を吸収し、ユーザーのインタラクションを単純にする
- UIがユーザーに多くの設定や手順を要求するなら、複雑性が誤った場所（ユーザー側）に保存されているということ
- 優れた設計は複雑性を取り除くのではなく、内部で処理して隠す
- Larry Tesler（Apple Lisaおよび初期GUIの開発）が1980年代に定式化
28. Postelの法則 / 堅牢性原則（Postel's Law）
受け入れるものには寛容に、送るものには保守的に
- ユーザー入力における多様な形式やバリエーションを柔軟に受け入れる
- システム出力は一貫性があり予測可能な形式で提供する
- Jon PostelがTCP/IPプロトコルの堅牢性原則として提唱し、UX設計における入力柔軟性の根拠となっている
29. オッカムの剃刀（Occam's Razor）
同程度によく予測する競合仮説の中では、仮定が最も少ないものを選ぶべきである
- デザインソリューションでは不要な複雑性を取り除き、最も単純なアプローチを優先する
- 機能、要素、視覚的装飾を追加する前に、本当に必要かを検証する
- シンプルなインターフェースは、ユーザーに課す認知負荷がより少ない
30. パレートの原則 / 80/20の法則（Pareto Principle）
おおよそ効果の80%は原因の20%から生じる
- ユーザー行動の80%が機能の20%に集中していることを認識する
- 最もよく使われる20%の機能にデザインリソースを集中して投入する
- Parkinsonの法則と組み合わせることで、最も重要な機能に対する優先順位付けに役立つ
時間とタスク管理
31. Parkinsonの法則（Parkinson's Law）
どのような作業でも、与えられた時間をすべて使い切るまで膨張する
- ユーザーにタスク完了のための明確な時間枠を提示することは効果的
- フォームやプロセスに不要な手順を追加すると、完了時間が比例以上に増加する
- デザインプロセス自体にも適用される: 明確なスコープとスケジュール設定が重要
1件のコメント
Hacker Newsの意見
これはよく見返してしまう。ポスター風のデザインも良いし、こうした「法則」のかなり多くが長年にわたる Nielsen Norman Group のデータと研究から来ているのはいつも驚かされる。
Jakob's Law や Norman Door のように名前が付いたUX概念も多く、UX業界はこの小さな観察者集団の影響を大きく受けている。
ただ、私見では現代の UX/HCI 理論 はこうした柔らかいルールにだんだん縛られすぎている面もある。特に、放送のような 非インタラクティブなメディア のユーザーパターンから現れたルールを過度に一般化しているように思う。
前のシリーズページは良かったが、今回は少し 作り込みが足りない ように見える。
たとえば Cognitive Bias を辞書的に定義しただけで「法則」として載せているのは、法則でもないし、その形では実用的な概念でもない。
UIデザイナーや開発者が適用できるルール集というより、用語をいくつか選んで定義を付け、ポスター販売用 にまとめたような印象のほうが強い。
こういう資料は良いし、もちろん 絶対不変のルール でもない。
伝統的なデザイナーではないので、こうした best practice や法則のまとめがあると助かる。頭の中にずっと保持しておくのが難しいルールを、AIが画面単位でまとめて点検してくれる出発点としてはちょうど良さそうだ。
個人的にはソースコード整形ショートカットのように、ビジネスソフトウェアを作るときにこうした法則セットを sanity check 用のショートフローとして使うとかなり有用だと思う。
実際に UX Laws のスクリーンショット とダッシュボードのスクリーンショットをダウンロードして、ChatGPTとClaudeにその法則基準でレビューし、推奨事項を反映した新しいモックアップを作るように指示した。
Project 1: CMMS Dashboard For Maintenance
Dashboard old: https://imgur.com/a/R3wrMpr
Dashboard new (Claude): https://imgur.com/a/cYq4gE8
Project 2: https://swellslots.com のサーフ予報アプリ
Forecast old: https://imgur.com/a/W3daZrP
Forecast new: https://imgur.com/a/kNi2Nvg
こういうふうに互いに衝突する法則セットの問題は、優れたデザイナーはどのルールを無視し、どのルールを使うかを 文脈に合わせて直感的に判断 している点にある。
プロンプトに目的や役割を具体的に入れたのか、それともオープンにしたまま回したのか気になる。
法則0 は、私がクリックしようとしているUI要素をリフローさせたり、あちこち動かしたりしないことだ。
もちろん、より良い解決策は開発者とデザイナーがこうしたディテールに 職人気質 と誇りを持つことだ。最悪のインターフェースを見ると、たいていバックエンドと ギガビット接続 された環境でしかテストしておらず、こうした問題を見落としているように思える。
デザインの象徴のように見られている会社がその基本すら外すなら、業界のどこかが大きく間違っている。
これは素晴らしい資料だと思う。
ただ、2番目の項目である Choice Overload を見ると、選択肢が多すぎると人は圧倒されると書いておきながら、実際のページでは30個の「法則」をすべてテキストで詰め込み、視覚空間の半分は 無関係な絵30枚 が占めている。
きれいではあるが、これが 学習しやすい構造 とは言えない。
Doherty Threshold のように、コンピューターとユーザーが互いに待たなくて済む 400ms未満 でインタラクションできると、生産性は大きく上がる。
だからプログラミングでは小さなモデルのほうをずっと好む。十分に速くて作業フローの リアルタイム性 が保たれるからだ。
そうすると仕事もより小さな単位に分割し、継続的に検証するようになるので、自分が能動的に関与できるし メンタルモデル もずれない。
以前、簡単なコード変更3件を大きなモデルと小さなモデルにそれぞれ任せてみたが、どちらも成功した。ところが大きなモデルは3倍遅く、コストは10倍だった。
それ以来、私の Best Model の基準はベンチマーク1位ではなく、実際の仕事を安定してこなせる最も小さく、速く、安いモデルになった。
安定性 も入れるとよいと思う。変化のための変化や、新しい流行を追うためだけに変え続けるべきではない。
意味のない アイコン は使うべきではない。
情報を木構造のように隠して、ユーザーにボックスを1つずつ開かせるより、線形の流れ で見せるほうがよい。
意見を事実であるかのように提示してもいけない。
アジアの大手 e-commerce プラットフォーム の1つをリデザインした際、ここにある法則のいくつかを実際の UX戦略 に活用した。
共有してくれてありがとう。ほぼ10年間 full stack で働いてきたが、今になってようやくUIをより深く掘り下げていて、UXはまだ表面を触った程度だ。
少し話は逸れるが、モバイルやWebアプリでよく使われる UIパターン を整理した資料があるのか気になる。たとえば hamburger menu や toast notification のようなものだ。
体系的に整理されていて、範囲が広く、視覚的な例 まであるサイトを探している。
当時はスマートフォン初期でモバイルの比重が小さかったが、最新版はモバイルもかなり扱っているようだ。
https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/