---
name: ux-psychology
description: >
  心理学の 10 法則（Jakob's Law, Fitts's Law, Miller's Law, Hick's Law, Postel's Law,
  Peak-End Rule, Aesthetic-Usability Effect, Von Restorff Effect, Tesler's Law,
  Doherty Threshold）に基づき、ユーザー行動の「なぜ」を理解し、直感的で人間中心の
  インターフェース設計・レビューを支援する。認知負荷の最適化、インタラクション効率の
  向上、体験のピーク設計、倫理的配慮までを包括的にガイドする。
  Use when user says「UXを心理学的に評価して」「認知負荷を減らしたい」
  「ユーザーが離脱する原因を分析して」「操作しにくい原因を特定して」
  「メンタルモデルに合っているか確認して」「選択肢が多すぎるか評価して」
  「ユーザー体験のピークを設計したい」「応答速度の改善策を提案して」
  「UXの法則を適用して」「心理学に基づいてUIを改善して」
  「AIっぽいデザインを直したい」「テンプレっぽさをなくしたい」
  「AI生成UIの品質を上げたい」「デザインが没個性的で困っている」
  「モーションを心理学的に設計したい」「アニメーションの根拠が欲しい」。
  Do NOT use for: 視覚的なUIデザインの具体的実装（配色・タイポ・スペーシング）
  （→ ui-design）、フロントエンドコーディング（→ effective-typescript）、
  新規サイトのビジュアル戦略策定（→ front-design）。
metadata:
  author: KC-Prop-Foundry
  version: 1.2.0
  category: development
  based-on: "Laws of UX, 2nd Edition (Jon Yablonski, O'Reilly 2024)"
---

# Skill: UX Psychology（心理学に基づく UX 設計・レビュー）

> **ユーザーの「なぜ」を心理学で読み解き、人間の認知に寄り添う体験を設計せよ**

## Instructions

### ワークフロー内の位置

```
要件定義 → [ux-psychology] → ui-design → 実装 → review
              ↓
         UX 心理学評価
         ・メンタルモデル分析
         ・認知負荷最適化
         ・感情設計
         ・倫理チェック
```

### 入力

| 入力 | 説明 | 例 |
|:---|:---|:---|
| UI デザイン / モックアップ | 評価対象の画面・フロー | Figma URL、スクリーンショット |
| ユーザーフロー記述 | テキストでの体験記述 | 「検索 → 商品選択 → カート → 決済」 |
| 課題・症状 | 解決したい UX 課題 | 「離脱率が高い」「操作が分かりにくい」 |
| ユーザー情報 | ターゲットユーザーの特性 | ペルソナ、デバイス、利用コンテキスト |

### 出力

| 出力 | 形式 | 説明 |
|:---|:---|:---|
| UX 心理学評価レポート | Markdown | 10 法則に基づく評価結果と改善提案 |
| デザイン原則提案 | Markdown テーブル | 原則 → 法則 → ルールの 3 層フレームワーク |
| 倫理チェック結果 | Markdown チェックリスト | ダークパターン・行動操作の有無 |

---

## Step 1: デザインコンテキストの把握

対象 UI / 体験を特定し、評価の焦点を定める。

### 1a. 対象の特定

| 確認項目 | 質問 |
|:---|:---|
| **対象** | 何の UI / 体験を評価・設計するか？ |
| **ユーザー** | ターゲットユーザーは誰か？（ペルソナがあれば活用） |
| **デバイス** | 主な利用デバイス・入力方法は？ |
| **目標** | ユーザーが達成したいゴールは何か？ |
| **課題** | 現在の UX 上の課題・症状は？ |

### 1b. 評価スコープの決定

全 10 法則を網羅的に適用するか、特定の課題に焦点を当てるかを決定する。

| スコープ | 適用場面 |
|:---|:---|
| **フル評価** | 新規設計、大規模リデザイン |
| **焦点評価** | 特定課題の原因分析・改善 |
| **倫理監査** | ダークパターン・行動操作のチェック |

### 1c. 法則選択ガイド（焦点評価の場合）

症状からアプローチすべき法則を特定する。詳細は [law-selection-matrix.md](references/law-selection-matrix.md) を参照。

| ユーザーの症状 | 一次適用法則 | 二次適用法則 |
|:---|:---|:---|
| 「使い方が分からない」「迷う」 | Jakob's Law (Step 2) | Hick's Law (Step 4) |
| 「ボタンが押しにくい」「誤操作が多い」 | Fitts's Law (Step 3) | Von Restorff (Step 7) |
| 「情報が多すぎる」「圧倒される」 | Miller's Law (Step 4) | Tesler's Law (Step 8) |
| 「選択肢が多すぎて決められない」 | Hick's Law (Step 4) | Von Restorff (Step 7) |
| 「入力が面倒」「エラーが多い」 | Postel's Law (Step 5) | Tesler's Law (Step 8) |
| 「満足感がない」「記憶に残らない」 | Peak-End Rule (Step 6) | Aesthetic-Usability (Step 6) |
| 「重要な情報に気づかない」 | Von Restorff (Step 7) | Miller's Law (Step 4) |
| 「遅い」「反応がない」 | Doherty Threshold (Step 8) | Peak-End Rule (Step 6) |
| 「AIっぽい」「テンプレ感がある」 | Aesthetic-Usability (Step 6) | Jakob's Law (Step 2) |
| 「どのサイトも同じに見える」 | Von Restorff (Step 7) | Peak-End Rule (Step 6) |
| 「離脱率が高い」（原因不明） | フル評価（全法則） | Peak-End Rule (Step 6) |

