Vibe Coding入門｜やり方とプロンプト11選

Vibe Coding（バイブコーディング）って実際どうやるの？
Vibe Codingの始め方を知りたい！

Vibe Codingは、プログラミングの知識がなくてもAIに自然言語で指示するだけでアプリを作れる開発スタイルです。

コツさえ押さえれば、今日から動かすことができます。

この記事では、Vibe Codingのやり方を入門者向けに解説し、すぐに使えるプロンプト例を11選まとめました。

Vibe Codingとは｜従来の開発との3つの違い

Vibe Codingは2025年に急速に広まった、AIに自然言語で指示してコードを書いてもらう開発スタイルです。

ここでは、以下の内容について詳しく解説します。

「コードを書かずに作る」という意味

Vibe Codingとは、開発者が自然言語でAIに指示を出し、コードの生成・実行・修正をAIに任せる開発スタイルです。

名称のもとになった “vibe（バイブ）” は「感覚・雰囲気」を意味する英語です。

「こんな感じのものが欲しい」という感覚をAIに伝えるだけでコードが生まれる、という発想からこの名前がついています。

提唱したのは、OpenAI創設メンバーであり機械学習研究者のAndrej Karpathyです。

2025年2月2日にX（旧Twitter）に投稿した「Vibe Coding」という言葉が急拡散し、投稿は450万回以上表示されました。
これをきっかけに、世界中のエンジニアがこのスタイルを試し始めました。

よく混同される「ノーコード」や「AIアシスト」との違いも、ここで整理しておきます。

ノーコードは決められたUIを操作してアプリを作る手法で、コードは存在しません。
AIアシストは人間がコードを書く際の補助をAIが担うスタイルです。
Vibe Codingはこのどちらとも異なり、AIが主体としてコードを書き、人間は目的を伝える側に回ります。

Vibe Codingと従来開発の3点比較

Vibe Codingと従来のコーディングは、3つの軸で明確に違います。

「設計書が要らない」というのも大きな変化です。

従来は仕様を固めてからコードを書くのが当たり前でしたが、Vibe Codingでは「こんなものが欲しい」と伝えながら形にしていく反復アプローチをとります。

また、エラーが出てもAIにそのまま渡して修正させるので、コードを自分で読める必要もありません。

Vibe Codingでできること・苦手なこと

Vibe Codingは万能ではありません。得意な領域と苦手な領域を理解した上で使うのが、うまく活用するための最初の一歩です。

「夢のツール」ではなく、「適切な使い道がある道具」として見るのが正しい姿勢です。

私がVibe Codingで最初に作ったのは「今日やることを入力してチェックできるページ」だけでした。
それくらいシンプルな目標が、最初の達成感につながりました。

Vibe Codingに使うツール｜入門者に合った選び方3つ

Vibe Codingを始めるには、AIとコードをつなぐツールが必要です。

ここでは、以下の内容について詳しく解説します。

ブラウザだけで動くツール（Bolt.new・Replit）

入門の最初の一歩にはブラウザ型のツールが最適です。

インストールも環境構築も不要で、URLを開いてすぐ使い始められます。

「まず動くものを見てみたい」という段階では、Bolt.newが最も手軽です。

テキストボックスに「ToDoリストアプリを作って」と入力するだけで、数十秒以内にコードが生成されブラウザ上で動きます。

「本当に動くの？」という疑問は、触ってみれば30秒で解消されます。

エディタ型ツール（Claude Code・Cursor）

Vibe Codingを本格的に続けるなら、エディタ型ツールへの移行を視野に入れておくとよいです。

Claude Code（Anthropic製）は、ターミナルから操作する自律型AIエージェントです。
ファイルの作成・編集・コマンドの実行まで一貫して任せられます。
詳しい使い方はClaude Code 使い方｜初心者向け3ステップ入門を参考にしてください。

Cursor（Anysphere製）は、VS Codeライクな操作感のAIエディタです。
コードベース全体を把握した上でAIが提案・修正を行います。
詳しい使い方はCursorでPythonを始める初心者向け使い方入門を参考にしてください。

最初の1本はブラウザ系ツールから始める理由

「早くClaude Codeを使いたい」という気持ちはよくわかります。

