バイブコーディングを始めようとしたとき、最初にぶつかる壁は「どのツールを選ぶか」だ。Lovable、Bolt、Cursor、Claude Code——名前はたくさん出てくるが、それぞれ何が違うのか、どれが自分に合うのかが分からない。
この混乱が起きる理由は、バイブコーディングが1つのツールの名前ではなく、AIに話しかけてソフトウェアを作る方法全体を指す言葉だからだ。そして、その中には性格がまったく違う4種類の「作業面」がある。
この記事では、ツール名を覚える前に知っておくべき作業面の違いを整理してから、5ステップの始め方を説明する。
バイブコーディングとは何か——30秒で分かる定義
2025年2月、OpenAI共同創業者のAndrej KarpathyがXで投稿した言葉が発端だ。
コードの詳細を気にせず、AIに任せて「ノリ（vibe）」で作る。
プログラミング言語の文法を知らなくても、「こういうアプリが欲しい」と日本語で伝えるだけで、AIがコードを生成してくれる。これがバイブコーディングの基本的な仕組みだ。
ただし、ここで注意がある。「AIに話しかけるだけ」という部分は同じでも、話しかける先のツールによって、できることと限界がまったく違う。Lovableで10分で作れるランディングページと、Claude Codeで作れる本格的なSaaSアプリでは、そもそも作業のレイヤーが違う。
ツールを選ぶ前に——4つの作業面を知る
バイブコーディングのツールは、大きく4つの作業面に分かれる。これを知らないまま「おすすめツール」を検索すると、自分に合わないツールを選んでしまう。
たとえば、絵を描きたい人にExcelを渡すようなものだ。道具が悪いのではなく、目的と作業面が合っていない。
| 作業面 | 何ができるか | 代表ツール | 向いている人 |
|---|---|---|---|
| アプリビルダー | 画面上でアプリを組み立てる。コードは見えない | Lovable, Bolt.new, v0 | プログラミング経験ゼロの人、アイデアをすぐ形にしたい人 |
| AIエディタ | コードエディタの中でAIがコードを書く | Cursor, Windsurf, GitHub Copilot | コードを多少読める人、既存プロジェクトを触りたい人 |
| CLIエージェント | ターミナルからAIに指示する。ファイルを直接操作 | Claude Code, OpenAI Codex | 開発経験がある人、大きなプロジェクトを扱いたい人 |
| オーケストレーション | 複数のAIエージェントを束ねて運用する | Agent Teams, Devin | チーム開発、複雑なワークフロー |
初めてバイブコーディングを始めるなら、アプリビルダーからが一番スムーズだ。コードが見えない分、「何を作りたいか」だけに集中できる。
逆に、CLIエージェントやオーケストレーションは強力だが、ファイル構造やターミナル操作の基礎知識が前提になる。初日に選ぶものではない。
作業面を間違えるとどうなるか
よくあるのは、SNSで「Claude Codeがすごい」という投稿を見て、プログラミング経験ゼロの状態でCLIエージェントから始めるケースだ。ターミナルの操作方法、ファイル構造の読み方、パッケージマネージャの使い方——バイブコーディング以前に覚えることが多すぎて、肝心の「作りたいもの」にたどり着けない。
反対に、開発経験がある人がアプリビルダーを選ぶと、「ここのCSSだけ直したい」「このAPIの呼び出し方を変えたい」ときにコードに触れなくてフラストレーションが溜まる。
作業面の選択は「どのツールが一番優秀か」ではなく、「今の自分のスキルと目的に合う入口はどこか」の問題だ。
各作業面の詳細——コスト・始め方・注意点
アプリビルダー（Lovable / Bolt.new / v0）
ブラウザだけで完結する。インストール不要。Googleアカウントでサインアップすれば、5分以内にアプリの叩き台が作れる。
| ツール | 無料プラン | 有料プラン | 特徴 |
|---|---|---|---|
| Lovable | あり（月5プロジェクト） | 月$20〜 | UI生成が強い。Supabase連携でDB付きアプリも可 |
| Bolt.new | あり（制限付き） | 月$20〜 | フルスタック対応。フレームワーク選択の幅が広い |
| v0 | あり | Vercel Pro | Reactコンポーネント生成に特化 |
注意点：アプリビルダーで作ったアプリは、ツールのプラットフォームに依存する。後からCursorやClaude Codeに移行するには、コードをエクスポートして自分の環境に持ってくる必要がある。最初から「最終的にどこで運用するか」を考えておくと、後の移行がスムーズになる。
AIエディタ（Cursor / Windsurf）
VS Codeベースのエディタに、AIアシスタントが統合されている。コードを見ながら「この関数を修正して」「テストを書いて」と指示できる。
| ツール | 無料プラン | 有料プラン | 特徴 |
|---|---|---|---|
| Cursor | あり（月2,000回補完） | 月$20 | Composer機能で複数ファイル同時編集。Agent Mode対応 |
| Windsurf | あり | 月$15 | Cascade機能でプロジェクト全体を把握して提案 |
注意点：AIエディタは「コードが見える」ことが前提。HTMLやCSSの基本構造を知らない状態で使うと、AIの提案を評価できない。最低限「ファイルが何をしているか」を読める程度の知識があると、AIエディタの恩恵を大きく受けられる。
CLIエージェント（Claude Code / OpenAI Codex）
ターミナルから直接AIに指示する。ファイルの作成・編集・削除、テストの実行、GitHubへのpushまで、すべてターミナル上で完結する。
| ツール | 料金 | 特徴 |
|---|---|---|
| Claude Code | 月$20（Max）/ API従量制 | CLAUDE.md対応。100万トークンコンテキスト。MCP統合 |
| OpenAI Codex | ChatGPT Pro（月$200）含む / API従量制 | AGENTS.md対応。サンドボックス環境で安全に実行 |
注意点：CLIエージェントの真価は、リポジトリに設計書（CLAUDE.md, AGENTS.md）を置いてから発揮される。設計書なしで使うと、毎回同じ指示を繰り返すことになり、アプリビルダーより効率が悪くなることすらある。
ステップ1：自分の作業面を選ぶ
あなたに合う作業面は？
- コードを書いたことがない → アプリビルダー（Lovable, Bolt.new）
- HTMLやCSSは少し分かる → AIエディタ（Cursor）
- ターミナルを日常的に使っている → CLIエージェント（Claude Code）
- チームで複数エージェントを運用したい → オーケストレーション
迷ったらアプリビルダーでいい。作業面は後から変えられる。大事なのは「まず1つ作ってみる」ことだ。
ステップ2：最初のプロンプトを書く
どの作業面でも、最初にやることは「何を作りたいか」をAIに伝えることだ。ここで結果の質が大きく変わる。
うまくいかないプロンプト
すごいアプリを作ってこれだと、AIは何を作ればいいか分からない。曖昧な指示には曖昧な結果が返ってくる。
うまくいくプロンプト（アプリビルダー向け）
フリーランス向けのタスク管理アプリを作ってください。
- タスクの追加・完了・削除ができる
- 締め切り日を設定できる
- 今週のタスクだけ表示するフィルターがある
- デザインはシンプルで、背景は白うまくいくプロンプト（CLIエージェント向け）
React + TypeScript + Supabaseでタスク管理アプリを作ってください。
- Supabase Authでユーザー認証
- タスクのCRUD操作（追加・読み取り・更新・削除）
- RLS（Row Level Security）でユーザーごとのデータ分離
- vitestでテストを書く
- まずタスク1としてユーザー認証だけ実装して作業面が違うと、プロンプトに含める情報も変わる。アプリビルダーでは「何が欲しいか」を伝えれば十分だが、CLIエージェントでは「技術スタック」と「タスクの分割」まで指示したほうが良い結果が出る。
プロンプトを書くときの3つのルール。
- 何を作るか（タスク管理アプリ）
- 誰が使うか（フリーランス）
- 何ができれば完成か（追加・完了・削除・フィルター）
この3つが入っていれば、最初のプロンプトとしては十分だ。
ステップ3：AIと対話しながら改善する
最初の出力は完成品ではない。「70点の叩き台」だと思ってほしい。ここからAIとの対話で磨いていく。
対話のコツは「修正したい部分だけを具体的に伝える」こと。
ボタンの色を青（#2563eb）に変えて。
フィルターの位置を画面上部に移動して。
タスクを完了したらグレーアウトして、リストの下に移動して。「全体的にもう少し良くして」のような曖昧な指示は避ける。AIに全体を再生成させると、すでに良かった部分まで壊れることがある。
ここで重要なのは、一度に1つの変更だけを依頼すること。3つの変更を同時に頼むと、どれが失敗の原因か分からなくなる。
アプリビルダーではプレビュー画面で変更を確認できる。AIエディタやCLIエージェントでは、diffを確認し、テストを走らせてから次に進む。この「確認してから進む」習慣は、どの作業面でも品質を大きく左右する。
ステップ4：デプロイ（公開）する
| 作業面 | デプロイ方法 | 所要時間 | 独自ドメイン |
|---|---|---|---|
| アプリビルダー | ツール内の「公開」ボタン | 1分 | 管理画面から設定可 |
| AIエディタ | Vercel等にGitHub接続 | 5〜10分 | Vercel管理画面 |
| CLIエージェント | ターミナルからコマンド実行 | 5分 | デプロイ先で設定 |
アプリビルダーなら、Lovableの場合は画面右上の「Deploy」ボタンを押すだけで、URLが発行される。AIエディタやCLIエージェントの場合は、VercelやNetlifyにGitHubリポジトリを接続するのが一般的だ。GitHubにpushするたびに自動でデプロイされる設定にしておくと、更新のたびにコマンドを打つ手間が省ける。
ステップ5：次のレベルに進む——生成の先にあるボトルネック
最初のアプリが動いたら、次に考えるべきは「このまま同じ作業面でいいか」だ。
アプリビルダーで作ったプロトタイプが好評だったとする。次のステップとして考えられるのは3つ。
- 同じ作業面で機能を追加する——バイブコーディングの延長。手早い。
- AIエディタやCLIに移行する——コードを直接触れるようになると、細かい調整ができる。
- 設計書を書いて品質を安定させる——CLAUDE.mdやAGENTS.mdを使ったエージェンティックエンジニアリングに進む。
特に3つ目が重要だ。バイブコーディングでアプリを作る速度が上がると、次のボトルネックは「コードの生成速度」ではなく「設計と検証」に移る。
これは経験者でも見落としやすいポイントだ。AIがコードを10秒で生成できるようになっても、「何を作るべきか」の仕様が曖昧なら、AIは毎回違うものを作る。検証の仕組みがなければ、壊れたことに気づかないまま機能を追加し続ける。
つまり、バイブコーディングの「始め方」を越えた先には、こういう構造がある。
| 段階 | ボトルネック | 解決策 |
|---|---|---|
| 第1段階：始めたばかり | ツールの使い方 | この記事の5ステップ |
| 第2段階：アプリが動いた | 細かい調整ができない | 作業面の移行（ビルダー→エディタ→CLI） |
| 第3段階：複数アプリを作った | 毎回同じミスをする・品質が不安定 | 設計書と検証ループ（エージェンティックエンジニアリング） |
バイブコーディングの「始め方」はここまで。この先はエージェンティックエンジニアリング——設計書、検証ループ、運用ルールを組み合わせた開発手法——が視野に入ってくる。
よくある失敗パターンと対策
失敗1：プロンプトが曖昧すぎる
「いい感じのアプリを作って」では、AIは何を作ればいいか分からない。機能・対象ユーザー・完成条件の3つを必ず入れる。
失敗2：一度に全部作ろうとする
10機能を一度に頼むと、どこかが壊れる。まず最小限の機能（MVP）を1つ動かし、そこから順に足していく。これはアプリビルダーでもCLIエージェントでも同じだ。
失敗3：作業面を間違えて始める
「一番すごいツール」から始めるのではなく、「今の自分に合う入口」から始める。プログラミング未経験なのにCLIエージェントを選ぶと、ツールの操作で挫折する。
失敗4：AIの出力を検証しない
AIが生成したコードは必ずしも正しくない。動作確認、リンクの確認、画面の確認を習慣にする。「動けばOK」の先に進みたいなら、検証の仕組みを早い段階で入れるのが近道だ。
PCスペックについて
アプリビルダー（Lovable, Bolt.new）はブラウザだけで動くため、スペックはほぼ不問。ChromeかEdgeが動けば大丈夫だ。
AIエディタ（Cursor）やCLIエージェント（Claude Code）を使う場合は以下が目安。
| 項目 | 最低 | 推奨 |
|---|---|---|
| メモリ | 8GB | 16GB以上 |
| ストレージ | SSD 256GB | SSD 512GB以上 |
| OS | Windows 10 / macOS 12 | 最新版 |
よくある質問（FAQ）
Q: プログラミング知識がなくても始められますか？
アプリビルダー（Lovable, Bolt.new）なら、プログラミング知識ゼロで始められる。AIエディタやCLIエージェントは、ファイル構造やターミナルの基礎知識があるとスムーズだ。自分のスキルに合った作業面を選ぶことが、挫折しないコツだ。
Q: 無料で始められますか？
Lovableは無料プランでプロジェクトを作れる。Cursorも無料プランがある。Claude Codeは月額$20のAnthropic Maxプランが必要だが、通常のAPI利用でも使える。まずは無料プランのあるアプリビルダーから試すのが安全だ。
Q: 本格的なサービスも作れますか？
プロトタイプやMVPには十分だ。ただし、本番運用に耐える品質を求めるなら、設計書（CLAUDE.md）や検証ループを組み合わせたエージェンティックエンジニアリングに進むのが現実的だ。バイブコーディングで作ったプロトタイプを、CLIエージェント＋設計書で本番品質に育てる流れが増えている。
Q: バイブコーディングの限界は何ですか？
生成速度が上がるほど、「何を作るか」の仕様と「作ったものが正しいか」の検証がボトルネックになる。ツールの限界というより、人間側の設計力と確認力が品質を決める段階に入る。これはどの作業面でも同じだ。
Q: どの作業面からステップアップすればいいですか？
一般的なルートは「アプリビルダー → AIエディタ → CLIエージェント」だ。ただし、全員がCLIまで行く必要はない。アプリビルダーで十分な人も多い。自分の目的（プロトタイプで十分か、本番運用が必要か）で判断する。
このカテゴリの読み順
Vibe Coding カテゴリでは、以下の順序で読むと全体像が掴みやすい。
Vibe Coding 読み順
- この記事 — バイブコーディングの始め方と作業面の選び方
- バイブコーディング リスク — 始める前に知っておくべきリスク
- エージェンティックエンジニアリング完全ガイド — バイブコーディングの「次」
参考ソース
- Andrej Karpathy — X投稿（バイブコーディング提唱）
- Lovable公式サイト
- Cursor公式サイト
- Claude Code公式ドキュメント
- Addy Osmani — Agentic Engineering
著者: VibeCoding Tailor
運営: テイラーの隠れ家（shuntailor.net）