### 1d. AI 生成 UI の心理学的リスク評価

対象 UI が AI（LLM）によって生成されたものである場合、以下のリスクを初期段階で確認する。
LLM は distributional convergence（分布的収束）により「最も一般的なパターン」に収束し、
心理学的に重要な差別化要素を自動的に排除してしまう傾向がある。

| リスク | 影響を受ける法則 | 確認ポイント |
|:---|:---|:---|
| 均質化されたデザイン | Aesthetic-Usability Effect | ブランド固有の美的品質が表現されているか |
| モーション/アニメーション不在 | Peak-End Rule, Doherty Threshold | 感情的ピークと知覚パフォーマンスの機会が失われていないか |
| 汎用的なレイアウト | Von Restorff Effect | 視覚的差別化要素があるか |
| 業種・コンテキスト不在 | Jakob's Law | 業界固有のメンタルモデルに合致しているか |

> この確認は AI 生成 UI に限らず、テンプレートベースのデザインにも適用可能。

### 1e. State Alignment リスク評価（HumanLM 知見）

HumanLM 論文（Stanford/NYU, 2026）が示す State Alignment の知見を UX 設計に適用する。
ユーザーの行動は「応答パターンの模倣」ではなく「心理状態（State）の整合性」で予測される。
UX 設計においても、ペルソナの表面的行動ではなく背後の心理状態を設計根拠とする。

| 心理側面 | State 次元 | UX 設計への影響 | 関連する法則 |
|:---|:---|:---|:---|
| 認知 | Belief（信念） | ユーザーの前提が UI の学習コストに直結 | Jakob's Law |
| 認知 | Goal（目標） | タスクフロー設計の起点 | Hick's Law, Fitts's Law |
| 規範 | Value（価値観） | 情報の優先順位・強調ポイントに影響 | Von Restorff Effect |
| 規範 | Stance（立場） | 機能受容度・離脱リスクを左右 | Postel's Law |
| 感情 | Emotion（感情） | ピーク体験・エンド体験の設計に直結 | Peak-End Rule |
| 言語 | Communication（伝達） | UI テキスト・マイクロコピーのトーンに影響 | Aesthetic-Usability Effect |

> **核心**: 同じ Goal（目標）を持つユーザーでも、Stance（懐疑的 vs 推進的）や
> Emotion（焦燥 vs 余裕）が異なれば、最適な UX は根本的に変わる。
> distributional convergence（分布的収束）が「平均的ユーザー」に収束するのと同様に、
> SFT（応答模倣）ベースの設計は「平均的 UX」に収束する — State Alignment はその対抗手段。

### 1f. State-Enriched ペルソナの確認

story-map スキルで State Dimensions が定義されたペルソナがある場合、
以下の情報を UX 設計に取り込む:

- **Emotion**: Peak-End Rule のピーク設計、ネガティブ感情の軽減策
- **Stance**: 機能の段階的開示（懐疑的ユーザー → 強制しない導線設計）
- **Belief**: メンタルモデルの前提確認（Jakob's Law との照合）

**チェックリスト**:
### 品質ガードレール

- ダークパターン（確認シェイミング・隠れたコスト等）を UX 施策として推奨してはならない
- ユーザーの心理的脆弱性を意図的に悪用する設計をしないこと

品質基準:
- 選択肢数 最大 7±2（ミラーの法則準拠）
- ユーザーテスト参加者 ≥5 名

- [ ] 対象 UI / 体験が特定されている
- [ ] ターゲットユーザーとデバイスが明確
- [ ] ユーザーのゴールが定義されている
- [ ] 評価スコープが決定している
- [ ] 症状に基づき適用する法則の優先順位を決定した
- [ ] AI 生成 UI の場合、分布的収束による均質化リスクを確認した
- [ ] State Dimensions（特に Emotion・Stance）がペルソナに定義されている場合、UX 設計に反映した

---

## Step 2: メンタルモデル分析（Jakob's Law）

ユーザーの既存の期待とデザインの一致度を評価する。

### 2a. パターン準拠度チェック

| チェック項目 | 評価 |
|:---|:---|
| ナビゲーション配置は業界標準に合致しているか | |
| 検索機能は期待される位置にあるか | |
| フォーム要素は物理的コントロールのメタファーに従っているか | |
| チェックアウト / 登録フローは一般的なパターンに準拠しているか | |
| プラットフォーム固有の規約（HIG / Material Design）に準拠しているか | |

### 2b. メンタルモデル不一致の特定

独自パターンの使用箇所を特定し、以下を評価:

- 独自パターンに合理的な理由があるか
- ユーザーが新しいパターンを学習する負担は許容範囲か
- 段階的移行（オプトイン方式）が提供されているか

