AIへの指示の出し方 ── 「いい感じにして」では伝わらない理由と解決法

この記事でわかること

• なぜ指示の出し方が重要なのか
• 良い指示・悪い指示の比較
• 指示のテンプレート
• 段階的に作るコツ

---

指示の質 ＝ 成果の質

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

AIは指示通りに動く。曖昧な指示を出せば曖昧な結果が返ってくるし、具体的な指示を出せば具体的な結果が返ってくる。

---

良い指示と悪い指示

悪い例

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

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

良い例

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

→ AIは何を作ればいいか明確にわかる。

さらに良い例

フリーランスのデザイナー向けのポートフォリオサイトを作ってください。

ターゲット：制作会社の採用担当者
目的：仕事の依頼を受けること

ページ構成：
1. トップ（名前＋キャッチコピー＋メインビジュアル）
2. 実績一覧（画像グリッド、クリックで詳細表示）
3. スキル（使えるツール一覧）
4. お問い合わせフォーム

デザイン：
- ミニマルで余白を活かしたデザイン
- 白基調、アクセントカラーはコーラルピンク
- フォントはゴシック体

技術：HTML + Tailwind CSS

→ 目的・ターゲット・構成・デザインが明確。AIが迷わない。

---

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

Webサイトを作りたい場合

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

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

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

デザイン：
- [カラー]基調
- [雰囲気]（モダン、シンプル、かわいい等）
- レスポンシブ対応

技術：[HTML/CSS、React、Astro等]

ツールやアプリを作りたい場合

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

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

入力：[ユーザーが入力するもの]
出力：[ツールが返すもの]

技術：[Python、JavaScript等]

既存のコードを修正したい場合

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

現在の動作：[今どう動いているか]
期待する動作：[どう動いてほしいか]

[コードを貼り付け]

---

一度に全部作らない

バイブコーディングの最大のコツは**「段階的に作る」**こと。

❌ 「ECサイトを全部作って」
   → 巨大すぎてAIが全体を把握できない

✅ ステップ1:「商品一覧ページを作って」
   ステップ2:「商品詳細ページを追加して」
   ステップ3:「カートに入れるボタンを追加して」
   ステップ4:「カート画面を作って」
   → 1つずつ確認しながら進められる

---

まとめ

1. 具体的に伝える – 「いい感じ」ではなく仕様を明確に
2. テンプレートを使う – 毎回ゼロから考えない
3. 段階的に作る – 小さく作って確認を繰り返す

この3つを意識するだけで、AIの出力品質が劇的に変わる。

次の記事: 指示の出し方がわかったら、具体的なツールの使い方を学びましょう。