Skip to content
VibeCode Mobile

05. VibeCoding用のデザイン企画書を作る

リデザイン編（Phase03）の最終章となるこの記事では、これまでにGoogle Stitchで決めてきた画面レイアウト、ユーザー導線、配色、およびコンポーネント構成のすべてを1つのドキュメントに集約します。

この集約されたドキュメントを、本サイトでは**「デザイン企画書（仕様書）」**と呼び、通常はプロジェクトのルート直下に DESIGN.md というマークダウンファイルとして保存します。

この DESIGN.md は、人間が読むためのものではなく、開発AIエージェント（GitHub Spec KitやAntigravity IDE）に**「これをインプットにして、完璧なUIコードを書いて」と命じるための司令書**です。

この記事のサブコンテンツ

Section titled “この記事のサブコンテンツ”

この記事では、AIが最もよく理解し、高品質なコードを出力するためのデザイン企画書の作り方を解説します。

  1. VibeCodingにおけるデザイン企画書（DESIGN.md）の役割
  2. 開発AIが迷わないデザイン企画書（DESIGN.md）のテンプレート
  3. AIの追従性を最大化するための記述のコツ
  4. システムルール（CLAUDE.md）との高度な連携
  5. リデザイン編の総まとめ
  6. まとめと次のフェーズ（コーディング編）への橋渡し

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`, `16px`, `24px`, `32px` の倍数で統一すること。
  - カード内余白は `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)/analytics.tsx`**：分析・ヒートマップ画面
- **`/app/habit/[id].tsx`**：習慣詳細画面（スタック遷移。`id`パラメータ必須）
- **`/app/create/index.tsx`**：習慣追加画面（モーダル表示）


## 6. モーション & アニメーション仕様 (Motion Specifications)
- **画面遷移効果**: 画面遷移はスタック左右スライドを用い、モーダル表示時は下部からフェードしながらスライドアップすること。
- **インタラクション・フィードバック**: ボタンや習慣カードタップ時は `activeOpacity={0.7}` で半透明化させること。また、チェック完了時には `Animated.spring` を用いて、チェックマークがわずかに膨らむバウンス（スプリング）効果（アニメーション時間：150ms）を加えること。


## 7. 外部連携・プロトタイプ & 双方向同期
- **Stitch Instant Prototype**: `[ここにStitchの共有用URLなどを貼り付け]`
- **Figma Design Link**: `[ここにFigmaのプロジェクト共有用URL（.figファイル連携含む）を貼り付け]`
- **コード同期設定 (Codebase Sync)**: 本プロジェクトのディレクトリはStitchキャンバスと双方向同期されているため、Stitch上のビジュアル変更に伴うコード変更（TSX/StyleSheet）はGitHub Spec Kitによりリアルタイムに反映されること。
- **デプロイ・外部連携**: 必要に応じて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）のステップがすべて完了しました！ ここまでに学んだプロセスを振り返りましょう。

  1. 画面案の作成：01. Google Stitchでアプリの画面案を作る で、AIと対話しながらワイヤーフレームの見た目を決定しました。
  2. 導線の設計：02. Stitchの画面案からユーザー導線を作る で、Expo Routerを念頭に置いた、破綻のない画面遷移図を定義しました。
  3. スタイルシステムの構築：03. Stitchで配色とUI部品を決める で、チープさを排除したプレミアムなカラーとコンポーネント仕様を決めました。
  4. 実装の分解：04. StitchのデザインをExpoで作れる形に分解する で、React Native特有のコンポーネントマッピングやStyleSheetの制約をクリアしました。
  5. 仕様書の作成：05. VibeCoding用のデザイン企画書を作る（この記事）で、すべての仕様をAIへインプットする DESIGN.md へと集約しました。

6. まとめと次のフェーズ（コーディング編）への橋渡し

Section titled “6. まとめと次のフェーズ（コーディング編）への橋渡し”

完璧な DESIGN.md が手元に揃った今、アプリの「見た目と動きの設計図」は100%完成しています。

次からは、いよいよ開発のメインフェーズである「Phase04：コーディング編（仮）」に入ります。設計図をAIエージェントに渡し、実機（Expo Go）で実際に動くスマホアプリを爆速で組み上げていきましょう！

さっそく、コーディング編の第1歩である「01. Spec Kitで開発環境のベースを作る」へ進みましょう。