01

視覚的階層

VISUAL HIERARCHY
注意・知覚

人は大きさ・濃さ・余白の差を「重要度の差」として読む。差がなければ、何も伝わっていないのと同じ。

全部が同じ強さ
プロプラン
月額 4,800円
チーム無制限/サポート付き
いますぐ申し込む
3段階の差をつける
プロプラン
¥4,800/月
チーム無制限/サポート付き
いますぐ申し込む
解説を見る
効く点
価格だけを2.5倍の級数に。1画面に「主・従・補足」の3層だけを作ると迷いが消える。
使う
LPのファーストビュー、料金表、ダッシュボードの主要指標。
注意
強調を4つ以上作ると階層が壊れ、結局どれも目立たなくなる。
02

フォン・レストルフ効果

VON RESTORFF EFFECT
注意・知覚

似たものが並ぶ中で1つだけ異質なものは、記憶にも選択にも残りやすい。

プランを選択年払いで2ヶ月無料
Free
¥0
1人
おすすめ
¥4,800
無制限
Biz
¥12,000
SSO付
解説を見る
効く点
中央だけ枠色・ラベル・影を変える。「違う」という信号は、文字での説得より速く届く。
使う
料金プラン、設定の推奨値、一覧内の新着・限定表示。
注意
異質さは1画面に1つ。2つ以上あると「どちらも普通」に戻る。
03

近接の法則

LAW OF PROXIMITY
注意・知覚

近くにあるものは同じ仲間だと認識される。線や色を足す前に、まず余白で意味を作る。

間隔が均等
山田
太郎
ラベルを入力欄に寄せる
山田
太郎
解説を見る
効く点
ラベルと入力欄の距離を4px、次の項目までを16pxに。罫線を1本も足さずに、余白だけでグループが成立する。
使う
フォーム、設定画面、カード内の情報整理。
注意
ラベルが上下どちらの欄のものか曖昧な余白は、入力ミスの直接原因になる。
04

バナー・ブラインドネス

BANNER BLINDNESS
注意・知覚

人は「広告の形」をしたものを無意識に視界から外す。派手にするほど無視される。

広告の見た目
PR
▶ 無料体験はこちら
本文と同じ書式で置く
この続きは実務チェックリストで
記事内で紹介した手順をPDFにまとめました
解説を見る
効く点
本文と同じ書体・幅・行間にして「読み物の続き」として提示する。囲み枠と“PR感”を外すのが要点。
使う
記事内の資料誘導、アプリ内のお知らせ、機能紹介。
注意
広告や宣伝であることを隠すのは別問題。表示義務と誠実さは必ず守る。
05

美的ユーザビリティ効果

AESTHETIC-USABILITY EFFECT
注意・知覚

見た目が整っているUIは、実際より使いやすいと感じられ、小さな不具合も許されやすい。

機能は同じ/整っていない
送金する
10000
OK
※手数料かかります
同じ機能を整えた
送金額
¥10,000
手数料¥110
送金を確認する
解説を見る
効く点
情報量は同じ。余白・整列・書体の統一だけで、同じ処理が「安全そう」に見える。
使う
初回接触画面、決済・金融など信頼が要る操作。
注意
美しさは本質的な使いにくさを隠してしまう。ユーザーテストの結果を美観で上書きしない。
06

ヒックの法則

HICK'S LAW
操作・認知負荷

選択肢が増えるほど決定にかかる時間は対数的に伸びる。速さは、減らすことでしか買えない。

11項目を並列
ダッシュボード
レポート
分析
顧客
商品
在庫
請求
連携
権限
ログ
設定
4+その他に畳む
ダッシュボード
顧客
商品
請求
その他 ▸ 7項目
解説を見る
効く点
使用頻度上位4つだけを一次階層に残す。削除ではなく「畳む」ので機能は失われない。
使う
グローバルナビ、初回設定、絞り込みフィルタ。
注意
階層を深くしすぎると総所要時間は逆に増える。1階層下げる価値があるか検証する。
07

フィッツの法則