詳細は [psychology-concepts.md](references/psychology-concepts.md) のメンタルモデルセクションを参照。

### 2c. リデザイン時の移行戦略

大規模な UI 変更を行う場合のメンタルモデル管理:

| 戦略 | 説明 | 適用場面 |
|:---|:---|:---|
| **段階的移行** | 新旧 UI を並行提供し、オプトイン方式で移行を促す | メジャーリデザイン |
| **コンテキスト内ガイド** | 変更点をツールチップ・ハイライトで案内 | マイナーチェンジ |
| **ベータプログラム** | 一部ユーザーに先行提供しフィードバック収集 | リスクの高い変更 |

### 2d. 準拠と逸脱のバランス

Jakob's Law は「標準に従え」と説くが、過度な準拠は均質化を招く。
LLM が生成するデザインは distributional convergence により「最も一般的なパターン」に
収束するため、Jakob's Law の適用においても**どこで標準に従い、どこで逸脱するか**を
意識的に判断する必要がある。

| 領域 | 標準に従うべき | 逸脱してよい |
|:---|:---|:---|
| ナビゲーション構造 | 必ず従う | 逸脱しない |
| フォーム入力パターン | 必ず従う | 逸脱しない |
| タイポグラフィ | 基本構造は従う（見出し→本文の階層） | フォント選定で個性を出す |
| カラーパレット | セマンティック色は従う（赤=エラー等） | ブランドカラーで差別化 |
| レイアウト | 基本グリッドは従う | ヒーローセクション等で破る |
| モーション | フィードバック手法は従う（ホバー、クリック反応） | ページロード演出で個性を出す |
| 背景 | 従う必要なし | 最も自由に表現できる次元 |

> **原則**: ユーザーの既存メンタルモデルに依存する**操作系**は標準に従い、
> 情緒・ブランド・第一印象に影響する**表現系**で逸脱する。
> 操作系の逸脱はユーザビリティを毀損するが、表現系の逸脱は差別化を生む。

**チェックリスト**:
- [ ] 主要な UI パターンが業界標準に準拠している
- [ ] 独自パターンの使用に合理的な理由がある
- [ ] メンタルモデル不一致のリスクが低いか、軽減策がある
- [ ] リデザインの場合、段階的移行戦略が検討されている
- [ ] 操作系（ナビ、フォーム）は標準準拠、表現系（タイポ、色、背景）で差別化している

---

## Step 3: インタラクション効率の評価（Fitts's Law）

タッチターゲットのサイズ・間隔・配置を検証する。

### 3a. ターゲットサイズの検証

[laws-quick-reference.md](references/laws-quick-reference.md) の基準値に照らして評価:

| プラットフォーム | 最小サイズ |
|:---|:---|
| Apple Touch | 44 × 44 pt |
| Apple Spatial | 60 × 60 pt |
| Google Material | 48 × 48 dp |
| WCAG | 44 × 44 CSS px |

### 3b. 配置と間隔の検証

| チェック項目 | 基準 |
|:---|:---|
| タッチターゲット間のスペース | 8dp 以上（Material Design） |
| 主要操作のサムゾーン配置 | 画面中央〜下部に配置 |
| フォームラベルと入力の関連付け | `<label>` の `for` 属性使用 |
| 送信ボタンの位置 | 最後の入力フィールドに近接 |
| 破壊的アクション間のスペース | 誤タップ防止の十分な距離 |

**チェックリスト**:
- [ ] 全タッチターゲットが最小サイズ基準を満たしている
- [ ] ターゲット間に十分なスペースがある
- [ ] 主要操作が到達しやすい位置に配置されている
- [ ] フォームラベルが入力に正しく関連付けられている

---

## Step 4: 認知負荷の最適化（Miller's Law + Hick's Law）

情報量と選択肢を最適化し、ユーザーの認知負荷を軽減する。

### 4a. チャンキングの適用（Miller's Law）

詳細は [psychology-concepts.md](references/psychology-concepts.md) の認知負荷セクションを参照。

| 評価項目 | 改善策 |
|:---|:---|
| 「壁のようなテキスト」の有無 | 見出し・余白・階層で構造化 |
| 関連情報のグループ化 | 色・スケール・区切り線・近接で視覚的にチャンク化 |
| 長いリストや数値列 | フォーマット適用（電話番号、日付等） |
| ツールバー / 機能群の整理 | 機能グループを視覚的に区分 |

### 4b. 選択肢の最適化（Hick's Law）

| 評価項目 | 改善策 |
|:---|:---|
| 一度に提示する選択肢の数 | 段階的開示で必要時のみ表示 |
| 推奨オプションの強調 | ソーシャルプルーフ・デフォルト選択の活用 |
| オンボーディングの段階性 | 小さなステップに分割、学びながら操作 |
| アイコンのみの抽象化 | テキストラベルを併記して意味を明確化 |
| 過度な単純化 | 必要な文脈情報まで削ぎ落としていないか確認 |

