AI 原生开放教材

外观

VibeFast 文档官方文档·英文原文 ↗原件 ↓仓库 ↗

ケーススタディ：vibefast.appでSaaSを作る——InvoiceTrack ​

English · 繁中 · Español · 日本語 · Português (BR)

著者： Danko Peng（@dankopeng）
更新： 2026年3月
読了時間： 約9分

このケーススタディについて ​

抽象的なチュートリアルより、実際の開発ストーリーを見た方がわかりやすい。

この記事では、フリーランサー向けの請求書管理SaaS「InvoiceTrack」をvibefast.appで構築するプロセスを追う。

アイデアから、データベース設計、コア機能の実装、ブランディング、Stripe課金設定まで——実際のVibe Coding開発フローを順番に見ていこう。

プロダクト概要：InvoiceTrack ​

何を解決するのか： フリーランサーや一人起業家は複数の顧客の請求書を管理するのが難しく、「あの顧客の請求書は支払われたか」「来月の請求予定はいくらか」を一目で把握したい。

MVPの核心機能：

  • 顧客情報の管理
  • 請求書の作成と状態管理（下書き、送付済み、支払い済み、期限超過）
  • ダッシュボードで未収金総額を表示
  • 期限前のリマインダーメール

明確に除外：（MVPでは作らない）

  • PDFエクスポート
  • 多通貨対応
  • チームアカウント

ステップ1：AIと需要分析書を作る ​

最初にCursorで、コードを書く前にAIと会話する：

先にコードを書かないでください。

InvoiceTrackというフリーランサー向け請求書管理SaaSを作ります。

ターゲット：10〜50社の顧客を持つフリーランサー
技術基盤：vibefast.app（Remix + Cloudflare Workers + D1 + Stripe + Resend）

MVP機能：
- 顧客一覧
- 請求書作成・管理（ステータス：draft / sent / paid / overdue）
- ダッシュボード（未収金合計、期限超過の件数）
- 支払い期限7日前リマインダーメール

このプロダクトに必要なデータベーステーブルの設計を提案してください。
各テーブルのカラム、型、関係性を含めてください。

AIが提案するスキーマ：

sql
-- 顧客テーブル
CREATE TABLE clients (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id INTEGER NOT NULL,          -- InvoiceTrackを使っているユーザー
  name TEXT NOT NULL,
  email TEXT NOT NULL,
  company TEXT,
  address TEXT,
  created_at TEXT DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (user_id) REFERENCES users(id)
);

-- 請求書テーブル
CREATE TABLE invoices (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id INTEGER NOT NULL,
  client_id INTEGER NOT NULL,
  invoice_number TEXT NOT NULL,
  status TEXT NOT NULL DEFAULT 'draft',  -- draft / sent / paid / overdue
  due_date TEXT NOT NULL,
  subtotal REAL NOT NULL,
  tax_rate REAL DEFAULT 0,
  total REAL NOT NULL,
  notes TEXT,
  created_at TEXT DEFAULT CURRENT_TIMESTAMP,
  sent_at TEXT,
  paid_at TEXT,
  FOREIGN KEY (user_id) REFERENCES users(id),
  FOREIGN KEY (client_id) REFERENCES clients(id)
);

-- 請求明細テーブル
CREATE TABLE invoice_items (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  invoice_id INTEGER NOT NULL,
  description TEXT NOT NULL,
  quantity REAL NOT NULL,
  unit_price REAL NOT NULL,
  amount REAL NOT NULL,
  FOREIGN KEY (invoice_id) REFERENCES invoices(id)
);

設計を確認して納得したら実装へ。

ステップ2：Layer 1の実装（地盤を作る） ​

# InvoiceTrack 作業計画

## Layer 1 - 地盤
- [ ] D1マイグレーション（clients, invoices, invoice_items）
- [ ] vibefast.appのAuth動作確認
- [ ] 環境変数の整理

## Layer 2 - コア機能
- [ ] 顧客一覧（/clients）
- [ ] 顧客追加・編集フォーム
- [ ] 請求書作成フォーム（顧客選択 + 明細行追加）
- [ ] 請求書一覧（/invoices）
- [ ] 請求書ステータスの更新
- [ ] ダッシュボード（/dashboard）
- [ ] リマインダーメール（Cron Trigger）

## Layer 3 - 改善
- [ ] デザインブラッシュアップ
- [ ] 通貨フォーマット
- [ ] 請求書番号の自動採番

マイグレーションの実行 ​

AIに生成させたSQLをマイグレーションファイルとして保存：

bash
# migrations/0002_invoicetrack_schema.sql を作成
npm run deploy  # スキーマを本番にも反映

ステップ3：コア機能を段階的に実装する ​

vibefast.appはAuthが実装済みなので、すぐに機能実装から始められる。

顧客一覧ページ（/clients）の実装：

Remixで /clients ページを実装してください。

- D1のclientsテーブルから、ログインユーザーの顧客のみ取得
- テーブル形式で表示（名前、メール、会社名、登録日）
- 右上に「顧客を追加」ボタン
- 空の状態（顧客が0件）のUIも実装してください
- vibefast.appの既存スタイル（Tailwind）に合わせてください

