「SaaS を作りたい、けど何から手をつければ1週間で動くものになるのか分からない」
AI Maker Lab 編集部に届く相談で、いちばん多いテーマです。本記事は v0 / Lovable / Cursor / Claude Code / Supabase を組み合わせて、SaaS MVP を1週間（実働7日）で動かすロードマップを、Day 別タスク・編集部の実装日記・トラブルシュートまで含めて提示します。
本記事は AI Maker Lab 編集部（運営者 + AI 編集部の協働運用）が、実際に複数のミニ SaaS（ココラボ や キャリアラウンジ などのメディアサイト本体および付随する内部ツール）を作るなかで蓄積した一次経験 をもとに執筆しています。料金・機能は 2026-05 時点の公式情報です。
結論：1週間スケジュール（Day1-7）
| Day | フェーズ | 完了基準 |
|---|---|---|
| Day 1 | アイデア整理 + プロンプト設計 | プロンプト集 v1 が手元にある |
| Day 2 | v0 / Lovable で UI スケルトン | 主要3画面の見た目が動く |
| Day 3 | Supabase Auth + Postgres セットアップ | サインアップ → ログインまで通る |
| Day 4 | ビジネスロジック実装（Cursor / Claude Code） | コア機能が1つ通しで動く |
| Day 5 | API 連携・テスト | 外部 API 連携 + 主要テストが緑 |
| Day 6 | Cloudflare Pages / Vercel デプロイ | 本番 URL で動作確認 |
| Day 7 | Twitter / Product Hunt で公開告知 | 投稿完了 + 初期フィードバック収集 |
1日あたり 4〜6時間の実働 を想定しています。フルタイム稼働なら3〜4日に圧縮できますが、副業で取り組むなら1週間枠が現実的です。
Day 1：アイデア整理 + プロンプト設計
やること
- 1行プロダクト定義：「誰の何の課題を、どう解決するか」を1行で書く
- コア機能3つに絞る：MVP は機能を増やさない。3つだけ
- 画面リスト：必要画面を5〜7枚に絞る（ログイン・ホーム・コア機能・設定・課金）
- プロンプト集 v1：各画面 / 各機能のプロンプトを Markdown で1ファイルにまとめる
編集部の実装日記
Claude Code を相棒にして、まずは「1行定義」を5回書き直しました。最初は「個人開発者向けのプロジェクト管理 SaaS」と曖昧でしたが、Claude Code との対話で「個人開発者がリリース後3ヶ月の作業を3分で計画できるツール」まで具体化しました。1行が決まれば残りは芋づる式です。
プロンプト設計のコツ
- プロンプトに含めるべき要素：機能・画面構成・データ構造・UI ライブラリ指定・カラースキーム
- 避けたほうがいいこと：抽象的な形容詞（「シンプル」「モダン」）だけで終わらせる
- 編集部の運用：プロンプト集を
/prompts/ディレクトリに置き、Cursor / Claude Code から参照する
Day 2：v0 / Lovable で UI スケルトン
やること
- 画面 1〜3 を v0 / Lovable で量産：1画面15〜30分
- ナビゲーション接続：画面間遷移を仮配線
- モックデータ表示：ハードコードでよいので「動いている雰囲気」を出す
ツール選択
- DB / 認証 / 決済まで一気に欲しい → Lovable（Supabase 統合がデフォルト）
- UI を細かく追い込みたい / Next.js 環境に組み込みたい → v0（shadcn/ui ベース）
- ブラウザ完結で気楽に試したい → Bolt（WebContainer ブラウザ完結）
詳細な比較は v0 vs Lovable vs Bolt 記事 と Vibe Coding LP 30分実装パターン10 を参照してください。
編集部の実装日記
編集部は Day 2 を Lovable + v0 の併用 で進めました。Lovable は「DB 連携前提の動く画面」、v0 は「shadcn/ui を活かした見栄えのある画面」が得意。コア機能の動作確認は Lovable、見せ場の画面は v0 という分業で、Day 2 終了時には主要3画面が動く状態になりました。
Day 3：Supabase Auth + Postgres セットアップ
やること
- Supabase プロジェクト作成：supabase.com で新規プロジェクト
- Auth 有効化：Email + Google OAuth を ON
- Postgres スキーマ作成：コア機能で必要なテーブルを3〜5個
- Row Level Security (RLS) ポリシー：「ユーザーは自分のデータだけ見える」を設定
- 環境変数の管理：
.env.localに URL / Anon Key を保存
Supabase 設計のコツ
- テーブル名は複数形：
users/projects/tasks auth.usersを参照する外部キー：user_id uuid references auth.users(id)- 作成日時・更新日時：
created_at timestamptz default now()を必須カラムに - RLS は必ず有効化：忘れると 全テーブルが世界に公開される事故 が起きます
編集部の実装日記
Supabase の最大の落とし穴は RLS の設定忘れ。Lovable で「Supabase 統合」を有効にすると、最初は RLS が無効のまま動作してしまいます。Day 3 の最後に必ず「RLS ポリシーの一覧確認」を行ってください。Claude Code に「Supabase の全テーブルの RLS 状況を確認するクエリを書いて」と依頼すると、SQL を出してくれます。
Day 4：ビジネスロジック実装（Cursor / Claude Code 活用）
やること
- コア機能の1つを通しで実装：データ取得 → 表示 → 編集 → 保存
- Cursor / Claude Code でロジック実装：v0 / Lovable の生成物にビジネスロジックを足す
- エラーハンドリング：ネットワークエラー・認証エラー・バリデーションエラー
- ローディング状態：スピナー・スケルトン
Cursor / Claude Code の使い分け
詳細な比較は Cursor vs Claude Code 記事 を参照してください。編集部の現場感は以下のとおり。
- Cursor：エディタ内のチャットで小規模なリファクタを高速反復
- Claude Code：ターミナル中心で 複数ファイルにまたがる大規模な変更を一括実行
両方とも無料枠 or 月額 $20 で試せます。
編集部の実装日記
Day 4 が一番ハマりがち。「v0 / Lovable で出した画面に、自分のビジネスロジックを足す」工程です。編集部は Claude Code に「このコンポーネントに〜のロジックを追加して」と1機能ずつ指示 する運用に落ち着きました。1機能を30分以内で完了し、コミットしてから次へ進む、というリズムを守ると Day 4 で破綻しにくいです。
Day 5：API 連携・テスト
やること
- 外部 API 連携：決済（Stripe）・メール送信（Resend）・AI（OpenAI / Anthropic）など
- 環境変数の整理：API キーは Vercel / Cloudflare のシークレットに登録
- 主要テスト：認証フロー・コア機能・課金フロー
- エラー監視：Sentry 等のセットアップ（無料枠あり）
API 連携のコツ
- API キーはサーバーサイドのみ：クライアントに漏れない構造に
- レート制限の確認：無料枠の上限を必ずチェック
- エラーレスポンスの取り扱い：500 系・429 系のリトライ実装
編集部の実装日記
Stripe 連携が一番ハマりやすいポイント。Webhook の検証・本番環境とテスト環境の切替・カード支払い失敗時のリトライなど、論点が多いです。編集部は Claude Code に「Stripe Webhook の検証コードを Next.js Route Handler で書いて」と依頼して、雛形を生成してから自分で1行ずつ理解する、という勉強モードで進めました。
Day 6：Cloudflare Pages / Vercel デプロイ
やること
- GitHub にリポジトリ作成：プロジェクトを push
- Vercel or Cloudflare Pages に接続：自動デプロイ設定
- 環境変数を本番に設定：API キー・Supabase キー
- 独自ドメイン接続：取得済みドメインを CNAME 設定
- 本番動作確認：認証 → コア機能 → 課金まで通しチェック
Vercel vs Cloudflare Pages
| 観点 | Vercel | Cloudflare Pages |
|---|---|---|
| Next.js との相性 | 最高（公式） | 一部 Edge Runtime 制約あり |
| 無料枠 | 商用は制限あり | 商用 OK・帯域無制限 |
| Edge Functions | あり | あり（Workers） |
| 学習コスト | 低 | やや高 |
編集部は メディアサイト（ココラボ / キャリアラウンジ / 本サイト aimaker-lab.com ） をすべて Cloudflare Pages で運用しています。商用無料・帯域無制限が決め手です。Next.js を本格的に使う場合は Vercel が無難。
編集部の実装日記
「ローカルで動くのに本番で動かない」の99%は 環境変数の設定漏れ です。Vercel / Cloudflare Pages の管理画面で、Production / Preview / Development の3環境すべてに変数を設定してください。Claude Code に「.env.local を読んで Vercel CLI で全環境にセットするコマンドを出して」と依頼すると、
vercel env addのコマンドを生成してくれます。
Day 7：Twitter / Product Hunt で公開告知
やること
- Twitter / X で公開告知：プロダクト概要 + URL + スクリーンショット
- Product Hunt 投稿準備：タグライン・タグ・スクリーンショット・動画
- 個人ブログ / Zenn / Qiita に開発記：作った過程を記事化（SEO 流入の起点）
- フィードバック収集：初期ユーザーの声を Notion / スプレッドシートに集約
公開告知のコツ
- スクリーンショット 3枚：1枚目はビフォーアフター系、2枚目は機能、3枚目は料金
- タグライン1行：「誰の何を解決するか」を10秒で読める長さに
- 動画30秒：Loom や QuickTime で画面録画。編集なしで OK
編集部の実装日記
Day 7 の最大の罠は 「もう少し直してから公開しよう」と思って公開しないこと。編集部は「Day 7 の終了時刻に何があっても公開ボタンを押す」というルールにしています。完成度70%で公開して、フィードバックを浴びてから直す のが、Vibe Coding 時代の MVP のスピード感です。
失敗パターン・トラブルシュート
パターン1：Day 3 で Supabase 設計が決まらない
原因：Day 1 のデータ構造設計が甘い
対策：Day 1 で「ER 図を1枚紙に書く」フェーズを必ず入れる。Claude Code に「このプロダクトの ER 図を Mermaid で出して」と依頼するのも有効。
パターン2：Day 5 で API キーが GitHub に漏れた
原因：.env.local を .gitignore に入れ忘れ
対策：プロジェクト作成直後に .gitignore をチェック。漏れた場合は 即座に API キーをローテーションしてください。
パターン3：Day 6 で本番が動かない
原因：環境変数未設定、もしくは Build Command の設定誤り
対策：ローカルで next build && next start が通ることを確認してからデプロイ。エラーが出たら Vercel / Cloudflare のビルドログを最後まで読む。
パターン4：Day 7 で公開できない
原因：完成度を気にしすぎ
対策：「Day 7 の17時にツイートする」と先に予定を入れる。「完成」より「公開」が常に優先。
FAQ
Q1. 1週間で本当に動く SaaS が作れますか？
コア機能を3つに絞れば作れます。10機能を盛り込むと1ヶ月かかります。MVP は機能の少なさが正義です。
Q2. プログラミング初学者でもできますか？
Day 1〜2 は初学者でも進められます。Day 3 以降は SQL / Auth / API の基礎理解があるとスムーズです。基礎学習を並走させるなら、Day 1〜7 を2週間に拡張するのが現実的です。
Q3. ツールの月額はどれくらいかかりますか？
最小構成なら 0円〜$50/月 の範囲です。v0 / Lovable / Cursor / Claude Code すべてに無料枠があり、Supabase / Cloudflare Pages も無料枠で個人開発の範囲はカバーできます。本格運用フェーズで月額 $50〜$200 に増えるイメージです。
Q4. デプロイ先は Vercel と Cloudflare Pages のどちらが良いですか？
Next.js を本格的に使うなら Vercel、商用無料・帯域無制限を取るなら Cloudflare Pages です。編集部のメディアサイト群は Cloudflare Pages、個別のミニ SaaS は Vercel という併用にしています。
Q5. AI が生成したコードはそのまま本番投入できますか？
プロトタイプ品質まではそのまま使えますが、セキュリティ・パフォーマンス・アクセシビリティは必ずレビューしてください。とくに認証・課金・個人情報を扱う部分は、Claude Code に「セキュリティの観点でこのコードをレビューして」と依頼するのが最低ラインです。
まとめ
Vibe Coding の最大の価値は 「個人が1週間で SaaS を出せる」状態を作ったこと です。10年前なら1〜2ヶ月かかった作業が、今は7日で動きます。AI Maker Lab 編集部は本記事のロードマップを実際の案件に適用して、複数のメディア・ツールを並行運用しています。
関連記事
- Vibe Coding 完全ガイド 2026 — AI 時代の個人開発入門
- v0 vs Lovable vs Bolt：Vibe Coding 3大ツール比較 — UI 生成ツール横並び比較
- Vibe Coding でランディングページを30分で作る実装パターン10 — Day 2 で使う LP テンプレ
- Vibe Coding × Supabase で認証 + DB のアプリを1日で動かす — Day 3 の認証 + DB を1日で動かす版
- Cursor vs Claude Code 比較 — Day 4 で使うエディタ選定
- Claude Code セットアップから1ヶ月運用まで — Day 4 以降の相棒ツール
- 個人開発者向けホスティング選定ガイド — Day 6 のデプロイ先選定
- 独自ドメイン取得ガイド 2026 — Day 6 のドメイン接続
情報の一次性について
本記事のロードマップは AI Maker Lab 編集部（運営者 + AI 編集部）が実際に複数のメディア・ミニ SaaS を構築・運用するなかで蓄積した一次経験 をもとに整理しています。料金・機能は 2026-05 時点の各サービス公式情報です。実装時の工数は読者のスキル・案件複雑度・並行作業数によって変動します。
Amazon で関連書籍・ガジェットを探す
本記事のテーマに関連する書籍は Amazon でも購入できます。
※ AI Maker Lab は Amazon アソシエイト・プログラムの参加サイトとして、商品のリンク経由のご購入から紹介料を受け取ります（PR）。掲載内容そのものは公平な視点で執筆しています。