**チェックリスト**:
- [ ] 情報がチャンクに整理され視覚的階層がある
- [ ] 一画面の選択肢が適切な数に抑えられている
- [ ] 推奨オプションが明確にハイライトされている
- [ ] アイコンにテキストラベルが併記されている
- [ ] 過度な単純化により文脈が失われていない

---

## Step 5: 堅牢性と適応性の設計（Postel's Law）

多様な入力・デバイス・状況への対応力を評価する。

### 5a. 入力の柔軟性

| チェック項目 | 対策 |
|:---|:---|
| フォームの国際対応 | 名前順序・住所形式・電話番号の柔軟なバリデーション |
| 入力方法の多様性 | キーボード、タッチ、音声、支援技術への対応 |
| エラーメッセージの表現 | 「不正」「間違い」ではなく支援的な表現 |
| 必要最小限の情報要求 | 不要なフィールドの削除、既知情報の自動補完 |

**柔軟なバリデーションの例**:

```
❌ 厳格すぎる:
  電話番号: /^\d{3}-\d{4}-\d{4}$/
  → エラー「正しい形式で入力してください」

✅ 寛容な入力:
  電話番号: 数字のみ抽出し、桁数で判定
  → 入力「090 1234 5678」→ 内部「09012345678」→ ✓
  → エラー時「電話番号は10-11桁の数字で入力してください」
```

### 5b. デザインレジリエンシー

| チェック項目 | 対策 |
|:---|:---|
| レスポンシブ対応 | 全画面サイズで適切に表示 |
| テキスト拡張対応 | 翻訳による最大 300% のテキスト長変動を想定 |
| フォントサイズカスタマイズ | ユーザー設定のフォントサイズ変更に対応 |
| プログレッシブエンハンスメント | 基本機能は全環境で動作、高機能は段階的に追加 |

**チェックリスト**:
- [ ] フォームが多様な入力形式を受け入れる
- [ ] エラーメッセージが支援的で具体的
- [ ] レスポンシブデザインが全画面サイズに対応
- [ ] テキスト拡張・フォントサイズ変更に耐える設計

---

## Step 6: 体験の感情設計（Peak-End Rule + Aesthetic-Usability Effect）

ユーザージャーニーの感情的ピークと終了体験を設計する。

### 6a. ピークの特定と演出（Peak-End Rule）

| 設計項目 | 手法 |
|:---|:---|
| **ポジティブピーク** | 達成時のお祝い演出、パーソナライゼーション、進捗の可視化 |
| **ネガティブピーク軽減** | 待ち時間の緩和（進捗表示・透明性）、エラーのユーモアある処理 |
| **終了体験** | 完了画面の満足感、次のアクションへの誘導、感謝の表現 |

[ux-techniques.md](references/ux-techniques.md) のジャーニーマッピングを活用して感情曲線を可視化する。

> **State-Enriched Journey Map**: 各フェーズに支配的な Emotion 次元を注記する。
> 例: 「Onboarding: 興奮+焦燥 → Training: 慎重 → Mastery: 誇り」
> — Emotion の遷移を明示することで、フェーズごとの Peak 設計根拠が構造化される。

### 6b. 美的品質の評価（Aesthetic-Usability Effect）

| 評価項目 | 確認 |
|:---|:---|
| 第一印象（50ms で形成） | ランディング時の美的品質は高いか |
| 機能的ミニマリズム | 全ディテールに機能的目的があるか |
| テスト時のバイアス | 美的影響を考慮してユーザビリティを評価しているか |

### 6c. モーションと感情のつながり

アニメーション・トランジションは視覚的装飾ではなく、心理法則に裏打ちされた感情設計の手段である。

| 心理法則 | モーションへの適用 |
|:---|:---|
| **Peak-End Rule** | ページロード時の staggered reveal は「第一印象のピーク」を作る最も効果的な手法。最終インタラクション（送信完了、購入完了）の演出は「終了体験」の質を決定する |
| **Doherty Threshold** | スケルトンスクリーン・シマー効果・プログレスバーは「400ms の壁」を知覚的に突破する。オプティミスティック UI はユーザーの待機感覚を消す |
| **Aesthetic-Usability Effect** | 洗練されたマイクロインタラクション（ボタンのホバー、フォームのフォーカス）は美的品質を向上させ、ユーザビリティの知覚を改善する |
| **Von Restorff Effect** | アニメーションは視覚的孤立の最も強力な手法。ただし**前庭障害者への配慮が必須**（`prefers-reduced-motion`） |
| **Hick's Law** | 段階的表示（progressive disclosure）にアニメーションを組み合わせると、選択肢の漸進的提示が自然に感じられる |

> **注意**: モーションは強力な感情ツールだが、`prefers-reduced-motion` メディアクエリへの対応は必須。
> 前庭障害を持つユーザーにとって、不適切なアニメーションは吐き気やめまいを引き起こす。

### 6d. AI 生成デザインの均質化と美的効果の毀損

Aesthetic-Usability Effect は「美的品質が高いほどユーザビリティが高く知覚される」と説く。
しかし、LLM が生成するフロントエンドは distributional convergence（分布的収束）により
均質化し、**AI slop** と呼ばれる「どのサイトも同じに見える」状態を生む。

