05. VibeCoding用のデザイン企画書を作る
リデザイン編（Phase03）の最終章となるこの記事では、これまでにGoogle Stitchで決めてきた画面レイアウト、ユーザー導線、配色、およびコンポーネント構成のすべてを1つのドキュメントに集約します。
この集約されたドキュメントを、本サイトでは「デザイン企画書（仕様書）」と呼び、通常はプロジェクトのルート直下に DESIGN.md というマークダウンファイルとして保存します。
この DESIGN.md は、人間が読むためのものではなく、コーディング編で Spec Kit の憲法（constitution）の土台になり、AIエージェントに、「これをインプットにして、完璧なUIコードを書いて」と命じるための司令書です。
この記事のサブコンテンツ
Section titled “この記事のサブコンテンツ”この記事では、AIが最もよく理解し、高品質なコードを出力するためのデザイン企画書の作り方を解説します。
- VibeCodingにおけるデザイン企画書（DESIGN.md）の役割
- 開発AIが迷わないデザイン企画書（DESIGN.md）のテンプレート
- AIの追従性を最大化するための記述のコツ
- システムルール（CLAUDE.md）との高度な連携
- リデザイン編の総まとめ
- まとめと次のフェーズ（コーディング編）への橋渡し
1. VibeCodingにおけるデザイン企画書（DESIGN.md）の役割
Section titled “1. VibeCodingにおけるデザイン企画書（DESIGN.md）の役割”バイブコーディングにおいて、AIに「良いデザインのアプリを作って」と口頭で指示するだけでは、AIは自分のデータベースにある一般的な（時として古い）コードパターンから適当なデザインを生成してしまいます。
そこで、プロジェクト内に DESIGN.md を作成し、常にAIがこれを参照できるようにします。
DESIGN.md を用意するメリット
Section titled “DESIGN.md を用意するメリット”- デザインのブレを防ぐ：新しい画面を追加させる際も、AIは自動的に
DESIGN.mdの配色ルールやコンポーネント構造を読み込み、同じトーンで実装します。 - 指示の文字数を節約できる：プロンプトで毎回「色はこれで、角丸は16pxで、影は薄くして…」と書く必要がなくなり、「
DESIGN.mdに従って、この画面を作って」と伝えるだけで済むようになります。 - CSS-in-JSコードの品質担保：余白のスケールやカラーパレットが明確なため、AIは場当たり的なスタイル指定を避け、保守性の高いクリーンなスタイルコードを書きます。
2. 開発AIが迷わないデザイン企画書（DESIGN.md）のテンプレート
Section titled “2. 開発AIが迷わないデザイン企画書（DESIGN.md）のテンプレート”以下は、Stitchでの設計成果物を集約して DESIGN.md に記述するための標準テンプレートです。そのままコピーして、中身をご自身のアプリ向けに書き換えて使用してください。
# アプリデザイン仕様書 (DESIGN.md)
## 1. デザインコンセプト & テーマ- **アプリ名**: 習慣トラッカー「HabitFlow」- **コンセプト**: インナーピースと日常の習慣化を支える、極限までシンプルで美しいUI。- **全体像**: 無駄な境界線を廃し、余白と繊細な影、滑らかな角丸で奥行きと高級感を表現する。
## 2. カラーシステム (Color System)すべてのスタイリングはこのカラー変数、またはそれに準じるHSL・RGBA表記で定義すること。- **Primary**: `#10B981` (エメラルドグリーン - アクション・完了状態)- **Secondary**: `#6366F1` (インディゴブルー - 統計情報・ハイライト)- **Light Mode Theme**: - `Background`: `#F9FAFB` (オフホワイト - 画面背景) - `Surface`: `#FFFFFF` (純白 - カード背景・フォーム背景) - `TextPrimary`: `#111827` (深いグレー - 主要テキスト) - `TextSecondary`: `#6B7280` (ライトグレー - 補足テキスト) - `Border`: `#E5E7EB` (極薄グレー - 分割線)- **Dark Mode Theme**: - `Background`: `#0F172A` (ディープスレート - 画面背景) - `Surface`: `#1E293B` (明るいスレート - カード背景・フォーム背景) - `TextPrimary`: `#F8FAFC` (ほぼ白 - 主要テキスト) - `TextSecondary`: `#94A3B8` (スレートグレー - 補足テキスト) - `Border`: `#334155` (中間スレート - 分割線)
## 3. タイポグラフィ & 余白 (Typography & Spacing)- **フォントファミリー**: 端末の標準システムフォント（San Francisco / Roboto）- **サイズスケール**: - `h1` (タイトル): size `24px` / weight `Bold` / letterSpacing `0.5px` - `h2` (カード見出し): size `18px` / weight `Semi-Bold` - `body` (本文): size `14px` / weight `Medium` / lineHeight `20px` - `caption` (補助): size `12px` / weight `Regular` / color `TextSecondary`- **余白スケール (Spacing)**: - `Padding` および `Margin` は、基本的に `8px` の倍数（`8` / `16` / `24` / `32`）で統一すること。 - カード内余白は `16px` を基準とする。
## 4. コンポーネント共通ルール (UI Elements)- **角丸 (Border Radius)**: - カードコンポーネント: `borderRadius: 16` - ボタン / 入力フォーム: `borderRadius: 12`- **シャドウ (iOS / Android)**: - iOS: `shadowColor: '#000000'`, `shadowOffset: { width: 0, height: 2 }`, `shadowOpacity: 0.05`, `shadowRadius: 8` - Android: `elevation: 2`- **インタラクション (タップ時の挙動)**: - ボタンおよびタップ可能なカードは、すべて `TouchableOpacity` を用い、`activeOpacity={0.7}` を明示的に指定すること。
## 5. 画面構成 & ルーティング (Expo Router)画面遷移は以下の Expo Router パス構成とナビゲーションタイプに基づいて実装すること。- **`app/(tabs)/index.tsx`**：ダッシュボード画面（今日の習慣一覧、週次カレンダー）- **`app/(tabs)/history.tsx`**：履歴・ヒートマップ画面- **`app/(tabs)/settings.tsx`**：設定画面- **`app/habit/[id].tsx`**：習慣詳細画面（スタック遷移。`id`パラメータ必須）- **`app/modal.tsx`**：習慣追加画面（モーダル表示）
## 6. モーション & アニメーション仕様 (Motion Specifications)- **画面遷移効果**: 画面遷移はスタック左右スライドを用い、モーダル表示時は下部からフェードしながらスライドアップすること。- **インタラクション・フィードバック**: ボタンや習慣カードタップ時は `activeOpacity={0.7}` で半透明化させること。また、チェック完了時には `Animated.spring` を用いて、チェックマークがわずかに膨らむ効果を加えること。ばねの減衰・剛性で調整し、150msのように時間を固定する場合は `Animated.timing` を使うこと。OSの「視差効果を減らす」設定も尊重すること。
## 7. 外部連携・プロトタイプと受け渡し- **Stitch Instant Prototype**: `[ここにStitchの共有用URLなどを貼り付け]`- **Figma Design Link**: `[ここにFigmaのプロジェクト共有用URLを貼り付け]`- **開発エージェントへの接続設定**: StitchのMCPサーバー／SDKを開発環境（Claude Code、Cursor、Gemini CLI など）に接続している場合は、その旨と接続先を記載すること。- **デプロイ・外部連携**: 必要に応じてNetlify、Lovable、Bolt.new向けのコードエクスポート情報を記述。- （AIは必要に応じてこれらのWeb URLを巡回し、アニメーションや操作フロー、詳細レイアウトの参考とすること）3. AIの追従性を最大化するための記述のコツ
Section titled “3. AIの追従性を最大化するための記述のコツ”AIに DESIGN.md の指示を完全に守らせるためには、記述の表現を工夫する必要があります。
- 曖昧な言葉を使わない：「丸みを帯びたデザイン」ではなく、「
borderRadius: 16」のようにCSSのプロパティ値や具体的な数値で記述します。 - 禁止事項（ネガティブ制約）を明記する：AIがやってしまいがちな行動を先回りして禁止します（例：「原色そのままの赤や青は絶対に使用しないこと」「境界線を太くしないこと」）。
- OS間の差異への対応指示を入れる：前述した「シャドウ」の書き方や、「Safe Area」の扱いについて、あらかじめルールに含めておきます。
4. システムルール（CLAUDE.md）との高度な連携
Section titled “4. システムルール（CLAUDE.md）との高度な連携”AI IDE（Antigravity IDEなど）やターミナルツール（Claude Codeなど）では、AI自身が従うべき絶対ルールを記載した CLAUDE.md や Rules の機能を持っています。
この CLAUDE.md 内に以下のように記述を追加することで、AIがコードを生成する際に自動的に DESIGN.md を読み込むよう強制できます。
CLAUDE.md への記述例
Section titled “CLAUDE.md への記述例”## UI/UX & Styling Rules- すべての画面およびコンポーネントを実装する際は、必ずプロジェクトルートにある `DESIGN.md` の配色ルール、タイポグラフィ、コンポーネント共通ルールを厳格に遵守すること。- 新しいスタイルの記述に迷った場合は、勝手に色やフォントサイズを決めず、`DESIGN.md` に記載されたトークンを使用すること。このように設定しておくことで、人間が指示を省略しても、AIは DESIGN.md を辞書のように引いて完璧な見た目のコードを書き上げてくれます。
5. リデザイン編の総まとめ
Section titled “5. リデザイン編の総まとめ”これでリデザイン編（Phase03）のステップがすべて完了しました！ ここまでに学んだプロセスを振り返りましょう。
- 画面案の作成：01. Google Stitchでアプリの画面案を作る で、AIと対話しながらワイヤーフレームの見た目を決定しました。
- 導線の設計：02. Stitchの画面案からユーザー導線を作る で、Expo Routerを念頭に置いた、破綻のない画面遷移図を定義しました。
- スタイルシステムの構築：03. Stitchで配色とUI部品を決める で、チープさを排除したプレミアムなカラーとコンポーネント仕様を決めました。
- 実装の分解：04. StitchのデザインをExpoで作れる形に分解する で、React Native特有のコンポーネントマッピングやStyleSheetの制約をクリアしました。
- 仕様書の作成：05. VibeCoding用のデザイン企画書を作る（この記事）で、すべての仕様をAIへインプットする
DESIGN.mdへと集約しました。
6. まとめと次のフェーズ（コーディング編）への橋渡し
Section titled “6. まとめと次のフェーズ（コーディング編）への橋渡し”完璧な DESIGN.md が手元に揃った今、アプリの「見た目と動きの設計図」は100%完成しています。
次からは、いよいよ開発のメインフェーズである「Phase04：コーディング編」に入ります。設計図をAIエージェントに渡し、実機（Expo Go）で実際に動くスマホアプリを爆速で組み上げていきましょう！
さっそく、コーディング編の第1歩である「01. GitHub Spec Kitで開発環境のベースを作る」へ進みましょう。