バイブコーディングの始め方｜作りたいものを形にして公開するまで

SNSで「AIに話しかけるだけでWebサービスを作った」という投稿を見かけて、バイブコーディングの始め方を調べはじめたところで止まっていませんか。調べるほどツールの名前が増えていくのに、必要なものは記事ごとに違っていて、どこから手をつけるかが決まらないままになります。プログラミングを本格的にやったことがなければ、なおさら判断がつきません。この記事では、始める前に用意するものから、ツールの選び方、最初に打つプロンプトの実例、そして作ったものをインターネットに公開するところまでを、順番どおりにたどれる形でまとめました。

目次

• バイブコーディングとは？30秒でわかる基本
• 始める前に用意するもの3つ
• どのツールで始める？初心者向けの選び方
• 【ハンズオン】作りたいものを形にしてみる
• 作ったものを公開してみよう
• 初心者がつまずきやすいポイントと対処
• よくある質問
• まとめ

バイブコーディングとは？30秒でわかる基本

バイブコーディングは、作りたいものを言葉で伝えると、AIがそのコードを書いてくれる開発のやり方です。書かれたコードを一行ずつ読んで理解するかわりに、動かしてみて、違うところを言葉で伝えて直していきます。

言葉としては、2025年2月にAndrej Karpathyという研究者が自身の投稿で使いはじめました。もともとは「コードが存在することすら忘れて、勢いに身をまかせる」という、かなり気楽なニュアンスの言葉でした。

いまでは、プログラミングを仕事にしていない非エンジニアが、自分用の小さなツールを作るために試すことも増えています。では、実際に始めるには何が要るのでしょうか。

始める前に用意するもの3つ

1つめはパソコンで、MacでもWindowsでも構いません。スマートフォンだけでも触れるツールはありますが、生成された画面をプレビューで確かめながら「ここをこう直して」と何度もやり取りすることになるので、画面の広いパソコンのほうが進みます。

2つめのAIコーディングツールは種類が多く、どれを選ぶかが最初の分かれ目。無料で試せる枠を用意しているサービスもあり、たとえばReplitの料金ページには無料のStarterプランがあります。最初から有料プランを契約する必要はありません。

3つめが、作りたいものの案です。作るものを決めないままツールを開くと、最初のプロンプトで手が止まります。「何かすごいものを作る」ではなく、「買うものをメモできるページ」「家計の割り勘を計算するページ」くらいの範囲に絞ってください。範囲が狭いほどAIとのやり取りの回数が減り、完成まで届きます。

プログラミングの知識はこの段階では要らず、HTMLもJavaScriptも知らないまま始められます。

どのツールで始める？初心者向けの選び方

AIコーディングツールは、名前を並べられただけでは選べません。まず、3つのタイプに分かれると考えると整理できます。

いちばん身近なのがチャット型です。普段の調べものに使っているChatGPTやClaude、Geminiへ、そのまま日本語で「こういうページを作って」と頼めるのがこのタイプ。GeminiのCanvasの公式ページには「アイデアを伝えるだけで、アイデアを実用的かつ共有可能なアプリやゲームに変換して形にするためのコードを Canvas が生成します」とあります。Claudeも、作れる成果物のひとつに1ページのHTMLサイトを挙げています。

Webサイトを開いてチャット欄に打ち込むと、コードと一緒に動く画面が出てくるのがブラウザ型の制作ツールです。Replitは、コードを書かずに数分で形にできることを公式で説明しています。AIとの会話でサイトやアプリを作れると打ち出すbolt.new、AIでのWebアプリ制作を掲げるv0も同じタイプです。

3つめがエディタ型。通常はパソコンのターミナルやエディタから使うタイプで、最初の設定はここまでの2つより手数が増えます。Claude Codeの公式説明は、ターミナルやエディタから開発を進める形です。Cursorはコードを書くエージェントとして、GitHub Copilotは編集画面から使えるAIとして、それぞれ自らを位置づけています。

選ぶ順番を決めるのは、いま自分が何を使っているかです。すでにChatGPT・Claude・Geminiのどれかを開いているなら、まずそこに頼んでみてください。新しく何かを用意する必要がなく、日本語のまま進められるので、途中で止まりにくいです。使っていなければ、Replitのように打ち込んだものがその場で動くブラウザ型から始めるのが早いです。

エディタ型は最終的にできることが多く、慣れた人ほどこちらを使いますが、使いはじめるまでにインストールと初期設定が挟まります。その設定でつまずいて、作りたかったものにたどり着く前に終わってしまうのがいちばんもったいない。移るのは、手前の2つで何個か作ってからで間に合います。

なお、ターミナルという言葉が出てくると身構えるかもしれませんが、文字で依頼を書いて文字で結果が返ってくる流れ自体は、チャットとそれほど変わりません。

【ハンズオン】作りたいものを形にしてみる

ステップ1：ツールを開く

チャット型を選んだなら、いつも使っているチャットを開くだけで準備は終わりです。ブラウザ型を選んだ場合も、サイトを開いてアカウントを作るところまでで、インストールも環境構築もありません。