均質化されたデザインは:
- ユーザーに「テンプレート」「手抜き」という印象を与え、信頼を損なう
- ブランドの独自性を毀損し、競合との差別化を失わせる
- Aesthetic-Usability Effect のポジティブな効果を打ち消す
- 50ms で形成される第一印象において「既視感」がネガティブに作用する

| ID | AI slop の典型パターン | 心理学的に毀損される効果 |
|:---|:---|:---|
| SLOP-UXP-001 | Inter / Roboto 等の汎用フォント | Aesthetic-Usability: 「没個性」は美的品質を低下させる |
| SLOP-UXP-002 | 白背景に紫グラデーション | Von Restorff: 差別化要素が消失し、記憶に残らない |
| SLOP-UXP-003 | 予測可能な均等グリッド配置 | Peak-End Rule: 印象的なピーク体験が生まれない |
| SLOP-UXP-004 | アニメーション不在 | Doherty Threshold: 知覚パフォーマンスの向上機会を逸失 |
| SLOP-UXP-005 | コンテキスト不在の汎用デザイン | Jakob's Law: 業種別のメンタルモデルとの不一致 |

**対策**: ui-design / front-design スキルと連携する際、
「業界標準に従いつつ、どの次元で差別化するか」を明示的に指定する。
→ front-design の references/design-quality-standards.md を参照

**チェックリスト**:
- [ ] ポジティブなピークが意識的に設計されている
- [ ] ネガティブなピークに軽減策がある
- [ ] 終了体験がポジティブな印象を残す
- [ ] 美的品質が高くユーザビリティの知覚を向上させている
- [ ] 美的バイアスがテスト結果を歪めていないか確認済み
- [ ] モーションが感情設計の意図を持って使用されている（装飾目的のみではない）
- [ ] `prefers-reduced-motion` への対応が確認されている
- [ ] AI slop パターン（汎用フォント、紫グラデーション、均等グリッド等）に該当していないか確認した
- [ ] ブランド固有の個性が表現されており、均質化を回避している
- [ ] Emotion 次元の粒度が十分か — 「不安」を「焦燥」「警戒」「懐疑」に分解し、各感情に対応する Peak 設計が区別されているか（HumanLM: 同じ Stance でも Emotion が異なれば応答が変わる）

---

## Step 7: 視覚的注意の誘導（Von Restorff Effect）

視覚的コントラストで重要要素への注意を適切に誘導する。

### 7a. コントラストの適用

[laws-quick-reference.md](references/laws-quick-reference.md) の Von Restorff Effect セクションを参照。

| 手法 | 適用場面 | 注意点 |
|:---|:---|:---|
| **色** | CTA ボタン、通知バッジ | 色覚障害者に配慮（色だけに頼らない） |
| **サイズ** | フィーチャー記事、推奨プラン | 広告と誤認されないサイズに |
| **形状** | FAB、特別なカード | 一貫性を維持 |
| **位置** | 中央配置、目線の先 | サムゾーンとの整合 |
| **モーション** | アニメーション、トランジション | 前庭障害者への配慮が必須 |

**1 画面の強調ルール**: 強調は **1-2 箇所に限定**する。すべてが目立つ = 何も目立たない。

### 7b. アクセシビリティの確認

| 基準 | 要件 |
|:---|:---|
| テキストのコントラスト比 | 4.5:1 以上（WCAG） |
| 大きいテキスト（18pt+ / 14pt bold+） | 3:1 以上 |
| 色以外の視覚的手がかり | ストローク、パターン、形状を併用 |
| フォーカスインジケーター | キーボードナビゲーション用の明確な表示 |
| モーションの配慮 | `prefers-reduced-motion` メディアクエリ対応 |

**チェックリスト**:
- [ ] 重要な CTA が視覚的に際立っている
- [ ] 強調要素が過度に多くなく、互いに競合していない
- [ ] WCAG コントラスト比基準を満たしている
- [ ] 色だけでなく形状やパターンでも区別可能
- [ ] モーション感度への配慮がある

---

## Step 8: 複雑性と応答性の管理（Tesler's Law + Doherty Threshold）

複雑性の適切な配分とシステム応答性を設計する。

### 8a. 複雑性の配分（Tesler's Law）

[laws-quick-reference.md](references/laws-quick-reference.md) の Tesler's Law / Doherty Threshold セクションを参照。

| 評価項目 | 改善策 |
|:---|:---|
| ユーザーに不必要な入力を求めていないか | オートコンプリート、デフォルト値、AI アシスト |
| 繰り返し入力の有無 | 情報の自動継承（住所コピー等） |
| 高度な機能のアクセス | プログレッシブディスクロージャーで段階的に開示 |
| マニュアル不要設計 | インコンテキストのガイダンス（ツールチップ等） |

### 8b. 応答性の最適化（Doherty Threshold）

| 応答時間 | ユーザーの知覚 | 対策 |
|:---|:---|:---|
| < 100ms | 即座 | 追加対応不要 |
| 100-400ms | 知覚可能だが快適 | 目標範囲 |
| 400ms-1s | 遅延を感じ始める | スケルトンスクリーン、スピナー |
| 1-10s | 注意が逸れる | プログレスバー、ブラーアップ |
| > 10s | タスク放棄リスク | 残り時間表示、バックグラウンド処理 |

