product-ux-expert

プロダクト UX エキスパート

基本原則

• 認知負荷の軽減 — あらゆる操作に必要な精神的労力を最小限に抑えます
• アクセシビリティを最優先 — WCAG 2.2 AA を後回しにせず、最低限の基準とします
• エビデンスに基づく — 仮定ではなく、ユーザー調査に基づいて意思決定します
• 先回りしたデザイン — ユーザーが尋ねる前にニーズを予測します
• 倫理的なデザイン — ダークパターンを排除し、データの取り扱いを透明にします
• モバイルファースト — 最小の画面向けに設計し、大きな画面向けに拡張します

---

クイックリファレンス

Nielsen の 10 のヒューリスティック

#	ヒューリスティック	主な問い
1	システム状態の可視性	ユーザーは常に何が起きているか把握できますか？
2	システムと現実世界の一致	なじみのある言葉や概念が使われていますか？
3	ユーザーの制御と自由	ユーザーは簡単に取り消したり、終了したりできますか？
4	一貫性と標準	プラットフォームの慣習に従っていますか？
5	エラーの防止	エラーが起きる前に防げますか？
6	想起より認識	情報は記憶に頼らず、表示されていますか？
7	柔軟性と効率性	熟練者向けのショートカットがありますか？
8	美的でミニマルなデザイン	すべての要素が必要ですか？
9	ユーザーのエラー解決を支援	エラーメッセージは役に立ち、対処方法を示していますか？
10	ヘルプとドキュメント	必要なときにヘルプを利用できますか？

---

認知心理学

認知負荷の種類

Intrinsic Load     — Complexity inherent to the task itself
Extraneous Load    — Unnecessary complexity from poor design (eliminate this!)
Germane Load       — Mental effort for learning/understanding (support this)

主な法則

Hick's Law         — More choices = longer decision time
                   → Limit options to 5-7, use progressive disclosure

Miller's Law       — Working memory holds 7±2 items
                   → Chunk information, use visual grouping

Fitts's Law        — Larger, closer targets are easier to click
                   → Make primary actions big and accessible

Jakob's Law        — Users expect your site to work like others
                   → Follow established patterns

Von Restorff       — Different items are more memorable
                   → Highlight CTAs with contrast

Serial Position    — First and last items remembered best
                   → Put key info at start/end of lists

ゲシュタルト原則

Proximity          — Close elements are perceived as groups
Similarity         — Similar elements are perceived as related
Continuity         — Eyes follow smooth lines and curves
Closure            — Mind completes incomplete shapes
Figure-Ground      — Elements seen as foreground or background
Common Region      — Elements in same area are grouped

---

ヒューリスティック評価

プロセス

1. Define scope         — What screens/flows to evaluate
2. Select evaluators    — 3-5 UX experts (80%+ issues found)
3. Independent review   — Each expert reviews alone
4. Apply heuristics     — Rate severity for each issue
5. Consolidate          — Merge findings, remove duplicates
6. Prioritize           — Rank by severity × frequency
7. Report               — Actionable recommendations

重大度の評価

レベル	重大度	説明
0	問題なし	評価者は問題であることに同意しません
1	表面的	余裕がある場合にのみ修正します
2	軽微	優先度は低く、摩擦を引き起こします
3	重大	優先度が高く、大きな影響があります
4	致命的	リリース前に必ず修正します

問題のテンプレート

## Issue: [Brief Description]

**Heuristic:** #N - Name
**Severity:** 0-4
**Location:** Screen / Component / Flow

**Problem:**
What's wrong and why it matters to users.

**Evidence:**
Screenshot or recording link.

**Recommendation:**
Specific fix with before/after comparison.

---

ユーザージャーニーマッピング

ジャーニーマップの構成

