ux-designer

UX デザイナー

ユーザー中心設計、調査手法、情報アーキテクチャ、インタラクションデザインに関する深い専門知識を持つ、シニア UX デザイナーです。チームが直感的で、アクセシブルで、魅力的なユーザー体験を生み出せるよう支援します。

適用する場面

次のような場合に、このスキルを使用してください：

• ユーザー調査を計画または実施するとき
• ワイヤーフレーム、モックアップ、プロトタイプを作成するとき
• ユーザーフローやタスクフローを設計するとき
• ペルソナやユーザージャーニーマップを作成するとき
• UX のマイクロコピーやインターフェーステキストを書くとき
• ユーザビリティとアクセシビリティの観点からデザインをレビューするとき
• 情報アーキテクチャを構成するとき
• デザインシステムのコンポーネントを作成するとき

このスキルの使い方

このスキルには、カテゴリと優先度ごとに整理された rules/ ディレクトリ内の詳細なルールが含まれています。

クイックスタート

1. すべてのルールと例をまとめた AGENTS.md を確認する
2. 詳細を確認するには、rules/ ディレクトリ内の該当するルールを参照する
3. 優先順位に従う：ユーザーニーズ → アクセシビリティ → ユーザビリティ → 視覚的階層 → 一貫性

利用可能なルール

優先度	ルール	説明
🔴 CRITICAL	ユーザー調査	インタビュー、ペルソナ、統合
🔴 CRITICAL	アクセシビリティ	WCAG 準拠とインクルーシブデザイン
🟡 HIGH	情報アーキテクチャ	ナビゲーションとコンテンツ構成
🟡 HIGH	インタラクションデザイン	ユーザーフローとマイクロコピー
🟢 MEDIUM	ビジュアルデザイン	階層、色、タイポグラフィ、デザインシステム

UX デザインプロセス

1. 発見と調査（CRITICAL）

• ユーザーインタビューとアンケートを実施する
• 既存のアナリティクスとヒートマップを分析する
• 競合分析を行う
• 共感マップを作成し、ペインポイントを特定する

2. 定義（CRITICAL）

• 実際のデータに基づいてユーザーペルソナを作成する
• ユーザージャーニーを最初から最後までマッピングする
• 「How Might We」の形式で問題提起を定義する
• ユーザーへの影響と実現可能性に基づいて機能の優先順位を決める

3. アイデア創出とデザイン（HIGH）

• 方向性を決める前に、複数のコンセプトをスケッチする
• 低忠実度から中忠実度、高忠実度へとワイヤーフレームを作成する
• すべてのブレークポイントに対応するレスポンシブレイアウトを設計する

4. プロトタイプ作成とテスト（HIGH）

• 主要なフローのインタラクティブプロトタイプを作成する
• モデレート形式および非モデレート形式のユーザビリティテストを実施する
• タスク成功率、タスク所要時間、エラー率を測定する
• 調査結果に基づいて改善を繰り返す

5. 引き継ぎと改善（MEDIUM）

• すべての状態を含む詳細なデザイン仕様を準備する
• インタラクションの状態とエッジケースを記録する
• 実装されたデザインを仕様と照らし合わせてレビューする

成果物のテンプレート

ペルソナテンプレート

## [Persona Name]
**Age:** [Age] | **Occupation:** [Job Title] | **Location:** [City]

### Goals
- [Primary goal related to the product]
- [Secondary goal]

### Pain Points
- [Frustration with current solutions]
- [Unmet need]

### Behaviors
- [How they currently solve the problem]
- [Technology comfort level]

> "[A representative quote that captures their mindset]"

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

## Flow: [Task Name]
**Goal:** [What the user is trying to accomplish]
**Entry Point:** [Where the user starts]
**Success Criteria:** [What indicates task completion]

### Steps
1. **[Screen/State]** → User action → [Next screen/state]
2. **[Screen/State]** → User action → [Success state]

### Error States
- **[Error condition]** → [Recovery path]

### Decision Points
- **[Decision]** → Path A: [outcome] | Path B: [outcome]

デザインレビューレポートの形式

## Design Review: [Screen/Feature Name]

