saas-mvp-launcher

SaaS MVP ランチャー

概要

このスキルは、実運用に耐える SaaS MVP をできるだけ短時間で構築する方法を案内します。アイデアの検証や技術スタックの選定から、認証、決済、データベース設計、デプロイ、そしてローンチまで、実戦で鍛えられたモダンなツールを使って網羅的に解説します。

このスキルを使うべきとき

• 新しい SaaS プロダクトをゼロから始めるとき
• Web アプリケーションの技術スタックを選ぶ必要があるとき
• SaaS の認証、課金、データベースをセットアップするとき
• ローンチ前に体系的なチェックリストがほしいとき
• マルチテナントアプリケーションのアーキテクチャを設計するとき
• 初期段階の既存 SaaS の技術レビューを行うとき

ステップバイステップガイド

1. 作る前に検証する

コードを書く前に、アイデアを検証しましょう。

Validation checklist:
- [ ] Can you describe the problem in one sentence?
- [ ] Who is the exact customer? (not "everyone")
- [ ] What do they pay for today to solve this?
- [ ] Have you talked to 5+ potential customers?
- [ ] Will they pay $X/month for your solution?

ルール: 3 人から事前決済または意向表明書を取得できなければ、まだ作り始めてはいけません。

2. 技術スタックを選ぶ

推奨されるモダンな SaaS スタック（2026 年）:

レイヤー	選択肢	理由
フロントエンド	Next.js 15 + TypeScript	フルスタック、優れた DX、Vercel デプロイ
スタイリング	Tailwind CSS + shadcn/ui	高速、アクセシブル、カスタマイズ可能
バックエンド	Next.js API Routes または tRPC	型安全、同居配置
データベース	Supabase 経由の PostgreSQL	信頼性、スケーラビリティ、無料枠
ORM	Prisma または Drizzle	型安全なクエリ、マイグレーション
認証	Clerk または NextAuth.js	ソーシャルログイン、セッション管理
決済	Stripe	業界標準、優れたドキュメント
メール	Resend + React Email	モダン、開発者フレンドリー
デプロイ	Vercel（フロントエンド）+ Railway（バックエンド）	ゼロコンフィグ、高速な CI/CD
監視	Sentry + PostHog	エラー追跡 + 分析

3. プロジェクト構造

my-saas/
├── app/                    # Next.js App Router
│   ├── (auth)/             # Auth routes (login, signup)
│   ├── (dashboard)/        # Protected app routes
│   ├── (marketing)/        # Public landing pages
│   └── api/                # API routes
├── components/
│   ├── ui/                 # shadcn/ui components
│   └── [feature]/          # Feature-specific components
├── lib/
│   ├── db.ts               # Database client (Prisma/Drizzle)
│   ├── stripe.ts           # Stripe client
│   └── email.ts            # Email client (Resend)
├── prisma/
│   └── schema.prisma       # Database schema
├── .env.local              # Environment variables
└── middleware.ts           # Auth middleware

4. コアデータベーススキーマ（マルチテナント SaaS）

model User {
  id            String    @id @default(cuid())
  email         String    @unique
  name          String?
  createdAt     DateTime  @default(now())
  subscription  Subscription?
  workspaces    WorkspaceMember[]
}

model Workspace {
  id        String    @id @default(cuid())
  name      String
  slug      String    @unique
  plan      Plan      @default(FREE)
  members   WorkspaceMember[]
  createdAt DateTime  @default(now())
}

model Subscription {
  id                 String   @id @default(cuid())
  userId             String   @unique
  user               User     @relation(fields: [userId], references: [id])
  stripeCustomerId   String   @unique
  stripePriceId      String
  stripeSubId        String   @unique
  status             String   // active, canceled, past_due
  currentPeriodEnd   DateTime
}

model WorkspaceMember {
  userId      String
  workspaceId String
  user        User      @relation(fields: [userId], references: [id])
  workspace   Workspace @relation(fields: [workspaceId], references: [id])
  @@id([userId, workspaceId])
}

enum Plan {
  FREE
  PRO
  ENTERPRISE
}

5. 認証のセットアップ（Clerk）

// middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const isPublicRoute = createRouteMatcher([
  '/',
  '/pricing',
  '/blog(.*)',
  '/sign-in(.*)',
  '/sign-up(.*)',
  '/api/webhooks(.*)',
]);