┌─────────────────────────────────────────────────────────────────┐
│  PERSONA: [Name, Goals, Context]                                │
├─────────┬─────────┬─────────┬─────────┬─────────┬──────────────┤
│ Stage   │ Aware   │ Consider│ Purchase│ Use     │ Advocate     │
├─────────┼─────────┼─────────┼─────────┼─────────┼──────────────┤
│ Actions │ Search  │ Compare │ Signup  │ Onboard │ Share/Review │
├─────────┼─────────┼─────────┼─────────┼─────────┼──────────────┤
│ Touch-  │ Search  │ Website │ Checkout│ App     │ Social       │
│ points  │ Ads     │ Reviews │ Email   │ Support │ Email        │
├─────────┼─────────┼─────────┼─────────┼─────────┼──────────────┤
│ Emotions│   😐    │   🤔    │   😟    │   😊    │    😍        │
│         │ curious │ hopeful │ anxious │ relieved│  delighted   │
├─────────┼─────────┼─────────┼─────────┼─────────┼──────────────┤
│ Pain    │ Too many│ Info    │ Complex │ Unclear │ No referral  │
│ Points  │ options │ overload│ forms   │ next    │ program      │
├─────────┼─────────┼─────────┼─────────┼─────────┼──────────────┤
│ Opportu-│ Clear   │ Compare │ 1-click │ Progress│ Share        │
│ nities  │ tagline │ table   │ signup  │ tracker │ incentive    │
└─────────┴─────────┴─────────┴─────────┴─────────┴──────────────┘

タッチポイント分析

For each touchpoint, evaluate:

1. Entry Point      — How do users arrive?
2. User Goal        — What are they trying to accomplish?
3. Friction         — What slows them down?
4. Emotion          — How do they feel?
5. Drop-off Risk    — Where might they abandon?
6. Opportunity      — How can we improve?

---

アクセシビリティ（WCAG 2.2 AA）

POUR 原則

Perceivable     — Can users perceive the content?
                  ✓ Text alternatives for images
                  ✓ Captions for video
                  ✓ 4.5:1 color contrast
                  ✓ Resizable text (up to 200%)

Operable        — Can users operate the interface?
                  ✓ Keyboard accessible
                  ✓ No keyboard traps
                  ✓ Skip navigation links
                  ✓ Sufficient time limits
                  ✓ Focus visible (new in 2.2!)

Understandable  — Can users understand the content?
                  ✓ Language declared
                  ✓ Consistent navigation
                  ✓ Error identification
                  ✓ Labels and instructions

Robust          — Works with assistive technology?
                  ✓ Valid HTML
                  ✓ ARIA landmarks
                  ✓ Status messages announced

WCAG 2.2 の新機能（2023-2025）

Focus Not Obscured (AA)      — Focused element not fully hidden
Focus Appearance (AA)        — Visible focus indicator (2px outline)
Dragging Movements (AA)      — Alternatives to drag-and-drop
Target Size (AA)             — Minimum 24×24 CSS pixels
Consistent Help (A)          — Help mechanisms in consistent locations
Redundant Entry (A)          — Don't ask for same info twice
Accessible Authentication (A) — No cognitive function tests for login

クイックチェックリスト

## Accessibility Check

### Perceivable
- [ ] All images have meaningful alt text
- [ ] Videos have captions and transcripts
- [ ] Color contrast ratio ≥ 4.5:1 (text), ≥ 3:1 (large text)
- [ ] Information not conveyed by color alone
- [ ] Text can be resized to 200% without loss

### Operable
- [ ] All functionality available via keyboard
- [ ] Focus order is logical
- [ ] Focus indicator is visible (2px outline minimum)
- [ ] No keyboard traps
- [ ] Skip links provided
- [ ] Touch targets ≥ 24×24px

### Understandable
- [ ] Page language declared
- [ ] Consistent navigation across pages
- [ ] Form errors clearly identified
- [ ] Labels associated with inputs

### Robust
- [ ] Valid HTML (no duplicate IDs)
- [ ] ARIA roles used correctly
- [ ] Works with screen readers (NVDA/VoiceOver)

---

インタラクションパターン

マイクロインタラクション

Purpose of micro-interactions:
1. Feedback      — Confirm user action (button click, form submit)
2. Status        — Show current state (loading, progress)
3. Guidance      — Direct attention (onboarding tooltips)
4. Delight       — Create emotional connection (subtle animations)

Best Practices:
✓ Keep animations under 300ms
✓ Use easing (ease-out for exits, ease-in for entries)
✓ Respect prefers-reduced-motion
✓ Animate properties that don't trigger layout (transform, opacity)

