VibeStep 開発ブログ #2： ウィザードからMVPが動くまで｜4種の質問に答えるだけで計画書を作成

VibeStepの開発ブログ #1を執筆してから約1週間。ウィザードだけでなく、AI事業計画書生成、ドラッグ＆ドロップのタスクボード、GitHubインポート機能まで実装が進み、ブラウザ上でVibeStepが動く姿をようやく見せられる段階になりました。

「まずはMVPを作る」ことを目標とし、ここでは、開発ブログ#2として、現在開発できた部分までを紹介します。

ぜひ最後までご覧ください。

ウィザードUI設計——「何を聞けば、AIは賢くなるか」

前回の最後に触れたように、ウィザードの設計はこの開発で一番頭を使ったところです。

「選択式 vs 自由記述」というジレンマを超えて

最初のプロトタイプは全フィールドを自由記述にしていました。入力の自由度は高いのですが、AIへ渡す情報がバラバラになりやすく、生成される事業計画書の品質にムラが出る問題に気づきました。

逆に、選択式だけにすると「このカテゴリに当てはまらないんだけど…」という壁が出てきます。

落とし所として採用したのは「主要な構造は選択式で固め、ニュアンスが必要な箇所だけ自由記述を残す」という設計でした。カテゴリやチーム規模は選択式、課題の説明や解決策は自由記述、という具合です。

4ステップに分割した理由

入力項目をいくつのステップに分けるかも悩みました。ワンページにまとめると「長い」と感じさせてしまう。かといって細分化しすぎると完了感が薄れる。

結局、情報の性質ごとに4つのステップにまとめることで落ち着きました。

ステップ	入力する情報	役割
STEP 1：基本情報	サービス名・カテゴリ・開発スタイル	プロジェクトの輪郭を決める
STEP 2：チームとリソース	チーム規模・タイムライン・予算感	実現可能性を定義する
STEP 3：課題と解決策	ターゲット・解決する課題・解決策	プロダクトの核を言語化する
STEP 4：ビジネスモデル	収益モデル・マーケット	持続可能性を考える

小さいが効いた「タグライン自動生成」トグル

STEP 1などにある「タグライン」フィールドに、ちょっとした工夫を入れました。「AIに決めてもらう」トグルをオンにしておくと、他の項目をもとにAIが自動でキャッチコピーを生成してくれます。

「キャッチコピーって、意外と一番詰まる」という声をもらったので追加した機能です。

使ってみると、AI生成のタグラインが思いのほかしっくりきて、そのまま採用するケースが多い印象です。

GitHubからプロジェクトを持ち込む

「新規プロジェクトじゃなくて、今作ってる途中のリポジトリを取り込みたい」という需要は当初から想定していました。

リポジトリURLを貼るだけでウィザードが埋まる

GitHubアカウントと連携すると、リポジトリ一覧がドロップダウンで表示されます。選択するだけで、AIがREADMEやコード構造を解析し、ウィザードの4ステップ分の回答を自動補完してくれます。

手動でURLを貼り付けるモードも用意しているので、プライベートリポジトリの連携が難しいケースでも対応できます。また、テキスト貼り付けモードを使えば、企画書やメモ書きからも同じようにウィザードを自動補完できます。

AIが解析する情報の範囲

Gemini 2.5 Flash にリポジトリ情報を渡すと、プロジェクトカテゴリ・チーム規模・技術スタック・解決しようとしている課題・ビジネスモデルを推定して返してきます。

精度は「完璧ではないが、手で埋めるより圧倒的に速い」というレベル感です。生成後は通常のウィザードと同じ画面で修正できるので、AIを「下書き係」として使う感覚に近いですね。

AI事業計画書——「生成を見せる」体験設計

ウィザードを完了すると、事業計画書の自動生成ページに遷移します。ここはVibeStepの「最初の感動ポイント」として、特にこだわりました。

なぜストリーミング表示にしたか

生成完了を待ってから一気に表示する方法と、テキストをリアルタイムで流し込むストリーミング表示の2択がありました。

「何かが起きている」という感覚を与えられるのはストリーミングのほうが圧倒的に上です。長文生成では待ち時間が10〜20秒になることもありますが、文字が流れていると体感的な待ち時間がずっと短く感じられます。技術的には Vercel AI SDK の streamText と ReadableStream を組み合わせて実装しています。

Tiptapエディタで「後から直せる」を実現

生成後の事業計画書は Tiptap ベースの WYSIWYG エディタで直接編集できます。「AIが生成したものが完璧なわけはない」という前提で設計しました。