FITTS'S LAW
操作・認知負荷

目標に到達する時間は距離が遠いほど・面積が小さいほど長くなる。主要動作は大きく、近くに。

右上に小さく配置
9:41保存
↑ 親指が届かない
親指圏に大きく配置
9:41
保存する
解説を見る
効く点
画面下部の親指到達圏(斜線部)に、高さ44px以上の主ボタンを置く。画面端はカーソルが止まるので実質無限大の面積になる。
使う
モバイルの主CTA、頻繁に押すツールバー、右クリックメニュー。
注意
削除など不可逆な操作は、あえて近く・大きくしない(→ 12 意図的な壁)。
08

認知負荷

COGNITIVE LOAD
操作・認知負荷

同時に処理できる情報量には上限がある。越えた瞬間に離脱が起きる。

登録に9項目
メールアドレス
パスワード
パスワード(確認)
氏名
フリガナ
電話番号
郵便番号
住所
生年月日
いま必要な2項目だけ
メールアドレス
パスワード
無料で始める
住所などは利用開始後に入力できます
解説を見る
効く点
「今この瞬間の目的に不要な項目」を後工程へ移す。項目数そのものが心理的コストになっている。
使う
会員登録、問い合わせ、初回オンボーディング。
注意
減らしすぎて後工程に負担が集中していないか、全体の完了率で測る。
09

ミラーの法則

MILLER'S LAW
操作・認知負荷

短期記憶に保てるのは4±1のかたまり。長い情報は意味の単位で区切る。

16桁を連続表示
カード番号
4539148803436467
確認しづらく、打ち間違いに気づけない
4桁ごとに区切る
カード番号
4539 1488 0343 6467
4つのかたまりとして一度に把握できる
解説を見る
効く点
入力欄側で自動的に空白を挿入する。ユーザーに区切りを覚えさせず、UIが代わりにチャンク化する。
使う
カード番号、電話番号、認証コード、長いID表示。
注意
「メニューは7個まで」は誤用。個数の根拠にはヒックの法則を使う。
10

段階的開示

PROGRESSIVE DISCLOSURE
操作・認知負荷

まず大多数が使う機能だけを見せ、必要な人にだけ奥を開かせる。

公開設定
公開範囲全員に公開 ▾
コメント許可する ▾
▸ 詳細設定(SEO・カスタムURL・埋め込み許可・API)7項目
公開する
解説を見る
効く点
上級者向け7項目を1行に畳む。存在は見せて到達可能にしつつ、初期状態の判断量は3つに保つ。
使う
設定画面、投稿フォーム、絞り込み条件、上級者向け機能。
注意
畳んだ中に必須項目を入れない。入力漏れの温床になる。
11

ドハティの閾値

DOHERTY THRESHOLD
操作・認知負荷

応答が400ミリ秒を超えると集中が切れる。速くできないなら「進んでいる形」を先に返す。

白画面+回転アイコン
読み込み中…
即座に骨格を表示
解説を見る
効く点
最終レイアウトと同じ形のスケルトンを0.1秒以内に描画。待ち時間は同じでも、体感待ち時間は約半分になる。
使う
一覧の初回読み込み、検索結果、画像の多い画面。
注意
1秒未満で終わる処理にスケルトンを出すと、逆に遅く見えてちらつく。
12

意図的な壁

INTENTIONAL FRICTION
操作・認知負荷

取り返しのつかない操作にはあえて手間を足す。摩擦は常に悪ではない。

1タップで消える
プロジェクトA
メンバー12人・ファイル340件
削除
名前の入力を求める
この操作は取り消せません
確認のため プロジェクトA と入力
プロジェクトA
戻る
削除する
解説を見る
効く点
「はい/いいえ」ではなく対象名の手入力を要求。惰性で押せない設計にすることが目的。
使う
削除、退会、送金、公開、権限変更。
注意
解約だけを極端に難しくするのはダークパターン。摩擦は「誤操作防止」に限る。
13

ヤコブの法則

JAKOB'S LAW
記憶・期待

