Module 8 : SaaS開発

8.1 SaaS とは何か — なぜ作るのか

SaaS (Software as a Service)とは「月額制で使えるソフトウェア」のこと。Slack / Notion / Zoom / Netflix / Spotify — 私たちが毎日使うサービスのほとんどが SaaS です。

LP/HP と SaaS の決定的な違い

SaaS の4つの特徴

なぜ個人でも SaaS が作れる時代になったか

• インフラ革命: Vercel / Supabase などで月$0〜で本番運用可能に
• AIコード生成: Claude Code で1人で10人分のコードが書ける
• 決済の民主化: Stripe で個人でも法人並みの決済体験を提供できる
• 成功事例の増加: 個人SaaSで月収100万円超のケースが続出（2025〜）

8.2 技術スタックの全体像

4つのコアサービス

なぜこの組み合わせが最適なのか（5つの理由）

1. 情報量が多い: Claude Code が特に得意なスタック。生成コードの精度が高い
2. 学習リソースが豊富: 公式ドキュメント完璧、コミュニティ活発、YouTube/Zenn/Qiita に情報多数
3. 0→Scale が滑らか: 個人開発から数万ユーザーまで、同じ構成で対応可能
4. 運用コスト最小: 無料枠で本番稼働、スケールするまで月$0
5. 本気の人が使っている: Linear, Cal.com, Vercel など、大手SaaSも同じ系統のスタック

月額コストの目安

8.3 プロジェクト設計 — 作り始める前に決めること

決めておくこと6つ

1. プロダクト名とワンライナー: 「FocusList - 1日3つに絞るタスク管理」
2. 画面一覧: ログイン / サインアップ / ダッシュボード / 設定 / 料金プラン
3. データ構造: users / tasks / subscriptions テーブル
4. 料金プラン: Free（3件まで）/ Pro（月$9、無制限 + AI機能）
5. MVPに含めない機能: 後回しリスト（ここが超重要）
6. 成功指標（KPI）: 登録数 / 有料転換率 / MRR / Churn

データ設計の例

-- Supabase Auth が自動生成（デフォルト）
auth.users
  - id (uuid)
  - email
  - created_at

-- tasks テーブル
public.tasks
  - id (uuid)
  - user_id (auth.users.id への外部キー)
  - title (text)
  - done (boolean, default false)
  - due_date (date, nullable)
  - created_at (timestamptz)

-- subscriptions テーブル
public.subscriptions
  - id (uuid)
  - user_id (auth.users.id)
  - plan ('free' | 'pro')
  - stripe_customer_id (text)
  - stripe_subscription_id (text)
  - status ('active' | 'canceled' | 'past_due')
  - current_period_end (timestamptz)

Claude Code への設計依頼テンプレート

以下のSaaSプロジェクトの、技術設計書を作成してください。

【プロダクト】
- 名前: FocusList
- 概要: 1日3つに絞れるタスク管理SaaS
- ターゲット: 集中力を保ちたい知的労働者
- 差別化: 4つ目を追加しようとするとやんわり止める

【要件】
- Next.js (App Router) + Supabase + Vercel + Stripe
- 認証: メール + Google OAuth
- Free: タスク3件まで / Pro: 月$9で無制限 + AI優先度提案

【MVPに含めないもの（重要）】
- チーム機能
- モバイルアプリ
- 通知機能
- API公開

【成果物】
1. 画面遷移図（テキスト）
2. DBスキーマ（テーブル・カラム・関係・制約）
3. 認証フロー（メール / OAuth / セッション管理）
4. 決済フロー（Checkout → Webhook → DB反映）
5. 推奨ディレクトリ構成
6. 環境変数一覧

MVP判定の質問

各機能について、次の質問に答えられないなら MVP には入れない:

• これがないと、ユーザーは価値を得られないか？
• 他の機能で代用できないか？
• 後から追加してもビジネス的にダメージないか？

8.4 Next.js プロジェクトの構築

STEP 1: プロジェクト初期化

mkdir ~/projects/focuslist
cd ~/projects/focuslist
claude

# Claude への指示:
Next.js (App Router, TypeScript, Tailwind CSS 込み) で
focuslist というプロジェクトを初期化してください。

- src/ ディレクトリ構成
- ESLint 有効
- App Router
- Turbopack 使用
- Tailwind CSS 有効

初期化が終わったら、npm run dev で起動できるか
確認してください。

STEP 2: 基本レイアウトを作る

app/layout.tsx を以下の仕様で作ってください:
- ヘッダー: ロゴ + ナビ (ログイン / 登録)
- メインコンテンツエリア
- フッター: シンプルに著作権表示