請求書作成フォーム（/invoices/new）の実装：

請求書作成ページを実装してください。

- 顧客の選択（ドロップダウン）
- 請求書番号（自動入力、例：INV-2026-001）
- 支払い期限（日付ピッカー）
- 明細行（description, quantity, unit_price → amount を自動計算）
- 明細行を動的に追加・削除できる
- 小計、税率、合計の自動計算
- 「下書き保存」と「確定して送付」の2つのボタン

フォームのデータはRemixのactionでD1に保存してください。

ステップ4：ダッシュボードで重要指標を表示する ​

/dashboard ページを実装してください。

表示する指標：
- 今月の請求合計（sent + paid の合計金額）
- 未収金合計（status = 'sent' で due_date が過去のもの）
- 期限超過の請求書数
- 最近5件の請求書のリスト

D1の集計クエリでこれらの数値を取得してください。
ログインユーザーのデータのみ表示してください。

AIが生成するダッシュボードクエリの例：

sql
-- 未収金合計
SELECT COALESCE(SUM(total), 0) as outstanding
FROM invoices
WHERE user_id = ? 
  AND status IN ('sent', 'overdue')

-- 期限超過数
SELECT COUNT(*) as overdue_count
FROM invoices  
WHERE user_id = ?
  AND status = 'sent'
  AND due_date < date('now')

ステップ5：リマインダーメールの設定 ​

支払い期限7日前にリマインダーメールを自動送信する。Cloudflare WorkersのCron Triggerを使う：

Cloudflare WorkersのCron Triggerを使って、
毎朝9時（JST）に支払い期限7日前の請求書に
リマインダーメールを送る機能を実装してください。

- D1から「status = 'sent' かつ due_date = 今日から7日後」の請求書を取得
- 各請求書の顧客メールアドレスにResendでメールを送る
- 送信済みフラグを立てて重複送信を防ぐ
- wrangler.tomlにCron Trigger設定を追加してください

wrangler.tomlに追加される設定：

toml
[triggers]
crons = ["0 0 * * *"]  # 毎日 UTC 00:00 = JST 09:00

ステップ6：ブランディングとデザイン ​

機能が動いたらデザインを整える。

InvoiceTrackのブランドデザインを整えてください。

ブランドイメージ：シンプル、プロフェッショナル、信頼感
カラー：slate-900（ダーク）+ blue-600（アクセント）
フォント：システムフォントスタック（シンプルに）

以下を実装してください：
- ナビゲーションバー（vibefast.appの管理レイアウトを活用）
- ダッシュボードのサマリーカードのデザイン改善
- 請求書一覧テーブルのスタイル改善
- ステータスバッジ（draft:gray, sent:blue, paid:green, overdue:red）

ステップ7：Stripe課金の設定 ​

InvoiceTrackはSaaSなので、月額課金モデルを設定する。vibefast.appはStripeが設定済みなので、料金プランを設定するだけだ。

Cloudflare Dashboard環境変数を設定：

STRIPE_SECRET_KEY = sk_test_xxxxx
STRIPE_WEBHOOK_SECRET = whsec_xxxxx
STRIPE_CURRENCY = jpy
STRIPE_PRICE_CENTS = 2000  # 月額 ¥2,000

vibefast.appのSubscription機能が自動的に動作する：

  • ユーザーが「プランに加入」をクリック → Stripe Checkoutに誘導
  • 支払い成功 → Webhookでuser.is_pro = trueに更新
  • 無料枠（例：顧客3社まで）と有料プランの制限を設定

完成したプロダクト ​

vibefast.appを使ったことで、通常数週間かかる設定をスキップできた：

vibefast.appが提供したもの（最初から動いていた）：

  • ユーザー認証（メール登録、ログイン、パスワードリセット）
  • Stripe Webhookハンドラ
  • Resendメール送信の設定
  • Cloudflare Workers + D1 + R2のインフラ
  • 管理画面の基本レイアウト

vibefast.appの上に実装したもの（今回作ったもの）：

  • 顧客管理
  • 請求書CRUD
  • ダッシュボード集計
  • リマインダーCron Job
  • ブランディング・デザイン

開発期間：集中して作業して約3日間。

SaaSとEコマースの違い ​

InvoiceTrackのようなSaaSの特徴：

  • 課金モデル：月額サブスクリプション（Stripeのサブスクリプション機能）
  • データ：ユーザーごとに独立したデータ（マルチテナント）
  • 価値提供：時間を節約し、業務効率を上げる継続的な価値
  • チャーン対策：ユーザーがデータを蓄積するほどやめにくくなる（lock-in）

Eコマースのケーススタディは次の記事で紹介する。

Danko Peng
X · YouTube · Threads

👉 チュートリアルトップに戻る

完全なCloudflareフルスタックテンプレートを今すぐ使い始めたい方へ：
👉 vibefast.app — アーリーバード $99、2026年8月1日より $199 に値上がり。