でも、入門の段階で環境構築につまずいてモチベーションが下がるのが一番もったいないです。

「体験→理解→本格化」の順序を踏むと、つまずきポイントが激減します。

私自身、最初にBolt.newで数回アプリを作ってからClaude Codeに移りましたが、その経験があったからこそ何をどう指示すればいいかがスムーズにわかりました。

Vibe Codingのやり方｜最初のアプリを作る5ステップ

ここでは、Vibe Codingのやり方について、詳しく解説していきます。

【ステップ1】作るものを1文で決める

Vibe Codingで最も多い失敗は、最初から複雑なものを作ろうとすることです。

「SNSアプリ」「ECサイト」「AIチャットボット」——こういったゴールを設定すると、AIへの指示が曖昧になり、修正が雪だるま式に増えていきます。

最初の目標は、1文で言い切れる小さなものにしてください。

共通しているのは「1つの機能しかない」こと。
これが完成の達成感をつかむ最短ルートです。

【ステップ2】AIに箇条書きで要件を伝える

最初のプロンプトの質が、仕上がりの8割を決めます。

「いい感じに作って」「よしなにやって」は通じないと思ってください。

AIに伝える要件は、次の3点を箇条書きにするのが効果的です。

要件がまだ固まっていないときは、AIに壁打ちを頼む方法も使えます。

「○○なアプリを作りたいんだけど、要件定義を手伝って」と伝えると、AIが質問を返してくれます。
それに答えていくうちに仕様が自然と明確になります。

【ステップ3】生成されたコードを動かして確認する

コードが生成されたら、まず動かしてみることが先決です。

一発で完璧に動かないのは正常なので、エラーが出ても慌てなくて大丈夫です。

エラーが出たときの正しい対応は「エラーメッセージをそのままAIに渡す」ことです。

「直して」だけで渡すよりも、「このエラーが出ました。原因と修正方法を教えて」と添えた方が解決が早くなります。

【ステップ4】フィードバックで1機能ずつ改善する

最初のコードができたら、機能を1つずつ追加・改善していきます。

複数の修正を一度に依頼しないことがポイントです。

「ボタンを右下に固定して、色を赤にして、フォントも大きくして」とまとめると、AIがどれかの修正を落としたり、予期しない崩れが起きたりします。

「ボタンを画面右下に固定して」と1つだけ送り、確認してから次を送る。
この繰り返しが安定した改善につながります。

Gitを使っている場合は、変更のたびにコミットする習慣をつけておきましょう。
修正で壊れたときに即座に元の状態に戻せます。

【ステップ5】完成前にセキュリティを確認する

Vibe Codingで作ったコードは動くものの、セキュリティ上の問題を含んでいることがあります。

公開する前に、AIに対して次のように聞いておくと安心です。

このコードにセキュリティ上の問題はありますか？
特にXSS・SQLインジェクション・認証まわりで気になる点があれば教えてください。

個人の手元だけで使うツールなら影響は小さいですが、外部に公開するWebアプリの場合は必ずこのステップを踏んでください。

Vibe Codingプロンプト例11選｜用途別に使える表現集

実際のVibe Codingですぐに使えるプロンプトを、用途別に11例まとめました。

ここでは、以下の内容について詳しく解説します。

アプリ作成・機能追加を依頼する（5選）

最初の作成依頼と機能追加に使えるプロンプトです。

「○○を作って」だけでなく、条件を追加するほど精度が上がります。

① ゼロから作る

タスクを追加・削除・完了チェックできるToDoリストアプリを作ってください。
技術スタック：HTML・CSS・JavaScript（フレームワークなし）
UI：白背景・シンプル・スマホでも使いやすいレイアウト
データはブラウザのlocalStorageに保存してください。

→ 「技術スタック・UI・データ保存先」をセットで渡すと、AIが迷わず実装できます。

② 機能を追加する

今のコードに「期限日を設定できる機能」を追加してください。
期限が過ぎたタスクは赤く表示されるようにしてほしいです。

→ 「何を追加するか」と「その結果どうなるか」を両方書くと精度が上がります。

③ UIを変更する

送信ボタンを画面右下に固定してください。
スクロールしても追従するようにしてほしいです。

