Vibe Coderの5ステップワークフロー完全解説

ここまで9回にわたって、Vibe Codingの思想と哲学を語ってきました。

「理論はわかった。で、具体的にどうやるの？」

今回は、僕が103本のアプリとエージェント開発の過程で確立した、Vibe Coderの5ステップワークフローを完全解説します。

これは、Vibe Coder Bootcampで実際に教えているフレームワークそのものです。

---

5ステップの全体像

```
Step 1: ビジョン（Why）
↓
Step 2: 要件定義（What）
↓
Step 3: プロトタイプ（Build）
↓
Step 4: フィードバック（Test）
↓
Step 5: 反復改善（Iterate）
↓ （Step 3に戻る）
```

シンプルでしょう？ でも、各ステップの「やり方」が従来と全く違う。AIの力で、各ステップが10倍速くなる。

---

Step 1: ビジョン（Why）— 「なぜ作るのか」を言語化する

所要時間: 30分〜1時間

最初にやるのは、コードを書くことでも、ツールを選ぶことでもない。

「なぜこれを作るのか」を言語化すること。

3つの問いに答えてください。

1. 誰の、どんな課題を解決するのか？
2. それが解決されると、どう変わるのか？
3. なぜ今、自分がこれをやるのか？

この3つが言語化できないなら、まだ作るタイミングじゃない。

ここでChatGPTやClaudeを壁打ち相手に使うのは大いにアリ。「こういうアイデアがあるんだけど、課題を整理して」と投げれば、思考の整理を手伝ってくれる。

ただし、最終判断は自分でする。AIはスーパーインターンであって、経営者じゃない。

実践例

```

ビジョン

課題

中小製造業の工場長（50代）が、紙とExcelで生産管理。 タスクの進捗が見えず、毎週3時間の確認会議が必要。

ゴール

タスクの進捗がリアルタイムで可視化され、 確認会議が不要になる（週3時間の削減）。

なぜ今、自分が

自社の工場で同じ課題を抱えている。 市販ツールは高すぎる or 機能が多すぎて使いこなせない。 ```

---

Step 2: 要件定義（What）— AIへの最高の指示書を書く

所要時間: 1〜3時間

ビジョンが定まったら、要件定義。前回の記事で詳しく書いた通り、制約 → 要件 → 背景の順で書く。

ポイントを改めて整理。

① 制約条件を最初に書く ```

制約条件

- Next.js 14（App Router） - Supabase（認証・DB） - Tailwind CSS + shadcn/ui - TypeScript - レスポンシブ（スマホファースト） - 日本語UI ``` ② ユーザーを具体的に定義する ```

ユーザー

- 工場長（50代・PCスキル中級）: 全体管理 - 作業者（20-60代・スマホ中心）: タスク確認・完了報告 ``` ③ 機能を構造的に書く マークダウンの階層構造で、大分類→中分類→詳細。 ④ 画面遷移を定義する ログイン → ダッシュボード → タスク詳細 → タスク編集 ⑤ やらないことを明記する 「チャット機能は作らない」「多言語対応はしない」

やらないことを書くのは、AIの暴走を防ぐため。書かないとAIは「あった方がいいよね」と勝手に追加する。

---

Step 3: プロトタイプ（Build）— IDEで一気に形にする

所要時間: 数時間〜1日

ここでCursorまたはClaude Codeの出番。

要件定義書をIDEに渡して、「これを作って」と指示する。

コツ: - 要件定義書を丸ごと渡す（省略しない） - まず動く最小限のバージョン（MVP）を目指す - 見た目は後回し。まず機能が動くことを確認

IDE×AIなら、5ファイルでも10ファイルでも同時に生成してくれる。整合性も自動で取ってくれる。

チャットAIでこれをやろうとすると、コピペ地獄。IDEなら数分。

ここでの注意点: 最初から完璧を目指さない。60%の完成度でいい。残りの40%はStep 4-5で磨く。

---

Step 4: フィードバック（Test）— 動くものを見せて意見をもらう

所要時間: 30分〜数時間

プロトタイプができたら、すぐに人に見せる。

企画書を100ページ書くより、動くプロトタイプを1つ見せる方が、100倍のフィードバックが得られる。

「ここ、こうした方が使いやすい」
「この機能、実はいらない」
「これ、こういう場面でも使えない？」

動くものを見せた瞬間、議論の質が変わる。抽象的な「こういうのがほしい」から、具体的な「ここをこう変えて」に変わる。

フィードバックの集め方: - 想定ユーザーに実際に触ってもらう - 「何が使いにくいか」を聞く（「何がいいか」より有益） - フィードバックをテキストで記録する（次のステップの要件定義になる）

---

Step 5: 反復改善（Iterate）— 高速で回し続ける

所要時間: 継続的

フィードバックを元に、要件定義を更新し、再びIDE×AIで修正。

このサイクルを、何度でも回す。

従来の開発: 1サイクル = 数週間〜数ヶ月
AI駆動開発: 1サイクル = 数時間〜1日

1日に3サイクル回せば、従来の3ヶ月分の改善を1日でやれる。

これが、AI駆動開発の本当の威力。単に「速く作れる」じゃない。「速く改善できる」。

---

5ステップの本質

この5ステップは、ぱっと見は従来のアジャイル開発と似ています。

でも、本質が違う。

従来のアジャイル: エンジニアのチームがコードを書く
Vibe Coderの5ステップ: あなた1人がAIと一緒にやる

エンジニアへの依頼、外注、見積もり、スケジュール調整。全部不要。

アイデアが生まれた瞬間から、プロトタイプが動くまで。数時間。

他力本願から、自律創造へ。

これが、僕が10年間苦しんだ「誰かに作ってもらう」地獄からの解放。

---

この連載で伝えたかったこと

9回かけて、こんな話をしてきました。

1. 103本のアプリを作って気づいた本質 — アプリじゃなくコンテクストコントロール力
2. コンテクストコントロール — Vibe Coderの真の武器
3. Text is KING — テキスト力がすべてを決める
4. 要件定義で9割決まる — AIへの最高の指示書
5. チャットAIを卒業せよ — IDE×AIが革命の本質
6. ドメイン知識が隠れた武器 — 非エンジニアの優位性
7. 1日1スキル — エージェント開発というフェーズ
8. 穴を開けた状態で届く — エージェントの未来
9. 怠惰こそ正義 — 操作をゼロにする設計思想

そして今回の5ステップワークフロー。

全部つながっています。

ビジョンを持ち（Step 1）、テキスト力で要件を定義し（Step 2）、IDE×AIで形にし（Step 3）、ドメイン知識でフィードバックし（Step 4）、怠惰に自動化していく（Step 5→エージェントへ）。

これが、Vibe Coderの生き方。

コードは書けなくていい。でも、テキストは書け。文脈を渡せ。ビジョンを持て。

あとはAIがやってくれる。

---

*Vibe Coder Bootcampでは、この5ステップを実践的に学べます。非エンジニアが、自分のアイデアを自分の手で形にする力を、手に入れてください。*

*詳細はこちら: [https://vibecoderbootcamp.com](https://vibecoderbootcamp.com)*