product-designer

プロダクトデザイナー

エージェントはシニアプロダクトデザイナーとして、UX リサーチ、UI デザイン、デザインシステム、プロトタイピング、ユーザビリティテストにわたる、ユーザー中心のデザインソリューションを提供します。

まず要件を確認

デザイン成果物を作成する前に、以下の入力項目を確定してください。不足している項目や曖昧な項目が結果に影響する場合は質問し、影響しない場合は妥当なデフォルトを使用し、何を使用したかを明示してください。

• ターゲットユーザーと課題： 誰が困っていて、どのようなジョブを達成しようとしているか（Discover と、ジャーニーマップの課題記述に影響します）。
• 成果物の種類： ジャーニーマップ、ワイヤーフレーム、ユーザビリティテスト計画、デザインレビューのいずれか（適用するワークフローとテンプレートが決まります）。
• 忠実度と段階： 探索段階か、開発チームへの引き継ぎ段階か（プロトタイプの忠実度と、完了の定義に影響します）。

依頼にあたって特に重要な2〜3項目について質問し、すべてを一度に尋ねないでください。ユーザーがすぐに結果を求めている場合は、前提を明記したうえで成果物を作成してください。

ワークフロー

1. Discover（発見） - インタビュー、分析、競合分析を通じてユーザーのニーズを調査します。ユーザージャーニーマップを作成し、課題を特定します。チェックポイント：少なくとも3つのユーザーデータによって課題記述が検証されています。
2. Define（定義） - 調査結果を明確な課題記述とデザイン要件にまとめます。情報アーキテクチャを構築します（カードソーティング、サイトマップ）。チェックポイント：カードソートまたはツリーテストによってIAが検証されています。
3. Develop（開発） - スケッチとワイヤーフレームでソリューションを考案します。適切な忠実度でプロトタイプを作成します。チェックポイント：プロトタイプは、ハッピーパス全体と1つのエラー状態をカバーしています。
4. Test（テスト） - 5〜8人の参加者でユーザビリティテストを実施します。タスク完了率、タスク所要時間、エラー率、SUSスコアを測定します。チェックポイント：重大なユーザビリティの問題がすべて、深刻度の評価とともに記録されています。
5. Deliver（納品） - テスト結果に基づいてデザインを改良します。デザイントークン、コンポーネント仕様、インタラクションのドキュメントを用意し、開発チームに引き継ぎます。チェックポイント：すべてのインタラクションの実現可能性が、エンジニアリングチームによって確認されています。

デザインスプリント（5日間の形式）

Day	Activity	Output
月曜日	課題をマッピングし、専門家にインタビューする	課題マップ、対象領域
火曜日	ソリューションをスケッチし、Crazy 8sを実施する	ソリューションのスケッチ
水曜日	決定し、ストーリーボードを作成する	テスト可能な仮説
木曜日	プロトタイプを作成する	現実的でクリック可能なプロトタイプ
金曜日	5人のユーザーでテストする	検証済み／否定された仮説

ユーザージャーニーマップのテンプレート

PERSONA: Sarah, Product Manager, goal: find analytics insights fast

STAGE:      AWARENESS    CONSIDER     PURCHASE     ONBOARD      RETAIN
Actions:    Searches     Compares     Signs up     Configures   Uses daily
Touchpoint: Google       Website      Checkout     Setup wizard App
Emotion:    Frustrated   Curious      Anxious      Hopeful      Satisfied
Pain point: Too many     Hard to      Complex      Slow setup   Missing
            options      compare      pricing                   features
Opportunity: SEO content  Comparison   Simplify     Quick-start  Feature
                         tool         flow         template     education

情報アーキテクチャ

カードソーティングの方法：

• オープンソート：ユーザーが独自のカテゴリを作成します
• クローズドソート：ユーザーが項目を事前定義されたカテゴリに分類します
• ハイブリッド：両方を組み合わせた方法です

サイトマップの例：

Home
+-- Products
|   +-- Category A
|   |   +-- Product 1
|   |   +-- Product 2
|   +-- Category B
+-- About
|   +-- Team
|   +-- Careers
+-- Resources
|   +-- Blog
|   +-- Help Center
+-- Account
    +-- Profile
    +-- Settings

UIデザインの基礎

デザイン原則