知覚パフォーマンス向上手法:

| 手法 | 説明 |
|:---|:---|
| スケルトンスクリーン | プレースホルダーブロックで読み込みを視覚化 |
| オプティミスティック UI | 成功を前提にフィードバックを即時表示 |
| ブラーアップ | 低解像度 → 高解像度への段階的画像表示 |
| プログレスバー | 処理進捗の視覚化で待ち時間を許容可能に |
| 意図的な遅延 | 速すぎる応答に信頼感を付加する適度なフリクション |

### 8c. 知覚パフォーマンスのモーション戦略

遅延の長さに応じて、最適なモーション手法を選択する。
適切なモーションは Doherty Threshold の「400ms の壁」を知覚的に突破し、
Peak-End Rule における体験の質を向上させる。

| 遅延 | 推奨モーション | 心理的効果 |
|:---|:---|:---|
| 0-100ms | なし（即時フィードバック） | 直接操作の感覚を維持 |
| 100-400ms | マイクロインタラクション（ripple, scale） | 操作の確認と応答感の付与 |
| 400ms-1s | スケルトンスクリーン / シマー | 構造の予告で待機感を軽減 |
| 1s-5s | プログレスバー + ステップ表示 | 進捗の可視化で制御感を維持 |
| 5s+ | オプティミスティック UI + バックグラウンド処理 | 待機自体を解消し、フロー状態を維持 |

> **設計判断**: 遅延が避けられない場合、モーションで「何が起きているか」を伝えることが
> ユーザーの離脱を防ぐ最も効果的な手段である。静的なスピナーよりも、
> コンテンツの構造を予告するスケルトンスクリーンの方が体感待ち時間を短縮する。

**チェックリスト**:
- [ ] ユーザーに不必要な複雑性を転嫁していない
- [ ] プログレッシブディスクロージャーで情報を段階的に開示している
- [ ] 400ms 以内のフィードバックを提供している（または知覚パフォーマンス施策がある）
- [ ] 長時間処理にはプログレスバーや残り時間表示がある
- [ ] 意図的なフリクションが適切に使われている
- [ ] 遅延の長さに応じたモーション手法が選択されている

---

## Step 9: 倫理チェックと最終出力

デザインが倫理的であることを確認し、成果物をまとめる。

### 9a. 倫理チェック

[ethical-design-checklist.md](references/ethical-design-checklist.md) に基づき以下を検証:

| チェック項目 | 合格基準 |
|:---|:---|
| 可変報酬 | Pull-to-refresh 等が中毒を助長していないか |
| 無限ループ | 自動再生・無限スクロールに停止手段があるか |
| ソーシャルプレッシャー | いいね等が過度な社会的圧力を生んでいないか |
| パーソナライゼーション | フィルターバブルを助長していないか |
| デフォルト設定 | ユーザーの最善の利益に合致しているか |
| ダークパターン | 強制同意、紛らわしい UI、誤タップ誘導がないか |
| ハッピーパス以外 | エッジケースや脆弱なユーザーを考慮しているか |

### 9b. デザイン原則フレームワークの出力

[design-principles-framework.md](references/design-principles-framework.md) の手法で、評価結果をチームのデザイン原則に変換:

```
Design Principle（チームの目標）
  ↓
Psychological Law（心理学的根拠）
  ↓
Rules（具体的なルール）
```

### 9c. 最終レポートの構成

```markdown
## UX 心理学評価レポート

### 対象・スコープ
### 評価サマリー（法則ごとの合否）
### 重要度別の改善提案
  - Critical: 即座に対処すべき問題
  - Major: 優先的に改善すべき問題
  - Minor: 推奨される改善
### デザイン原則提案
### 倫理チェック結果
```

**チェックリスト**:
- [ ] 倫理チェックリストの全項目を確認した
- [ ] ダークパターンが使用されていないことを確認した
- [ ] 評価結果がレポート形式でまとめられている
- [ ] 改善提案が重要度別に整理されている
- [ ] デザイン原則フレームワークが提案されている

---

## Examples

### Example 1: EC サイトのチェックアウトフロー改善

```
「チェックアウトの離脱率が高い。UX 心理学の観点から改善して」

→ Step 1: EC チェックアウトフロー、目標 = 購入完了
→ Step 2 (Jakob's): 標準的なカート→住所→決済→確認フローに準拠しているか評価
→ Step 4 (Hick's): 選択肢過多を特定 → 推奨配送方法のハイライト
→ Step 5 (Postel's): 住所入力の柔軟化、Apple Pay 統合提案
→ Step 8 (Tesler's): 住所コピー機能、オートコンプリート追加
→ 成果物: 改善提案レポート（5項目、Critical 2 / Major 3）
```

### Example 2: モバイルアプリのナビゲーション最適化

