個人開発をしていると、こんな瞬間が必ずやってきますよね。
アイデアが頭の中でぐるぐると輝いているのに、いざコードエディターを開いたとたん、
「あれ、どこから手をつければいいんだっけ？」
「プロジェクトメンバーとのタスク共有が大変」
「AIのトークン消費量を削減するためのプロンプト作成に時間がかかる」
バイブコーディングというムーブメントが盛り上がるほど、逆説的に「構想の言語化」と「コンテキストの維持」が開発のボトルネックになってきていると感じています。
AIは優秀だけれど、何も与えなければ何も生まれない。そのギャップを埋めるツールが、自分には必要でした。
今回は、そのギャップを埋めるべく作り始めたプラットフォーム「VibeStep」について、構想・設計・技術選定のリアルな思考過程を書いてみました。
今後も、VibeStep 開発ブログでは、VibeStepの開発に関連することをリアルタイムで投稿していきます。
ぜひ最後までご覧ください。
VibeStepとは何か——「書けば、成る。」の意味
簡単に言うと
VibeStepは、構想（What）を定義する「ドキュメント機能」、メンバー間で円滑に連携できる「タスク共有機能」、そしてそれらをコードへ変換する「プロンプト生成エンジン」をシームレスに統合した開発サポートプラットフォームです。
コンセプトを決めるとき、こんなことを考えていました。 AIエディタはもう十分に賢い。
でも「どんなプロダクトを作るか」「技術スタックは何か」「今やるべきタスクは何か」そういった前提情報を毎回手で書き起こすのは、Vibeが途切れる最大の原因だと思っていました。
だったら、構想フェーズとプロンプト生成フェーズを一本のフローで繋いでしまえばいい。 そのシンプルな発想から、VibeStepは生まれました。
ターゲットはこんな人
- バイブコーディングで個人開発をしている人
- アイデアはあるが「どこから書けばいいか」で時間を溶かしている人
- チームで開発していて、コンテキストやタスクの共有に疲れている人
プロダクトの構造——2つのコア機能
VibeStepは、役割の異なる2つの機能を搭載します。
VibeCanvas：構想フェーズ
「何を作るか」を具体化するエリアです。
インタラクティブ・ウィザード
質問に答えるだけで、AIが事業計画書とシステム構成案を自動生成してくれます。
| 質問の例 | 入力形式 |
|---|---|
| ターゲットユーザーは誰ですか？ | 選択 or 自由記述 |
| 技術スタックはどれを使いますか？ | 複数選択 |
| MVPで必要な機能は何ですか？ | 優先度付き選択 |
AIタスク・ディコンポジション
事業計画書が生成されたら、次はそれを「エンジニアが即着手できる粒度のタスク」に分解します。
「DB設計」「API実装」「UI構築」といったレベルまで自動で細かくなるので、タスク管理ツールへの転記作業がほぼ不要になります。
VibeBoard：チーム管理フェーズ
構想が固まったら、次はチームへの展開です。
個人開発ならVibeCanvasだけで完結しますが、複数人で動かすプロジェクトになった瞬間、「誰が何をやっているか」の把握がボトルネックになりますよね。
VibeBoardは、そこを解決するための管理エリアです。
シンプル共有＆アサイン
生成されたタスクをメンバーに割り振れます。
NotionやJiraを別途開かなくても、VibeStep上で完結するのが理想です。
| 機能 | 内容 |
|---|---|
| タスクアサイン | メンバーごとに担当タスクを設定 |
| 進捗ステータス管理 | 未着手・進行中・完了の3ステータスで一元管理 |
| 担当一覧ビュー | 誰がどのVibeを持っているか、一画面で把握 |
「誰がどのVibeを担当しているか」が一目でわかる状態を作ることで、チームの温度感を保ったまま開発を進められます。
進捗の可視化
タスクの完了数に応じて、プロジェクト全体の進捗メーターが動きます。
数字で見えると、チームのモチベーションが変わるんですよね。
小さいことのようで、毎日開くモチベーションに直結する部分だと思っています。
VibePrompt：実行・開発フェーズ
タスクが決まったら、次はAIエディタへの橋渡しです。
コンテキスト自動注入型プロンプト生成
これがVibeStepの一番の肝です。
特定タスクを選ぶと、プロジェクトの前提情報（技術スタック・ディレクトリ構造・命名規則）を自動で付加した、すぐ使えるプロンプトが生成されます。
あとはそれをCursorやClaude Codeにペーストするだけ。「コンテキストの用意」という地味に時間のかかる作業が消えます。
ステップバイステップ提案
「このタスクなら、まずDB設計→次にAPI→最後にUI」という開発フローそのものをAIが提案してくれます。
初学者だけでなく、慣れた開発者でも「あ、そっちの順番の方が効率的か」と気づかされることがあります。
GitHub / Vercel ステータス同期（フェーズ2）
GitHubへのプッシュやマージを検知して、VibeStep上のタスクを自動で「完了」に更新する機能などは、将来的には実装予定ですが現状のMVP開発ではまだ取り組みません。
これができると、VibeBoardの進捗管理も完全に自動化されますね。進捗管理ツールを別途開く必要が、完全になくなります。
開発者体験のフロー——5ステップで完結
実際の使い方はシンプルです。
| ステップ | やること | VibeStepの役割 |
|---|---|---|
| 1. 定義 | ウィザードに回答 | 事業計画書を自動生成 |
| 2. 分解 | タスクを確認・アサイン | AIがタスクを一括生成 |
| 3. 転送 | タスクを選んでクリック | プロンプトを自動生成 |
| 4. 実装 | プロンプトをAIエディタにペースト | コードが生成される |
| 5. 完了 | コードをプッシュ | 進捗メーターが自動更新 |
技術選定の話——なぜこのスタックなのか
MVP構成の概要
| レイヤー | 採用技術 | 選んだ理由 |
|---|---|---|
| Frontend | Next.js (TypeScript) | 開発スピードとSEO、PCでの作業性 |
| Backend | Firebase (Firestore/Auth) | インフラ管理不要。コストを最小化できる |
| AI Integration | Cloud Functions + OpenAI / Claude API | プロンプト生成ロジックをWeb・Mobile両方から共通利用 |
| UI/UX | Tailwind CSS + shadcn/ui | AIによるコード生成との相性が良く、高品質なUIを爆速で構築できる |
| Mobile（将来） | SwiftUI / Kotlin | ネイティブならではの快適な操作感とウィジェット機能 |
FirebaseをBackendに選んだ理由
正直、「個人開発初期にインフラを触りたくない」という理由が一番大きいです。 Firestoreはリアルタイム同期も得意なので、タスクのステータス更新をチームで即座に反映させる用途にもハマっています。
shadcn/uiを使う理由
バイブコーディングとの相性という観点で、shadcn/uiは今のところベストだと感じています。 コンポーネントのコードが手元に存在するので、AIが改変しやすい。 「このボタンのデザインを変えて」が1プロンプトで完結する体験は、一度知ると戻れません。
ロードマップ——MVPからその先へ
全体像
| フェーズ | 内容 | ポイント |
|---|---|---|
| Step 1（MVP） | Web版。ウィザード・タスク分解・プロンプトコピー | まずここで価値を証明する |
| Step 2 | GitHub連携。コミット・PRとタスクを自動紐付け | 進捗管理の自動化 |
| Step 3 | iOS版（SwiftUI）。ライブアクティビティで進捗をリアルタイム確認 | 開発中のモチベーション維持 |
| Step 4 | AIモデル提案機能。タスク内容に応じてClaudeとGPTを自動サジェスト | 最適なAIの選択を自動化 |
今いるフェーズ
現在はStep 1のMVP開発中です。
ウィザードのUXをどう設計するかで、かなり試行錯誤しています。
「選択形式だけだと表現できないニュアンス」と「自由記述だと構造化しにくい」という両方の課題を、どのバランスで解決するかが直近の壁です。
まとめ
VibeStepは、バイブコーディングという開発スタイルが生んだ課題——「構想の言語化」と「コンテキストの維持」——を解決するためのプラットフォームです。
今回お伝えした内容を整理するとこうなります。
| 項目 | 内容 |
|---|---|
| コア機能 | VibeCanvas（構想管理）とVibePrompt（プロンプト生成）の2軸 |
| 技術スタック | Next.js + Firebase + Claude/OpenAI API |
| 現在地 | Step 1（MVP）開発中 |
| 次のマイルストーン | ウィザードのプロトタイプ完成 |
「アイデアはあるのにコードに辿り着けない」というもどかしさを感じている方は、VibeStepをぜひ使っていただきたいです。
開発のリアルな試行錯誤を、この日記で包み隠さず書いていく予定です。次回もお楽しみに！
最後までご覧いただき、ありがとうございます。