バイブコーディングの成否を決めるのは「プロンプト（AIへの指示）の書き方」です。同じツールを使っても、指示の出し方で結果の品質が10倍変わります。AIに的確に伝えるための「プロンプトのコツ」を、テンプレート付きで解説します。
良いプロンプトの3原則
原則1：具体的に書く
❌ 悪い例：「かっこいいサイトを作って」
✅ 良い例：「白背景のシンプルなポートフォリオサイトを作って。ヘッダーに名前とナビゲーション（About・Works・Contact）。メインに自己紹介文と作品画像を3つ並べて。フォントはゴシック体で、アクセントカラーは青（#3B82F6）」
原則2：段階的に指示する
❌ 悪い例：「ECサイトを全部作って」
✅ 良い例：「まずトップページのヘッダーとヒーローセクションを作って」→「次に商品一覧を3列のカードレイアウトで追加して」→「カートに追加ボタンを各商品につけて」
原則3：参考イメージを伝える
❌ 悪い例：「おしゃれなデザインで」
✅ 良い例：「Appleの公式サイトのような、余白が多くミニマルなデザインにして」
すぐ使えるプロンプトテンプレート5選
テンプレ1：LPを作るとき
「[業種]のランディングページを作って。構成は①ヒーローセクション（キャッチコピー＋CTAボタン）②お悩み共感③サービス紹介（3つ）④お客様の声（3件）⑤よくある質問⑥CTA。デザインは[色]をメインに[雰囲気]にして」
テンプレ2：業務ツールを作るとき
「[目的]の管理ツールを作って。機能は①[機能A] ②[機能B] ③[機能C]。データは画面上で入力・編集・削除できるようにして。デザインはシンプルで見やすく」
テンプレ3：修正を依頼するとき
「[セクション名]の[要素]を[変更内容]に変えて。例えば背景色を白から#F5F5F5に、ボタンの角を丸くして」
テンプレ4：エラーを修正するとき
「以下のエラーが出ました。修正してください：[エラーメッセージをコピペ]」
テンプレ5：機能を追加するとき
「今の[ページ名]に[新しい機能]を追加して。既存のデザインに合わせて、[位置]に配置して」
よくある質問
Q. 日本語と英語どちらで指示した方がいいですか？
A. 日本語で問題ありません。最新のAI（Claude・GPT-4・Gemini）はいずれも日本語を高精度で理解します。技術用語だけ英語を混ぜると精度が上がることもあります（例：『レスポンシブ対応にして』）。
Q. AIが思った通りのものを作ってくれないときは？
A. 指示をより具体的にするか、修正を細かく分けて依頼しましょう。『ここが違う。○○を△△に変えて』と具体的に伝えるのがコツです。
Q. プロンプトを書くのにプログラミング用語は必要？
A. 不要です。『ボタンを押したら次のページに移動する』『入力した数字を合計して表示する』のように、日常的な言葉で説明すれば十分伝わります。
バイブコーディングを無料で学びませんか？
プログラミング完全未経験でもAIに話しかけるだけでアプリが作れる「バイブコーディング」の始め方を無料の動画講座で解説しています。スキマ時間で学べる内容です。
この記事が参考になったら、ランキング応援お願いします！
