AIへの指示の出し方 ── 「いい感じにして」では伝わらない理由と、成果が10倍変わるプロンプト術

この記事でわかること

• なぜ指示の出し方が重要なのか
• 良い指示・悪い指示の比較7パターン
• AIへの指示で使える5W1Hフレームワーク
• すぐコピペで使えるテンプレート集
• 段階的に作るコツ
• AIとのやり取りで使えるフレーズ集
• よくある失敗と対処法
• よくある質問

---

指示の質 ＝ 成果の質

バイブコーディングで最も重要なスキルは、プログラミングの知識ではなく**「何を作りたいかを明確に伝える力」**だ。

AIは指示通りに動く。曖昧な指示を出せば曖昧な結果が返ってくるし、具体的な指示を出せば具体的な結果が返ってくる。これはプログラミング経験の有無に関係ない。

指示の質による結果の違い

指示のレベル	指示の例	結果
レベル1：曖昧	「いい感じのサイト作って」	AIが勝手に判断。期待と違うものが出てくる
レベル2：ざっくり	「プロフィールサイトを作って」	最低限のものは出るが、デザインや構成は微妙
レベル3：具体的	「ダークブルー基調で、名前・経歴・スキル一覧を載せたプロフィールサイトを作って」	かなり近いものが出る
レベル4：完璧	目的・ターゲット・構成・デザイン・技術を全て指定	一発で期待通りのものが出る

---

良い指示と悪い指示：7パターン比較

実際のパターンで「悪い指示」と「良い指示」を比較しよう。

パターン1：Webサイト制作

悪い指示：

いい感じのWebサイトを作って

→ AIは「いい感じ」が何を意味するかわからない。結果はランダム。

良い指示：

以下の仕様でプロフィールサイトを作ってください：
- 1ページ構成
- 名前、自己紹介（100字程度）、スキル一覧（5個）、連絡先を表示
- 色はダークブルー（#1e3a5f）基調、白テキスト
- レスポンシブ対応（スマホでも見やすく）
- HTML + Tailwind CSS

パターン2：アプリの機能追加

悪い指示：

このアプリをもっと便利にして

良い指示：

このToDoアプリに以下の機能を追加してください：
1. タスクに「仕事」「プライベート」のカテゴリを付けられる
2. カテゴリごとにフィルター表示できる
3. 期限を設定でき、期限切れのタスクは赤色で表示
既存の機能はそのまま維持してください

パターン3：デザインの修正

悪い指示：

もっとかっこよくして

良い指示：

以下のデザイン変更をお願いします：
- ヘッダーの背景色を白→ネイビー（#1a1a2e）に変更
- ボタンの角丸を4px→12pxに変更
- カード要素にbox-shadowを追加（0 2px 8px rgba(0,0,0,0.1)）
- フォントサイズを全体的に1段階大きくして

パターン4：エラーの報告

悪い指示：

動かないんだけど

良い指示：

以下のエラーが出ています。修正してください：

エラーメッセージ：
TypeError: Cannot read properties of undefined (reading 'map')
  at TaskList (TaskList.jsx:15:23)

期待する動作：タスク一覧が表示される
現在の動作：画面が真っ白になる
このエラーは「タスクを追加」ボタンを押した後に発生します

パターン5：レイアウトの指定

悪い指示：

レイアウトを変えて

良い指示：

トップページのレイアウトを以下の構成に変更してください：

【PC表示】
┌──────────────────────────────┐
│         ヘッダー（固定）         │
├──────────────────────────────┤
│   ヒーローセクション（全幅）       │
│   背景画像 + 中央にタイトル       │
├──────┬───────────────────────┤
│ サイド │    メインコンテンツ       │
│ バー  │    カード3列グリッド       │
│ 200px │                        │
├──────┴───────────────────────┤
│         フッター               │
└──────────────────────────────┘

【スマホ表示】
サイドバーはハンバーガーメニューに格納
カードは1列表示

パターン6：データの扱い

悪い指示：

データを保存できるようにして

良い指示：

入力したデータをブラウザのlocalStorageに保存してください。
- ブラウザを閉じてもデータが残るように
- データ形式はJSON
- 保存するデータ：タスク名、カテゴリ、期限、完了フラグ
- 起動時にlocalStorageからデータを読み込んで表示

パターン7：段階的な開発

悪い指示：

ECサイトを全部作って

良い指示：

ECサイトを段階的に作ります。
まずStep1として商品一覧ページを作ってください。

