UIデザインに効く認知心理学の法則5選｜ヒック・フィッツ・ヤコブの実務応用

こんにちは！UIデザイナーのYunyです。

UIデザインの現場で「なぜその配置にしたのか」を問われた際、うまく言葉にできず困った経験がある方も多いと思います。
自分自身もデザインを始めたばかりの頃は、「見た目の収まりが良いから」といった感覚的な理由しか返せず、手戻りを繰り返すことがよくありました。

画面の使いやすさは、デザイナー個人のセンスや勘ではなく、人間の脳が情報を処理する認知特性のルールで決まります。
この記事では、実務のUX/UI設計ですぐに役立つ代表的な5つの認知心理学の法則と、デザインレビューでそのまま使える具体的な言語化テクニックを詳しく共有します。

なぜUIデザイナーに「認知心理学」が必要なのか？

ユーザーがWebサイトやアプリを操作するとき、画面上の情報を見つけ、理解し、行動を決定するまでに多くの脳のリソース（認知負荷）を消費しています。
操作に迷ったり戸惑ったりする原因の大半は、レイアウトの美しさではなく、人間の情報処理プロセスに対して不自然な負荷がかかっている点にあります。

認知心理学の法則を設計の土台に据えると、デザインレビューの議論が「個人の好み」から「客観的な使いやすさの検証」へと大きく変わります。
チームのエンジニアやプロダクトマネージャーに対しても、科学的な根拠を持った提案ができるため、無駄な手戻りを防ぎながらスムーズな合意形成を図ることができます。

1. ヒックの法則（Hick’s Law）｜選択肢の増えすぎを防ぎ、意思決定を加速させる

ヒックの法則とは、ユーザーが意思決定を下すまでの時間は、提示された選択肢の数と複雑さに応じて対数関数的に増加するという心理学の基本法則です。
1952年に心理学者のウィリアム・エドマンド・ヒックとレイ・ハイマンによって定式化され、人間工学や情報設計の現場で広く活用されています。

UI設計において選択肢を1つの画面に並べすぎると、ユーザーは何を選べばよいか分からなくなり、行動の停止や画面からの離脱を引き起こします。
たとえば、ドロップダウンメニューの中に数十個の項目が無秩序に並んでいたり、ヘッダーに10個以上のナビゲーションリンクが密集していたりする状態がこれに当たります。

実務での実践：松竹梅の3択設計と段階的開示

SaaSの料金プラン表や機能選択画面では、主要な選択肢を3つ程度（いわゆる松竹梅の構成）に絞り込むことが実務における標準的なアプローチです。
どうしても選択肢が多くなる場合は、最初からすべてを見せるのではなく、段階的開示（Progressive Disclosure）の手法を取り入れます。

初期表示では最も利用頻度の高い主要項目だけを提示し、詳細な設定や高度なオプションはアコーディオンやモーダルで必要なときだけ展開させます。
実際にFigmaで画面を組む際も、初期状態の選択肢を3〜4個に制限するだけで、ユーザーテストでのタスク完了時間が大きく短縮されることを実感します。

選択肢の絞り込みやあえて制約を設けるUX設計のアプローチについては、以下の記事でも詳しく解説しています。
現場での情報整理に迷ったときの指針として、ぜひ参考にしてみてください。

デザインハーネス入門｜AIのUI生成とレビュー停滞を解く4層構造【2026】

無限の選択肢による疲弊を防ぎ、あえて制約を設けることでUXを高めるフレームワークを解説。

2. フィッツの法則（Fitts’s Law）｜移動距離とターゲットサイズで誤操作をゼロにする

フィッツの法則とは、ある目標（ターゲット）に素早く到達して選択するまでの時間は、目標までの距離に比例し、目標の大きさに反比例するという法則です。
1954年に心理学者のポール・フィッツが提唱したもので、マウスカーソルの移動やスマートフォンのタップ操作における基本中の基本となる指標です。