モーションデザインの原則

Duration Scale:
- Micro (fade, state change)     →  100-200ms
- Small (dropdown, tooltip)      →  200-300ms
- Medium (modal, sidebar)        →  300-400ms
- Large (page transition)        →  400-500ms

Easing:
- ease-out    → Elements entering (decelerate into view)
- ease-in     → Elements exiting (accelerate out of view)
- ease-in-out → Elements moving (natural feel)

フォームデザイン

✓ One column layout (no side-by-side inputs)
✓ Labels above inputs (not placeholder-only)
✓ Group related fields visually
✓ Inline validation (after field blur)
✓ Clear error messages with solutions
✓ Show password option
✓ Autofill support (autocomplete attributes)
✓ Smart defaults based on context

---

デザインシステムとの統合

コンポーネントの状態

Every interactive component needs:

Default         — Normal resting state
Hover           — Mouse over (desktop)
Focus           — Keyboard focus (visible ring)
Active          — Being pressed/clicked
Disabled        — Not currently available
Loading         — Processing action
Error           — Validation failed
Success         — Action completed

デザイントークン

{
  "color": {
    "text": {
      "primary": "#1a1a1a",
      "secondary": "#6b6b6b",
      "disabled": "#a3a3a3",
      "inverse": "#ffffff"
    },
    "interactive": {
      "default": "#0066cc",
      "hover": "#0052a3",
      "active": "#003d7a",
      "focus": "#0066cc"
    },
    "feedback": {
      "error": "#d32f2f",
      "warning": "#f57c00",
      "success": "#388e3c",
      "info": "#1976d2"
    }
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px"
  },
  "radius": {
    "sm": "4px",
    "md": "8px",
    "lg": "16px",
    "full": "9999px"
  }
}

---

2025 年の UX トレンド

AI 主導のパーソナライゼーション

✓ Adaptive interfaces based on user behavior
✓ Predictive content suggestions
✓ Context-aware personalization
✓ Real-time UI adjustments

⚠️ Always provide transparency and user control
⚠️ Respect privacy, use on-device processing when possible

先回りしたデザイン

Design that:
- Predicts user needs before they ask
- Reduces decision fatigue with smart defaults
- Automates repetitive tasks
- Surfaces relevant information proactively

Example: Pre-filling shipping address based on previous orders

倫理的なデザインの実践

DO:
✓ Clear consent for data collection
✓ Easy-to-find privacy settings
✓ Honest product representations
✓ Sustainable design (reduce digital carbon)

DON'T (Dark Patterns):
✗ Confirmshaming ("No, I don't want to save money")
✗ Hidden costs
✗ Trick questions
✗ Forced continuity (hard-to-cancel subscriptions)
✗ Misdirection
✗ Roach motels (easy in, hard out)

---

評価テンプレート

# UX Evaluation Report

## Overview
- **Product:** [Name]
- **Scope:** [Screens/Flows evaluated]
- **Date:** [Date]
- **Evaluators:** [Names]

## Executive Summary
[2-3 sentences on overall UX health and critical findings]

## Methodology
- Nielsen's 10 Heuristics
- WCAG 2.2 AA Compliance Check
- Cognitive Load Analysis

## Findings by Severity

### Catastrophic (Severity 4)
[Issues that must be fixed immediately]

### Major (Severity 3)
[High priority issues]

### Minor (Severity 2)
[Low priority improvements]

## Accessibility Status
- [ ] WCAG 2.2 A Compliance
- [ ] WCAG 2.2 AA Compliance
- [ ] Screen Reader Compatible
- [ ] Keyboard Navigation Complete

## Recommendations
[Prioritized action items with effort estimates]

## Appendix
- Screenshot evidence
- User testing video clips
- Competitive analysis

---

関連項目

• reference/heuristics.md — ヒューリスティックの詳細な例
• reference/accessibility.md — WCAG 2.2 の完全なチェックリスト
• reference/psychology.md — 認知心理学の詳細
• reference/journey-mapping.md — ジャーニーマッピングのテンプレート