デザイン方針:
- 白基調、Linear / Vercel 風のミニマル
- アクセントカラー: #09090b
- フォントは Inter + Noto Sans JP

STEP 3: トップページ (LP) を作る

app/page.tsx をFocusList のLPとして作ってください:

セクション:
1. ヒーロー: "1日3つに集中して、終わらせよう" + CTAボタン
2. 3つの特徴（集中 / 習慣化 / AI支援）
3. 料金プラン（Free / Pro）の比較表
4. 最終CTA

レスポンシブ対応必須。スマホで375pxまで崩れないように。

STEP 4: ディレクトリ構成を理解する

focuslist/
├── src/
│   ├── app/
│   │   ├── layout.tsx       ← 全ページ共通レイアウト
│   │   ├── page.tsx         ← トップ (/)
│   │   ├── login/
│   │   │   └── page.tsx     ← /login
│   │   ├── dashboard/
│   │   │   └── page.tsx     ← /dashboard
│   │   └── api/
│   │       └── webhooks/
│   │           └── stripe/
│   │               └── route.ts  ← /api/webhooks/stripe
│   ├── components/           ← 共通コンポーネント
│   └── lib/                  ← ユーティリティ
├── public/                   ← 静的ファイル
├── .env.local                ← 環境変数（git除外）
└── CLAUDE.md                 ← プロジェクトルール

STEP 5: GitHub に push

このプロジェクトを GitHub に push して、
Vercel にデプロイしたいです。

1. git init
2. GitHub にリポジトリ作成（gh CLI で）
3. 初回 commit & push
4. Vercel プロジェクト作成（CLI or Web）
5. 自動デプロイ開始

ブラウザ認証が必要な箇所は具体的に指示してください。

Server Components と Client Components

8.5 Supabase 認証 — ログインを実装する

STEP 1: Supabase プロジェクト作成

1. supabase.com に GitHub ログイン
2. 「New Project」→ 名前: focuslist
3. Region: Northeast Asia (Tokyo)
4. DB パスワードを安全に保管
5. Project URL と anon key をコピー

STEP 2: Claude Code で Supabase SDK を統合

このNext.jsプロジェクトに Supabase を統合してください。

手順:
1. @supabase/supabase-js @supabase/ssr をインストール
2. 環境変数を .env.local に追加
   - NEXT_PUBLIC_SUPABASE_URL
   - NEXT_PUBLIC_SUPABASE_ANON_KEY
3. src/lib/supabase/client.ts を作成（ブラウザ用）
4. src/lib/supabase/server.ts を作成（サーバー用）
5. middleware.ts で認証状態を確認

Next.js 15 の App Router + Server Components に
対応した最新のベストプラクティスで書いてください。

STEP 3: ログイン画面の実装

以下の画面を実装してください。

/login:
- メール + パスワード入力
- "Googleでログイン" ボタン
- "新規登録はこちら" リンク
- Zod でバリデーション

/signup:
- 同様のフォーム、登録後は確認メール送信

/auth/callback:
- OAuth コールバック処理

機能要件:
- ログイン成功で /dashboard へ
- エラーメッセージは日本語で表示
- ローディング状態も表示
- Tailwind でLinear風デザイン

STEP 4: Google OAuth 設定

1. Supabase ダッシュボード → Authentication → Providers → Google を有効
2. Google Cloud Console で OAuth クライアント作成
3. Client ID と Secret を Supabase に貼り付け
4. Redirect URI: https://あなたのプロジェクト.supabase.co/auth/v1/callback

STEP 5: middleware でルート保護

middleware.ts で以下を実装してください:

- /dashboard 以下は認証必須
- 未ログインなら /login へリダイレクト
- ログイン済みで /login or /signup に来たら /dashboard へ

全リクエストで Supabase セッションを refresh する
処理も含めてください。

8.6 DB 設計と RLS — データの安全を守る

RLS（Row Level Security）とは

「ユーザーAはユーザーBのデータを読めない」をデータベース側で強制する仕組み。フロント側のチェックを忘れても、DB 側で弾いてくれるので安全性が大きく上がります。

Claude Code に SQL マイグレーションを作ってもらう

Supabase に以下のテーブルとRLSを設定する SQL を
作ってください。supabase/migrations/ 配下に
タイムスタンプ付きのファイルで配置して。

【tasks テーブル】
- id uuid primary key default gen_random_uuid()
- user_id uuid references auth.users(id) on delete cascade
- title text not null
- done boolean default false
- due_date date
- created_at timestamptz default now()

【RLS ポリシー】
- tasks は RLS 有効化
- SELECT: auth.uid() = user_id
- INSERT: auth.uid() = user_id
- UPDATE: auth.uid() = user_id
- DELETE: auth.uid() = user_id