エディタ型を選んだ場合は、ツールごとにインストールの手順が違います。必要になるもの（実行環境やアカウント）もツールによって変わるので、各ツールの公式ドキュメントに従ってください。

ステップ2：最初のプロンプトを打つ

チャット欄が開いたら、作りたいものを言葉で書きます。実際に打ち込むのは、たとえばこのくらいの粒度の文章です。

シンプルなToDoリストのWebページを作ってください。
入力欄と「追加」ボタンがあり、追加した項目が下に一覧で並ぶようにしてください。
各項目にはチェックボックスをつけて、チェックすると文字に打ち消し線がつくようにしてください。
削除ボタンもつけてください。

あとで人に見せる予定があるなら、この文章に「Next.jsで作ってください」と1行足しておくと、公開の手順まで無理なくつながります。

うまくいくプロンプトの共通点は2つあり、ひとつは作りたいものを具体的に書くことです。「便利なツールを作って」だと、AIは何を作ればいいか決められません。画面に何があって、押すと何が起きるのかまで書くと、返ってくるものが近づきます。落ち着いた色にしたいのか、明るくポップにしたいのかも、最初に添えておくと直す回数が減ります。

もうひとつは、一度に頼む量を絞ることです。ログイン機能もデータの保存も通知も、と最初のプロンプトに全部詰め込むと、生成されたものが複雑になり、どこが動いていないのかを追えなくなってしまう。まずは画面ひとつ、動作ふたつくらいから始めて、動いたら足していく順番のほうが早く着きます。

ステップ3：出てきたものを動かして直す

しばらく待つと返事が返ってくるので、その場でプレビューが表示されるツールなら、実際にボタンを押して思ったとおりに動くかを確かめてください。コードだけが返ってきた場合は、index.htmlという名前で保存してダブルクリックすると、ブラウザで同じように動かせます。直したいところは、コードを触らずに言葉で伝えてください。

文字が小さいので、全体的に大きくしてください。
削除ボタンは各項目の右端に寄せてください。

この往復こそがバイブコーディングの中心で、3回、5回と言葉で伝えて少しずつ近づけていくのが普通です。ここでコードの書き方を調べる必要はなく、日本語で「ここをこうしたい」と伝えれば通じる。伝えるたびに形が変わるので、この往復が動かしていて楽しいところです。

途中で赤い文字のエラーが出ることもありますが、そのときはエラーの文章をそのままコピーしてAIに貼ってください。「エラーが出ました」とだけ伝えるより、原因の特定が早くなります。英語のエラー文もそのまま貼れます。ただ、エラーの中にキーやパスワードが含まれていることもあるので、貼る前に一度確認してください。

ステップ4：小さなものをひとつ完成させる

ここはいちばん飛ばされやすいステップですが、次に進めるかどうかもここで決まる。

途中まで動くものをいくつも作るより、範囲が狭くてもひとつ完成させたほうが、次に何を作るかが決まります。完成の基準は自分で決めて構わないので、ToDoリストなら、追加できて、チェックできて、削除できる。それで完成です。見た目の細かい調整や機能の追加は、そのあとでいくらでもできます。

筆者が最初に作ったものも、この規模で、使ったのはパソコンから使うタイプのツールです。もともとは公開の手順を試すのが目的で、平日の夜ごはんを決めてくれるページを頼みました。月曜から木曜は脂質を抑えて、金曜は自由、汁物は味噌汁だけでいい、という条件つきです。検証のつもりで頼んだだけでしたが、画面に献立が並んで出てきたときには素直に感動しました。ただ、最初に出てきた画面の見た目はちぐはぐでした。どんな雰囲気にしたいかを何も伝えていなかったからです。さきほど書いたコツを、自分が最初にやっていませんでした。そこを言葉で足すと、ようやく見た目が整いました。あとからファイルの更新時刻を並べ直してみると、最初の設定ファイルができたのが14時38分、画面の中身が入ったのが14時47分。9分25秒でした。10分以内に動くものができるとは思っていませんでした。

ここまで来ると、手元に動くものがひとつあります。

作ったものを公開してみよう

動くものはできましたが、まだ自分のパソコンの中だけの状態です。URLを持たせて公開すれば、家族や友人にリンクを送って触ってもらえますし、感想が返ってくると次に作るものも決まりやすくなります。

公開の方法はいくつかあり、そのひとつが、作ったWebアプリやサイトをコマンドひとつで公開できるロリポップ！デプロイナウです。公開するとhttps://（プロジェクト名）.lolipop-now.appという形式のURLが発行され、そのURLを共有すれば誰でも開けます。

使い方は、公式のクイックスタートにあるとおり3つの手順です。ターミナルでnpm i -g lolipopを実行してツールを入れ、lolipop loginでロリポップ！アカウントにログインし、作ったものがあるフォルダでlolipop deployを実行します。実行するとビルドの進行を確認できるダッシュボードのURLが表示され、完了すればさきほどの形式のURLで開けるようになります。なお、実行にはNode.js 22.12.0以上が必要なので、先に入っているか確認してください。