ユーザーは他のサイトで過ごした時間のほうが長い。だから、そこでの慣習どおりに動くことを期待する。

独自配置
shop.example
🛒 3SHOP
検索ログイン
慣習どおり
shop.example
SHOP🔍  👤  🛒 3
新着セール
解説を見る
効く点
ロゴは左上、カートは右上。この一致だけで「探す」という作業がゼロになる。
使う
EC、ログイン導線、フォーム、アイコンの意味。
注意
独自性はレイアウトの位置ではなく、内容・言葉・ビジュアルで出す。
14

系列位置効果

SERIAL POSITION EFFECT
記憶・期待

並んだ項目のうち最初と最後が最も記憶に残り、中央は忘れられる。

ホーム 機能事例会社概要 無料で試す
↑ 各位置の想起されやすさ
解説を見る
効く点
両端という“記憶の一等地”に、ホームと主要CTAを配置。埋もれてよい項目だけを中央に置く。
使う
グローバルナビ、モバイルのタブバー、機能一覧の並び順。
注意
重要項目を全部端に寄せると端が渋滞する。端は2つしかないと考える。
15

ピーク・エンドの法則

PEAK-END RULE
記憶・期待

体験の評価は感情が最も動いた瞬間と、終わり方でほぼ決まる。平均値ではない。

そっけない終わり
注文番号 #82013
完了しました。
山と締めを作る
🎉
ご注文ありがとうございます
明日 10:00〜12:00 にお届けします
配送状況はこの画面から追えます
追跡する
解説を見る
効く点
完了画面に「安心(到着時刻)+次の行動」を置く。ここが体験全体の記憶を代表する。
使う
購入完了、初回セットアップ完了、解約・エラーからの復帰。
注意
「エンド」は良い場面だけではない。エラー画面こそ記憶に残るので同じ密度で設計する。
16

ツァイガルニク効果

ZEIGARNIK EFFECT
記憶・期待

片づけ終えていない作業だけが頭に居座り続ける。済んだ作業は、きれいに忘れる。

プロフィールの完成度60%
氏名を登録
写真を追加
職種を選択
スキルを3つ追加 (+20%)
自己紹介を書く (+20%)
解説を見る
効く点
「あと何をすれば埋まるか」を残り2件だけ明示。空白のバーが心理的な引っかかりとして残り続ける。
使う
プロフィール入力、学習コース、初期設定チェックリスト。
注意
永遠に100%にならない設計は不快感に変わる。到達可能な満点を必ず用意する。
17

労働の錯覚

LABOR ILLUSION
記憶・期待

裏側の仕事を見せたほうが、結果の価値が高く感じられる。速すぎる回答は雑に見える。

何をしているか不明
検索中…
工程を実況する
1,204軒のホテルを検索
空室状況を確認
38サイトの価格を比較中…
解説を見る
効く点
件数という具体的な数字で作業量を可視化。同じ待ち時間でも「調べてもらった」という納得が残る。
使う
比較検索、AI生成、審査・与信、レコメンド生成。
注意
実際にはしていない処理を演出するのは虚偽。表示する工程は必ず実在させる。
18

アンカー効果

ANCHORING EFFECT
判断・バイアス

最初に見た数字がその後の判断の基準になる。高い/安いは常に相対評価。

価格だけを提示
ワイヤレスイヤホン
¥12,800
カートに入れる
基準値を先に見せる
ワイヤレスイヤホン
通常価格 ¥19,800
¥12,800 35%OFF
カートに入れる
解説を見る
効く点
参照価格を先に読ませてから実売価格を出す。同じ12,800円が「7,000円の得」に変わる。
使う
料金表、割引訴求、寄付額の選択肢、見積の松竹梅。
注意
実売実績のない「通常価格」表示は二重価格表示として景表法上の問題になる。
19

おとり効果

DECOY EFFECT
判断・バイアス

明らかに不利な第3の選択肢を置くと、狙った選択肢が「お得」に見える