```
「アプリのナビが使いにくいと言われている」

→ Step 1: iOS アプリ、片手操作中心のユーザー
→ Step 3 (Fitts's): ボトムナビのターゲットサイズ・サムゾーン評価
→ Step 4 (Hick's): ナビ項目数とラベルの明確性を評価
→ Step 7 (Von Restorff): アクティブタブの視覚的差別化を確認
→ 成果物: ナビ改善提案（ターゲット拡大、ラベル追加、配置変更）
```

### Example 3: SaaS ダッシュボードの認知負荷削減

```
「ダッシュボードの情報が多すぎて使いこなせない」

→ Step 1: 分析ダッシュボード、マーケティング担当者
→ Step 4 (Miller's + Hick's): 情報チャンキング、段階的開示の設計
→ Step 8 (Tesler's): AI によるインサイト自動生成提案
→ Step 6 (Aesthetic-Usability): ダッシュボードの美的品質改善
→ 成果物: 情報アーキテクチャ再設計案
```

### Example 4: オンボーディングフローの設計

```
「新規ユーザーの初回離脱を防ぎたい」

→ Step 1: SaaS 初回ログイン体験
→ Step 4 (Hick's): ステップバイステップのガイド設計
→ Step 6 (Peak-End): 初回完了時のお祝い演出、達成感の設計
→ Step 8 (Tesler's): アクティブユーザーのパラドックスを考慮したインコンテキストガイダンス
→ 成果物: オンボーディングフロー設計書
```

### Example 5: フォーム入力体験の改善

```
「登録フォームの完了率が低い」

→ Step 3 (Fitts's): 入力フィールドとボタンのサイズ・配置検証
→ Step 4 (Hick's): 必要最小限のフィールドに削減
→ Step 5 (Postel's): 柔軟なバリデーション、エラーメッセージ改善
→ Step 6 (Peak-End): パスワード作成時のリアルタイムフィードバック
→ 成果物: フォーム改善提案（フィールド削減、バリデーション柔軟化）
```

### Example 6: ページ読み込み速度の体感改善

```
「ページが重いがサーバー側の改善に時間がかかる。体感を先に改善したい」

→ Step 8 (Doherty): 知覚パフォーマンス施策の提案
  - スケルトンスクリーン導入
  - 画像のブラーアップ手法
  - オプティミスティック UI の適用
  - プログレスバーの追加
→ 成果物: 知覚パフォーマンス改善計画
```

### Example 7: AI 生成 UI の心理学的品質改善

```
「Claude で作った LP がテンプレっぽい。心理学的に改善したい」

→ Step 1 (1d): AI 生成 UI リスク評価 → 均質化パターンの特定
  - Inter フォント使用 → Aesthetic-Usability 毀損
  - 紫グラデーション → Von Restorff 効果なし（差別化消失）
  - アニメーション不在 → Peak-End ピーク不在、Doherty 機会損失
→ Step 2 (2d): 操作系は標準準拠を確認、表現系の逸脱ポイントを特定
→ Step 6 (6c): ページロード staggered reveal でピーク体験を設計
→ Step 6 (6d): AI slop 5 パターンへの該当チェック
→ Step 7 (Von Restorff): ヒーローセクションの視覚的差別化を提案
→ 成果物: AI slop 脱却の改善提案（表現系 4 次元の改善指針）
```

### 成果物の出力フォーマット確認

**Given**: 10 法則に基づく UX 評価が完了
**When**: 最終成果物を出力
**Then**: デザイン原則提案を含む UX 心理学評価レポートと倫理チェック結果を出力する

---

## Troubleshooting