この法則から導き出されるのは、「頻繁に押すボタンは大きく、指やカーソルに近い場所に置くべき」という極めて明快な設計原則です。
逆に、画面の端にある小さな文字リンクや、親指が届きにくい位置にある重要なCTAボタンは、操作時間を無駄に長引かせ、誤タップの原因になります。

実務での実践：親指操作ゾーン（Thumb Zone）と44pt基準

スマートフォンアプリの設計では、片手持ちの親指が自然に届く画面下部エリア（親指操作ゾーン）に主要アクションを配置するのがセオリーです。
購入ボタンや送信ボタンをページ最下部の固定ボトムバーに配置する設計は、まさにフィッツの法則に基づいた移動距離の最小化の実践例と言えます。

また、Appleのヒューマンインターフェイスガイドライン（HIG）が定める「最小タップ可能領域44×44pt」のルールも、フィッツの法則に直結しています。
Figmaでボタンコンポーネントを設計する際は、見た目のアイコンが小さくても、オートレイアウトの余白を含めたヒットエリアを確実に44pt以上確保することが不可欠です。

タップ領域の具体的な数値基準やHIGの設計思想については、以下の記事で体系化しています。
モバイルUIの操作性を引き上げるための基本ルールとして、あわせて確認してみてください。

Apple HIG実務ガイド｜タップ領域44pt・文字11pt基準とiOSの基本原則【2026】

Appleが定める44ptタップ領域や文字サイズの論理的根拠と、iOS実務への落とし込み方を網羅。

3. ヤコブの法則（Jakob’s Law）｜「既視感」を味方につけ、学習コストを最小化する

ヤコブの法則とは、ユーザーは他の無数のWebサイトやアプリで大半の時間を過ごしているため、あなたのサイトもそれらと同じように機能することを期待しているという法則です。
ユーザビリティ研究の第一人者であるヤコブ・ニールセンが2000年に提唱したもので、Web標準やデザインシステムの重要性を端的に表しています。

デザイナーが独自性や斬新さを求めすぎるあまり、一般的な操作ルールを逸脱してしまうと、ユーザーは強いストレスと学習コストを強いられます。
たとえば、ヘッダー左上のロゴをクリックしてもトップに戻らない設計や、右上に置かれるはずの検索バーやカートアイコンがフッターの隅に隠れているような構成です。

実務での実践：メンタルモデルの流用と独自性の住み分け

使いやすいUIを構築する近道は、ユーザーがすでに獲得しているメンタルモデル（頭の中の操作イメージ）をそのまま流用することです。
ECサイトであれば「右上にカート」「画面下部に固定の購入ボタン」、メディアサイトであれば「左上にロゴ」「上部にグローバルナビゲーション」といった配置を素直に踏襲します。

UIデザイナーがクリエイティビティを発揮すべき領域は、操作の基本構造ではなく、ブランドの世界観を伝えるビジュアルや丁寧なインタラクションです。
基本の導線ルールを業界標準にしっかりと揃えることで、ユーザーは使い方に悩むことなく、サービス本来の価値やコンテンツに集中できます。

4. ミラーの法則（Miller’s Law）｜短期記憶の限界「マジックナンバー7」と情報のチャンキング

ミラーの法則とは、平均的な人間が一度に短期記憶（ワーキングメモリ）に保持できる情報の数は、「7加減2（5個から9個）」程度に限られているという心理学の基本法則です。
一般には「マジックナンバー7（マジカルナンバー7±2）」という呼び名でも広く親しまれており、1956年に認知心理学者のジョージ・ミラーが発表した論文に由来します。

近年の認知心理学の研究では、複雑なUI環境においては保持できる数がさらに少ない「4±1個程度」とも言われています。
区切りのない数字の羅列や、整理されていない長大な箇条書きリストは、ユーザーの記憶のキャパシティをあっという間に圧迫してしまいます。

実務での実践：情報のチャンキングとフォームのステップ分割

この記憶の負荷を軽減するための最も強力な手法が、複数の情報を意味のある塊にまとめる「チャンキング（Chunking）」です。
クレジットカード番号を4桁ずつハイフンで区切ったり、電話番号を市外局番ごとに分ける入力フォームの設計は、チャンキングの典型的な応用例です。

