AIが約7割のプロンプトに失敗している。ご存知か。
Google の調査によると、バイブコーディングで失敗する案件のうち、65%が「プロンプトの曖昧さ」が原因。「かっこいいサイトを作ってください」「ECサイト機能を追加してください」。こんな指示では、AIも何を作るか判断できない。
逆に、プロンプトを「正確に」書けば、AIの成功率は一気に跳ね上がる。「背景色 #3498db、ボタン 3 個、フォント Arial 14px」。こここまで具体的なら、AIは迷わない。
この記事では、実際に効果があった「プロンプトのコツ8選」を整理した。失敗するプロンプトの特徴も対比で示す。あなたのプロンプトが「失敗型」なら、今すぐ改善できる。
- プロンプトで AIが失敗する理由
- 8つのプロンプトコツ（具体的な指示方法）
- NG プロンプト vs 良いプロンプトの対比
- ツール別プロンプト最適化（Cursor / Claude / Windsurf）
- 失敗パターンとデバッグプロンプト術
- 実践演習で即座に習得
バイブコーディングが失敗する理由｜プロンプトの質が全て
失敗の 8割はプロンプトにある。AIの性能じゃない。あなたの「指示の出し方」だ。
AIは「曖昧な指示」に弱い
「いい感じのデザイン」「ちょっと修正して」「足りない機能を追加」。こういう指示。AIは文脈を読めない。だから失敗する。
情報不足のプロンプトの末路
やり直しが増える。修正回数が 10回、20回に。時間が かかる。イライラする。結局、自分で手直し。
逆に「正確なプロンプト」なら、1回で完成。修正も最小限。効率は 5倍以上。
プロンプトの基本 8つのコツ
1. 「何を」「どのように」を明確に分離する
悪い例：「ボタンを作ってください」。曖昧。ボタンの色？サイズ？機能？
良い例：「ボタン作成：機能は『クリックでカウント増加』、色は赤 (#ff0000)、サイズは幅 200px、高さ 50px」。
2. 色・サイズ・レイアウトは具体値で指定する
「レッド」ではなく「#ff0000」。「大きく」ではなく「200px」。「整然と」ではなく「グリッド 4 列」。
「赤色」と言っても、濃い赤、薄い赤、朱赤。種類は数百。カラーコード（16進数）で指定すれば、AIの判断に迷いがない。例：#ff0000（純赤）、#ff6b6b（淡い赤）。
3. 「〜っぽい」ではなく「〜という名前の〜色」と特定する
「高級感のある」→判断基準が曖昧。「ゴールド系（RGB: 218, 165, 32）の高級コスメランディングページ」→明確。
4. 複数要件は箇条書きで列挙する
「ユーザー登録画面を作ってください。メール、パスワード、確認パスワードを入力。バリデーションをつけてください」。一文が長い。
改善：「ユーザー登録画面。【入力項目】メール、パスワード、確認パスワード。【バリデーション】メール形式チェック、パスワード強度チェック、一致確認。」
5. 参考画像・参考 URL を提示する
言葉だけより、画像が有効。「こういう雰囲気で」と参考画像を見せる。AIの理解度が数倍上がる。
方法：「参考 URL: amazon.com（このサイトのようなカード型レイアウト）」。単純だが効果絶大。
6. 不要な要素は「入れない」と明記する
AIはデフォルトで「標準的な機能」を全部つける。ログイン。ユーザープロフィール。通知機能。不要なら「これらは入れないでください」と明記。
| 要素 | デフォルト | 指示で変更 |
|---|---|---|
| ログイン | つく | 「ログイン機能は不要」で削除 |
| プロフィール編集 | つく | 「編集機能は削除」で削除 |
| 通知機能 | つく | 「通知はなし」で削除 |
7. エラー時の対話方法（スクショ+説明）を用意する
バグが出たら「エラーが出ました」と言うだけでなく。「ボタンをクリックしたら『TypeError: Cannot read property 〜』が出ました」。スクリーンショットも添付。
AIはエラーメッセージから原因を特定できる。でも「何が起きた」かわからないと、憶測で直す。失敗率が上がる。
8. 1 回のプロンプトで完結させない｜段階的修正を前提にする
「完璧なアプリを 1 回で作ってください」。無理だ。
「ステップ 1: フォーム入力画面を作成」「ステップ 2: バリデーション追加」「ステップ 3: データベース保存」。段階的に進める。各段階で AIと対話。修正は最小限。
NG プロンプト vs 良いプロンプト｜実例集
❌「可愛いランディングページを作って」
- 「可愛い」の定義が不明確
- 色・サイズ・配置が指定されていない
- やり直し確定
✅ ピンク系（RGB: 255, 192, 203）を基調とした、高級コスメ向けのランディングページ。ヘッダーに大きく商品画像を配置、下部に料金表（3列×4行）を配置
- 色が RGB で指定
- レイアウトが数字で指定
- 1 回で完成の可能性 80%
例 2：EC サイト
❌「EC サイトを作って」→ AI はどの程度の EC を作るか迷う。失敗率 70%。
✅「商品一覧ページ（グリッドレイアウト 4 列）、カートシステム（商品追加時に確認ダイアログ）、決済ページ（Stripe 連携必須）」→ 明確。失敗率 10%。
例 3：SNS 機能
❌「SNS 機能をつけて」→ AI は「どの程度の SNS か」判断できない。
✅「ユーザー登録（メール+パスワード）→投稿作成（テキスト+画像）→フィード表示（新着順）→いいね機能（クリックで色が赤に）」
ツール別プロンプト最適化｜Cursor vs Claude vs Windsurf
Cursor で有効なプロンプト傾向
Cursor はコードに強い。「React コンポーネント」「関数の最適化」「バグ修正」。こういう指示が効果的。
例：「Button.tsx を改善してください。Props 型をちゃんと定義して、onClick イベント も受け取る仕様で」。
Claude Code に伝わりやすいプロンプト構造
Claude Code はターミナル重視。「npm スクリプト」「Git 操作」「複数ファイル編集」。これが得意。
例：「src/utils/ に新しいヘルパー関数ファイルを 3 個作成。各ファイルは index.ts から export。その後、npm test を実行」。
Windsurf で結果が出やすいアプローチ
Windsurf は複数ファイル修正が得意。「プロジェクト全体の変更」を指示するのが効果的。
例：「全ページのヘッダー色を #3498db に統一。フッターを追加」。Cascade がプロジェクト全体を理解して、自動修正。
失敗パターンと対策｜デバッグのプロンプト術
「エラーが出ました」だけではなく、スクショ+具体的な動作と期待値を伝える
悪い例：「データが保存されません」。何が起きたか不明。
良い例：「『POST /api/save』を実行したが『500 Internal Server Error』が返却。期待値は『status: 200, message: saved』」。
「前のバージョンに戻して」ではなく「一度全部削除して〜で作り直して」
AI は「戻す」という指示より、「新しく作り直す」ほうが確実。
AI が誤解しやすい「日本語の曖昧性」を避ける技法
「もっと」→どの程度？「いい感じ」→何がいい？。こういう日本語は避ける。「20px 大きく」「削除ボタンは赤 #ff0000」と数字・色で指定。
実践演習｜3つのプロジェクトで学ぶ
初級：TODO アプリ完成までのプロンプト会話記録
【プロンプト 1】「React で TODO アプリ。タスク追加・削除・完了。色は青 #3498db」
【結果】基本機能は動く。デザイン OK。
【プロンプト 2】「完了タスクに打消し線を」
【結果】修正完了。1 段階で完成。
中級：EC 機能付きランディングページ開発フロー
【プロンプト 1】「商品一覧ページ。グリッド 3 列。商品名・価格・画像を表示」
【プロンプト 2】「『カートに追加』ボタンを赤色 #ff0000 に」
【プロンプト 3】「カート管理。合計金額の表示」
【プロンプト 4】「決済ページ。Stripe 連携」
4 段階で完成。各段階で修正。完璧度 95%。
上級：複数 API を使う予約システム開発
【プロンプト 1】「ユーザー登録機能（メール、パスワード）。Firebase Auth 使用」
【プロンプト 2】「予約カレンダー。日付を選択。時間帯を選択」
【プロンプト 3】「予約内容をメール送信。Gmail API 使用」
【プロンプト 4】「管理者画面。予約一覧表示。キャンセル機能」
複雑だが、段階的に進めれば、成功率 85% 以上。
プロンプト以外の「AI との上手な付き合い方」
デバッグ時のスクショ・コピペ戦略
エラー画面のスクショ。コンソール出力。Network タブのレスポンス。全部 AI に見せる。言葉より、画像・テキストのほうが信頼度が高い。
AI の「勝手な判断」を防ぐ指示方法
AI は「親切心」で、指定していない機能を追加する。パスワードリセット機能。プロフィール編集。ログアウト。
防ぐには「〜の機能だけで、他は不要」と明記。
何度も修正させる時の効率的な誘導方法
修正指示は「短く、1 つずつ」。「ボタンの色と大きさとテキストを修正」ではなく、「ボタンを赤色に」。「次に、ボタンを大きく」。
- 失敗の 8 割は「プロンプトの曖昧さ」が原因
- コツ 1-4：具体値（色・サイズ・レイアウト）で指定
- コツ 5-7：参考画像、削除指示、エラー情報を詳細に
- コツ 8：段階的修正が必須。1 回で完璧は不可能
- NG プロンプト vs 良いプロンプトの対比を暗記
- ツール別最適化：Cursor（コード）、Claude Code（ターミナル）、Windsurf（複数ファイル）
- 実践：初級 → 中級 → 上級の順で習得
バイブコーディングの成功は、プロンプト次第。8 つのコツを意識すれば、修正回数は劇的に減り、効率は 5 倍以上。今このルールを再確認して、次のプロンプトから実行してほしい。