定期購読プラン
Web版
¥600
/月
紙版のみ
¥1,200
/月
← おとり
紙+Web
¥1,200
/月
同額で両方
解説を見る
効く点
中央の「紙のみ ¥1,200」は誰も選ばない。だが右の同額プランを圧倒的に有利に見せるためだけに存在する。
使う
3プラン構成、オプション販売、容量・数量の選択。
注意
本当に価値のない選択肢で埋めると不信を生む。おとりにも成立する理屈を持たせる。
20

デフォルト効果

DEFAULT BIAS
判断・バイアス

人は初期値をそのまま受け入れる。何を初期値にするかは、最も強い設計判断。

お届け方法を選択
まとめて配送
1回で届く/梱包資材60%削減
無料
できるだけ早く分割配送
最大3便に分かれます
無料
解説を見る
効く点
推奨したい選択肢を初期選択済みにする。変更は1タップで可能なので、選択の自由は損なわれない。
使う
配送方法、通知設定、プライバシー設定、支払い方法。
注意
有料オプションや広告メールを初期ONにするのはダークパターン。初期値は「ユーザーの利益」で選ぶ。
21

損失回避

LOSS AVERSION
判断・バイアス

得る喜びより失う痛みのほうが約2倍強い。同じ事実でも「失う」側から書くと動く。

得られるものを説明
解約手続き
続けると、無制限ストレージと共有機能が使えます。
解約する
失うものを具体化
解約すると次が削除されます
保存中のファイル1,842件
共有中のリンク37件
チームの履歴2年分
解約する
続ける
解説を見る
効く点
抽象的な機能名ではなく、自分が積み上げた実データの件数を見せる。損失が自分ごとになる。
使う
解約引き止め、カート放棄防止、無料期間の終了通知。
注意
恐怖を煽る表現や、解約導線を隠す使い方は逆効果かつ不誠実。
22

フレーミング効果

FRAMING EFFECT
判断・バイアス

同じ事実でも言い方を変えるだけで受け取り方が逆になる。

失敗側から書く
5%
が手数料として引かれます
売上 ¥100,000 のとき
−¥5,000
取り分から書く
95%
があなたの取り分です
売上 ¥100,000 のとき
受取 ¥95,000
解説を見る
効く点
数字も条件も完全に同一。主語を「引かれる額」から「受け取る額」に変えただけ。
使う
料金説明、成功率の提示、エラー文言、通知の文面。
注意
不利な条件を隠す言い換えは虚偽表示。両方の数字に到達できる形を保つ。
23

希少性

SCARCITY
判断・バイアス

手に入りにくいものほど価値が高く見え、判断が早くなる

10/24(金)19:00 の回スタジオA
予約済み 5席 空席 残り 3席
この回を予約する
解説を見る
効く点
数字だけでなく座席図で埋まり具合を見せる。「残り3」の根拠が図として同時に伝わる。
使う
予約、在庫表示、期間限定オファー、先着特典。
注意
在庫や締切の偽装は最も信用を失う。実在庫と必ず連動させる。
24

決断疲れ

DECISION FATIGUE
判断・バイアス

判断を重ねるほど質が落ち、最後は「選ばない」を選ぶ

24種を一覧表示
…あと8種類
用途別に3つ提案
日報を書く使う
議事録をまとめる使う
企画書の骨子使う
すべてのテンプレート(24)を見る
解説を見る
効く点
「選ぶ」を「目的を答える」に置き換える。全件へのアクセスは残しつつ、初期提示は3つに抑える。
使う
テンプレート選択、商品一覧、設定ウィザード、プラン選択。
注意
推薦ロジックが的外れだと「選ばせてくれない」不満に変わる。根拠を一言添える。
25

目標勾配効果

GOAL-GRADIENT EFFECT
動機・習慣

ゴールが近づくほど行動が加速する。だから、スタート地点を前倒しして見せる。

0/8 から始まる
あと8回で1杯無料
0 / 8
2個押した状態で配る
あと8回で1杯無料
5 / 10 (★は入会特典)
解説を見る
効く点
必要回数は同じ8回。それでも「もう半分終わっている」状態から始めると継続率が上がる。
使う
ポイントカード、オンボーディング進捗、学習コース。
注意
ゴール直後にモチベーションが急落する。次の目標を即時に提示する。
26

