SKILL: Design Review

デザインクリエイティブを多角的に分析し、具体的な改善フィードバックを生成するスキル。 受講生がクライアントに提出する前のクオリティチェックに最適化。

前提条件

• 追加ツール不要: Claude Code 本体の機能（画像読み込み・並列サブエージェント・AskUserQuestion）のみで完結する
• Web URL を分析対象にする場合のみ: Chrome DevTools MCP（PC/モバイルのフルページスクリーンショット取得に使う）。未接続の場合は画像ファイル/PDFを直接渡してもらう運用に切り替える
• PDF を分析対象にする場合は pdftoppm（poppler）等でページごとの画像に変換してから渡す

対応する制作物

Phase 0: 事前ヒアリング

スキル起動時、最初に必ず AskUserQuestion で以下を確認する：

1. 制作物の種類と目的

   • 何を作ったか（バナー/LP/Webサイト等）
   • 誰に向けて（ターゲット）
   • ゴールは何か（クリック/購入/問い合わせ等）

2. 重視したい観点（自由記述 or 以下から選択）

   • ビジュアル（レイアウト・配色・タイポグラフィ）
   • UX（視線誘導・情報階層・CTA）
   • ブランド一貫性
   • コンバージョン最適化
   • アクセシビリティ
   • 「特になし、全体的に見てほしい」

3. 対象プラットフォーム/媒体

   • Web（PC/モバイル）、SNS、印刷物等
   • サイズ・アスペクト比の制約があれば

ヒアリング結果は後続のエージェントに渡すコンテキストとして保存する。

Phase 1: 入力処理 & 前処理

1-1. 入力パターン

1-2. URL 入力時のキャプチャ戦略

Chrome DevTools MCP を使って以下を取得：

1. PC表示（1440x900）: full-page スクリーンショット
2. モバイル表示（375x667）: full-page スクリーンショット
3. ファーストビュー（PC・モバイル各1枚）
4. 主要CTAボタン付近のクローズアップ

長尺LPの場合、full-page スクショを縦方向で分割して複数枚に（エージェントが分析しやすくするため）。

1-3. 作業ディレクトリ構造

${WORK_DIR}/
  ├─ context.md            # Phase 0 のヒアリング結果
  ├─ sources/              # 入力画像（コピー）
  │   ├─ 01_pc_firstview.png
  │   ├─ 02_pc_full.png
  │   ├─ 03_mobile_firstview.png
  │   └─ 04_mobile_full.png
  └─ reports/              # 各エージェントの分析結果
      ├─ visual-analysis.md
      ├─ ux-analysis.md
      ├─ brand-analysis.md
      └─ final-review.md

WORK_DIR はデフォルトで /tmp/design-review-YYYYMMDD_HHMMSS/ に作成。 レポート完成後、ユーザーの指示に応じてデスクトップ等に移動する。

Phase 2: 並列分析（3エージェント）

visual-analyst（ビジュアル分析）

プロンプト: ~/.claude/skills/design-review/prompts/visual-analyst.md 出力: ${WORK_DIR}/reports/visual-analysis.md

ux-analyst（UX分析）

プロンプト: ~/.claude/skills/design-review/prompts/ux-analyst.md 出力: ${WORK_DIR}/reports/ux-analysis.md

brand-analyst（ブランド分析）

プロンプト: ~/.claude/skills/design-review/prompts/brand-analyst.md 出力: ${WORK_DIR}/reports/brand-analysis.md

3エージェントを 並列起動。各エージェントは context.md を必ず読んで、ユーザーが指定した重視観点を反映する。

Phase 3: 統合FB（reviewer）

プロンプト: ~/.claude/skills/design-review/prompts/reviewer.md 出力: ${WORK_DIR}/reports/final-review.md

Phase 2 の3レポートを統合し、優先順位付きのFBレポートを生成。

Phase 4: レポート提示

final-review.md の内容をユーザーに提示 + ファイルパスを共有。

Skill-Team マッピング