対応しているフレームワークは、執筆時点でNext.jsとNuxtです。HTML1枚だけのページをそのまま公開する手順は、公式ドキュメントに載っていません。公開まで通したいときは、最初のプロンプトに「Next.jsで作ってください」と添えておくと確実です。最新の対応状況は公式ドキュメントで確認してください。

料金は執筆時点でFreeが月額0円、Personalが月額980円で、いずれのプランでも商用利用が認められています。最新の内容はデプロイナウの公式サイトで確認してください。

公開の手順そのものをもう少し詳しく知りたい場合は、Webアプリを公開する方法を徹底解説！AIで作ったアプリを簡単に公開でまとめています。「デプロイ」という言葉自体が引っかかっているなら、デプロイとは？意味・仕組みとビルドやリリースとの違いをわかりやすく解説から読むほうが早いです。

初心者がつまずきやすいポイントと対処

指示が曖昧なまま進めてしまう。「いい感じにして」と伝えると、返ってくるものも毎回変わります。何をどう変えるのかを一文で言えないときは、変更を2つに分けて、片方ずつ頼んでください。

一度に全部やろうとする。機能を5つ並べて頼むと、そのうち2つだけ動いている状態になりがちです。どれが動いていないのかを探す時間のほうが長くなるので、1つずつ足していきます。

エラーが出た時点で諦める。エラーは、次にAIへ伝える材料です。文章をそのまま貼ると、AIが原因を特定して修正案を返します。それでも直らないときは、貼る範囲を広げてもう一度伝えてください。

安全面では、始めた直後から気をつけたいことが2つあります。ひとつは、APIキーやパスワードなどの秘密の情報を、コードに直接書かないこと。AIに「ここに自分のキーを入れて」と言われても、公開する予定があるものには書き込まないでください。もうひとつは、最初のうちは自分専用のものを作ることです。他人の個人情報を扱うものや、配布して多くの人に使ってもらうものは、動くようになってからでも遅くありません。

よくある質問

プログラミング未経験でもバイブコーディングを始められますか？

始められます。コードを書くのはAIなので、必要なのは作りたいものを言葉で説明することです。ただし、出てきたものが思ったとおりでないときに、どこが違うのかを言葉にする作業は自分の仕事です。

バイブコーディングは無料で始められますか？

無料で試せる枠を用意しているAIコーディングツールがあります。公開先にも無料プランのあるサービスがあるので、選び方によっては0円で一通り試せます。無料枠の内容は変わるので、使う前に各サービスの料金ページで確認してください。

初心者に最初のおすすめツールはどれですか？

すでにChatGPT・Claude・Geminiのどれかを使っているなら、新しく用意するものがなく日本語のまま頼めるので、それが最初のおすすめです。使っていなければ、打ち込んだものがその場で動くブラウザ型のツールから。エディタ型に移るのは、そのあとでも遅くありません。

バイブコーディングとノーコードは何が違いますか？

ノーコードは、あらかじめ用意された部品を画面上で組み合わせて作る方式。バイブコーディングでは、AIがコードそのものを書きます。部品の範囲を超えた作りにできる一方で、出てきたコードの中身は自分では把握しにくくなる。ここが両者の分かれ目です。

作ったものは公開して人に見せられますか？

見せられます。Webページやブラウザで動くWebアプリとして公開すれば、URLを送るだけで相手のブラウザで開き、アカウント登録などを相手にお願いする必要もありません。公開のやり方は前の章のとおりです。

エラーが出たらどうすればいいですか？

エラーの文章をそのままコピーして、AIのチャット欄に貼ってください。英語でも構いませんし、何行にもわたる場合は全部貼ったほうが直りやすくなります。

コードの中身がわからないまま使って問題ないですか？

自分だけが使うページなら、動いていれば十分です。気をつけたいのは、ほかの人が触るものに広げるときです。バイブコーディングは書かれたコードを読まずに進めるので、動いて見えても、想定していない入力で止まる箇所や、誰でも書き換えられる状態が残っていることに自分では気づけません。人に使ってもらう予定があるものは、公開する前に、秘密の情報が混ざっていないか、意図せず外から見える範囲がないかを、コードを読める人に一緒に見てもらえると安心です。

まとめ

バイブコーディングの始め方を、必要なものから公開までたどってきました。

• 要るのはパソコン、AIコーディングツール、作りたいものの案の3つ
• 今すでに使っているチャットから始め、具体的に、一度に頼む量を絞って進める
• 動くものができたら、公開して人に見せる

最初のプロンプトを打つ前は、自分に作れるものなのか判断がつかないものです。それでも、打ち込んだものが実際に画面で動くと、その感覚はだいぶ変わります。まずはToDoリストくらいの範囲でひとつ完成させて、デプロイナウで公開するところまで通してみてください。

自分の作ったものにURLがついて、送った相手が開いてくれる。そこまで来ると、次に何を作るかは自然と決まります。