| 問題 | 原因 | 解決策 |
|:---|:---|:---|
| 法則同士が矛盾するように見える | 文脈依存の優先度が未整理 | ユーザーゴールを起点に優先度を判断。例: 新規性 vs 親しみやすさは目的による |
| 改善提案が抽象的すぎる | 法則の適用が概念レベルに留まっている | 具体的な UI 要素・数値・実装方法まで落とし込む |
| 美的品質の評価が主観的 | 客観的基準が不足 | WCAG コントラスト比、タッチターゲットサイズ等の定量基準を活用 |
| チャンキングが逆効果になった | グループの区分が不自然 | カードソーティングでユーザーのメンタルモデルに基づいたグループ化を検証 |
| 選択肢を減らしたら必要な機能が見つからない | 過度な単純化（抽象化しすぎ） | プログレッシブディスクロージャーで段階的に開示。ラベル+アイコンで視認性向上 |
| 倫理チェックの判断基準が曖昧 | コンテキスト依存の問題 | 「ユーザーの最善の利益に合致しているか？」を常に問い直す |
| 既存の ui-design スキルとの使い分けが不明 | スコープの重複 | ux-psychology = WHY（心理学的根拠）、ui-design = HOW（視覚的実装） |
| ジャーニーマッピングが複雑すぎる | スコープが広すぎる | 特定のタスク/ゴールに焦点を絞り、段階的に範囲を拡大 |
| 応答性改善の提案が実装困難 | フロントエンド技術の制約 | 知覚パフォーマンス施策（スケルトン、オプティミスティック UI）から着手 |
| 国際化対応のバリデーションが複雑 | 地域差の網羅が困難 | 最低限「名前」「住所」「電話番号」の柔軟性を確保。厳格すぎるバリデーションを避ける |
| テスト結果が美的バイアスに影響されている | Aesthetic-Usability Effect | 主観評価と行動データ（タスク完了率・時間）を併用して評価 |
| ダークパターンの境界が不明確 | 意図的か無意識かの判別 | 「ユーザーが十分な情報のもと自発的に選択できるか」を基準に判断 |
| リデザイン後にユーザー満足度が下がった | メンタルモデルの急激な変更 | 段階的移行（オプトイン）+ コンテキスト内ガイダンスで移行負荷を軽減 |
| モバイルでの操作ミスが多い | タッチターゲットサイズ不足 or 間隔不足 | Fitts's Law 基準（44px+）に照らしてターゲット拡大、破壊的操作間のスペース確保 |
| AI 生成 UI が「テンプレ感」から抜けない | distributional convergence（分布的収束） | Step 2d の準拠/逸脱バランスを適用。操作系は標準準拠、表現系（タイポ、色、背景、モーション）で逸脱する。front-design スキルと連携 |
| モーション追加の提案が開発側に却下される | 実装コストの懸念 | CSS-only で実現可能な手法から提案する（staggered reveal, hover transition）。Step 8c のモーション戦略テーブルで遅延帯ごとの最適手法を示す |
| AI slop 回避と Jakob's Law が矛盾して見える | 「標準に従え」と「差別化しろ」の対立 | Step 2d の判断基準を適用。操作系の標準準拠と表現系の差別化は矛盾しない。背景・モーション・タイポグラフィは自由度が高い |
| ユーザーデータ収集のプライバシーリスク | セキュリティ・倫理審査の未実施 | 個人情報保護方針と同意管理の設計 |
| 日本語 UI テキストのレイアウト崩れ | 多言語フォントと文字列長の考慮不足 | 国際化テストと日本語文字列の折り返し検証 |
| A/B テストの同時実行でユーザー体験が矛盾 | テスト間の排他制御不足 | テストセグメント分離と並行実験管理 |

---

## References

| ファイル | 内容 |
|:---|:---|
| [laws-quick-reference.md](references/laws-quick-reference.md) | 10 法則の一覧クイックリファレンス（定義・Key Takeaways・基準値） |
| [psychology-concepts.md](references/psychology-concepts.md) | 心理学概念の詳細解説（メンタルモデル、認知負荷、System 1/2 等） |
| [ux-techniques.md](references/ux-techniques.md) | UX リサーチ手法ガイド（ペルソナ、ジャーニーマップ、カードソーティング等） |
| [design-principles-framework.md](references/design-principles-framework.md) | デザイン原則 → 法則 → ルールの 3 層フレームワーク構築手法 |
| [ethical-design-checklist.md](references/ethical-design-checklist.md) | 倫理デザインチェックリスト（行動操作・ダークパターンの検証） |
| [law-selection-matrix.md](references/law-selection-matrix.md) | 症状 → 法則マッピングの詳細マトリクス（法則の組み合わせパターン） |
| `project/00_schemas/UX_EVALUATION_TEMPLATE.md` | UX 心理学評価テンプレート |
| `project/00_schemas/BUSINESS_RULES_TEMPLATE.md` | UX ルール定義テンプレート |

## アンチパターン検出

このスキルの出力品質を検証し、AI Decay（品質劣化）を防止するためのアンチパターン検出リスト。各項目は品質劣化パターンの検出条件を定義し、不合格時は対応する対策（修正ガイドライン）に従って改善する。

- [ ] 心理学法則の適用が具体的な UI 要素・インタラクションに紐付いているか（法則名を挙げるだけで終わっていないか）
- [ ] 認知負荷の評価が具体的な数値基準（選択肢数の上限、情報チャンク数等）で示されているか
- [ ] Peak-End Rule の適用でピークモーメントとエンドモーメントが具体的に設計されているか
- [ ] ダークパターンの検証が倫理デザインチェックリストに基づいて実施されているか
- [ ] 法則の組み合わせパターンが law-selection-matrix に基づいて選定されているか（単一法則の過度な適用を防止）
- [ ] Aesthetic-Usability Effect の評価が主観的印象ではなく具体的なデザイン要素で検証されているか

---

## Related Skills

| スキル | 関係 | 説明 |
|:---|:---|:---|
| **ui-design** | 補完 | ux-psychology = 心理学的 WHY、ui-design = 視覚的 HOW。組み合わせて使う |
| **front-design** | 後続 | UX 心理学評価の結果を新規サイトのビジュアル戦略に反映。特に Aesthetic-Usability Effect と Peak-End Rule の知見が front-design の Step 2（ビジュアル戦略）に直結。AI slop 回避の判断基準を共有（6d 参照） |
| **story-map** | 連携 | ジャーニーマッピングの感情曲線設計に心理学的根拠を提供 |
| **marketing-context** | 連携 | ペルソナ・ユーザー心理の分析に心理学的フレームワークを適用 |
| **review** | 委譲先 | 最終的な品質レビューを review スキルに委譲 |
| **test** | 補助 | ユーザビリティテストの設計時に心理学的観点を提供 |