また、20項目以上におよぶ会員登録やアンケートフォームを設計する際は、1画面にすべてを詰め込まず、3〜4ステップに分割して案内します。
Figma上でカード型UIをレイアウトする際も、1つのカード内に含める主要情報は3〜4要素以内に抑え、視覚的なグループを明確に分けることが大切です。

実務で注意したいのは、画面上のUIは「記憶」ではなく「視覚認識」できるため、メニュー項目などを機械的に7個以下に制限する必要はない点です。
重要なのは数を無理に減らすことではなく、関連する項目同士を適切なチャンク（塊）に整理して、スキャンしやすい構造を作ることです。

5. フォン・レストルフ効果（孤立効果）｜視覚的コントラストで最重要アクションを際立たせる

フォン・レストルフ効果（別名：孤立効果）とは、複数の似た要素が並んでいるとき、他と異なる視覚的特徴を持つ1つの要素が最も記憶に残り、注目を集めるという効果です。
1933年に精神科医のヘドウィグ・フォン・レストルフによって発見され、CTAボタンの設計や価格表のレイアウトにおいて最も頻繁に活用される理論です。

この効果をUIに応用する際の注意点は、画面内のあらゆる要素を目立たせようとして、有彩色や強いコントラストを多用しすぎないことにあります。
すべてのボタンが同じ鮮やかなブルーで塗られている画面では、強調の効果が相殺され、結果としてユーザーはどこをタップすべきか迷ってしまいます。

実務での実践：Primaryボタンの孤立化と「おすすめ」バッジ

この効果を最大限に活かすためには、画面内で最優先してほしい操作（Primaryアクション）に対してのみ、明確な視覚的差異を与えます。
たとえば、主要な「購入する」「登録する」ボタンだけを鮮やかな塗りのボタンにし、キャンセルや戻るなどの副次的なボタンは枠線（Secondary）やテキストリンク（Tertiary）に抑えます。

また、3つの料金プランが並ぶ比較表において、中央の推奨プランだけカードの枠線を太くし、上部に「人気No.1」といったバッジを付与する手法もフォン・レストルフ効果の実践です。
周囲を均一で控えめなトーンに整えておくことで、際立たせたい1点にユーザーの視線を自然かつ的確に誘導できます。

実務で使える！デザインレビューを突破する「言語化フレーズ」早見表

認知心理学の知識は、実際の画面設計だけでなく、チーム内でのデザインレビューやクライアントへの提案において大きな力を発揮します。
感覚的な指摘を受けた際に、そのまま根拠として使える実践的な言語化フレーズを以下の表に整理しました。

「なんとなく使いにくい」「自分の感覚と違う」といった主観的な指摘に対しても、心理学の法則に基づいた客観的な意図を返すことで、議論を建設的な方向へ進められます。
デザイナー自身が論理的な言葉を持つことは、デザインの品質を守り、チーム全員が納得して開発を進めるための確かな強みになります。

デザインの意図をチームやクライアントに的確に伝え、合意形成をスムーズにするための言語化スキルについては、こちらの記事でも詳しくまとめています。
レビューでの伝え方に課題を感じている方は、あわせて目を通してみてください。

「なんとなく良い」を卒業する。デザインの意図を論理的に翻訳する「言語化力」の鍛え方

デザインの意図をチームやクライアントに論理的に伝え、手戻りを防ぐための実践的言語化スキル。

終わりに

最後までお読みいただき、ありがとうございます！

UIデザインにおいて認知心理学の法則を学ぶことは、表現の幅を狭める制約ではなく、自信を持ってデザインを届けるための論理的な土台になります。
画面の向こう側にいるユーザーの脳や身体の仕組みに寄り添うことで、迷いのない心地よい操作体験を生み出すことができます。

日々の制作の中で配置やサイズに迷ったときは、ぜひ今回紹介した5つの法則を振り返り、実務の設計に役立ててみてください。
これからも、論理的なUIデザインを一緒に楽しんでいきましょう。
それでは、良いデザインライフを！