【subscriptions テーブル】
- id uuid primary key
- user_id uuid unique references auth.users(id)
- plan text check (plan in ('free', 'pro')) default 'free'
- stripe_customer_id text
- stripe_subscription_id text
- status text
- current_period_end timestamptz

【RLSポリシー】
- SELECT は本人のみ
- INSERT/UPDATE はサービスロール（Webhook）のみ許可

インデックスも適切に貼ってください。

SQL を Supabase に適用

1. Supabase Dashboard → SQL Editor を開く
2. 生成された SQL をコピペ
3. 「Run」で実行
4. Database → Tables で作成確認
5. Database → Policies で RLS ポリシー確認

RLS の動作確認テスト

Claude への依頼:
以下のテストを実装してください:

1. ユーザーAを作成、タスクを3件作る
2. ユーザーBを作成、ログイン
3. ユーザーBから「tasks を全部取得」を試みる
4. 期待: ユーザーBには0件（自分のタスクだけ）が返る
5. ユーザーA のタスクが見えないことを確認

このテストがパスすれば、RLS が効いている証拠です。

8.7 CRUD 実装 — タスク管理の中核機能

CRUD = Create / Read / Update / Delete の4操作

SaaS の主要機能はほぼすべて CRUD の組み合わせ。これが書ければ、99% の機能が実装できます。

ダッシュボード画面の仕様

/dashboard を以下で実装してください。

レイアウト:
- ヘッダー: ロゴ + ユーザーメニュー（設定/ログアウト）
- 中央: 「今日のタスク」（最大3件表示）
- 入力フォーム: 新規タスク追加
- タスクリスト: チェックボックス + タイトル + 削除ボタン
- フッター: Pro プラン誘導（Free の場合）

機能:
1. Read: 自分のタスクを作成日時順で取得
2. Create: 新規タスク追加（Free は3件で制限）
3. Update: チェックボックスで完了/未完了切替
4. Delete: ゴミ箱アイコンで削除
5. 楽観的更新（UI 即時反映、サーバー同期は裏で）

実装方針:
- 取得は Server Component（初回表示速く）
- 操作は Server Actions（API Route 不要）
- エラーハンドリング、ローディング表示
- スケルトンUIで体感速度UP

Server Actions の基本形

// app/dashboard/actions.ts
'use server'
import { createClient } from '@/lib/supabase/server'
import { revalidatePath } from 'next/cache'

export async function createTask(formData: FormData) {
  const title = formData.get('title') as string
  const supabase = await createClient()

  // 認証確認
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) return { error: '未認証です' }

  // Free プラン制限チェック
  const { count } = await supabase
    .from('tasks')
    .select('*', { count: 'exact' })
    .eq('user_id', user.id)

  const { data: sub } = await supabase
    .from('subscriptions')
    .select('plan')
    .eq('user_id', user.id)
    .single()

  if (sub?.plan === 'free' && count && count >= 3) {
    return { error: 'Free プランは3件まで。Pro にアップグレードを' }
  }

  // 作成
  const { error } = await supabase
    .from('tasks')
    .insert({ user_id: user.id, title })

  if (error) return { error: error.message }

  revalidatePath('/dashboard')
  return { success: true }
}

Pro 専用機能: AI 優先度提案

Pro ユーザー向けに、「タスクを3つ入力すると、
どれから着手すべきか AI が理由付きで提案する」
機能を追加してください。

- app/api/suggest-priority/route.ts に実装
- Anthropic SDK で Claude Haiku を使用
- 環境変数 ANTHROPIC_API_KEY
- レスポンス: { recommended_order: [...], reasons: [...] }

フロント側: Pro ユーザーのみ「AIに聞く」ボタン表示。
Free ユーザーには「Pro にアップグレード」誘導。

UX 改善のテクニック

8.8 Stripe 決済 — 月額課金を実装する

STEP 1: Stripe アカウント作成と商品登録

1. stripe.com でアカウント作成（ビジネス登録は後でOK）
2. ダッシュボードで「テストモード」にする
3. Products → 新規 Pro プラン（月額$9）を作成
4. Price ID（price_xxx）をコピー
5. API Keys で Secret Key / Publishable Key を取得

STEP 2: Claude Code で決済実装

このプロジェクトに Stripe で月額課金を組み込んでください。

【フロー】
1. /pricing でPro プランを選択
2. Stripe Checkout セッション作成
3. Stripe の決済画面へ
4. 成功で /dashboard?checkout=success に戻る
5. Webhook で subscriptions テーブル更新
6. DB の plan='pro' で機能制限解除