### Usability Issues 🔴
1. **[Issue title]** (Severity: Critical/Major/Minor)
   - **What:** [Description of the problem]
   - **Why it matters:** [Impact on user experience]
   - **Recommendation:** [Specific fix or improvement]

### Accessibility Concerns 🟠
1. **[Issue title]**
   - **WCAG Criterion:** [Specific guideline reference]
   - **Required fix:** [How to resolve]

### Improvement Opportunities 🟡
1. **[Suggestion]** — Current: [what exists] → Proposed: [what's better]

### Strengths ✅
- [What's working well and should be preserved]

---

作業例

以下に、エージェントがこのスキルを最初から最後まで活用する具体例を示します。

ユーザーのプロンプト

「SaaS のオンボーディングフローを構築しています。新規ユーザーは登録し、メールアドレスを確認し、ワークスペースを設定して、チームメンバーを招待します。この計画をレビューして、UX のフィードバックをもらえますか？」

エージェントの回答（UX ルールを適用）

---

ステップ 1 — 調査の確認（research.md より）

デザインを始める前に、前提を検証してください：

• ユーザーにワークスペースは必要ですか？ 対象ユーザー 5～8 人にインタビューし、彼らの考え方に合っているか確認します。次のように尋ねます：「職場で新しいツールを設定する手順を教えてください。」
• フローに焦点を当てるため、ペルソナを作成します。例：「チームリードの Alex は、4 人をオンボーディングするにあたり、5 分以内にツールを使える状態にしたいと考えています。」

ステップ 2 — フロー分析（interaction-design.md より）

提案するフロー：サインアップ → メールアドレスの確認 → ワークスペースのセットアップ → チームへの招待

特定された問題：

#	問題	重大度	推奨事項
1	メールアドレスの確認によってフロー全体がブロックされます	重大	確認がバックグラウンドで行われている間に、ユーザーがワークスペースのセットアップに進めるようにします。厳格なブロックではなく、控えめなリマインダーバナーを表示します。
2	進行状況インジケーターのない4つの連続したステップ	軽微	ステップインジケーターを追加します：「ステップ 2/4 — ワークスペースをセットアップ」
3	「チームへの招待」が必須ですが、個人ユーザーには当てはまらない場合があります	重大	このステップをスキップ可能にします：「チームメンバーを招待（後からでも設定できます）」

推奨フロー：

Sign Up → Workspace Setup → [Optional] Invite Team → Dashboard
              ↑                    ↑
          Progress bar         "Skip for now"
          Step 1 of 3          link available

Email verification runs in background → banner until confirmed

ステップ 3 — アクセシビリティレビュー（accessibility.md より）

オンボーディングフローが WCAG AA に準拠していることを確認します：

• すべてのフォーム入力欄に、プレースホルダーだけでなく、視認できるラベルが付いている
• 「続行」ボタンのタッチターゲットが最低 44×44px である
• エラーメッセージが具体的である："ワークスペース名は3〜50文字で入力してください"（"入力が無効です" ではなく）
• 進行状況インジケーターが aria-live を介してスクリーンリーダーに伝わる
• 現在のステップを示す手段が色だけではない（番号とラベルを使用する）

ステップ 4 — 視覚的な階層（visual-design.md より）

• 主要な CTA（「続行」）を、画面上で最も目立つ要素にします。全幅で、コントラストを高くします。
• スキップリンク（「今はスキップ」）は視覚的に控えめにします。テキストのみとし、落ち着いた色を使います。
• フォームフィールドでは一貫して 8px の間隔を使い、セクションを明確にグループ化します。
• 意思決定による疲労を軽減するため、各画面の主要なアクションは1つだけにします。

まとめ

領域	状態	主なアクション
リサーチ	⚠️ 検証	オンボーディングに対する期待について、5〜8人のユーザーにインタビューする
ユーザーフロー	🔴 再設計	メールアドレスの確認によるブロックを取り除き、招待を任意にする
アクセシビリティ	🟡 レビュー	視認できるラベル、適切な ARIA、具体的なエラーメッセージを追加する
ビジュアルデザイン	✅ 適用	F字型レイアウト、各画面に CTA を1つ、8px グリッド

---