変動型報酬

VARIABLE REWARD
動機・習慣

報酬がいつ・どれだけ来るか分からないとき、行動は最も強く反復される。

毎回同じ報酬
ログインボーナス
10 pt
毎日 10pt(固定)
→ 3日で飽きる
期待値は同じで幅を持たせる
今日のボーナス
50 pt
51050100
1〜100pt のいずれか
解説を見る
効く点
結果を一拍おいて開示する演出。「次は何が出るか」という予測不能性が再訪の理由になる。
使う
ログインボーナス、フィード更新、レコメンドの発見体験。
注意
依存を意図した設計は倫理的に問題がある。射幸性・年齢・上限を必ず検討する。
27

サンクコスト効果

SUNK COST EFFECT
動機・習慣

すでに払った時間や労力があると、やめるほうが損に感じる

UXリサーチ入門全18本
13本 視聴済み・累計 4時間20分 あと5本
▶ 第14回 インタビュー設計18:40
続きから再生
解説を見る
効く点
「累計4時間20分」という投下時間を明示。残り本数より、積み上げの大きさが継続を後押しする。
使う
学習サービス、長いフォームの途中復帰、下書きの保存表示。
注意
ユーザーに不利な継続を強いる使い方は搾取。「やめる自由」を常に同じ画面に置く。
28

社会的証明

SOCIAL PROOF
信頼・社会性

判断に迷ったとき、人は他人の行動を正解の代わりにする。

自称の訴求
業界No.1の使いやすさ
高機能・低価格・充実サポート
申し込む
他者の実績を見せる
★★★★★4.8/ 1,204件
「移行が半日で終わった」— 制作会社 42名
導入 3,800社継続率 96%
この24時間で18社が登録
解説を見る
効く点
「多い」ではなく件数・比率・直近の動きという検証可能な数字を出す。似た属性の他者ほど効く。
使う
LP、商品詳細、料金ページ、申込直前の後押し。
注意
件数が少ない段階での水増しは致命傷。実数が弱いときは具体的な1件の声で代替する。
29

ハロー効果

HALO EFFECT
信頼・社会性

1つの目立つ長所が、関係ない部分の評価まで引き上げる

佐藤 玲奈 / UIデザイナー
🏆 Good Design 2024 認証済
受賞歴を先頭に置くと、以降のポートフォリオ・価格・返信の速さまで「きっと良い」と評価されやすくなる。
解説を見る
効く点
最初に目に入る位置へ最強の実績を1つだけ置く。並べすぎると、どれも印象に残らない。
使う
プロフィール、企業サイトの冒頭、商品の受賞バッジ。
注意
逆ハロー効果もある。1つの雑な要素が全体の信頼を落とす(誤字・崩れた表示など)。
30

授かり効果

ENDOWMENT EFFECT
信頼・社会性

いったん自分のものだと感じた途端、その価値は跳ね上がり、手放したくなくなる。

他人事の案内
Proプランのご案内
機能一覧はこちらからご確認ください。
プランを見る
先に持たせる
あなたのProプラン残り9日
作成したレポート12件
招待したメンバー4人
このまま使い続ける
解説を見る
効く点
体験期間中に「あなたの」と呼び、自分で作った成果物を蓄積させる。所有感は説明ではなく利用実績で生まれる。
使う
無料トライアル、カスタマイズ機能、マイリスト、下書き保存。
注意
体験終了時にデータを人質にしない。エクスポート手段を用意するのが誠実な設計。
該当する法則が見つかりません 検索語を変えるか、カテゴリを「すべて」に戻してください。
UIデザイン心理学辞典 — 全30項目 / 6カテゴリ 掲載する法則は一般に知られたUX心理学の知見に基づき、定義文・UI例はすべて独自に作成しています。 掲載画面はすべて解説用に作成した架空のモックアップです。企業名・数値は実在しません。