商品データ：
- 商品名、価格、画像URL、カテゴリを持つ
- ダミーデータを5件用意して
- カード形式で3列グリッド表示
- カテゴリでフィルターできるようにして
- 価格の安い順・高い順でソートできるようにして

次のStepで商品詳細ページを追加する予定です。

---

5W1Hフレームワーク

AIへの指示を考えるとき、以下の5W1Hを意識すると漏れがなくなる。

要素	質問	指示に含めること	例
What	何を作るか	アプリの種類、機能	「家計簿アプリ」
Who	誰が使うか	ターゲットユーザー	「一人暮らしの20代」
Why	何のために	目的、解決したい課題	「毎月の支出を把握したい」
Where	どこで使うか	プラットフォーム	「スマホのブラウザで」
When	いつ使うか	利用シーン	「買い物の直後にサッと入力」
How	どんな見た目・動きか	デザイン、UI、技術	「シンプル、片手で操作可能」

5W1Hを使った指示の例

【What】月々の収支を記録する家計簿Webアプリを作ってください。

【Who】一人暮らしの20代がターゲットです。
【Why】毎月「何にいくら使ったか」を把握して、節約ポイントを見つけたい。
【Where】スマホのブラウザで使います。
【When】買い物の直後にサッと入力するイメージです。

【How】
- 入力は最小限（金額、カテゴリ選択、メモ）
- 片手で操作できるUI（ボタンは大きめ）
- 月別のカテゴリ別円グラフ
- 月ごとの支出推移の棒グラフ
- データはlocalStorageに保存

技術：React + Tailwind CSS

---

すぐ使える指示テンプレート5選

テンプレート1：Webサイト

[サイトの種類]のWebサイトを作ってください。

目的：[目的]
ターゲット：[誰向けか]

ページ構成：
1. [ページ名]（[内容]）
2. [ページ名]（[内容]）
3. [ページ名]（[内容]）

デザイン：
- [メインカラー]基調
- [雰囲気]（モダン / シンプル / かわいい / プロフェッショナル等）
- レスポンシブ対応
- フォントは[ゴシック体 / 明朝体]

技術：[HTML / Astro / React / Next.js等]

テンプレート2：Webアプリ・ツール

[ツールの種類]を作ってください。

機能：
1. [機能1]
2. [機能2]
3. [機能3]

入力：[ユーザーが入力するもの]
出力：[ツールが返すもの]
データ保存：[localStorage / ファイル / なし]

UI：
- [画面の説明]
- [ボタンやフォームの配置]

技術：[React / Python / JavaScript等]

テンプレート3：既存コードの修正

以下のコードに[修正内容]を追加してください。

現在の動作：[今どう動いているか]
期待する動作：[どう動いてほしいか]
変更箇所：[できるだけ具体的に]

注意：
- 既存の[機能名]は壊さないでください
- [制約条件があれば記載]

[コードを貼り付け]

テンプレート4：デザイン変更

以下のデザイン変更をお願いします。

変更内容：
1. [要素名]の[プロパティ]を[現在の値]→[変更後の値]
2. [要素名]の[プロパティ]を[現在の値]→[変更後の値]

全体的な方向性：[モダンに / 落ち着いた感じに / ポップに等]

参考：[参考サイトのURLや「○○のようなイメージ」]

テンプレート5：API連携

[APIサービス名]のAPIを使って[やりたいこと]を実装してください。

API情報：
- エンドポイント：[URL]
- 認証：[APIキー / OAuth等]
- 取得したいデータ：[データの種類]

表示方法：
- [カード形式 / テーブル / グラフ等]
- [更新頻度：リアルタイム / ボタンクリック時等]

エラー処理：
- API制限に達した場合：[メッセージを表示]
- ネットワークエラー：[リトライ / キャッシュ表示]

---

段階的に作るコツ

バイブコーディングの最大のコツは**「一度に全部作らない」**こと。

なぜ段階的に作るべきか

一括で作る場合	段階的に作る場合
1000行のコードにバグが隠れやすい	50行ずつ確認するのでバグが見つけやすい
期待と違ったら全部やり直し	各ステップで軌道修正できる
AIがコンテキストを見失いやすい	AIが直前の文脈を正確に把握
完成まで動くものが見えない	各ステップで動くものが見える

段階的開発の実例：ブログサイト

---

AIとのやり取りで使えるフレーズ集

バイブコーディングでは、最初の指示だけでなくその後のやり取りも重要。以下のフレーズを覚えておくと便利だ。

修正を依頼するフレーズ

