「バイブコーディングって何から始めればいいですか？」——この質問が、僕の講座への問い合わせで最も多い。興味はあるけど、何を、どの順番で学べばいいか分からない。その状態で止まっている人が大半。
バイブコーディングの学習ロードマップ、結論から言うと30日あれば実践レベルに到達できる。ただし「とりあえずツールを触ってみる」ではなく、正しい順序で進めることが条件だ。
僕の講座では未経験者が毎月20〜30人参加している。その中で30日間のカリキュラムを通じて、全員が自分のアプリを完成させている。脱落率は5%以下。このロードマップは、その実績をもとに設計したもの。
- バイブコーディング学習の全体像と30日間のステップ
- Week 1〜4で何をすべきか、具体的なカリキュラム
- 最初に選ぶべきツールとその理由
- 未経験者がつまずきやすいポイントと回避策
- 30日後の到達レベルと、その先の学習戦略
バイブコーディング学習ロードマップの全体像
30日間を4つのフェーズに分ける。各フェーズに明確なゴールがある。
| 期間 | フェーズ | ゴール | 想定学習時間 |
|---|---|---|---|
| Day 1〜7 | 基礎理解 | AIツールの仕組みと基本操作を理解 | 1日1〜2時間 |
| Day 8〜14 | 模倣制作 | 既存のアプリを参考に、自分で再現 | 1日2〜3時間 |
| Day 15〜23 | オリジナル制作 | 自分のアイデアでアプリを1つ完成 | 1日2〜3時間 |
| Day 24〜30 | 公開・改善 | アプリを公開し、フィードバックを元に改善 | 1日1〜2時間 |
合計の学習時間は50〜70時間程度。仕事をしながらでも十分こなせる。週末にまとめて進めてもいい。
Week 1：バイブコーディングの基礎を理解する（Day 1〜7）
最初の1週間で押さえるべきことは3つだけだ。AIツールの基本操作、プロンプトの書き方、Web技術の全体像。
最初のツールはBolt.newを推奨する。ブラウザだけで動くから環境構築が不要。Googleアカウントでログインすれば即座に使える。この「始めるまでのハードル」がゼロに近い点が、未経験者にとって最大の利点。
「何を作りたいか」を具体的に言語化する練習をする。最初はToDoアプリ、天気表示アプリ、簡単なクイズアプリなど、定番の題材で試す。プロンプトは長文より短文の積み重ねが効果的だった。「まずログイン画面を作って」→「次にタスク一覧ページを追加」のように段階的に指示を出す。
フロントエンド・バックエンド・データベース・APIの関係性を図で理解する。コードを書く必要はない。YouTubeの解説動画で3〜4時間の投資。この全体像が見えているかどうかで、Week 2以降の理解度が段違いに変わった受講者を何人も見てきた。
「まずプログラミング言語を学ぼう」と思ってPythonやJavaScriptの入門書を買ってしまうケース。バイブコーディングの学習ロードマップでは、言語の文法学習はいらない。ツールの操作とプロンプトの書き方が先。この順番を間違えると、1ヶ月後に何も作れていないという結果になりかねない。
Week 2：模倣制作で手を動かす（Day 8〜14）
Week 1で基礎を掴んだら、次は「真似して作る」フェーズ。オリジナルは後回しでいい。
僕の講座では、Week 2で以下の3つのアプリを順番に作らせている。
1つ目はToDoアプリの拡張版。タスクの追加・削除・完了チェックに加え、カテゴリ分けと期限設定を実装する。Bolt.newに段階的に指示を出しながら機能を追加していく練習。
2つ目は天気情報アプリ。外部API（OpenWeatherMap）からデータを取得して表示する。API連携の基本を体験するのが目的。プロンプトに「OpenWeatherMap APIを使って」と指定するだけで、AIがAPI連携のコードを自動生成した。
3つ目はポートフォリオサイト。自分のプロフィールとスキルを紹介する1ページのWebサイト。ここではデザインの指示をプロンプトに含める練習をする。「ダークテーマ、左にプロフィール写真、右にスキルバーチャート」のように視覚的な要素を言語化する。
Week 3：オリジナルアプリを制作する（Day 15〜23）
ここが最もハードだが、最も成長するフェーズ。自分のアイデアをゼロから形にする。
「自分が日常で困っていること」を解決するアプリが最も良い。理由は2つ。要件が明確だから指示が書きやすい。自分が使うから完成後の改善モチベーションが続く。受講者の中で最も良い成果を出したのは、「子どもの習い事のスケジュール管理アプリ」を作った方だった。
Week 3の進め方には定型のステップがある。
Day 15〜16で要件定義を行い、「何を作るか」「どんな機能が必要か」を紙に書き出す。Day 17〜20はBolt.newまたはCursorを使った実装期間。Day 21〜23でテストと修正に充てる。この順番を守れば、9日間でアプリが完成した受講者がほとんどだ。
途中でエラーが出て詰まることは確実にある。その時の対処法は「エラーメッセージをそのままAIに貼り付ける」こと。自分で原因を調べるより、AIに聞いた方が速い。これはバイブコーディング特有の学習ロードマップで最も重要なポイントだ。
Week 4：公開して改善する（Day 24〜30）
作ったアプリを実際に公開する。公開先はVercelかFirebase Hostingが簡単。どちらも無料枠がある。
公開の目的は2つ。1つ目は「完成させた」という実績の可視化だ。ポートフォリオとしてURLを見せられる状態にする。2つ目は他者からのフィードバックを得ること。知人やSNSで共有して意見をもらい、改善を繰り返す。
僕の講座では、Day 30に受講者同士でアプリを見せ合うセッションを設けている。「ここの操作が分かりにくい」「こういう機能があったら便利」といったフィードバックが飛び交う。このプロセスを経験したことで、プロダクト開発の感覚が身についた受講者は多い。
バイブコーディング学習で使うべきツールの選び方
ツール選びで迷って手が止まっている人は少なくない。結論として、初学者はBolt.new一択で始めるのが最短だ。
初学者が避けるべきツール
- Cursor（VS Codeベースで、エディタ操作の学習コストがある）
- Claude Code（ターミナル操作が前提で、CLI未経験者にはハードルが高い）
- Devin（月額$500以上で、学習目的にはコスト過剰）
初学者におすすめのツール
- Bolt.new（ブラウザ完結、環境構築不要、日本語対応）
- Firebase Studio（Google環境で安定、無料枠が広い）
- v0（UI生成に特化、プロンプトの練習に最適）
Week 3以降、もっと高度なことをしたくなったらCursorに移行すればいい。最初から難しいツールを選ぶ必要はない。
30日後の到達レベルと、その先の学習戦略
このロードマップを完走すると、以下のことができるようになる。
- 日本語のプロンプトで基本的なWebアプリを作れる
- 外部APIとの連携を含むアプリが構築できる
- エラーが出た時にAIと対話して解決できる
- 作ったアプリを公開して他者に使ってもらえる
31日目以降の学習戦略は2つのルートに分かれる。1つは「副業・収益化ルート」で、アプリを実際に販売するか受託制作で稼ぐ道。もう1つは「スキルアップルート」で、CursorやClaude Codeを学んでより複雑なシステムを扱えるようになる道だ。
どちらを選ぶにしても、30日間で築いた基礎が土台になる。この30日は、投資対効果が最も高い学習期間だ。
- バイブコーディングは30日間で実践レベルに到達できる。正しい順序が鍵
- Week 1は基礎理解、Week 2は模倣制作、Week 3はオリジナル制作、Week 4は公開・改善
- 最初のツールはBolt.newが最適。環境構築ゼロで始められる
- プログラミング言語の文法学習は不要。プロンプトの書き方とWeb技術の全体像が先
- エラー対処は「AIにエラーメッセージを貼り付ける」だけで大半が解決する
- 30日後は副業・収益化ルートとスキルアップルートの2方向に進める
何を学ぶかより、いつ始めるかの方が重要。このロードマップに沿って、今日から最初の一歩を踏み出してみてほしい。