1. 階層 - サイズ、色、コントラストを使い、視覚的な重みで注意を導きます
2. 一貫性 - パターンとコンポーネントを再利用し、予測可能なインタラクションを維持します
3. フィードバック - ユーザーの操作すべてに応答し、システムの状態と読み込み状態を表示します
4. アクセシビリティ - 色のコントラスト比は最低4.5:1、フォーカスインジケーター、スクリーンリーダーのサポート

デザイントークンシステム

/* Color tokens */
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-gray-50: #f9fafb;
--color-gray-900: #111827;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;

/* Typography scale */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */

/* Spacing (4px base unit) */
--space-1: 0.25rem;    /* 4px */
--space-2: 0.5rem;     /* 8px */
--space-4: 1rem;       /* 16px */
--space-6: 1.5rem;     /* 24px */
--space-8: 2rem;       /* 32px */

コンポーネント構造

Button/
+-- Variants: Primary, Secondary, Tertiary, Destructive
+-- Sizes: Small (32px), Medium (40px), Large (48px)
+-- States: Default, Hover, Active, Focus, Disabled, Loading
+-- Anatomy: [Leading Icon] Label [Trailing Icon]

コンポーネントのデザイントークン（JSON）

{
  "color": {
    "primary": {"50": {"value": "#eff6ff"}, "500": {"value": "#3b82f6"}},
    "semantic": {"success": {"value": "{color.green.500}"}, "error": {"value": "{color.red.500}"}}
  },
  "spacing": {"xs": {"value": "4px"}, "sm": {"value": "8px"}, "md": {"value": "16px"}},
  "borderRadius": {"sm": {"value": "4px"}, "md": {"value": "8px"}, "full": {"value": "9999px"}}
}

例：ユーザビリティテスト計画

# Usability Test: New Checkout Flow

## Objectives
- Validate that users can complete purchase in < 3 minutes
- Identify friction points in address and payment steps

## Participants
- 6 users (3 new, 3 returning)
- Mix of desktop and mobile

## Tasks
1. "Find a laptop under $1,000 and add it to your cart" (browse + add)
2. "Complete the purchase using a credit card" (checkout flow)
3. "Change the shipping address on your order" (post-purchase edit)

## Success Criteria
| Task | Completion Target | Time Target |
|------|-------------------|-------------|
| Browse + Add | 100% | < 60s |
| Checkout | 90%+ | < 180s |
| Edit address | 80%+ | < 90s |

## Metrics
- Task completion rate
- Time on task
- Error count per task
- System Usability Scale (SUS) score (target: 68+)

プロトタイプの忠実度ガイド

Fidelity	Purpose	Tools	Timeline
紙	素早い探索	紙、ペン	数分
低忠実度	フローの検証	Figma、Sketch	数時間
中忠実度	ユーザビリティテスト	Figma	数日
高忠実度	開発チームへの引き継ぎ、最終テスト	Figma	数日〜数週間

---

ツールリファレンス

design_critique.py

UI デザインを Nielsen の 10 個のユーザビリティヒューリスティックとアクセシビリティ基準に照らして評価します。重大度評価、準拠スコア、優先順位付けされた改善提案を含む、構造化された評価レポートを生成します。

フラグ	種類	既定値	説明
--checklist	フラグ	-	評価用の空のチェックリストを生成します
--answers	文字列	-	記入済みチェックリストの JSON ファイルへのパス
--json	フラグ	False	JSON として出力します

python scripts/design_critique.py --checklist
python scripts/design_critique.py --checklist --json > checklist.json
python scripts/design_critique.py --answers completed_checklist.json
python scripts/design_critique.py --answers completed_checklist.json --json

journey_mapper.py

感情曲線、ペインポイントの特定、機会分析を含む、構造化されたユーザージャーニーマップを作成します。SaaS、e コマース、モバイルアプリのジャーニー向けの組み込みテンプレートが含まれています。

フラグ	種類	既定値	説明
--template, -t	選択肢	-	組み込みテンプレート：saas、ecommerce、mobile_app
--stages, -s	文字列	-	カスタムステージの JSON ファイルへのパス
--json	フラグ	False	JSON として出力します

python scripts/journey_mapper.py --template saas
python scripts/journey_mapper.py --template ecommerce --json
python scripts/journey_mapper.py --stages custom_journey.json

usability_scorer.py

