ShipJP
送り状 No. SHIPJP-2026-0001 / 発送元: 個人開発

日本向けSaaSの
「毎回同じ実装」を、
終わらせる。

Firebase認証、Stripeサブスク決済、特商法・プライバシーポリシー・利用規約ページ、無料枠の出し分け。9個のSaaSを出荷するたびに書いていた部分だけを、1つのNext.jsテンプレートにまとめた。

デモを触ってみる同梱物を見る
shipjp/
├── app/
│   ├── page.tsx          ← このLP
│   ├── login/
│   ├── dashboard/        ← 無料枠ゲート実装例
│   ├── settings/         ← 解約導線つき
│   ├── legal/
│   │   ├── tokushoho/    ← 特商法(自動生成)
│   │   ├── privacy/
│   │   └── terms/
│   └── api/stripe/
│       ├── checkout/
│       ├── webhook/
│       └── portal/
├── lib/config.ts  ← ここだけ書き換える
└── firestore.rules

同梱明細

数量: 8式 / 破損時: 再DL可

全部で20ファイル。飾りのコンポーネント集ではなく、課金SaaSを公開するのに法的・技術的に必要なものだけが入っている。

01

hooks/useAuth.tsx

Googleログイン + Firestoreユーザー作成 + plan管理

02

api/stripe/checkout

サブスク決済セッション作成（IDトークン検証つき）

03

api/stripe/webhook

決済・解約をFirestoreのplanに自動同期

04

api/stripe/portal

顧客が自分で解約できるBilling Portal連携

05

legal/tokushoho

特定商取引法に基づく表記（設定ファイルから自動生成）

06

legal/privacy + terms

プライバシーポリシー・利用規約の雛形

07

dashboard

無料枠ゲーティング付きCRUDの実装例（5件制限→アップグレード導線）

08

firestore.rules

planをクライアントから改ざんできないセキュリティルール

デプロイまで、およそ15分

5分

Firebaseプロジェクト作成

Googleログインを有効化して、設定値を .env.local に貼る。手順はスクリーンショット付きで docs/SETUP.md に。

5分

Stripeで商品と価格を作る

月額プランの価格IDとWebhookシークレットを設定。テストカードで決済確認まで。

5分

Vercelにデプロイ

環境変数を貼ってデプロイ。lib/config.ts のアプリ名と特商法表記を書き換えたら、あなたのSaaSとして公開できる。

課金UIの実装例

この料金表・無料枠制限・アップグレードモーダルがそのまま同梱されている。価格は lib/config.ts の1行で変わる。

Free

¥0

  • アイテム作成 5件まで
  • 基本機能すべて

Pro

¥980/月

  • アイテム作成 無制限（無料は5件まで）
  • 優先サポート
  • 今後の新機能への先行アクセス

よくある質問

技術スタックは?

Next.js 16 (App Router) / TypeScript strict / Tailwind CSS v4 / Firebase Auth + Firestore / Stripe。全部無料枠で運用を開始でき、月額固定費ゼロで始められます。

なぜSupabaseではなくFirebase?

Firebaseの無料枠（Spark）はクレジットカード登録なしで使えるため、「まず出す」個人開発の初期費用を完全にゼロにできるからです。日本語の情報量も多い。

ライセンスは?

購入者本人のプロジェクトであれば商用・複数プロジェクトで利用できます。テンプレートとしての再配布・転売のみ禁止です。

特商法ページはそのまま使える?

lib/config.ts の TOKUSHOHO に自分の情報を入れると自動でページが生成されます。項目は消費者庁の必要記載事項に沿っていますが、最終確認はご自身で行ってください。