見出し・太字・リスト・引用といった基本的なMarkdown構造は相互変換できるので、コード上はMarkdownで保存しながらリッチテキストで編集できます。

バージョン履歴も保持しているので、「前の版のほうが良かった」という場合にもドロップダウンで切り替えられます。

タスクボード——開発の地図をAIが描く

事業計画書ができたら、次はタスクへの分解です。

AIタスク一括生成：事業計画書から逆算する

「AIでタスク生成」ボタンを押すと、作成済みの事業計画書をコンテキストとして使い、Gemini がタスクを一括生成します。

開発スタイルに「バイブコーディング」を選んでいる場合、タスクの粒度はAIが1回のプロンプトで実装できる単位（0.5〜3時間）に自動調整されます。「DB設計」「認証API実装」「ログイン画面UI」といった単位で20〜30件のタスクが生成されるので、タスク管理ツールへの転記がほぼ不要になります。

ドラッグ＆ドロップと楽観的更新

タスクボードは「未着手 / 進行中 / レビュー / 完了」の4カラム構成です。dnd-kit を使ったドラッグ＆ドロップでカラム間の移動や並び替えができます。

実装で一番苦労したのは、ドラッグ中の状態管理です。サーバーへの更新が完了する前にUIを先行で更新する「楽観的更新」を使っていますが、複数タスクを高速で動かすと内部状態の競合が起きやすい。ローカルのコピーで楽観的更新を行い、サーバーからのレスポンス後に不整合があればロールバックする設計で安定させました。

AIプロンプト生成——VibePromptの核心

#1で「VibeStepの一番の肝」と書いたコンテキスト注入型のプロンプト生成が、いよいよ動くようになりました。

タスクを選ぶだけで「すぐ使えるプロンプト」が生成される

タスク詳細画面で「AIプロンプト生成」を実行すると、そのタスクの内容に加え、プロジェクトの技術スタック・事業計画書の要約・関連タスクの状況を自動で文脈として付加したプロンプトが生成されます。

あとはそれをCursorやClaude Codeにペーストするだけ。「コンテキストを準備する」という地味に時間のかかる作業が消えます。生成されたプロンプトはデータベースに保存されるので、翌日も同じプロンプトから再開できます。

分析ページ——進捗を数値で把握する

タスクが増えてくると「今どれくらい進んでいるのか」が見えにくくなります。分析ページでは、タスク完了率・推定工数・ステータス別・優先度別・カテゴリ別の棒グラフを一画面で確認できます。

グラフの実装には Recharts を使いました。シンプルなAPIでよくまとまっているので、バイブコーディングとの相性も悪くないです。

技術的な課題：ページ遷移が遅かった問題

機能が揃ってきた段階で、ページ遷移がもたつく問題が顕在化しました。

Firebase Auth 待ちでUIがブロックされていた

原因を掘ってみると、デフォルトで authLoading: true になっていた Zustand ストアが原因でした。Firebase Auth の初期化が完了するまでの200〜500msの間、全てのデータフェッチが止まっていたのです。

VibeStepでは、保護ルートへのアクセスはサーバー側のミドルウェアがセッションCookieで認証を担保しています。クライアントの認証状態が確定するのを待つ必要はそもそもない、ということに気づいてから修正は早かったです。

Zustandキャッシュ化で「毎回フェッチ」を解消

もう一つの問題は、ダッシュボードを訪れるたびにプロジェクト一覧をFirestoreから再取得していた点でした。Zustandのストアにプロジェクト一覧のキャッシュを追加し、初回フェッチ後は同一セッション内でFirestoreへのアクセスが発生しないようにしました。

この2点の修正だけで、体感的なページ遷移速度が大きく改善しました。「速い」と感じるUIは機能よりも印象に直結するので、ここへの投資は正しかったと思っています。

まとめ

今回の開発日記では、VibeStepのMVPを構成する主要機能の実装内容をまとめました。

機能	概要	ポイント
ウィザード（4ステップ）	プロジェクト情報の構造化入力	選択式と自由記述のハイブリッド設計
GitHubインポート	リポジトリからウィザードを自動補完	既存プロジェクト持ち込みに対応
AI事業計画書生成	ストリーミングで生成・Tiptapで編集	バージョン履歴つき
タスクボード	ドラッグ＆ドロップ＋AIタスク生成	楽観的更新で高速な操作感
AIプロンプト生成	コンテキスト注入型プロンプトの自動生成	VibeStepの核心機能
分析ページ	タスク進捗の可視化	Recharts で実装

次回もお楽しみに！

最後までご覧いただき、ありがとうございます。