export default clerkMiddleware(async (auth, req) => {
  if (!isPublicRoute(req)) {
    await auth.protect();
  }
});

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

6. Stripe 連携（サブスクリプション）

// lib/stripe.ts
import Stripe from 'stripe';
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2025-01-27.acacia',
});

// Create checkout session
export async function createCheckoutSession(userId: string, priceId: string) {
  return stripe.checkout.sessions.create({
    mode: 'subscription',
    payment_method_types: ['card'],
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_URL}/dashboard?success=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/pricing`,
    metadata: { userId },
  });
}

7. ローンチ前チェックリスト

技術:

• 認証が動作する（サインアップ、ログイン、ログアウト、パスワードリセット）
• 決済がエンドツーエンドで動作する（サブスクライブ、キャンセル、アップグレード）
• エラー監視が設定されている（Sentry）
• 環境変数が文書化されている
• データベースのバックアップが設定されている
• API ルートにレート制限がある
• すべてのフォームで Zod による入力バリデーションがある
• HTTPS が強制され、セキュリティヘッダーが設定されている

プロダクト:

• 明確な価値提案のあるランディングページ
• 2〜3 段階の料金ページ
• オンボーディングフロー（5 分以内に最初の価値提供）
• メールシーケンス（ウェルカム、トライアル終了、支払い失敗）
• 利用規約とプライバシーポリシーのページ
• サポートチャネル（メール / チャット）

マーケティング:

• ドメインを購入して設定済み
• すべてのページに SEO メタタグ
• Google Analytics または PostHog を導入済み
• ソーシャルメディアアカウントを作成済み
• Product Hunt の下書きを準備済み

ベストプラクティス

• ✅ すべき: 最大 4〜6 週間で動作する MVP をリリースし、その後フィードバックに基づいて改善する
• ✅ すべき: 初日から課金する — 無料ユーザーはプロダクトマーケットフィットを検証しない
• ✅ すべき: まず「ハッピーパス」を構築し、エッジケースは後で対応する
• ✅ すべき: 段階的なロールアウトにフィーチャーフラグを使う（例: Vercel Edge Config）
• ✅ すべき: ローンチ当日からユーザー行動を監視する — 問題が起きてからではない
• ❌ すべきでない: 顧客と話す前にすべての機能を作り込む
• ❌ すべきでない: MRR 1 万ドルに到達する前にスケールの最適化を行う
• ❌ すべきでない: 独自の認証システムを構築する — Clerk、Auth.js、Supabase Auth を使う
• ❌ すべきでない: オンボーディングフローを省略する — ここでほとんどの SaaS がユーザーを失う

トラブルシューティング

問題： ユーザーが登録しても、アクティブにならない（コア機能を利用しない） 解決策： 最初の価値を実感するまでの手順を減らします。PostHog でオンボーディングのどの段階でユーザーが離脱するかを追跡します。

問題： トライアル後の解約率が高い 解決策： 解約アンケートを追加します。解約の大半は価格ではなく、価値を実感できないことが原因です。

問題： Stripe の Webhook イベントがローカル環境で受信されない 解決策： Stripe CLI を使用します：stripe listen --forward-to localhost:3000/api/webhooks/stripe

問題： 本番環境でデータベースのマイグレーションに失敗する 解決策： 本番環境では必ず prisma migrate deploy を実行します（prisma migrate dev ではありません）。

制限事項

• タスクが上記で説明されている範囲に明確に該当する場合にのみ、このスキルを使用してください。
• 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、成功基準が不足している場合は、作業を中断して確認を求めてください。

これらのサンプルは出発点であり、本番環境向けのセキュリティ実装ではありません。認証済みサーバーセッションから userId／ワークスペースのメンバーシップを取得し、価格 ID をサーバー側で管理する許可リストに照らして検証し、テストモードの Stripe キーを使用してください。利用権限を付与するのは、署名を検証し、冪等に処理した Webhook イベントに限り、成功 URL を使ってはなりません。テナントのメンバーシップ／スキーマだけでは、テナント認可は適用されません。リリース前に、重大な障害、決済、復旧の各パスを確保してください。上記の時間、収益、前払いのしきい値は計画上の目安であり、普遍的な実施可否の基準ではありません。互換性のある SDK／API のバージョンを固定し、デプロイ済みの Clerk 連携を検証してください。