各ステップの詳細ガイド
9つのステップそれぞれについて、目的・入力・AIへの指示例・出力・Tipsを解説します。
Step 1: ヒアリング
目的: プロジェクトの方向性とデザイン要件を明確化する
入力（確認事項）
| 項目 | 説明 | 例 |
|---|---|---|
| プロジェクト種別 | Webアプリ / モバイル / ゲーム / SaaS / EC / ポートフォリオ | SaaSダッシュボード |
| ブランドカラー | 既存のブランドカラーがあるか | #7C3AED |
| ムード・世界観 | プレミアム / カジュアル / テクニカル / ゲーミング | テクニカル+ゲーミング |
| ターゲットユーザー | 開発者 / 一般ユーザー / ゲーマー / ビジネス | MTGプレイヤー（中級〜上級） |
| 参考サービス | Linear / Supabase / Stripe / Spotify 等 | Linear, Sentry |
| モード | ダークモード / ライトモード / 両対応 | ダークモードネイティブ |
| 多言語対応 | 日本語フォントの必要性 | 日本語+英語 |
| 既存プロンプト | 変換元のファイルがあるか | なし（新規） |
AIへの指示例
次のプロジェクトの DESIGN.md を生成してください:
- SaaSダッシュボード
- ダークモードメイン
- ブランドカラー: #7C3AED
- データ密度: 高（グラフ・テーブル多め）
- 参考: Linear のミニマリズム
- ターゲット: 開発者・テクニカルユーザー出力
- プロジェクト要件の整理リスト
- 不明点がある場合は追加質問
Tips
- 要件を具体的に伝えるほど精度が上がります
- 参考サービスは「UI全体」ではなく「何を参考にするか」を明示すると良いです（例: 「Linear のサイドバー構造」「Stripe の価格テーブル」）
- ブランドカラーが未定の場合、プロジェクト種別に基づいたデフォルト色が提案されます
Step 2: テンプレート選択
目的: ベースとなるデザインプリセットを選定し、カスタマイズの方向性を決める
入力
- Step 1 で整理したプロジェクト要件
利用可能なプリセット
| プリセット | 適合プロジェクト | 特徴 |
|---|---|---|
DARK_THEME.md | SaaS・開発者ツール・ダッシュボード | Linear/Supabase参考。輝度ステップ深度、半透明ボーダー |
GAMING_APP.md | ゲーム・エンターテインメント | Sentry/Spotify参考。パープル背景、フロステッドガラス |
DESIGN_TEMPLATE.md | カスタム・ゼロから構築 | 空テンプレート。全セクションを手動定義 |
AIへの指示例
ヒアリング結果に基づいて最適なプリセットを選択してください。
プロジェクトはカードゲーム管理ツールで、ダークモード+ゲーミング要素が必要です。出力
- 選択されたプリセット名とその理由
- カスタマイズの方向性（どの部分をプロジェクト固有に変更するか）
Tips
- 複数プリセットのハイブリッドも可能です（例: DARK_THEME をベースに GAMING_APP のフロステッドガラスを追加）
- プリセット選択後も全セクションをカスタマイズできるため、最も近いものを選んでください
Step 3: カラーパレット定義
目的: プロジェクト全体のカラーシステムをセマンティックトークンで定義する
入力
- 選択したプリセット
- ブランドカラー（あれば）
- モード（ダーク/ライト）
定義する5カテゴリ
1. Background Surfaces（背景の階層）
markdown
| Token | Value | Role |
|-------|-------|------|
| bg-deepest | #080808 | 最深部。入力フィールド内部 |
| bg-base | #0F0F0F | メインページ背景 |
| bg-panel | #151515 | サイドバー・ナビゲーション |
| bg-surface | #1A1A1A | カード・浮上面 |
| bg-hover | rgba(255,255,255,0.03) | ホバー状態 |2. Text & Content（テキストの階層）
markdown
| Token | Value | Role |
|-------|-------|------|
| text-primary | #f7f8f8 | 見出し・重要テキスト |
| text-secondary | #d0d6e0 | 本文 |
| text-muted | #8a8f98 | 補助テキスト |
| text-disabled | #62666d | 無効化テキスト |3. Brand & Accent（ブランドカラー）
アクセントカラーとそのホバー・アクティブ・背景使用時のバリエーション。
4. Semantic（意味的色）
成功（緑）・エラー（赤）・警告（黄）・情報（青）の4色。
5. Borders & Dividers（ボーダーの階層）
半透明白ボーダーの3段階（subtle / standard / emphasis）。
AIへの指示例
ブランドカラー #7C3AED をベースに、ダークモードのカラーパレットを定義してください。
以下の5カテゴリすべてを含めてください:
- Background Surfaces（4段階以上）
- Text & Content（4段階）
- Brand & Accent（ホバー・アクティブ含む）
- Semantic（成功・エラー・警告・情報）
- Borders & Dividers（3段階）
すべてセマンティックトークン名 + HEX/RGBA値 + 用途を記載してください。出力
- 全カテゴリのカラートークンテーブル
注意
dark-gray-1のような命名は避け、bg-panelのようなセマンティック名を使用してください- すべての色に「どこで使うか」を明記してください
- ダークモードの場合、テキストの最高輝度は
#f7f8f8とし、#ffffff（純白）は避けてください（眼の疲労防止）
Step 4: タイポグラフィ設計
目的: フォントファミリーと完全なサイズ・ウェイト階層を定義する
入力
- プロジェクト種別（多言語対応の有無）
- 参考サービスのタイポグラフィ傾向
定義項目
- Font Families: Primary / Secondary / Monospace（フォールバックスタック込み）
- Hierarchy Table: Display / H1-H4 / Body / Caption / Code 等のサイズ・ウェイト・行間・字間
- Principles: ウェイトの使い分け・字間ルール・OpenType機能
AIへの指示例
以下の条件でタイポグラフィを設計してください:
- 日本語+英語の混在テキスト
- Inter Variable をベースフォント
- 日本語は Noto Sans JP
- コードブロックは JetBrains Mono
- 価格表示には等幅数字（tnum）を使用
- ウェイトは3段階（400 / 510 / 590）に限定出力
- フォントファミリー定義（フォールバック込み）
- 完全な階層表（Display〜Code）
- タイポグラフィ原則
Tips
- 日本語プロジェクトでは Noto Sans JP / Zen Kaku Gothic New を推奨
- Google Fonts で利用可能か事前に確認が必要な場合、Web検索ステップが入ります
- 24px以上のテキストにはネガティブ字間（letter-spacing < 0）を適用すると引き締まります
- OpenType機能（
cv01,ss03,tnum）の活用でプロフェッショナル感が向上します
Step 5: コンポーネント定義
目的: 主要UIコンポーネントの視覚仕様を状態別に定義する
入力
- Step 3 のカラーパレット
- Step 4 のタイポグラフィ
- プロジェクト固有のコンポーネント要件
必須コンポーネント
| コンポーネント | 定義する状態 |
|---|---|
| Buttons | Primary / Secondary / Ghost / Icon + hover / active / disabled |
| Cards & Containers | 背景・ボーダー・角丸・影・パディング |
| Inputs & Forms | テキスト入力・セレクト + focus / error |
| Navigation | ヘッダー・サイドバー・アクティブ状態 |
| Badges & Pills | ステータス表示・タグ |
| Modals & Dialogs | オーバーレイ・背景・影 |
| Tables & Lists | 行ホバー・ストライプ・ヘッダー |
記述フォーマット例
markdown
#### Primary Button
- Background: accent-primary (#7C3AED)
- Text: #ffffff
- Padding: 8px 16px
- Border Radius: 6px
- Hover: accent-hover (#9061F9)
- Active: accent-active (#6D28D9)
- Disabled: opacity 0.4
- Shadow: none
- Transition: background 150ms easeAIへの指示例
Step 3-4 で定義したカラーパレットとタイポグラフィに基づいて、
以下のコンポーネントの状態別スタイル仕様を定義してください:
- ボタン（Primary / Secondary / Ghost / Icon）
- カード・コンテナ
- 検索入力
- サイドバーナビゲーション
- バッジ
- モーダル
- データテーブル
各コンポーネントの default / hover / active / disabled / focus 状態を含めてください。出力
- 全コンポーネントの状態別スタイル仕様
Tips
- プロジェクト固有のコンポーネントがあれば追加定義してください（例: マナボタン、価格テーブル）
- すべての値をカラートークン + 実値（HEX/RGBA）の両方で記述すると、AIエージェントの解釈精度が上がります
- Transition は 150ms ease を標準とし、カード画像のホバーのみ 200ms にするなどの例外を明記します
Step 6: レイアウト・レスポンシブ定義
目的: スペーシング体系とレスポンシブ戦略を定義する
入力
- プロジェクトの画面構成
- ターゲットデバイス
定義項目
| 項目 | 説明 |
|---|---|
| ベースユニット | 通常 4px または 8px |
| スペーシングスケール | 4, 8, 12, 16, 24, 32, 48, 64px... |
| Border Radius Scale | micro / standard / card / panel / pill |
| 最大コンテンツ幅 | デスクトップでの最大幅 |
| ブレークポイント | Mobile / Tablet / Desktop / Wide |
| 折りたたみ戦略 | ナビ・グリッド・テキストサイズの変化 |
| 深度・エレベーション | シャドウシステム |
AIへの指示例
以下の画面構成に基づいてレイアウト・レスポンシブ定義を作成してください:
- 6画面構成（検索・ビルダー・価格比較・一覧・メタゲーム・プレイテスト）
- サイドバー + メインエリアの2カラム構成
- カードグリッドは5→3→2カラムに縮小
- モバイルではボトムナビゲーション
- 最大コンテンツ幅: 1280px
- ベースユニット: 8px出力
- スペーシングスケールテーブル
- Border Radius スケール
- ブレークポイント定義
- 各画面のレイアウト仕様
- 折りたたみ戦略
Tips
- ダークモードではシャドウが見えにくいため、輝度ステップ + 半透明ボーダーでの深度表現を検討してください
- タッチターゲットの最小サイズ（44px x 44px）を忘れずに定義してください
- パフォーマンス制約がある場合は、
backdrop-filterの使用範囲を限定してください
Step 7: DESIGN.md 生成
目的: Step 3-6 で定義した全要素を統合して、最終的な DESIGN.md を生成する
入力
- Step 3: カラーパレット
- Step 4: タイポグラフィ
- Step 5: コンポーネント仕様
- Step 6: レイアウト・レスポンシブ定義
9セクション構成
1. Visual Theme & Atmosphere
2. Color Palette & Roles
3. Typography Rules
4. Component Stylings
5. Layout Principles
6. Depth & Elevation
7. Do's and Don'ts
8. Responsive Behavior
9. Agent Prompt GuideAIへの指示例
ここまでのStep 3-6 の定義をすべて統合して、
DESIGN.md を生成してください。
9セクション構成で、プロジェクトルートに配置します。出力
DESIGN.mdファイル（プロジェクトルート）
生成時チェックリスト
- [ ] すべてのカラー値が HEX/RGBA で指定されているか
- [ ] フォントサイズに px 単位が付いているか
- [ ] コンポーネントのすべての状態が定義されているか
- [ ] セマンティックトークン名が一貫しているか
- [ ] プロジェクト固有の制約が Do's and Don'ts に含まれているか
- [ ] Agent Prompt Guide にクイックリファレンスが含まれているか
注意
Do's and Don'ts セクションには、著作権リスク（他社UIの模倣禁止等）やパフォーマンス制約を必ず含めてください。
Step 8: Stitch 投入ガイド
目的: 生成した DESIGN.md を Google Stitch や他のAIエージェントで活用する方法を提示する
入力
- 生成済みの DESIGN.md
- 使用するAIツール（Stitch / Claude / Cursor 等）
Stitch への投入手順
project/
├── DESIGN.md ← ここに配置
├── src/
└── ...- DESIGN.md をプロジェクトルートに配置
- Stitch に画面生成を指示
AIへの指示例
txt
この DESIGN.md に従って [画面名] のデザインカンプを作成してくださいtxt
DESIGN.md のカラーパレットとタイポグラフィに従いつつ、
[画面名] では [参考サービス] のレイアウトパターンを参考にしてくださいtxt
この DESIGN.md に従って React コンポーネントを実装してくださいtxt
（プロジェクトルートに配置するだけで自動認識）出力
- 各AIツールへの投入手順
- 画面別の追加プロンプト例
Tips
- Stitch は Markdown を最も効率的に読み取るため、DESIGN.md 形式が最適です
- 画面ごとに追加指示を与えると、より精度の高いデザインカンプが得られます
- 複数画面を一度に生成するより、1画面ずつ生成して品質を確認するのがおすすめです
Step 9: レビュー・反復
目的: ユーザーフィードバックを反映して DESIGN.md を改善する
入力
- 生成済みの DESIGN.md
- ユーザーからのフィードバック
レビュー観点
| 観点 | チェック内容 |
|---|---|
| カラーパレット | バランス・コントラスト比（WCAG AA以上） |
| タイポグラフィ | 可読性・階層の明確さ |
| コンポーネント | 過不足・状態の網羅性 |
| ブランドイメージ | 要件との整合性 |
| Agent Prompt Guide | 実用性・プロンプト例の具体性 |
反復フロー
mermaid
flowchart LR
A["フィードバック受領"] --> B["該当セクション修正"]
B --> C["変更箇所を提示"]
C --> D{"承認?"}
D -->|Yes| E["コミット"]
D -->|No| AAIへの指示例
DESIGN.md のカラーパレットを修正してください:
- アクセントカラーを #7C3AED から #6366F1 に変更
- それに伴うホバー・アクティブ状態も調整
- Agent Prompt Guide のクイックリファレンスも更新出力
- 修正された DESIGN.md
- 変更箇所のサマリー
Tips
- 部分修正の場合は該当セクションだけを指定すると効率的です
- コントラスト比が不十分な場合は WCAG AAA 基準に基づいて自動調整されます
- 大幅な方向転換が必要な場合は Step 2（テンプレート選択）からやり直すことも検討してください