【実装】
- stripe npm パッケージインストール
- app/api/checkout/route.ts: Checkout セッション作成
- app/api/webhooks/stripe/route.ts: Webhook 受信
- Webhook は署名検証（stripe.webhooks.constructEvent）
- Server Component で plan を取得、UI に反映

【環境変数】
- STRIPE_SECRET_KEY
- STRIPE_WEBHOOK_SECRET
- NEXT_PUBLIC_STRIPE_PRICE_ID

【テストカード】
4242 4242 4242 4242 で動作確認してください。

STEP 3: Webhook のローカルテスト

Stripe の Webhook は本番URLに飛ばすもの。ローカルでテストするには stripe CLI を使います:

# Claude に依頼
stripe CLI をインストールして、
localhost:3000/api/webhooks/stripe に
Webhook を転送する設定を教えてください。

stripe login
stripe listen --forward-to localhost:3000/api/webhooks/stripe

出力された whsec_xxx を .env.local の
STRIPE_WEBHOOK_SECRET に設定。

Webhook で扱うべき主要イベント

STEP 4: プラン変更・解約の導線

/settings/billing 画面を実装してください:

- 現在のプラン表示
- Free → Pro アップグレードボタン
- Pro → 解約ボタン（Stripe Customer Portal 経由）
- 次回課金日、支払い履歴の表示

Stripe Customer Portal を使えば、
自前で解約UIを作らずに済みます。

8.9 本番公開 — 世界に SaaS を届ける

本番公開の10ステップ

1. Vercel にプロジェクトを接続（GitHub 連携）
2. 環境変数を Vercel Dashboard に登録
3. Stripe を本番モードに切替、本番キーを Vercel に設定
4. Stripe Webhook の本番 URL を登録
5. Supabase の URL configuration で本番 URL を追加
6. Google OAuth の redirect URI に本番 URL を追加
7. main ブランチに push → 自動デプロイ
8. 本番 URL で一通り動作確認
9. カスタムドメイン設定（任意）
10. SSL 自動発行を確認

環境変数の本番管理

Vercel Dashboard → Settings → Environment Variables

【Production にのみ設定】
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PRICE_ID=price_live_...

【全環境共通】
NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...
ANTHROPIC_API_KEY=sk-ant-...

【Preview / Development のみ】
STRIPE_SECRET_KEY=sk_test_...  ← テストキー

Claude Code に最終チェックを依頼

本番公開前の最終チェックをしてほしいです。
以下を確認してください:

1. 全ての環境変数が本番用に切り替わっているか
2. Stripe が本番モードになっているか
3. RLS が全テーブルで有効か
4. 管理者用のシード情報・テストアカウントが残っていないか
5. console.log など機密情報を出す行が残っていないか
6. エラーページ (error.tsx / not-found.tsx) が実装されているか
7. robots.txt / sitemap.xml があるか
8. Open Graph / Twitter カードが設定されているか
9. favicon / apple-touch-icon があるか
10. Lighthouse スコアが 85以上あるか

問題があれば修正案も提示してください。

✅ 本番公開前チェックリスト

• メール + Google認証でログインできる
• 別ユーザーで互いのデータが見えない（RLS確認）
• Free プランで3件制限が機能
• Stripe決済が本番カードで成功
• 決済後、即 Pro に切替わる
• 解約で Free に戻る
• スマホでも崩れない
• 利用規約・プライバシーポリシーを掲載
• 特商法表記（日本向けなら必須）
• お問い合わせフォーム or メールがある

8.10 ローンチ後の運用 — 育てる戦い方

見るべき4つの数字（SaaS の健康診断）

最低限入れておきたい監視

• エラー監視: Sentry（無料枠あり）でサーバー・クライアント両方のエラーをキャッチ
• ユーザー行動: PostHog（OSS / 無料枠）or Google Analytics
• ビジネス指標: Stripe Dashboard + 簡易 /admin ページで MRR / Churn 可視化
• 稼働監視: UptimeRobot（無料）で5分おきに死活監視

継続改善の PDCA サイクル

1. 仮説: 「Free の3件制限を強調すれば転換率が上がるはず」
2. 実装: 3件目を追加しようとしたら Pro 誘導モーダル
3. 計測: 1〜2週間、転換率の変化を見る
4. 判断: 効果あり → 採用 / 効果なし or 悪化 → ロールバック
5. 次の仮説へ

3ヶ月後の目標設定

🎓 モジュール6 修了チェック

• Next.js + Supabase + Vercel の構成を自分で組める
• 認証・DB・RLS を理解して設定できる
• CRUD 操作とSaaSのビジネスロジックを実装できる
• Stripe で月額課金を実装できる
• 1本の SaaS を本番公開できた
• 運用で見るべき指標を説明できる