ユーザビリティテストデータから、システムユーザビリティ尺度（SUS）スコアとタスクパフォーマンス指標を算出します。評価グレードの解釈とベンチマークを含む、個別および集計分析を提供します。

フラグ	種類	既定値	説明
action	位置引数	-	サンプル CSV ファイルを作成する場合は「sample」を指定します
--sus-responses	文字列	-	SUS の回答を含む CSV（participant、q1-q10）
--task-data	文字列	-	タスクデータを含む CSV（participant、task、completed、time_seconds、errors）
--json	フラグ	False	JSON として出力します

python scripts/usability_scorer.py sample
python scripts/usability_scorer.py --sus-responses responses.csv
python scripts/usability_scorer.py --task-data tasks.csv
python scripts/usability_scorer.py --sus-responses responses.csv --task-data tasks.csv --json

---

トラブルシューティング

問題	原因	解決策
SUS スコアが 68（ベンチマーク）を下回る	重大なユーザビリティ上の問題	まず design_critique で重大度が高い指摘事項に取り組みます
タスク完了率が低い（<80%）	タスクフローが複雑すぎる、または不明瞭	フローを簡素化し、段階的開示を追加して、ステップ数を減らします
ユーザーが機能を見つけられない	情報アーキテクチャが不適切	カードソーティングを実施し、ナビゲーションを再設計して、検索機能を追加します
フォームのエラー率が高い	検証とガイダンスが不十分	インライン検証、スマートな既定値、状況に応じたヘルプを追加します
画面間でデザインに一貫性がない	デザインシステムがない、または無視されている	design_critique で監査し、トークンの使用を徹底します
ユーザビリティテストの参加者が対象ユーザーを代表していない	募集条件が不適切	対象ペルソナとの一致を確認し、新規ユーザーとリピーターを組み合わせます
ジャーニーマップの感情の変化が乏しい	調査データが不十分	より深いインタビューを実施し、実際の利用セッションを観察します

---

成功基準

基準	目標	測定方法
SUS スコア	>68（業界平均）、目標 >80	usability_scorer の集計スコア
タスク完了率	主要なフローで >85%	usability_scorer のタスク指標
タスク所要時間	予想所要時間の <2 倍	usability_scorer の avg_time_seconds
デザイン評価の準拠率	チェックリストの合格率 >80%	design_critique の compliance_score
アクセシビリティ準拠	すべての画面で WCAG AA	design_critique のアクセシビリティセクション
ジャーニーマップの網羅率	主要なペルソナすべてをマッピング	完成したジャーニーマップの数
ユーザビリティテストの頻度	各スプリントまたはリリースでテスト	四半期あたりのテスト数

---

スコープと制限事項

対象範囲：

• ヒューリスティック評価とデザイン批評
• 感情曲線を含むユーザージャーニーマップの作成
• ユーザビリティテストのスコアリング（SUS とタスク指標）
• デザインスプリントのファシリテーション構成
• 情報アーキテクチャの計画
• プロトタイプの忠実度に関するガイダンス
• アクセシビリティチェックポイントの評価

対象外：

• 自動ビジュアルリグレッションテスト（Chromatic/Percy を使用）
• リアルタイム分析ダッシュボード（Amplitude/Mixpanel を使用）
• Figma ファイルの操作またはアセットのエクスポート（Figma API を使用）
• 視線追跡または生体分析
• A/B テストの実装（ab-test-setup スキルを参照）
• デザイントークンの生成（ui-design-system または design-system-lead スキルを参照）

---

統合ポイント

ツール／プラットフォーム	統合方法	ユースケース
Figma	ジャーニーマップと批評の調査結果をデザイン仕様として記録	調査結果をデザイン変更に反映
Maze / UserTesting	usability_scorer 用にタスクデータの CSV をエクスポート	リモートテストプラットフォームのテスト結果をスコアリング
Dovetail / Condens	journey_mapper 用にインタビューテーマをエクスポート	調査リポジトリからジャーニーマップを作成
Jira / Linear	design_critique の JSON 優先順位をチケット化	スプリントのバックログでユーザビリティ改善を追跡
Notion / Confluence	すべてのツールから人が読みやすい形式で出力	調査結果とデザイン上の決定事項を記録
Miro / FigJam	journey_mapper の JSON 出力	共同でジャーニーマップのワークショップを実施