最近、AIプログラミングツールの進化は目覚ましく、多くの開発者がその恩恵を受け始めています。しかし、一方で「AIを使っても結局うまくいかない」「かえって時間がかかる」といった声も聞かれます。まるで勢いだけでコードを書くような「バイブコーディング」では、せっかくのAIの力を最大限に活かせず、カオス に陥りがちです。
本記事では、Cursor やChatGPTといったAIツールを使って、「何千人ものユーザーがいる複数の本番運用アプリ」 をほとんど手を加えず 開発してきた経験者が語る、迷走を防ぎ、確実に成果を出すための「超シンプル」な3ステップシステムをご紹介します。
このワークフローを導入すれば、AIを単なる便利なツールではなく、強力な開発パートナーとして使いこなし、クリーンでテスト可能なAI支援コード をスパイラル（迷走） せずに効率的に開発できるようになります。
“バイブコーディング”の落とし穴
（ここに、AI開発でうまくいかない様子を示すイメージ画像を挿入します）
AIプログラミングツールを初めて使う多くの人が、おそらく最初に試すのは、とにかく開発環境（IDE）に指示を投げ込んでみることでしょう。まずはCursor などのツールを開き、「build me X」（Xという機能を作って）と入力するかもしれません。
これはまさに「バイブコーディング」 と呼ばれるアプローチの典型です。勢い任せで、明確な計画なしにAIにすべてを丸投げしてしまうやり方です。
しかし、その結果はどうなるでしょうか？
ソースは「どんどん迷走して何も動かず、結局また最初からやり直し」 と手厳しい評価を下しています。期待したコードは生成されず、エラーや矛盾が生じ、修正しようとすればするほど泥沼にはまっていく... まさに「スパイラル（迷走）」 の状態です。
このような状況は「それは開発ではなく、カオスです」 と断言しています。
なぜこのような事態に陥るのでしょうか。それは、AIにコードを書かせる以前の準備、つまり「設計」と「計画」が圧倒的に不足しているからです。「build me X」という指示はあまりにも大雑把すぎます。AIは全体のアーキテクチャや、あなたが本当に実現したいこと、そしてそれをどのような小さなステップで達成したいのか を理解できていません。
AIは強力なツールですが、魔法ではありません。具体的な指示がなければ、適切なアウトプットを生成することは難しいのです。
家を建てるのに設計図も工程表もなく、職人さんに「なんかイイ感じの家建てて」と言うようなものです。これでは職人さんも困惑し、結果的に滅茶苦茶なものができてしまうか、何も完成しないかのどちらかでしょう。AI開発における「バイブコーディング」 もこれと同様で、IDEに全てを放り込んで祈る だけでは、成功は望めないのです。
では、どうすればこの「カオス」 を避け、AIの力を最大限に引き出して効率的に開発を進められるのでしょうか？その答えが、次に紹介する「超シンプル」 な3ステップシステムにあります。
迷走を防ぐ「超シンプル」な3ステップシステムとは？
（ここに、この3ステップシステムの流れ図や成功イメージを示す画像を挿入します）
「何千人ものユーザーがいる複数の本番運用アプリ」 をAIと共に開発してきた経験から生まれた、この「超シンプル」 なシステムは、従来の「バイブコーディング」 が抱える最大の問題点「IDEに全てを放り込んで祈る」 という状態を根本から解決します。
このシステムの本質は、AIに丸投げするのではなく、開発者自身が明確な「ロードマップ」 を示し、AIをその「レールの上を走らせる」 ことで、常にコントロールできる 状態を保つことにあります。
具体的なやり方
具体的には、以下の3つのステップで構成されます。
-
Step 1: architecture.md で全体像を設計する
-
Step 2: tasks.md でMVP開発のタスクを細分化する
-
Step 3: Cursor/Windsurf でタスクを順番に実行する
これらのステップを踏むことで、AIは単なるコード生成ツールではなく、指示を理解し、計画通りに作業を進める「エンジニア」 として機能します。結果として、スパイラル（迷走） に陥ることなく、質の高いクリーンでテスト可能なAI支援コード を効率的に開発できるようになります。
それでは、各ステップの詳細を見ていきましょう。
今回は「Xの動画URLをもとに、geminiapiで文字起こしして動画に字幕をつけるサービス」を例にやってみましょう。
Step 1: architecture.mdで全体像を設計する
architecture.md
開発プロジェクトを開始する前に、まず全体の「設計図」を作成することが不可欠です。これは、AI開発においても同様です。ソースで提案されている最初のステップは、architecture.md という形式でシステム全体のアーキテクチャを設計することです。
このステップで使用するのは、ChatGPTです。ただし、重要な注意点があります。ソースは「ChatGPT（GPT-4o、※GPT-3.5/4.0ではなく）」 を使うように明確に指示しています。これは、GPT-4oがより高性能で、複雑な指示の理解や構造化された情報の生成に優れているためと考えられます。旧バージョンであるGPT-3.5やGPT-4.0では、期待通りの結果が得られない可能性があることを示唆しています。
ChatGPT（GPT-4o） に対して、以下のようなプロンプトを与えます。
私が作ろうとしている［プロダクトの詳細説明（詳しければ詳しいほど良い）］ があります。 フロントエンドはNext.js、データベース＆認証はSupabase を使ってください。 ファイル＆フォルダ構成 を含め、システム全体のアーキテクチャ を教えてください。
Step1 architecture.md
このプロンプトのポイントは以下の通りです。
-
プロダクトの詳細説明：開発したいものが何なのかを具体的に、できるだけ詳しく説明します。ユーザー管理機能、特定のデータ処理、外部連携の有無など、機能要件を細かく伝えることで、AIはより正確な設計を提案できます。「詳しければ詳しいほど良い」 とあるように、ここを疎かにしないことが重要です。
-
使用技術の指定：フロントエンドにNext.js、データベースと認証にSupabase といったように、使用したいフレームワークやサービスを明確に指定します。これにより、AIは指定された技術スタックに基づいたアーキテクチャを考慮してくれます。ソースではNext.jsとSupabaseが例として挙げられていますが、あなたのプロジェクトに合わせて適宜変更してください。
-
要求する情報：単に「アーキテクチャを教えて」だけでなく、「ファイル＆フォルダ構成」 と「何が各部分で何をするか」 を含めるように具体的に要求します。これにより、AIはコードを書く上で具体的な指針となる情報を網羅的に出力してくれます。
ChatGPT からの応答として、プロジェクトの全体像、各コンポーネントの役割、推奨されるディレクトリ構造などが提示されるはずです。このarchitecture.mdは、開発チーム全体（あるいはあなた自身とAI）が共通認識を持つための重要なドキュメントとなります。まるで、建設現場で全員が同じ設計図を見ながら作業を進めるように、AIもこのアーキテクチャ を理解した上で次のステップに進みます。
このステップを丁寧に行うことで、開発の早い段階で全体像を把握し、後々の手戻りを減らすことができます。また、AIに具体的なコンテキストを与えることで、より的確なコード生成を促す土台を作ります。これは、「スパイラル（迷走）」 を防ぐための最初の、そして最も重要なステップと言えるでしょう。
Step 2: でMVP開発のタスクを細分化する
tasks.md
全体の設計（architecture.md）ができたら、次はそれを実行するための具体的な計画を立てます。このステップでは、MVP（Minimum Viable Product、実用最小限の製品） を開発するために必要なタスクを、細かく分解したリスト（tasks.md）として作成します。
再びChatGPT などのLLMを使用し、Step 1で生成したアーキテクチャ を参照させながら、以下のプロンプトを与えます。
先ほどのアーキテクチャ をもとに、MVP を作るための詳細なステップバイステップ計画 を作ってください。 各タスクは – とにかく小さく、テスト可能 で – 明確な開始と終了 があり – ひとつの関心事に集中 したもの になります。このタスク一覧はこれから別のエンジニアリングLLM に渡します。
Step2 task.md
このプロンプトには、タスクリストの品質を高めるための重要な要件が含まれています。
-
小さく、テスト可能：タスクが大きすぎると、AIが一度に処理しきれなかったり、生成されたコードのどこに問題があるか特定しにくくなります。小さく分割することで、AIも扱いやすくなり、人間側もテストやデバッグが容易になります。
-
明確な開始と終了：タスクの完了条件が曖昧だと、AIはどこまでやれば良いか分からず、途中で止まったり不完全なコードを生成したりします。例えば、「ユーザー登録機能を実装する」だけでなく、「ユーザー登録フォームを表示する」「ユーザーが入力した情報をバリデーションする」「データベースにユーザー情報を保存する」「登録完了メッセージを表示する」のように、具体的なアクションと完了状態を明確にします。
-
ひとつの関心事に集中：一つのタスクで複数の機能や concerns (関心事) を扱わせると、コードが複雑になり、エラーの原因が分かりにくくなります。例えば、「ユーザー登録フォームの表示とバックエンドAPIの実装」を一つのタスクにするのではなく、「ユーザー登録フォームの表示（フロントエンド）」と「ユーザー登録APIの実装（バックエンド）」のように分けます。これにより、タスクの独立性が保たれ、AIも混乱しにくくなります。
これらの要件を満たすようにタスクを細分化することで、AIがコードを書く際の「作業指示書」が非常に具体的になります。詳細なステップバイステップ計画 は、AIが迷わず、一つずつ着実に作業を進めるための「ロードマップ」 そのものです。
また、「このタスク一覧はこれから別のエンジニアリングLLMに渡します」 と伝えることで、ChatGPT に、このリストが人間ではなく他のAIによって実行されることを認識させます。これにより、エンジニアリングLLMが理解しやすい、より機械的な指示形式でタスクリストを生成してくれる可能性があります。
このステップで作成されたtasks.mdは、Step 3でAIペアプログラミングツール に渡され、実際のコード生成の基盤となります。緻密に計画されたタスクリストがあることで、AIは「レールの上を走る」 ことができ、無駄な「スパイラル」 を防ぎながら効率的にコードを書いていけるようになるのです。
Step 3: Cursor/Windsurfでタスクを順番に実行する
Cursor
アーキテクチャ設計（architecture.md） と詳細なタスクリスト（tasks.md） が準備できたら、いよいよ実際のコード開発に移ります。ここで活躍するのが、AIペアプログラミングツール であるCursorまたはWindsurfです。
ソースによると、CursorまたはWindsurf を開き、以下のような指示を与えます。
あなたはこのコードベースを作るエンジニアです。 architecture.md と tasks.md を渡しました。 – 両方を注意深く読んでください。何を作るか曖昧さがあってはいけません。 – tasks.md に従い、1つずつタスクを完了してください。
Step 3: Cursor/Windsurf
このプロンプトは、AIツールの「役割」と「実行手順」を明確に定義しています。
-
役割の定義：「あなたはこのコードベースを作るエンジニアです」 と伝えることで、単なるチャットボットではなく、コードを書く主体としての役割をAIに認識させます。
-
情報の提供：「architecture.md と tasks.md を渡しました」と伝えることで、AIに開発に必要なすべての情報を提供します。AIはこれらのドキュメントを参照しながらコードを生成します。
-
理解の確認：「両方を注意深く読んでください。何を作るか曖昧さがあってはいけません」 と強調することで、AIにこれらのドキュメントの内容を確実に理解させ、指示に対する曖昧さをなくすことを促します。これが、後の工程で「スパイラル」 を防ぐ上で非常に重要になります。
-
実行方法の指定：「tasks.md に従い、1つずつタスクを完了してください」と指示することで、AIは計画（tasks.md）に沿って、小さなタスクを順番に、かつひとつの関心事に集中 しながらコードを生成していきます。
このステップでは、AIはtasks.md に記述されたタスクを上から順番に、一つずつ完了させようとします。開発者であるあなたは、AIが生成したコードを確認し、必要に応じて修正指示を出したり、次のタスクに進むように促したりします。
例として、タスク１まで実行すると画像のように環境のセットアップがされていることが確認できると思います。
タスク１
これが、ソースが語る「あなたが常にコントロールできる」 状態です。「バイブコーディング」 のようにAI任せにするのではなく、開発者がAIの進捗を管理し、ロードマップ から外れていないかを確認しながら進めることができます。AIが迷いそうになったり、意図しないコードを生成したりした場合も、すぐに修正指示を出して「レールの上」 に戻すことが可能です。
このワークフローにより、AIはあなたの指示に従順な「エンジニア」 として機能し、詳細なステップバイステップ計画 に基づいて小さく、テスト可能 なコード片を生成していきます。これを積み重ねていくことで、最終的にクリーンでテスト可能なAI支援コード で構成されたMVP、さらには本番運用アプリ が完成するのです。
このシステムのメリット：なぜ「迷走しない」開発が可能なのか？
（ここに、このシステムによって開発がスムーズに進むイメージ、例えばパイプラインや鉄道のようなイメージ画像を挿入します）
ここまで解説してきた3ステップシステムは、従来の「バイブコーディング」 とは一線を画す、非常に効果的なAI開発手法 です。このシステムを導入することで、開発プロセスから「カオス」 と「スパイラル（迷走）」を排除し、高い生産性向上 を実現できます。その主なメリットは以下の通りです。
-
明確なロードマップの存在：Step 1で作るarchitecture.md は全体の目的地を示し、Step 2で作るtasks.md はそこに至るまでの詳細な道のりを示します。これにより、開発の最初から最後まで、どこに向かっているのか、次に何をすべきなのかが常に明確になります。闇雲に進むのではなく、地図と計画を持って旅をするようなもので、迷う余地がありません。
-
AIをコントロール下に置ける：このシステムでは、AIは設計図 とタスクリスト という明確な指示に基づいてコードを生成します。開発者はAIの生成結果をレビューし、必要に応じて修正や追加指示を出すことで、開発プロセス全体を自分の意図通りに進めることができます。AIに使われるのではなく、AIを道具として使いこなすという、本来あるべきAI活用の姿を実現します。
-
「スパイラル」に陥らない：曖昧な指示や全体像の欠如がAI開発における**「スパイラル」** の主な原因です。このシステムでは、architecture.md で全体像を共有し、tasks.md でタスクを小さく、明確に、単一関心事に集中 させることで、AIが迷子になる可能性を極限まで減らします。これにより、無駄なコード生成や手戻りが減り、開発時間を大幅に短縮できます。
-
クリーンでテスト可能なコード：tasks.md の要件に従って生成されるコードは、タスクごとに小さく、単一関心事に集中 しています。これにより、コードの責務が明確になり、可読性や保守性が高いコードになります。また、タスクがテスト可能 に設計されているため、ユニットテストや結合テストを容易に書くことができ、コードの品質向上につながります。
-
本番運用レベルのアプリ開発が可能：ソースの筆者は、このシステムを使って「何千人ものユーザーがいる複数の本番運用アプリ」 を開発した実績があることを述べています。これは、このシステムが単なるお遊びやプロトタイプ作成にとどまらず、実際のビジネスに耐えうる高品質なソフトウェア開発にも有効であることを示しています。
このシステムは、「IDEに全てを放り込んで祈る」 という非効率で再現性のない開発スタイルから、計画的で管理可能、そして成功確率の高い開発スタイルへの転換を促します。AIペアプログラミングツール を活用した開発を成功させるためには、AIの能力を理解し、それに適した指示と環境を与えることが何よりも重要です。この3ステップシステムは、そのための効果的なフレームワークを提供してくれます。
AIと共に開発を成功させるために
AIを使ったプログラミング は、開発の生産性向上 に大きな可能性を秘めていますが、その力を引き出すためには適切な開発手法 が必要です。勢い任せの「バイブコーディング」*は、しばしば私たちを「カオス」 と「スパイラル（迷走）」の迷宮へと誘い込みます。
今回ご紹介した3ステップシステムは、この迷宮から抜け出すための確かな道しるべとなります。これはまるで、目的地を決め（architecture.md）、そこに至るまでの詳細なルートと立ち寄り先を計画し（tasks.md）、その計画通りにナビゲーションシステム（CursorまたはWindsurf）を使って運転するようなものです。計画なしに気の向くままさまよう「バイブコーディング」 よりも、はるかに効率的で確実に目的地（本番運用アプリ の完成）にたどり着けるイメージです。
AI開発で迷走 した経験がある方も、これからAIツールを使ってみようと考えている方も、まずはこの「超シンプル」 なシステムを小さなプロジェクトで試してみてはいかがでしょうか。
成功へのヒントは、Step 1とStep 2でいかに丁寧な設計と計画を立てられるか にかかっています。AIは指示通りに動く強力なエンジニアリングLLM ですが、曖昧な指示ではその力を発揮できません。プロダクトの詳細説明 やタスクの要件 など、AIに与えるプロンプトの質が、生成されるコードの質を左右します。
このワークフローをマスターすれば、AIは単なる便利なツールではなく、あなたの右腕となり、クリーンでテスト可能なAI支援コード による開発を力強く後押ししてくれるでしょう。AIペアプログラミングツール を活用した、迷走しない、計画的で管理可能な新しい開発手法 を、ぜひあなたのものにしてください。今日から、AI開発の「カオス」 に別れを告げ、着実な成果を目指しましょう。