05. VibeCodingで使う基本プロンプト集

バイブコーディング（Vibe Coding）の成否は、**AIエージェントへの「指示（プロンプト）の出し方」**で決まります。

特にスペックが飛躍的に向上した Gemini 3.5 Flash は、的確な前提条件とゴールを与えることで、ただコードを出力するだけでなく、アーキテクチャの選定からバグの自己修正まで極めて高いレベルで自律実行してくれます。

この記事では、開発フェーズごとにそのままコピーして使える「基本プロンプトテンプレート」を整理して解説します。

1. 【設計フェーズ】アプリ仕様書・データ構造の策定

コードを書き始める前に、何を作るのかを整理する「仕様設計プロンプト」です。Google AI（Gemini）の強力な論理的思考力を活用し、開発のロードマップを描かせます。

プロンプトテンプレート

【前提条件】
・Expo（TypeScript）およびFirebaseを使ってスマホアプリを開発します。
・作りたいアプリ：[ここに作りたいアプリの概要を書く。例：シンプルで美しい習慣トラッカーアプリ]

【依頼内容】
上記要件を満たすために必要な以下の項目を整理し、Markdown形式の仕様書にまとめてください。
1. アプリの主要ターゲット層と解決する課題
2. 必要な画面一覧とその主な役割（Expo Routerのパス構成案も含めてください）
3. Firebase Firestoreで使用するデータ構造（コレクション、ドキュメントのフィールド名、データ型）
4. 実装における技術的な懸念点と、それを回避するためのアドバイス

2. 【デザイン・実装フェーズ】プレミアムなUIコンポーネントの生成

バイブコーディングでアプリの画面を作らせる際、ただ「ボタンを配置して」と頼むと、非常に簡素で味気ないUIになりがちです。本サイトが重視する 「リッチで洗練されたプレミアムデザイン」 をAIに実装させるためのプロンプトです。

プロンプトテンプレート

【前提条件】
・Expo（React Native）の画面コンポーネントを実装します。
・対象の画面・コンポーネント：[ここに実装したい画面名。例：タスク追加フォームとタスク一覧画面]
・スタイリング：`StyleSheet.create` を使用したVanilla CSS風のスタイルで書いてください。

【デザイン・スタイル要求（重要）】
・ブラウザのデフォルトのような無機質なカラーは避け、洗練されたモダンな配色（HSLを用いた調和のとれたカラーパレット、深みのあるダークモード、または美しくスムーズなグラデーション）を定義してください。
・フォントは端末の標準システムフォント（San Francisco / Roboto）を使用し、文字間（letterSpacing）や行高（lineHeight）を美しく調整してください。
・ボタンのタップ時の透明度変化や、コンポーネントのホバー・表示時のマイクロアニメーション、カードの角丸（borderRadius: 16など）や繊細なシャドウ効果を付与し、プレミアム感（高級感）を演出してください。

【機能要求】
・[ここに画面の具体的な動作仕様。例：タスクを入力して追加ボタンを押すとリストに加わり、チェックを入れると完了状態になる]
・TypeScriptの型定義を厳格に行い、初心者でも理解できるようにコード内の重要なポイントに日本語のコメントを付与してください。

3. 【連携フェーズ】Firebase・Googleサービスの統合

ExpoアプリにFirebaseのデータベースや認証（Googleログインなど）を組み込むためのプロンプトです。セキュリティルールの策定まで網羅させます。

プロンプトテンプレート

【前提条件】
・Expoプロジェクトで Firebase SDK v10（または最新）を使用します。
・目的：[ここに目的。例：ユーザーが自分のGoogleアカウントでログインし、自分の作成したデータのみを閲覧・編集できるようにする]

【依頼内容】
1. Expoプロジェクトで上記の認証およびFirestore処理を行うための、具体的な実装コード（TypeScript）を作成してください。
2. Firestoreのセキュリティルール（`firestore.rules`）の記述案を作成してください。特に、認証された本人のみが自分のデータを読み書きできるセキュアなルールにしてください。
3. Expoの `app.json` に設定すべきFirebase関連のパラメータや、必要なSDKパッケージのインストールコマンドを教えてください。

4. 【デバッグ・修正フェーズ】エラーの自己解決

ビルドエラーやTypeScriptのエラー、あるいは実行時のクラッシュが発生した際に、AIエージェントに原因を特定させ、自動修正を行わせるためのプロンプトです。

プロンプトテンプレート

【状況報告】
Expoアプリの開発中にエラーが発生しました。

【エラーメッセージ】
[ここにターミナルやスマホ画面に表示されたエラーログをそのまま貼り付ける]

【現在の関連コード（[ファイル名]）】
[エラーに関連していると思われるファイルの内容を貼り付ける]

【依頼内容】
このエラーが発生している根本原因を究明し、修正した完全なコードを提示してください。
また、他に修正が必要なファイル（`package.json` や設定ファイルなど）があればその指示も合わせてお願いします。

5. 【最適化フェーズ】コードレビューとコンポーネント分割

一つのファイルにロジックとUIが混ざり合って肥大化してきた（「コードが重くなってきた」）ときに、クリーンな設計に整理させるためのプロンプトです。

プロンプトテンプレート

【現状】
アプリが動作するようになりましたが、コードベースが肥大化し保守が難しくなっています。

【関連コード】
[整理したいファイルやフォルダー内のコードを貼り付ける]

【依頼内容】
以下の観点から、コードのリファクタリングを行ってください。
1. UIコンポーネントとロジック（ビジネスロジック・Firebase通信等）の分離
2. 状態管理や複雑なイベントハンドラーのカスタムフック（Custom Hook）への切り出し
3. パフォーマンス最適化（不要な再レンダリングの防止など）
4. リファクタリング後のファイル構成案と、それぞれの修正後コード

プロンプトを使いこなすコツ

コンテキストを小出しにしない: Gemini 3.5 Flashは非常に広いコンテキストウィンドウを持っています。関連するファイル（package.json や app.json 含む）はできるだけ一緒に渡す方が、AIの推論精度が上がります。
「役割」を与える: 指示の冒頭に「あなたはシニアのReact Nativeエンジニアです」「あなたは優れたUI/UXデザイナーです」といった役割を与えることで、出力されるコードの品質や提案の視点が変わります。
ルール化する: 開発方針や命名規則などをあらかじめ CLAUDE.md やIDEの「Rules」設定に記述しておき、AIにそれを常に守らせることで、プロンプトの文字数を節約し一貫性を保つことができます。

準備編の完了

これで、バイブコーディングを始めるための準備編（Phase01）の全5記事が揃いました！

全体像の把握：01. VibeCodingでスマホアプリを作る全体像
AIサブスクの選定：02. AIサブスクを選ぶ
開発環境の選定：03. 開発環境を選ぶ
プロジェクト起動：04. AntigravityでExpo開発環境を作る
プロンプトの習得：05. VibeCodingで使う基本プロンプト集

プロンプト集を手元に参照しながら、さっそく次のフェーズ「01. Google Deep Researchでアプリのアイデアを調べる」へ進みましょう。