UX心理学
エンジニアのためのWebチートシート
UXデザインに活用できる心理学の法則・原則をまとめたチートシートです。認知・知覚、意思決定バイアス、行動心理、社会心理など、ユーザー体験を向上させるための心理学的知見を網羅しています。
認知・知覚の法則
| 法則・原則 | 説明 |
|---|---|
| 美的ユーザビリティ効果 (Aesthetic-Usability Effect) | 美しくデザインされたプロダクトは、実際の使用性に関わらず「使いやすい」と感じられる現象。視覚的な美しさがユーザーの許容度を高め、小さな問題を見過ごしやすくなる。 |
| バナー・ブラインドネス (Banner Blindness) | ユーザーがWebサイト上の広告や広告に似た要素を無意識に無視する現象。重要な情報をバナー風のデザインで表示すると見落とされるリスクがある。 |
| 認知負荷 (Cognitive Load) | 情報を処理する際に必要な精神的エネルギーの量。認知負荷が高すぎると、ユーザーは疲労しタスクを放棄しやすくなる。シンプルなUIが重要な理由。 |
| 選択的注意 (Selective Attention) | ユーザーは自分の目的に沿った情報にのみ注意を向け、関係のない情報は無視する傾向がある。目立つCTAや重要な情報は、ユーザーの目的に関連づけて配置すべき。 |
| 系列位置効果 (Serial Position Effect) | リストの最初(初頭効果)と最後(新近性効果)の項目が最も記憶に残りやすい現象。ナビゲーションや選択肢の配置において、重要な項目は最初か最後に置く。 記憶への残りやすさ 1 2 3 4 5 6 7 初頭効果 ← リスト順序 → 新近性効果 |
| ビジュアル・アンカー (Visual Anchor) | ページ内で視覚的に強調された要素にユーザーの注意が引きつけられる設計原則。色、サイズ、コントラストを使って重要な要素を目立たせる。 |
| 視覚的階層 (Visual Hierarchy) | サイズ、色、位置、コントラストなどを使って情報の優先順位を視覚的に示す手法。ユーザーが情報をスキャンしやすくし、重要な情報から順に認識できるようにする。 大見出し 中見出し 本文テキストはここに配置されます。 補足・注釈テキスト 1 最重要2 重要3 通常4 補足サイズ・色・太さで情報の優先順位を視覚化 |
意思決定のバイアス
| 法則・原則 | 説明 |
|---|---|
| アンカー効果 (Anchor Effect) | 最初に提示された情報(アンカー)に基づいて、後続の判断が影響を受ける傾向。価格表示で高い価格を先に見せると、割引価格がより魅力的に感じられる。 アンカーなし ¥6,980 「普通の価格かな?」 → アンカーあり ¥10,000 ¥6,980 30% OFF 「お得!買おう!」 最初に見た価格(アンカー)が判断基準になる |
| 確証バイアス (Confirmation Bias) | 自分の既存の信念や仮説を支持する情報を優先的に探し、矛盾する情報を無視または軽視する傾向。ユーザーの期待に沿った体験設計が重要。 |
| おとり効果 (Decoy Effect) | 3つの選択肢があるとき、明らかに劣る選択肢(おとり)を加えることで、特定の選択肢をより魅力的に見せる手法。料金プランの設計でよく使われる。 料金プラン比較 Basic ¥500 5GB 安いけど少ない おとり Plus ¥1,000 10GB Proと比べて割高感 人気 No.1 Pro ¥1,200 50GB +200円で5倍! 劣った選択肢(おとり)を入れると、ターゲット商品がより魅力的に見える |
| デフォルト効果 (Default Bias) | ユーザーは提示されたデフォルト値をそのまま受け入れる傾向が強い。オプトイン/オプトアウトの設計や、推奨設定の初期値設定に影響。 |
| 期待バイアス (Expectation Bias) | 事前に持っている期待が、実際の体験の評価に影響を与える現象。期待を適切に設定し、それを上回る体験を提供することが重要。 |
| フレーミング効果 (Framing Effect) | 同じ情報でも、提示の仕方(フレーム)によってユーザーの判断が大きく変わる心理現象。「90%の成功率」と「10%の失敗率」では印象が異なる。 同じ事実、違う印象 90% 成功 ポジティブ表現 「9割が成功する手術です」 😊 安心・前向きな印象 = 同じ情報 10% 失敗 ネガティブ表現 「1割が失敗する手術です」 😰 不安・リスクを感じる |
| 損失回避 (Loss Aversion) | 人は得ることよりも失うことを強く避けようとする傾向がある。「今すぐ登録で特典を逃さない」のような損失フレームが効果的。 |
行動心理
| 法則・原則 | 説明 |
|---|---|
| 好奇心ギャップ (Curiosity Gap) | 知っていることと知りたいことの間にギャップがあると、そのギャップを埋めたいという強い欲求が生まれる。ティーザー広告やクリックベイトはこれを利用している。 |
| 決断疲れ (Decision Fatigue) | 多くの決断を繰り返すと、判断力が低下し合理的な選択が困難になる現象。選択肢を減らす、推奨を提示する、段階的に選択させるなどの対策が有効。 |
| 段階的要請(フット・イン・ザ・ドア) (Foot-in-the-Door Effect) | 最初に小さな要請を受け入れると、その後のより大きな要請も受け入れやすくなる現象。無料トライアル → 有料プランへの誘導などに活用。 |
| 目標勾配効果 (Goal Gradient Effect) | 目標に近づくほど、それを達成しようとする努力が加速する現象。プログレスバーやポイントカードの「あと少しで達成」表示が効果的。 ゴールが近いほど加速する 開始あと少し!完了 80% 15% 30% 45% 60% 75% 90% ↑ 努力の度合い(目標に近づくほど高まる) 例: ポイントカード「あと2杯でコーヒー無料!」 |
| ツァイガルニク効果 (Zeigarnik Effect) | 完了したタスクよりも未完了のタスクの方が記憶に残りやすい現象。プロフィール完成度の表示や、未読バッジなどに活用される。 未完了タスクは記憶に残る プロフィール完成度50% プロフィール写真を設定 自己紹介を入力未完了 スキルを追加未完了 SNSを連携 あと2つで完了! 未完了タスクが気になり、完了したくなる心理を活用 |
| 誘導抵抗(リアクタンス) (Reactance) | 選択の自由が制限されていると感じると、心理的な反発が生じる現象。強制的なポップアップや押しつけがましいCTAは逆効果になりうる。 |
| サンクコスト効果 (Sunk Cost Effect) | 既に投資した時間やお金を正当化するために、合理的でなくても継続投資してしまう心理傾向。ゲームのレベルアップやサブスクリプションの継続に影響。 |
社会心理
| 法則・原則 | 説明 |
|---|---|
| 社会的証明 (Social Proof) | 他の人々の行動や評価を見て、自分の行動を決める傾向。レビュー、評価、利用者数、「○○人が購入」などの表示が信頼性を高める。 他者の行動が判断基準になる 📦 人気商品 A ¥3,980 4.2(328件) 👤 👤 👤 🔥今週 87人がチェック中 「みんなが買っている=良い商品」という心理 |
| ハロー効果 (Halo Effect) | ある特性に対する印象が、他の特性の評価にも影響を与える現象。企業の社会貢献活動が製品全体の評価を高めたり、美しいUIが機能への信頼を高めたりする。 |
| 観察効果(ホーソン効果) (Hawthorne Effect) | 人は観察されていると感じると、行動を変える傾向がある。ユーザビリティテストでは、被験者が普段と異なる行動をとる可能性がある点に注意。 |
| ピグマリオン効果 (Pygmalion Effect) | 期待をかけられると、その期待に応えようとしてパフォーマンスが向上する現象。ユーザーに対してポジティブなフィードバックや励ましを提供することで行動を促進。 |
記憶・体験評価
| 法則・原則 | 説明 |
|---|---|
| ピーク・エンドの法則 (Peak-End Rule) | 体験全体の評価は、最も感情的に強烈だった瞬間(ピーク)と、終了時の体験(エンド)によって大きく決まる。チェックアウト後のサンクスメッセージなど終わり方が重要。 体験の評価はピークと終わりで決まる 感情の強さ Peak: 最も感情的な瞬間 End: 終了時の体験 例: 購入完了後の感謝メッセージで終わり方を印象づける |
| プライミング効果 (Priming) | 事前に与えられた刺激(言葉、画像など)が、その後の行動や判断に無意識に影響を与える現象。ランディングページの最初の印象がコンバージョンに影響。 |
| 親近性バイアス (Familiarity Bias) | 過去に経験したパターンやデザインに親しみを感じ、新しいものより好む傾向。UIは一般的なコンベンションに従う方がユーザーに受け入れられやすい。 |
| 授かり効果 (Endowment Effect) | 一度所有したものを、所有していないときよりも高く評価する傾向。無料トライアルやカスタマイズ機能で「自分のもの」感を醸成することで解約を減らせる。 |
UXデザイン手法
| 法則・原則 | 説明 |
|---|---|
| ナッジ効果 (Nudge) | 強制ではなく、選択構造を設計することで、ユーザーの意思決定を望ましい方向に誘導する手法。デフォルト設定や推奨バッジなどが例。 |
| ゲーミフィケーション (Gamification) | ポイント、バッジ、ランキング、チャレンジなどのゲーム要素を取り入れ、ユーザーのモチベーションとエンゲージメントを高める手法。 |
| 段階的開示 (Progressive Disclosure) | 全ての情報を一度に表示せず、ユーザーが必要とするタイミングで段階的に情報を提供するデザイン手法。認知負荷を軽減する。 情報を段階的に見せる ❌ 一度に全表示 😵 情報過多で混乱 ✓ 段階的開示 基本情報 詳細設定 高度なオプション 😊 必要な情報だけ表示 認知負荷を減らし、ユーザーが迷わない設計 |
| スキューモーフィズム (Skeuomorphism) | デジタルインターフェースにおいて、現実世界の物体を模倣するデザイン手法。ゴミ箱アイコン、ノートアプリの紙の質感などが例。直感的な理解を助ける。 |
| 変動型報酬 (Variable Reward) | 報酬のタイミングや内容を予測不可能にすることで、ユーザーのモチベーションと興味を維持する仕組み。SNSのフィード更新やガチャシステムに見られる。 |
| 労働の錯覚 (Labor Illusion) | システムが「作業中」であることを可視化することで、結果に対する価値を高く感じさせる現象。検索中のアニメーションや「あなた専用の結果を作成中」などの表示。 |
| 希少性効果 (Scarcity) | 入手困難なものほど価値があると感じる心理。「残りわずか」「期間限定」「在庫あと3点」などの表示が購買意欲を高める。 希少なものほど価値を感じる ⚠️在庫残りわずか⚠️ 🎁 残り3点 限定商品 ¥5,980 ¥3,980 在庫状況残り 3/100 セール終了まで 02 :15 :33 時間分秒 「今買わないと手に入らない」という緊急性を演出 |
| 誘惑の結びつけ (Temptation Bundling) | 楽しい活動と面倒なタスクを組み合わせることで、タスクの遂行を促進する手法。運動中だけ聴けるポッドキャストなど。 |
エンゲージメント
| 法則・原則 | 説明 |
|---|---|
| ドハティの閾値 (Doherty Threshold) | システムの応答時間が0.4秒を超えると、ユーザーの注意力と生産性が低下するという法則。高速なレスポンスがエンゲージメント維持に不可欠。 応答時間 0.4秒が分かれ目 快適ゾーン ストレスゾーン 0.4秒 0秒1秒2秒+ ⚡ 0.4秒以内
🐢 0.4秒以上
ユーザーが「待っている」と感じないレスポンス速度を維持する |
| 共感ギャップ (Empathy Gap) | デザイナーやチームがユーザーの実際のニーズ、感情、状況に共感できていない状態。ユーザーリサーチとペルソナ設計で埋める必要がある。 |
| ユーザー歓喜効果 (User Delight) | プロダクトの使用中に感じる予期せぬ喜びや驚き。マイクロインタラクション、イースターエッグ、パーソナライズされた体験などで創出。 |
| 反応型オンボーディング (Reactive Onboarding) | 事前に全てを説明するのではなく、ユーザーの行動やコンテキストに応じて適切なタイミングでガイダンスを提供するオンボーディング手法。 |
| 意図的な壁 (Intentional Friction) | 意図的にステップや確認を増やすことで、重要なアクション(削除、送金など)の誤操作を防いだり、ユーザーに考える時間を与えるデザイン手法。 |
引用・参考リンク
Related Cheatsheets
- 画像エフェクト-CSSで実現できる画像エフェクトのチートシートです。filter、clip-path、blend-modeなどを使った視覚効果と、AI画像生成用のプロンプト例をまとめました。
- テキストアニメーション-CSSで実現できるテキストアニメーションのチートシートです。フェードイン、スライド、タイプライター、グリッチ、ネオン効果など、様々なテキストエフェクトをライブプレビューで確認できます。
- CSSアニメーション-汎用的なCSSアニメーションのチートシートです。入場・退場・注目・変形・特殊効果・継続・ローディング・ホバーなど、様々なアニメーションをライブプレビューで確認できます。
- ローディングアニメーション-CSSで実現できるローディングアニメーションのチートシートです。スピナー、ドット、パルス、バー、スケルトン、プログレスバーなど、様々なローディング表現をライブプレビューで確認できます。
Related Goods
WebTerm - Recommended tools
WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。

WebTerm
Browser Terminal Sandbox for Learning CLI
All Cheatsheets


