AI / SKILL / IN-HOUSE
Claude Codeをデザインスタジオ化するスキル
design-studio-comp
CHALLENGE
課題
Webサイトのデザインカンプを一人で制作すると、発散が足りず「小綺麗にまとまった優等生」で止まりやすい。AIに任せても自己評価が甘く、実際の品質と評価に乖離が出ることが繰り返し確認された。原因は個人の力量ではなく制作システムにあると判断し、デザインスタジオの分業体制をClaude Code上に再現するスキルとして実装した。
APPROACH
取り組み
- 肩書きではなく認知タスクで役割を分離。Strategist / Researcher / Curator / Challenger / Copy Lead / IA / Visual Designer / Critic をサブエージェントとして起動し、メインセッションはDirectorとして統合のみ行う
- 各フェーズの出口に外部レビュー（Codex CLI）のゲートを置く。生成と批評でモデルを分け、自己バイアスを排除
- Phase 0 ヒアリング → 1 戦略・参照収集 → 2 情報設計・コピー → 3 カンプ制作 → 4 精緻化ループ → 5 プレゼン・実装移管、の5段階。依頼者の関与は入口のヒアリングと出口の最終確認のみ
- 7次元スコアリング（戦略整合・情報階層・視線誘導・独自性・可読性・実装再現性・ブランド適合）に加重を設け、PASS基準と「アンチパターン即死チェック」を明文化
- 修正指示は Problem / Root Cause / Fix Direction / Target / Re-eval の型に固定し、感想戦を禁止。改善が止まったらデザインパターンDBで発散させる
- Pencilの重い操作は必ずサブエージェントで実行し、メインのコンテキストを保全。進捗はセッションファイルに集約してセッションをまたいで再開できるようにした
TECH
技術
- Claude Code（スキル / サブエージェント）
- Codex CLI（外部レビュー用の別モデル）
- Pencil（カンプ制作、MCP経由）
- 自社デザインパターンDB・デザイン言語ナレッジ（Markdown）
- 各フェーズの手順書を分割し、必要時のみ読み込む構成
OUTCOME
結果
自社および案件のLP・サイトトップのカンプ制作で運用中。実案件のLPでは精緻化ループを15ラウンド回してPASS基準に到達した。運用を通じて「上流の解像度が下流の品質を決める」「コピー品質はビジュアルと同格」などの教訓をスキル本体に還元している。
SCALE
規模
- 役割10種、品質ゲート4箇所（Brief / Structure / Visual / Final）
- 1案件あたり構図5〜6案を全セクション差別化して比較
- 精緻化ループの実績: 最大15ラウンド
OTHER