ux-design

UX デザインスキル

ユーザー中心の製品を作成するための、包括的な UX デザイン手法です。ユーザー体験の設計、フローの作成、ユーザビリティの評価、外部からの UX フィードバックの取得にこのスキルを使用します。

UX の基本原則

1. Jobs-to-be-Done（JTBD）

機能ではなく、ユーザーが達成しようとしていることに焦点を当てます。

Template:
When [situation], I want to [motivation], so I can [expected outcome].

Example:
When I have a character I love, I want to generate comic panels with them,
so I can tell stories without learning to draw.

2. 段階的な情報開示

各ステップで必要な情報だけを表示します。複雑さは、ユーザーが必要とする段階で明らかにします。

Level 1: Core action (upload, generate)
Level 2: Basic options (style, description)
Level 3: Advanced controls (parameters, fine-tuning)
Level 4: Expert features (custom LoRAs, composition)

3. 想起より認識

ユーザーがコマンドを覚えるのではなく、選択肢を認識できるようにします。

Bad: "Enter LoRA weight (0.0-1.0)"
Good: [Slider with preview] "Style strength: Subtle ←→ Strong"

4. エラーからの回復よりエラーの防止

エラーを適切に処理するだけでなく、エラーを未然に防ぐよう設計します。

Example: Disable "Generate" until character is locked, not "Error: No character"

5. 即時フィードバック

すべての操作に対し、100ms 以内に視覚的な反応を返します。

- Button press → visual state change
- Upload → progress indicator
- Generation → status updates ("Analyzing face...", "Applying style...")

UX デザインプロセス

フェーズ 1：調査と発見

1. User Interviews
   - Who are the target users?
   - What are they trying to accomplish?
   - What do they currently use? What's frustrating?
   - What would "magic" look like?

2. Competitive Analysis
   - What do competitors do well?
   - Where do they fail?
   - What's the table stakes?
   - What's the differentiation opportunity?

3. Jobs-to-be-Done Mapping
   - List all user jobs
   - Prioritize by frequency × importance
   - Identify underserved jobs

4. User Personas
   - 2-3 primary personas
   - Goals, frustrations, context
   - Technical proficiency level

フェーズ 2：情報アーキテクチャ

1. Content Inventory
   - What content/features exist?
   - How do they relate?

2. Site/App Map
   - Hierarchy of screens/pages
   - Navigation structure

3. User Flows
   - Primary task flows (happy path)
   - Error/edge case flows
   - Entry and exit points

フェーズ 3：インタラクションデザイン

1. Wireframes
   - Low-fidelity layouts
   - Component placement
   - Information hierarchy

2. Interaction Patterns
   - How does each element behave?
   - State transitions
   - Micro-interactions

3. Responsive Considerations
   - Desktop, tablet, mobile breakpoints
   - Touch vs mouse interactions

フェーズ 4：ビジュアルデザイン

1. Design System
   - Typography
   - Color palette
   - Spacing/grid
   - Component library

2. High-Fidelity Mockups
   - Pixel-perfect designs
   - All states (empty, loading, error, success)
   - Dark/light mode if applicable

3. Prototypes
   - Interactive clickable prototypes
   - Animation/transition specs

フェーズ 5：検証

1. Usability Testing
   - Task completion rates
   - Time on task
   - Error rates
   - User satisfaction

2. A/B Testing
   - Hypothesis-driven experiments
   - Statistical significance

3. Analytics
   - Funnel analysis
   - Drop-off points
   - Feature usage

UX の成果物

ユーザーフロー図の形式

[Entry Point] → (Decision) → [Screen/State] → [Exit/Success]
                    ↓
              [Alternative Path]

Legend:
[ ] = Screen or state
( ) = Decision point
→  = Flow direction
--- = Optional path

ワイヤーフレーム注釈の形式

┌─────────────────────────────────────────┐
│  [Component Name]                        │
│  ┌─────────────────────────────────────┐│
│  │                                     ││
│  │  ① Element description              ││
│  │  ② Interaction behavior             ││
│  │                                     ││
│  └─────────────────────────────────────┘│
│                                          │
│  Notes:                                  │
│  - Accessibility considerations          │
│  - Edge cases                            │
│  - Mobile behavior                       │
└─────────────────────────────────────────┘

① Numbered annotations reference specific elements
② Describe behavior, not just appearance

状態図の形式

State Machine: [Component Name]

States:
- idle: Default state
- loading: Async operation in progress
- success: Operation completed
- error: Operation failed

Transitions:
idle → loading: [trigger: user action]
loading → success: [trigger: operation complete]
loading → error: [trigger: operation failed]
error → idle: [trigger: dismiss/retry]

UX レビューの実施

UX に重点を置いたプロンプトを使用して、agent-review スキルを利用します。

# Get UX feedback on a flow
node .claude/skills/agent-review/query.mjs -m opus \
  -s "You are a senior UX designer with 15 years of experience in consumer products. Focus on usability, accessibility, and emotional design." \
  -f docs/ux-flow.md \
  "Review this user flow for usability issues and opportunities"

