【図解付き】UI心理学辞典〜使われる画面をつくる10の法則〜
ボタンの色や配置を「なんとなくこれが良さそう」で決めてしまい、根拠を人に説明できずに困っていませんか。
この記事を読み終えると、UI/UXデザインの判断に使える心理学・脳科学の法則10個と、それぞれの具体的な使い方が「辞典」としていつでも参照できる状態になります。
UI/UXデザイナー、Webディレクター、プロダクトマネージャー、そしてAIやノーコードでアプリ・LPを作っている方に向く内容です。
学術的な心理学理論そのものを厳密に検証したい研究者の方には、実務適用のための要点整理である点をご了承ください。
法則を知識で終わらせず、実際の画面に当てはめる手つきまで見てみたい方には、ウェビナー「『なんかダサい』アプリのUIデザインを、Claude Codeに直させる60分」もあわせておすすめです。
詳細・お申し込みはこちら
この記事は全文無料（期間限定）で閲覧できます。
見出し画像はAIで生成しました。
プロンプトは下記の記事に掲載中。
毎日プロンプトは増えていきます。
目次
ヒックの法則〜選択肢を絞るほど行動は速くなる〜
フィッツの法則〜ボタンの距離とサイズが操作速度を決める〜
ミラーの法則〜人が一度に覚えられる情報の数には限界がある〜
ヤコブの法則〜ユーザーは「見慣れた動き」を期待している〜
ゲシュタルトの法則〜近さと似た見た目が関係性を伝える〜
ピークエンドの法則〜体験の記憶は「山場」と「終わり方」で決まる〜
フォン・レストルフ効果〜ひとつだけ違う要素が記憶に残る〜
ツァイガルニク効果〜未完了は気になり、行動を後押しする〜
美的ユーザビリティ効果〜美しい画面は使いやすいと感じられる〜
損失回避〜人は得より失うことを強く恐れる〜
1. ヒックの法則〜選択肢を絞るほど行動は速くなる〜
ヒックの法則とは、選択肢の数が増えるほど、意思決定にかかる時間が長くなるという法則です。
心理学者のWilliam Edmund HickとRay Hymanが1952年に行った反応時間の実験がもとになっています。
UIデザインでは、ナビゲーションメニューやアクションボタンなど、瞬時の判断を求める場面で選択肢を絞り込むことに使われます。
ただし、住所録のような一覧型のリストでは効果が薄いため、あらゆる画面に機械的に当てはめられる法則ではありません。
具体例として、Googleの検索トップページは検索ボックス1つだけのミニマルな構成にすることで、ユーザーを迷わせず検索行動へ直結させています。
2. フィッツの法則〜ボタンの距離とサイズが操作速度を決める〜
フィッツの法則とは、ターゲットに到達するまでの時間は、ターゲットまでの距離に比例し、ターゲットのサイズに反比例するという法則です。
1954年にPaul Fittsが人間の運動機能を調べた研究から導かれました。
UIデザインでは、タッチ操作を想定したボタンサイズの設計や、よく使う機能を指の届きやすい位置に置く配置判断に使われます。
具体例として、macOSのメニューバーは画面の最上部という「端」に固定されています。
画面の端や角はカーソルがそれ以上動けないため、狙いを外しても正確にヒットできる「実質無限大のターゲット」として使われているのです。
3. ミラーの法則〜人が一度に覚えられる情報の数には限界がある〜
ミラーの法則とは、人が短期記憶で同時に扱える情報のかたまり（チャンク）の数には限界がある、という考え方です。
心理学者George A. Millerが1956年に発表した論文で「7±2」という数字を示したことで広く知られています。
その後、Nelson Cowanが2001年の研究で、リハーサルの助けがない条件では実質的な限界は4±1程度だとする、より厳しい再検証を発表しました。
この「7」という数字だけを根拠にメニュー項目数を決めることには、ユーザビリティ研究者のJakob Nielsen自身も慎重な立場を示しており、数値を過度に一般化しないことが大切です。
UIデザインでは、正確な数よりも「情報を意味のあるかたまりに区切る」という考え方こそが重要で、電話番号を4桁ずつハイフンで区切って表示・入力させるUIが典型例です。
4. ヤコブの法則〜ユーザーは「見慣れた動き」を期待している〜
ヤコブの法則とは、ユーザーは自分のサイト以外の多くのサイトで大半の時間を過ごしているため、自分のサイトも他の見慣れたサイトと同じように動くことを期待する、という考え方です。
Nielsen Norman Groupの共同創業者であるJakob Nielsenの知見にもとづいています。
UIデザインでは、ハンバーガーメニューの位置や、カートアイコンの配置といった業界標準のパターンに沿うことで、ユーザーが新しい学習をせずタスクに集中できるようにする設計判断に使われます。
具体例として、検索ボックスは中央上部、カートアイコンは右上、ハンバーガーメニューは左上という配置は、多くのECサイトやアプリで共通しています。
はじめて使うサービスでも、こうした共通パターンに沿っているだけで迷わず操作できるのは、ヤコブの法則が働いているためです。
5. ゲシュタルトの法則〜近さと似た見た目が関係性を伝える〜
ゲシュタルトの法則とは、20世紀前半のMax WertheimerやWolfgang Köhlerらゲシュタルト心理学者たちが積み重ねた、人の知覚に関する一連の原則です。
このうち「近接の法則」は、物理的に近くにある要素が同じグループとして知覚されるという原則です。
「類同の法則」は、色や形、サイズが似ている要素は、離れていても関連していると知覚されるという原則です。
UIデザインでは、フォームのラベルと入力欄の距離を近づけて関連性を明示したり、同じ機能を持つアイコンのスタイルを統一して視覚的にグループ化したりする、レイアウト設計の基本として使われます。
6. ピークエンドの法則〜体験の記憶は「山場」と「終わり方」で決まる〜
ピークエンドの法則とは、人は経験全体を、その経験の中で最も感情が強く動いた瞬間（ピーク）と、終わり方の2点でおおむね記憶し、評価するという法則です。
ノーベル経済学賞受賞者のDaniel Kahnemanらが1993年に発表した研究がもとになっており、経験そのものの長さは、記憶の評価にあまり影響しないことも示されています。
UIデザインでは、オンボーディングやチェックアウトのような一連のフローの中で、感情が動くピークの瞬間と、フローの最後にあたる完了画面の印象を、意図的に良く設計することに使われます。
Nielsen Norman Groupの解説記事でも、体験の終盤を丁寧に設計する重要性が繰り返し取り上げられています。
7. フォン・レストルフ効果〜ひとつだけ違う要素が記憶に残る〜
フォン・レストルフ効果とは、類似した項目が並ぶ中で、他と異なる孤立した項目のほうが記憶に残りやすいという効果です。
ドイツの心理学者Hedwig von Restorffが1933年に行った実験にもとづいています。
UIデザインでは、複数の同じ形のボタンが並ぶ中で、最も押してほしい主要な行動（プライマリCTA）だけを色や形で目立たせる設計に使われます。
ただし、目立たせたい要素を増やしすぎると要素同士が競合し、かえって広告のように見えてしまうリスクがあるため、際立たせる対象はひとつに絞ることが大切です。
8. ツァイガルニク効果〜未完了は気になり、行動を後押しする〜
ツァイガルニク効果とは、未完了のタスクは完了したタスクよりも記憶に残りやすく、人の意識にとどまり続ける傾向のことです。
ソビエトの心理学者Bluma Zeigarnikが1920年代に行った研究にもとづいています。
UIデザインでは、プログレスバーや達成率のパーセンテージ表示によって「まだ終わっていない」ことを可視化し、続きの入力や作業を促す設計に使われます。
具体例として、LinkedInのプロフィール完成度をパーセンテージや円グラフで示す表示は、未完了であることを見せることでスキルや経歴の追加入力を促す施策として広く知られています。
9. 美的ユーザビリティ効果〜美しい画面は使いやすいと感じられる〜
美的ユーザビリティ効果とは、人は見た目が美しい製品ほど「使いやすい」と感じる傾向があるという効果です。
日立デザインセンターのKurosu氏とKashimura氏が1995年にATMのUIバリエーションを使って行った実験が、最初の実証研究として知られています。
美的な満足感が使う人のポジティブな感情反応を生み、多少の使いにくさへの寛容度を高めますが、大きな使いにくさまでは覆い隠せない点には注意が必要です。
UIデザインでは、見た目の美しさが機能やコンテンツをきちんと支えている状態を目指すことで効果が最大化するため、ビジュアルデザインへの投資はユーザビリティ向上策としても位置づけられます。
10. 損失回避〜人は得より失うことを強く恐れる〜
損失回避とは、人は同じ金額でも、利得を得る喜びより損失を被る苦痛のほうを心理的に強く感じる傾向のことです。
ノーベル経済学賞を受賞したDaniel KahnemanとAmos Tverskyが1979年に発表したプロスペクト理論の中核となる考え方です。
UIデザインでは、「今なら送料無料」ではなく「あと1点で送料無料が終了」のような損失フレーミングでの訴求や、カート放棄を防ぐリマインド、無料トライアル終了前の警告表示などに使われます。
チェックアウトフローでの離脱率が高いという課題は、こうした損失回避行動の兆候として、UXリサーチやA/Bテストの分析対象になります。
今日やること
自分が担当している画面を1つ選び、この10法則のうち3つが守れているかを点検してみましょう。
次に読む記事
10法則を実際の画面へ落とし込む際は、良質な実例を見ながら考えると理解が早まります。
次回
次回は、今回の10法則を「ボタン」「フォーム」「ナビゲーション」といったコンポーネント別に、どう実装へ落とし込むかを扱う予定です（内容は確定次第、次回記事でお知らせします）。
心理学の知識を実務の判断基準に変えていく、同じ系統のテーマを引き続きお届けします。ぜひフォローしてお待ちください。
今回の10法則を、実際に「なんかダサい」と感じるアプリの画面へ当てはめながらClaude Codeで直していく様子を見たい方は、ウェビナー「『なんかダサい』アプリのUIデザインを、Claude Codeに直させる60分」もぜひチェックしてみてください。
関連記事
AIを使って副業・マネタイズ・業務効率化を進めたい方へ
初回限定の無料相談に進む
https://forms.gle/kfeW38K4tK9Y5K8C7
【お問い合わせ先】
法人研修・顧問: https://kawai-business.pages.dev/
セミナー登壇、動画出演: https://lp-seminar.pages.dev/
月次1on1: https://kawai-1on1.pages.dev/
その他: https://kawai-official.pages.dev/
【メディア】
X: https://x.com/kawai_design
note: https://note.com/kawaidesign
NewsPicks: https://newspicks.com/topics/ai-design/
Voicy: https://voicy.jp/channel/820890
YouTube: https://www.youtube.com/@kawai_design
Threads: https://www.threads.com/@kawai_design_ig
Instagram: https://www.instagram.com/kawai_design_ig/
Facebook: https://www.facebook.com/profile.php?id=100094403012810
LINE: https://lin.ee/TrZG7ZN
【書籍・監修】
AIでゼロからデザイン
https://www.shoeisha.co.jp/book/detail/9784798193427
Google 画像生成プロンプト ガイド
https://cloud.google.com/resources/content/intl/ja-jp/imagenpromptguide?hl=ja
【出演実績】
NewsPicks「実践！仕事術」
https://newspicks.com/movie-series/124/?from=%2Fmovie-series%2F124%2F&movieId=6425
さらば森田のAI〇〇ラボ
https://youtu.be/Vsd2-nEzMWE?si=5ovF0-CroGpeNfTC
https://youtu.be/A0A72V4vi3g?si=QTj3_DNKy8Pq2s8l
ベイジTV（株式会社ベイジ 公式チャンネル）
https://youtu.be/lTzrUc7L3n0?si=Ron__YSOWX1-l9Tb
San Francisco Design Talk（btrax Brandon氏のPodcast）
https://open.spotify.com/episode/4vk0PiJzB0559g3InChcjl
ソフトバンクニュース
https://www.softbank.jp/sbnews/entry/20251217_02
SHE likes
https://x.com/she_officials/status/2025767572604588437?s=46
参照リンク