→ 「どこに」「どうなるか」を具体的に示すのがコツです。「おしゃれに」は使わないでください。

④ データを保存する

入力したデータをlocalStorageに保存して、
ページをリロードしても消えないようにしてください。

→ データ保存の方法を明示することで、AIが適切な実装を選びます。

⑤ 条件・制約を加える

タスクのテキストは140文字以内に制限してください。
上限を超えたときはフォームの下に「140文字以内で入力してください」と赤文字で表示してください。

→ 「いつ」「何を表示するか」まで書くと、動作が意図通りになります。

エラー修正・デバッグを依頼する（3選）

エラーが出たときや動作がおかしいときに使えるプロンプトです。

エラーメッセージをそのまま渡すのが最速の解決策です。

⑥ エラーメッセージを渡す

以下のエラーが出ました。原因と修正方法を教えてください。

[エラーメッセージをここにそのまま貼り付け]

→ エラー文はコピペそのままでOKです。説明を付け足すよりも原文をそのまま渡す方が正確です。

⑦ 意図した動作でないときの伝え方

タスクを追加するとリストに表示されますが、
追加後に入力フォームがリセットされません。
追加後は入力欄を空にしてください。

→ 「今どうなっているか」と「どうしてほしいか」の2点を必ずセットで伝えてください。

⑧ 前の変更で壊れたときのやり直し

さっきの変更後に○○機能が動かなくなりました。
直前の変更を元に戻した上で、○○だけ修正してもらえますか？

→ 「何が壊れたか」を先に伝え、「直前の変更を戻す」と明示するのがポイントです。

コード理解・改善を依頼する（3選）

AIが生成したコードを理解したり、品質を高めたりするときに使えるプロンプトです。

コードの中身を全く知らなくてもOKですが、最低限「何をするコードなのか」は把握しておくと、トラブル対応が格段に楽になります。

⑨ コードを理解する

このコードを日本語でわかりやすく説明してください。
プログラミング未経験の人でもわかるレベルでお願いします。

→ 難易度を指定することで、自分に合った粒度の説明が返ってきます。

⑩ シンプルに整理する

このコードをもっとシンプルに書き直してもらえますか？
重複している処理や不要な部分があれば整理してください。

→ AIが生成したコードは冗長になりがちです。定期的にリクエストすると品質が上がります。

⑪ セキュリティチェックを依頼する

このコードにセキュリティ上の問題はありますか？
XSS・CSRF・SQLインジェクションなどの観点で確認してください。

→ 外部公開前には必ずこのプロンプトを使ってください。動作確認だけでは見えないリスクがあります。

Vibe Codingに関するよくある質問

Q：プログラミング未経験でもVibe Codingはできますか？

A：できます。Vibe Codingはコードを書く知識がなくても始められます。
ただし、「何を作りたいか」を言語化する力と、「動作を確認して問題を伝える」観察力は必要です。
プログラミングの知識よりも、目的を明確にするスキルが問われます。

Q：Vibe Codingで作ったコードは商用利用できますか？

A：ツールやAIサービスの利用規約によって異なります。
Bolt.new・Replit・Claude Code・Cursorのいずれも、生成されたコードの著作権はユーザーに帰属する方針を取っていますが、最新の規約を各公式サイトで確認してください。
商用利用を前提とする場合は、利用ツールの規約確認を必ず行ってください。

Q：Vibe Codingは本格的な開発でも使えますか？

A：プロトタイプ・社内ツール・個人プロジェクトでは十分実用レベルです。
一方、大規模なサービスやセキュリティ要件が厳しいシステムへの本番投入には、コードレビューや専門家の関与が必要です。
「素早く動くものを作る」という局面での活用が最も効果を発揮します。

まとめ

Vibe Codingは、AIに自然言語で指示するだけでアプリを作れる新しい開発スタイルです。

入門の手順をまとめると、次のとおりです。

この記事のプロンプト例をそのままコピーして、今日から試してみてください。

最初の1本を作り終えたとき、「思っていたより全然シンプルだった」と感じるはずです。

次の一歩として、どんな小さなツールを作ってみるか、今日中に1つ決めてみてください。