# Evaluate information architecture
node .claude/skills/agent-review/query.mjs -m opus \
  -s "You are an information architect specializing in complex creative tools. Prioritize discoverability and progressive complexity." \
  -f docs/site-map.md \
  "Evaluate this information architecture for a comic creation tool"

# Get feedback on wireframes
node .claude/skills/agent-review/query.mjs -m opus \
  -s "You are a UX designer who specializes in creative tools like Figma, Canva, and Adobe products. Focus on efficiency for power users while maintaining approachability." \
  -f docs/wireframes.md \
  "Critique these wireframes for a comic panel generator"

UX ヒューリスティックチェックリスト

このチェックリストを使ってデザインを評価します。

Nielsen のユーザビリティ 10 原則

• システム状態の可視性：ユーザーが常に状況を把握できる
• 現実世界との一致：慣れ親しんだ言葉や概念を使用する
• ユーザーのコントロールと自由：簡単に元に戻す、終了する、戻ることができる
• 一貫性と標準：同じ操作が常に同じように機能する
• エラーの防止：エラーが起きる前に防ぐ設計になっている
• 想起より認識：選択肢が表示され、記憶に頼らずに済む
• 柔軟性と効率性：上級者にはショートカットを、初心者にはシンプルさを提供する
• 美しさと最小限のデザイン：無関係な情報がない
• エラー発生時のユーザー支援：解決策を含む明確なエラーメッセージを表示する
• ヘルプとドキュメント：必要なときに利用できる

アクセシビリティ（WCAG）

• 知覚可能：あらゆる感覚でコンテンツを利用できる
• 操作可能：すべての機能をキーボードで操作できる
• 理解可能：明確な言葉と予測可能な動作を用いる
• 堅牢：支援技術と連携して動作する

感情的なデザイン

• 本能的：第一印象が好ましい
• 行動的：使い心地がよく、効率的である
• 内省的：使用後にユーザーが誇りや満足感を得られる

UX ライティングのガイドライン

マイクロコピーの原則

1. Be concise: "Upload" not "Click here to upload your files"
2. Be specific: "3 images required" not "Upload images"
3. Be helpful: "Try a front-facing photo" not "Invalid image"
4. Be human: "Almost there!" not "Processing: 80%"

ボタンのラベル

Good: [Create Comic] [Save Draft] [Generate Panel]
Bad: [Submit] [OK] [Go]

Action verbs that describe what happens

エラーメッセージ

Format: What happened + Why + How to fix

Example:
"Character not recognized. We couldn't detect a face in your images.
Try uploading photos with a clear, front-facing view."

読み込み状態

Informative progress, not just spinners:

"Analyzing your character..." (0-30%)
"Learning facial features..." (30-50%)
"Creating style profile..." (50-70%)
"Almost ready..." (70-100%)

出力テンプレート

UX ドキュメントを作成するときは、以下のテンプレートを使用します。

ユーザーストーリーテンプレート

## User Story: [Title]

**As a** [user type]
**I want to** [action]
**So that** [benefit]

### Acceptance Criteria
- [ ] Criterion 1
- [ ] Criterion 2

### UX Notes
- Key interaction details
- Edge cases to handle
- Accessibility considerations

画面仕様テンプレート

## Screen: [Name]

**Purpose:** What this screen accomplishes
**Entry Points:** How users arrive here
**Exit Points:** Where users can go from here

### Layout
[ASCII wireframe or description]

### Components
| Component | Behavior | States |
|-----------|----------|--------|
| Component 1 | Description | idle, hover, active, disabled |

### Interactions
1. When user does X, Y happens
2. ...

### Edge Cases
- Empty state: What shows when no data?
- Error state: What shows on failure?
- Loading state: What shows during async?

### Accessibility
- Keyboard navigation
- Screen reader considerations
- Color contrast

ユーザーフローテンプレート

## Flow: [Name]

**Goal:** What the user accomplishes
**Trigger:** What initiates this flow
**Actors:** Who is involved

### Happy Path
1. Step 1 → [Screen/State]
2. Step 2 → [Screen/State]
3. Success!

### Alternative Paths
- If [condition], then [alternative flow]

### Error Paths
- If [error], show [error state], user can [recovery action]

### Flow Diagram
[ASCII or mermaid diagram]

このスキルを使用する場面

• 新機能のデザイン：コードを書く前に、ユーザー体験を設計する
• UX レビュー：既存のデザインを評価し、ユーザビリティ上の問題を特定する
• ユーザーフローのマッピング：ユーザーがタスクを達成する方法を記録する
• ワイヤーフレーム作成：低忠実度のレイアウトを作成する
• インタラクションデザイン：要素の動作を定義する
• ユーザビリティ評価：デザインをヒューリスティック分析する
• UX ライティング：マイクロコピー、エラーメッセージ、オンボーディングテキストを作成する