バイブコーディングとは、作りたいアプリやWebサイトを日本語でAIに説明し、AIが書いたコードを細かく読まずに、動く画面を見ながら会話で直していく開発スタイルのことです。「予約フォームを作って」「ボタンをもっと大きく」と頼むだけで、プログラミングの経験がなくても、小さなアプリなら形にできます。
バイブコーディングの意味と言葉の由来
この言葉を広めたのは、OpenAIの共同創業者で、元テスラAIディレクターのアンドレイ・カーパシー氏です。2025年2月にXへの投稿で、AIに話しかけて提案をほぼそのまま受け入れ、コードの存在を忘れて「雰囲気（vibe）」に身を任せる作り方を vibe coding と呼びました。日本語ではカタカナで「バイブコーディング」と書くのが一般的です。
ポイントは、主役がコードではなく会話と結果だという点です。従来の開発では一行ずつ書いて確かめますが、バイブコーディングでは「何を作りたいか」を言葉にする力と、できたものを使って確かめる力が中心になります。英語の詳しい解説はWhat is vibe codingにまとめています。
実例：プロンプト1つからアプリ公開まで
ここではVibeDreamを使った流れを紹介します。VibeDreamの画面は現在英語ですが、チャット欄には日本語でそのまま書き込めますし、アプリ内の文言を日本語にするよう頼むこともできます。New Projectを押して、次のような文章を貼り付けるか、マイクを押して話しかけます。
小さなパン屋「こむぎ堂」の予約ページを作ってください。
お客さんがスマホで、受け取り日、時間、商品（食パン、クロワッサン、あんパン）、個数、名前、電話番号を入力できるようにします。
送信したら「ご予約ありがとうございます」の画面を出してください。
見た目は温かい雰囲気で、クリーム色の背景、角の丸いボタン、大きめの文字にしてください。
画面の文言はすべて日本語にしてください。数秒でチャットの横にプレビューが現れ、AIの作業に合わせて画面が組み上がっていきます。完成したら、お客さんのつもりで全部のボタンを押し、わざと電話番号を空にして送信してみます。おかしな点が見つかったら、1回のメッセージで1つずつ直してもらいます。
- 「スマホで見ると商品カードが詰まっています。縦に並べて間隔を広げてください」
- 「過去の日付を選べないようにして、今日以降だけにしてください」
- 「予約の一覧を見られる管理ページを作り、パスワードで守ってください」
思いどおりに動いたら、Put it onlineを押して公開用の名前を決めます。1〜3分ほどで komugido.vibedreams.ai のようなHTTPS付きのアドレスで公開され、1回の公開で5クレジットを使います。独自ドメインもTXTレコードとCNAMEレコードを追加すればつなげられます。
ノーコードや従来のプログラミングとの違い
- 従来のプログラミング：自分でコードを書き、仕組みをすべて理解して管理します。自由度は最も高い一方、学ぶ時間がかかります。
- ノーコード：用意された部品をドラッグして組み立てます。手軽ですが、ツールにない機能は作れず、中身のコードは基本的に持ち出せません。
- バイブコーディング：言葉で頼み、AIが本物のコードを書きます。VibeDreamではアプリはReactとFastAPI、ゲームはPhaserで作られ、ZIPでダウンロードしたりGitHubに同期したりできます。
違いをもう少し詳しく知りたい場合は、英語の記事vibe coding vs no-codeも参考になります。
バイブコーディングで作れるもの
- お店やサービスのランディングページ、ウェイトリスト（事前登録）ページ
- 予約フォーム、問い合わせフォーム、アンケート
- 家計簿や習慣トラッカーのような、自分や家族のための小さな道具
- チーム内の在庫表や当番表などの業務ツール
- スマホとパソコンで遊べるブラウザゲーム
ゼロから書くのが不安なら、テンプレートから始めて、チャットで自分用に変えていく方法もあります。
始め方の手順とコツ
- 最初の1文を決める：誰のための、何をするアプリかを書きます。「パン屋の予約」のように具体的なほど良い結果になります。
- 画面と入力項目を並べる：トップ、フォーム、完了画面など、必要な画面を名前で伝えます。
- 見た目は言葉で伝える：色や雰囲気を書けば十分です。参考にしたいサイトのスクリーンショットを添付することもできます。
- 1回に1つだけ直す：まとめて10個頼むより、1つずつ確かめるほうが失敗が少なく、原因もすぐ分かります。
- エラーはそのまま貼る：画面に出たエラー文をコピーしてチャットに貼り、「このボタンを押すと出ます」と添えます。
手順をさらに細かく知りたい場合は、英語のガイドHow to vibe codeで、最初のプロンプトから公開までを順番に説明しています。
注意点：セキュリティとコスト
バイブコーディングは手軽な分、確認を飛ばしがちです。特に、知らない人がログインしたり、個人情報を入力したりするアプリを公開する前には、次の点を確かめてください。
- APIキーなどの秘密の値をチャットやコードに直接書かない。VibeDreamではプロジェクトのSettingsタブに入れ、サーバー側だけで読み込みます。
- ログインやデータ保存はAIに頼めばアプリの中に作ってくれます。チャットの下のAdd loginやAdd databaseをタップすれば、ワンタップで使うこともできます。
- 決済を受け付ける場合は、自分のStripeアカウントをアプリにつなぎます。
- クレジットはメッセージごとに使うので、目的をはっきりさせた短い依頼にすると長持ちします。
公開前のチェック項目は、英語のvibe coding security checklistにまとめています。
おすすめツールの選び方
バイブコーディングのツールには、VibeDreamのほかにLovable、Bolt、Replit、Cursorなどがあります。Cursorはコードを書く人向けのエディタで、ほかの多くはブラウザだけで完結します。選ぶときは、プレビューの見やすさ、公開までの手間、コードを持ち出せるか、料金の仕組みの4点を比べると決めやすくなります。VibeDreamの料金は月49ドルで60クレジットのAll Access Miniからで、詳しくは料金ページで確認できます。