シーン	使えるフレーズ
デザインを変えたい	「ヘッダーの背景色を○○に変えて」
機能を追加したい	「○○の機能を追加して。既存の機能はそのまま維持して」
レイアウトを変えたい	「カードを2列→3列に変えて。スマホでは1列にして」
テキストを変えたい	「タイトルを○○に、説明文を○○に変えて」

トラブル時のフレーズ

シーン	使えるフレーズ
エラーが出た	「以下のエラーが出ました。修正してください：[エラーメッセージを貼り付け]」
画面が真っ白	「画面に何も表示されません。コンソールエラーを確認して修正してください」
一部だけ動かない	「○○ボタンをクリックしても反応しません。原因を特定して修正してください」
前の状態に戻したい	「直前の変更を取り消して、1つ前の状態に戻してください」

品質を上げるフレーズ

シーン	使えるフレーズ
コードの説明	「このコードの各部分にコメントを追加して、何をしているか説明して」
パフォーマンス	「ページの読み込み速度を改善してください。画像の最適化とコードの軽量化をして」
アクセシビリティ	「WAI-ARIAのルールに従ってアクセシビリティを改善して」
レスポンシブ	「スマホ（375px）、タブレット（768px）、PC（1200px）で確認して、崩れている箇所を修正して」

---

よくある失敗パターンと対処法

失敗1：一度に全部指示してしまう

問題	対処法
「ECサイトを全部作って」と一気に指示	機能ごとに分割。まず商品一覧、次にカート、次にチェックアウト
AIが途中で混乱してバグだらけ	1回の指示は1つの機能に絞る

失敗2：曖昧な色・サイズ指示

問題	対処法
「明るい色にして」→ 期待と違う色	カラーコード（#3b82f6）やTailwindのクラス名（bg-blue-500）で指定
「大きくして」→ 大きすぎ	px値やrem値で具体的に指定

失敗3：変更範囲を指定しない

問題	対処法
「デザインを変えて」→ 全体が変わってしまう	「ヘッダーだけ」「このボタンだけ」と範囲を限定
既存の機能が壊れる	「既存の○○は変更しないで」と明記

失敗4：エラーを自分で解決しようとする

問題	対処法
エラーを見て焦る	エラーメッセージをそのままAIに貼り付けるだけでOK
自分でコードを修正して悪化	AIに任せる。それがバイブコーディング

---

よくある質問（FAQ）

Q. 英語で指示を出した方がいいですか？

A. 日本語でOKです。 2026年現在のAI（Claude、GPT-4等）は日本語の理解力が非常に高く、日本語で指示を出しても英語と遜色ない結果が得られます。ただし、技術用語（React、Tailwind等）は英語のまま使った方が正確に伝わります。

Q. 最初の指示で完璧にしなきゃダメ？

A. いいえ。 むしろ最初は「60%の指示」で十分です。AIが生成した結果を見てから「ここを変えて」「この機能を追加して」と対話で詰めていくのがバイブコーディングの正しいやり方です。最初から完璧を目指すと指示を書くだけで疲れてしまいます。

Q. AIが期待通りのものを返してくれない場合は？

A. 指示を具体化するか、別の言い方を試しましょう。 特にデザイン関連は、参考イメージの説明を加えると精度が上がります。「Appleのような洗練されたデザインで」「NotionのようなシンプルなUIで」のように、有名サービスを参考として伝えるのも効果的です。

Q. 長い指示を書くのが面倒です

A. テンプレートを活用しましょう。 上で紹介したテンプレートをメモアプリに保存しておき、プロジェクトごとに空欄を埋めるだけで十分な指示が作れます。慣れると5分もかかりません。

Q. AIに「これでいいですか？」と聞かれた場合は？

A. 実際に動かして確認してから返答しましょう。 コードを見て判断する必要はありません。ブラウザで表示して、期待通り動いているか確認するだけでOKです。動いていれば「OK、次は〇〇を追加して」、問題があれば「ここが違う」と伝えましょう。

---

まとめ：指示の出し方を制する者がバイブコーディングを制する

バイブコーディングの成果の8割は「指示の質」で決まる。

この記事のポイント：

1. 具体的に伝える – 「いい感じ」ではなく色・サイズ・構成を明確に
2. 5W1Hフレームワークを使えば漏れがなくなる
3. テンプレートを活用 – 毎回ゼロから考えない
4. 段階的に作る – 小さく作って確認を繰り返す
5. 対話で改善 – 最初の指示で完璧にしなくてOK