プロダクトデザイナー

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

ワークフロー

1. 探索（Discover） - インタビュー、分析、競合分析を通じてユーザーニーズをリサーチします。ユーザージャーニーマップを作成し、ペインポイントを特定します。チェックポイント: 問題ステートメントが少なくとも3つのユーザーデータポイントによって検証されている。
2. 定義（Define） - 調査結果を明確な問題ステートメントとデザイン要件に統合します。情報アーキテクチャ（カードソート、サイトマップ）を構築します。チェックポイント: IAがカードソートやツリーテストで検証されている。
3. 開発（Develop） - スケッチングとワイヤーフレーミングを通じてソリューションをアイデア出しします。適切なフィデリティのプロトタイプを構築します。チェックポイント: プロトタイプが完全なハッピーパスと1つのエラー状態をカバーしている。
4. テスト（Test） - 5～8人の参加者とのユーザビリティテストを実施します。タスク完了率、タスクにかかった時間、エラー率、SUSスコアを測定します。チェックポイント: すべての重大なユーザビリティの問題が重度評価とともに文書化されている。
5. 納品（Deliver） - テスト結果に基づいてデザインを改善します。デザイントークン、コンポーネント仕様、インタラクションドキュメントを使用して開発者へのハンドオフを準備します。チェックポイント: エンジニアがすべてのインタラクションの実装可能性を確認している。

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

日	アクティビティ	成果物
月曜日	問題をマップする、専門家にインタビューする	チャレンジマップ、対象エリア
火曜日	ソリューションをスケッチする、Crazy 8s	ソリューションスケッチ
水曜日	決定する、ストーリーボードを作成する	テスト可能な仮説
木曜日	プロトタイプを構築する	リアルなクリック可能なプロトタイプ
金曜日	5人のユーザーでテストする	検証/無効化された仮説

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

ペルソナ: Sarah、プロダクトマネージャー、目標: 分析インサイトを素早く見つける

ステージ:     認識        検討        購入        オンボード    継続
アクション:   検索する    比較する    サインアップ  設定する     毎日使う
タッチポイント: Google     ウェブサイト チェックアウト セットアップウィザード アプリ
感情:        イライラ    興味津々    不安        希望        満足
ペインポイント: 選択肢が多 比較しにくい 複雑な      設定に      機能が
            すぎる              価格設定     時間がかかる 足りない
機会:        SEOコンテンツ 比較ツール   フロー簡略化 クイックスタート 機能教育
                                                テンプレート

情報アーキテクチャ

カードソート方法:

• オープンソート: ユーザーが独自のカテゴリを作成する
• クローズドソート: ユーザーがアイテムを事前定義されたカテゴリに分類する
• ハイブリッド: 組み合わせアプローチ

サイトマップの例:

ホーム
+-- 製品
|   +-- カテゴリA
|   |   +-- 製品1
|   |   +-- 製品2
|   +-- カテゴリB
+-- について
|   +-- チーム
|   +-- 採用情報
+-- リソース
|   +-- ブログ
|   +-- ヘルプセンター
+-- アカウント
    +-- プロフィール
    +-- 設定

UIデザインの基礎

デザイン原則

1. 階層構造（Hierarchy） - 視覚的な重みがサイズ、色、コントラストで注目を導く
2. 一貫性（Consistency） - パターンとコンポーネントを再利用し、予測可能なインタラクションを維持する
3. フィードバック（Feedback） - あらゆるユーザーアクションを認識し、システムのステータスと読み込み状態を表示する
4. アクセシビリティ（Accessibility） - 4.5:1のカラーコントラスト最小値、フォーカスインジケータ、スクリーンリーダーサポート

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

/* カラートークン */
--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;

/* タイポグラフィスケール */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */

/* スペーシング（4pxベースユニット） */
--space-1: 0.25rem;    /* 4px */
--space-2: 0.5rem;     /* 8px */
--space-4: 1rem;       /* 16px */
--space-6: 1.5rem;     /* 24px */
--space-8: 2rem;       /* 32px */

コンポーネント構造

ボタン/
+-- バリアント: Primary、Secondary、Tertiary、Destructive
+-- サイズ: Small (32px)、Medium (40px)、Large (48px)
+-- ステート: Default、Hover、Active、Focus、Disabled、Loading
+-- アナトミー: [先頭アイコン] ラベル [末尾アイコン]

コンポーネントデザイントークン（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"}}
}

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

# ユーザビリティテスト: 新しいチェックアウトフロー

## 目標
- ユーザーが3分以内に購入を完了できることを検証する
- アドレスと支払いステップでの摩擦ポイントを特定する

## 参加者
- 6人のユーザー（新規3名、リピーター3名）
- デスクトップとモバイルの組み合わせ

## タスク
1. 「1,000ドル未満のラップトップを見つけてカートに追加してください」（ブラウズ+追加）
2. 「クレジットカードを使用して購入を完了してください」（チェックアウトフロー）
3. 「注文の配送先住所を変更してください」（購入後の編集）

## 成功基準
| タスク | 完了目標 | 時間目標 |
|------|-------------------|-------------|
| ブラウズ+追加 | 100% | <60秒 |
| チェックアウト | 90%以上 | <180秒 |
| アドレス編集 | 80%以上 | <90秒 |

## メトリクス
- タスク完了率
- タスクにかかった時間
- タスク単位のエラー数
- System Usability Scale（SUS）スコア（目標: 68以上）

プロトタイプフィデリティガイド

フィデリティ	目的	ツール	期間
ペーパー	迅速な検討	紙、ペン	数分
ロー	フロー検証	Figma、Sketch	数時間
ミッド	ユーザビリティテスト	Figma	数日
ハイ	開発者ハンドオフ、最終テスト	Figma	数日～数週間

スクリプト

# デザイントークンジェネレータ
python scripts/token_generator.py --source tokens.json --output css/

# アクセシビリティチェッカー
python scripts/a11y_checker.py --url https://example.com

# アセットエクスポーター
python scripts/asset_export.py --figma-file FILE_ID --format svg,png

# デザインQAレポート
python scripts/design_qa.py --spec spec.figma --impl https://staging.example.com

参考資料

• references/design_principles.md - コアデザイン原則
• references/component_library.md - コンポーネントガイドライン
• references/accessibility.md - アクセシビリティチェックリスト
• references/research_methods.md - リサーチ手法

---

ツールリファレンス

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-commerce、モバイルアプリのジャーニー用に事前構築されたテンプレートが含まれています。

フラグ	型	デフォルト	説明
--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

ユーザビリティテストデータからSystem Usability Scale（SUS）スコアとタスクパフォーマンスメトリクスを計算します。成績解釈とベンチマーク付きの個別および集計分析を提供します。

フラグ	型	デフォルト	説明
action	位置引数	-	サンプルCSVファイルを作成するための「sample」
--sus-responses	文字列	-	SUS回答のCSV（参加者、q1-q10）
--task-data	文字列	-	タスクデータのCSV（参加者、タスク、完了、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	タスクデータCSVをusability_scorerにエクスポート	リモートテストプラットフォームからテスト結果をスコア付けする
Dovetail / Condens	インタビューテーマをjourney_mapperにエクスポート	リサーチリポジトリからジャーニーマップを構築する
Jira / Linear	design_critique JSON優先度をチケットとして	スプリントバックログでユーザビリティの改善を追跡する
Notion / Confluence	すべてのツールからの人間が読める出力	リサーチ結果とデザイン決定を文書化する
Miro / FigJam	journey_mapper JSON出力	ジャーニーマップのコラボレーティブワークショップ