UX心理学スキル
Webデザインの意思決定を支援するアドバイザリーレイヤー。ページやコンポーネントのデザイン中に、関連する行動心理学の原則を提示します。これは重み付けされた入力であり、美的判断、ブランドアイデンティティ、クリエイティブな方向性を上書きするものではありません。
使用するタイミング
ページ、コンポーネント、またはフローの構築またはデザイン後に呼び出します。このスキルはレビューレイヤーとして最適に機能します。まず構築し、その後心理学のレンズを適用して、見逃している点を見つけ出します。
- ランディングページ、価格ページ、オンボーディングフロー
- サブスクリプション/コンバージョンファネル
- ダッシュボードレイアウトとデータ表示
- ナビゲーションと情報アーキテクチャ
- Eコマースの商品ページとチェックアウトフロー
- ユーザーに特定のアクションを促したいあらゆるページ
意思決定プロセス
アクティブになったら、以下の順序に従います。
- ページタイプを特定する — ランディング、価格設定、オンボーディング、ダッシュボード、チェックアウトなど
- 最も関連性の高い3〜5の原則を抽出する（下記のページタイプ別処方箋から）
- 各原則について、以下の内容を述べる: 原則の説明 → この特定のページにどのように適用するか → アンチパターンはどのようなものか
- 制約と照らし合わせて重み付けする — ブランドアイデンティティ、アクセシビリティ、技術的要件が常に優先されます
- 具体的で実装可能な変更を推奨する — 抽象的なアドバイスではありません。マークアップ、レイアウト、またはコピーのどこを変更すべきかを示します。コードの行を指し示せる場合は、そうしてください。
重み付けの方法
心理学の原則は数ある入力のうちの1つです。優先順位の階層は以下の通りです。
- ブランドアイデンティティとクリエイティブビジョン（最優先 — サイトは適切に見え、感じられる必要がある）
- アクセシビリティとユーザビリティ（譲れない — WCAG準拠、タッチターゲット、コントラスト）
- 技術的品質（パフォーマンス、SEO、レスポンシブデザイン）
- 心理学の原則（このスキル — 露骨な操作ではなく、微妙な影響）
心理学のトリックのために美学やユーザーの信頼を犠牲にしないでください。原則が優れたデザインと矛盾する場合は、優れたデザインが優先されます。
このスキルがNOTなもの
- ダークパターンのハンドブックではありません — ここでのすべての原則は倫理的な適用のみです
- 完全なデザインシステムではありません — 既存のデザインスキルを強化します
- ユーザーリサーチの代わりにはなりません — 実際のユーザーデータは常に理論に勝ります
- 厳格なチェックリストではありません — 適合する原則を使用し、適合しないものは無視してください
ページタイプ別処方箋（インライン）
ページタイプごとの主要な原則を、クイックリファレンスとして自己完結的にまとめています。詳細なガイダンスとよくある間違いについては、knowledge/page-prescriptions.mdを参照してください。
ホームページ / ランディングページ
| 原則 | 適用方法 |
|---|---|
| 第一印象 | ヒーローは3秒以内に価値を伝える。50ミリ秒で形成される — 二度目のチャンスはない。 |
| アンカリング | 最も強い指標や主張を最初に提示する。最初に見た数字が基準となる。 |
| 社会的証明 | 実際の数字（ユーザー数、成果、実績）を早い段階で表示する。曖昧な主張はコンバージョンに繋がらない。 |
| 情報の香り | 明確なナビゲーション — ユーザーが次にどこへ行くべきか正確に分かる。 |
| 美的ユーザビリティ効果 | 視覚的な洗練は、コンテンツよりも先に信頼を獲得する。美しいものは使いやすく感じられる。 |
価格設定 / サブスクリプション
| 原則 | 適用方法 |
|---|---|
| アンカリング | プレミアムティアを最初に、または視覚的に最も目立つように表示する。他のすべてがお得に見える。 |
| 損失回避 | 有料ユーザーが得られるものだけでなく、無料ユーザーが逃すものを中心にフレーミングする。失うことは得ることの2倍のインパクトがある。 |
| デフォルト効果 | 推奨ティアを事前選択しておく。ほとんどのユーザーはデフォルトを変更しない。 |
| コミットメント/一貫性 | すでに無料機能を使用しているユーザーは、サブスクリプションの準備ができている — 各ステップが次のステップへと導く。 |
オンボーディング / サインアップ
| 原則 | 適用方法 |
|---|---|
| 段階的コミットメント | 最初に小さな無料アクション、次にアカウント、最後に支払い。 |
| 認知負荷 | 1画面に1質問が、長いフォームより勝る。必須でないものはすべて削除する。 |
| ツァイガルニク効果 | 進捗状況を表示する（ステップ2/4）。未完了のタスクは気になり続ける — ユーザーは完了するために戻ってくる。 |
| 返報性 | 情報を要求する前に価値を提供する。無料ツールアクセス、プレビュー、サンプル結果など。 |
ダッシュボード / データ表示
| 原則 | 適用方法 |
|---|---|
| チャンキング | データをカテゴリや優先度でグループ化する — 1つの巨大なリストにしない。 |
| 空間記憶 | 一貫したレイアウトにより、再訪問ユーザーがすぐに物を見つけられるようにする。レイアウトを変更しない。 |
| サティスファイシング | 最も重要な1つのインサイトを強調する。ユーザーは最初に許容できるオプションを選ぶ。 |
| 再認より想起 | 完全なコンテキスト（ラベル、タイムスタンプ、アイコン）を表示する — ユーザーに記憶を強要しない。 |
チェックアウト / 支払い
| 原則 | 適用方法 |
|---|---|
| 認知負荷 | ゲストチェックアウトオプション。最小限のフォームフィールド。一度に1つの決定。 |
| 透明性 | 支払いステップの前にすべてのコストを表示する。驚きの手数料はカート放棄の最大の原因。 |
| 損失回避 | 信頼バッジと保証を、フッターではなく支払いボタンの横に配置する。 |
| デフォルト効果 | 標準配送を事前選択する。「情報を保存」を事前チェックする。決定事項を減らす。 |
アバウト / 信頼ページ
| 原則 | 適用方法 |
|---|---|
| 権威性 | 方法論、データソース、チームの専門知識 — 自分が何をしているかを証明する。 |
| 信頼の階層 | このページはレベル2〜3（興味 → 確信）のユーザーにサービスを提供する。ここで売り込みをしない。 |
| 透明性 | 強みだけでなく、限界についても正直に。弱みを見せることは信頼を構築する。 |
コードレベルでの実装例
アンカリング（価格ページ）
Before — すべてのティアが同等で、アンカーがない状態:
<div class="plans">
<div class="plan">Basic — $19/mo</div>
<div class="plan">Pro — $49/mo</div>
<div class="plan">Enterprise — $99/mo</div>
</div>
After — Proが視覚的なデフォルトとしてアンカーされている状態:
<div class="plans">
<div class="plan">Basic — $19/mo</div>
<div class="plan featured"> <!-- 視覚的に目立ち、事前選択される -->
<span class="badge">最も人気</span>
Pro — $49/mo
</div>
<div class="plan">Enterprise — $99/mo</div>
</div>
理由: 注目されるティアがアンカーになります。Basicは比較して格安に感じられます。EnterpriseはProをリーズナブルに見せるために存在します。「最も人気」バッジは社会的証明を追加します。
損失回避（サブスクリプションCTA）
Before — 獲得フレーム:
<button>プレミアムアクセスを取得</button>
<p>すべての機能とプレミアムコンテンツのロックを解除します。</p>
After — 損失フレーム:
<button>プレミアムアクセスを維持する</button>
<p>プレミアムなしでは、デイリーインサイト、保存したダッシュボード、
および優先サポートへのアクセスを失います。</p>
理由: 「アクセスを失います」は損失回避を引き起こします（同等の獲得の約2倍強い）。CTAは「維持する」を使用しており、すでに持っているものを守る行為としてフレーミングしています。
ツァイガルニク効果（オンボーディングの進捗）
Before — 進捗表示なし:
<form>
<h2>あなたについて教えてください</h2>
{/* 1ページに8フィールド */}
</form>
After — ステップ分割と進捗表示:
<div className="progress-bar">
<div className="step completed">プロフィール</div>
<div className="step active">設定</div> {/* 現在 */}
<div className="step">確認</div>
</div>
<form>
<h2>ステップ 2/3 — あなたの設定</h2>
{/* 2〜3フィールドのみ */}
</form>
理由: 未完了のプログレスバーは心理的な緊張を生み出します。ユーザーは始めたことを完了するために戻ってきます。8フィールドを3ステップ（各2〜3フィールド）に分割することで、認知負荷を減らし、完了への引力を生み出します。
認知負荷（チェックアウト）
Before — アカウント作成の強制:
<h2>続行するにはアカウントを作成</h2>
<input placeholder="メールアドレス" />
<input placeholder="パスワード" />
<input placeholder="パスワード（確認）" />
<button>アカウント作成してチェックアウト</button>
After — ゲストチェックアウトとアカウント作成の延期:
<h2>チェックアウト</h2>
<input placeholder="メールアドレス（領収書用）" />
<button>今すぐ支払う</button>
<p class="subtle">次回のために情報を保存しますか？
<a href="/create-account">チェックアウト後にアカウントを作成</a>できます。</p>
理由: 余分なフィールドはすべて、放棄を引き起こす意思決定ポイントです。先に販売を完了させましょう。アカウント作成は、ユーザーがすでにコミットした後（コミットメント/一貫性の原則）の小さな要求です。
原則カテゴリ（11）
| カテゴリ | 数 | 核となる洞察 |
|---|---|---|
| 注意 | 4 | ユーザーが見るものはあなたが思うより少ない |
| ゲシュタルト | 8 | 視覚的なグループ化が理解を促進する |
| 記憶 | 10 | 再認は想起に勝る；すべてをチャンク化する |
| 意味付け | 3 | メンタルモデルが期待を形成する |
| 意思決定 | 5 | 選択肢を減らし、結果を明確に |
| 運動/相互作用 | 3 | 大きなターゲット、速い応答 |
| 動機付け | 4 | 自律性 + 有能感 + 関係性 |
| 認知バイアス | 10 | デフォルトは持続する；第一印象がアンカーとなる |
| 説得 | 9 | 頼む前に信頼を；約束する前に証明を |
| 感情 | 6 | 美しいものは使いやすく感じられる；喜びはロイヤルティを獲得する |
| 倫理 | 3 | 説得と操作の間にある明確な線 |
合計: 65の原則 — 完全なデータベースと定義、デザインへの影響についてはknowledge/principles.mdを参照してください。
アンチパターン（絶対にしてはいけないこと）
- 偽の希少性カウンター — 本物でなければ表示しない
- 確信犯的な恥辱（コンファームシェイミング） — 「いいえ、お金を節約したくありません」は操作的
- チェックアウト時の隠れたコスト — カート放棄の最大の原因
- 強制的な継続 — 解約が難しいサブスクリプションはすべての信頼を損なう
- 誤誘導 — 間違ったクリックを強制する視覚的なトリック
- 偽の社会的証明 — 偽造された推薦文や水増しされた数字
- ダークデフォルト — ユーザーが求めていないオプトインを事前チェックする
- ゴキブリホテルパターン — 入るのは簡単、出るのは不可能
出典
原則はNN/gのPsychology for UXスタディガイド（11カテゴリにわたる112のリソース）から導出され、実用的なデザインパターンに適応されています。学術的基盤: Kahneman（プロスペクト理論）、Norman（エモーショナルデザイン）、Cialdini（影響力）、Hick、Fitts、Miller、Zeigarnik。