バイブコーディングのプロンプトの書き方｜初心者でも伝わる5つのコツ
バイブコーディングを始めてみたけれど、「AIにうまく伝わらない」「思っていたものと違うものが出てくる」「何てお願いすればいいのかわからない」と感じたことはありませんか。
先に結論を言うと、プロンプトは長く書くことより、必要な条件を整理して書くこと が大事です。
特に初心者のうちは、AIに「いい感じで作って」と頼むより、何を作るか、どこまで必要か、どう見せたいか を順番に伝えた方が失敗しにくくなります。
この記事では、バイブコーディングにおけるプロンプトの書き方を初心者向けに、基本の考え方、うまくいく型、悪い例と良い例、すぐ使えるテンプレートまで順番に解説します。
- そもそもプロンプトとは何か
- AIに伝わりやすい指示の基本ルール
- 失敗しにくいプロンプトの型
- 悪い例と良い例の違い
- CursorやClaude Codeですぐ使えるテンプレート
そもそもプロンプトとは？
プロンプト とは、AIに出す指示文のことです。
たとえば、
- ToDoアプリを作ってください
- このエラーの原因を教えてください
- このボタンを紫色に変更してください
こういったAIへのお願い文が、すべてプロンプトです。
ここで大事なのは、AIは「空気を読む」のが得意そうに見えても、必要な条件が抜けるとズレた答えを返しやすい ということです。
つまり、プロンプトの役割は「AIにやってほしいことを、誤解されにくい形で伝えること」です。
なぜプロンプトの書き方が大事なのか
同じAIでも、プロンプトの書き方で結果はかなり変わります。
たとえば、
- 何を作るのか
- どのファイルで作るのか
- どこまで実装するのか
- デザインをどうしたいのか
- 初心者向けに説明も欲しいのか
こうした条件が抜けると、AIは自分で補って答えます。すると、こちらの想定とズレやすくなります。
逆に言えば、最初に条件を整理して伝えるだけで、出力の精度はかなり上がります。
初心者が最初に覚えるべきプロンプトの型
初心者のうちは、プロンプトを次の5つの順番で書くのがおすすめです。
- 何を作りたいか
- 何の技術を使うか
- 必要な機能は何か
- 見た目や条件はどうしたいか
- 説明も必要か
この5つを入れるだけで、かなり伝わりやすくなります。
◯◯を作ってください。
使用する技術は ◯◯ です。
必要な機能は以下です。
- ◯◯
- ◯◯
- ◯◯
見た目は ◯◯ にしてください。
初心者でもわかるように、コードはできるだけシンプルにしてください。
変更した内容の説明もお願いします。まずはこの形をそのまま使えばOKです。
悪いプロンプトと良いプロンプトの違い
ここは、実際の例で見るのがいちばんわかりやすいです。
悪い例
いい感じのToDoアプリを作ってください。これだと、
- 何の技術で作るのか不明
- どこまで必要か不明
- デザインの方向性が不明
- 1ファイルでいいのか、複数ファイルなのか不明
なので、AIが勝手に補って作ることになります。
良い例
index.html だけで動くシンプルなToDoアプリを作ってください。
条件は以下です。
- HTML、CSS、JavaScriptを1ファイルにまとめる
- タスクの追加、完了、削除ができる
- 日本語表示にする
- デザインはシンプルで見やすくする
- 初心者でも読めるようにコードはわかりやすくする
- 完成後に、どこを直せば見た目を変更できるかも説明してくださいこちらの方が、AIが迷いにくく、こちらも欲しいものに近づきやすくなります。
プロンプトを書くときの5つのコツ
ここからは、初心者でもすぐ使えるコツを5つに絞って解説します。
- 最初に目的を書く
「何を作るのか」を最初に書くと、AIが方向をつかみやすくなります。 - 条件は箇条書きで分ける
長文で一気に書くより、機能や条件を箇条書きにした方が伝わりやすいです。 - 範囲を絞る
最初から大きいものを頼まず、まずは1ファイル、1機能、1画面で考える方が失敗しません。 - 説明もセットで頼む
「変更点も説明してください」と入れると、ただ作るだけでなく学びながら進められます。 - 修正は1つずつ頼む
一度に全部直させるより、1個ずつ直した方が結果が安定します。
Cursorで使いやすいプロンプトの書き方
Cursorは、エディタの中でコードを作りながら進めるのが得意です。だから、最初から「作るもの」と「条件」をはっきり伝えるのが向いています。
◯◯を作ってください。
条件は以下です。
- 使用技術:
- 必要な機能:
- デザインの方向性:
- 日本語表示にする
- 初心者でもわかりやすいコードにする
完成後に、どのファイルを編集すれば変更できるかも説明してください。Cursorの詳しい使い方は、こちらの記事でも解説しています。
Claude Codeで使いやすいプロンプトの書き方
Claude Codeは、既存コードを読んで説明したり、小さく修正したりするのが得意です。だから、最初は「作って」よりも「説明して」「直して」の形の方が使いやすいです。
このプロジェクトを確認して、初心者向けに
- 何をしているコードか
- 重要なファイルはどれか
- どこを直せば目的の変更ができるか
を説明してください。
そのうえで、◯◯を修正してください。
変更したファイル名と変更内容もわかりやすく説明してください。Claude Codeの詳しい使い方は、こちらの記事で解説しています。
初心者がやりがちな失敗
- 「いい感じで」と書いてしまう
便利そうに見えますが、条件が足りないのでズレやすいです。 - 一度にたくさん頼みすぎる
画面作成、機能追加、デザイン修正、バグ修正を一気に頼むと失敗しやすいです。 - エラー文を書かない
バグ修正を頼むときは、エラー文をそのまま貼った方が早いです。 - AIの出力を一切確認しない
全部理解しなくていいですが、どのファイルが変わったかくらいは見た方が安全です。
AIが思い通りに動かないときの確認手順は、バイブコーディングのエラー対処法まとめで初心者向けに整理しています。
プロンプトがうまく書けないときの対処法
もし「何て書けばいいかわからない」となったら、最初から完璧を目指さなくて大丈夫です。
次の順番で考えるとラクです。
- 何を作るかを1文で書く
- 必要な機能を3つ以内に絞る
- 見た目の希望を1つだけ書く
- 最後に「初心者向けに説明してください」を足す
この4つだけでも、かなり形になります。
初心者でもわかるように、コードはできるだけシンプルにして、変更点も説明してください。
この一文を入れるだけでも、かなりやさしい出力になりやすいです。
基礎知識があるとプロンプトはもっと強くなる
プロンプトの書き方だけでもAIはかなり使いやすくなります。ただ、HTML・CSS・JavaScriptの基礎が少しでもあると、「何を頼むか」「どこを直すか」がもっとはっきりします。
つまり、プロンプト力と基礎知識はセットです。どちらかだけより、両方ある方が圧倒的に進めやすくなります。
よくある質問
Q. プロンプトは長い方がいいですか？
長ければいいわけではありません。必要な条件が整理されていることの方が大事です。
Q. 日本語でも大丈夫ですか？
はい、日本語で大丈夫です。むしろ初心者のうちは、日本語で具体的に書く方が進めやすいです。
Q. 1回で完璧なプロンプトを書けないとダメですか？
大丈夫です。最初はざっくり書いて、うまくいかなければ条件を足していく形で問題ありません。
まとめ
バイブコーディングのプロンプトの書き方でいちばん大事なのは、AIに何をしてほしいかを、順番に整理して伝えることです。
初心者のうちは、次の流れだけ覚えておけば十分です。
- 何を作るかを書く
- 条件を箇条書きで書く
- 説明も頼む
- 修正は1つずつ頼む
「バイブコーディングの教科書」として言い切るなら、プロンプトはセンスではありません。型を覚えて、少しずつ慣れるものです。最初はテンプレートをそのまま使うところから始めれば大丈夫です。
コメント