1 ｜ 作るものの構成を決める
上から順に。「はい」なら右の結論へ、「いいえ」なら下の質問へ。複数当てはまることもある（例：SEOも鍵処理も要る）。
Q1
データもログインも無い、ただの紹介ページ？
投稿・会員・マイページ・予約など、あとから読み書きする情報が「無い」
いいえ（データが要る）↓ Q2へ
はい→
静的HTML だけ
データ無しの紹介ページ・LP。ホスティングに置くだけ
Q2
Supabaseのような “BaaS” で足りる？
データの読み書き＋ログイン＋RLS（アクセス制御）だけで守れる
いいえ（もっと要る）↓ Q3へ
はい→
静的HTML / SPA ＋ Supabase
ブラウザから直接 supabase-js を叩く構成（サーバー不要）。例：つるみ100年の声
Q3
秘密の鍵を使うサーバー処理が要る？
AI呼び出し・決済・メール送信・外部からのWebhook受け取り など
いいえ ↓ Q4へ
はい→
＋ サーバーレス関数
Vercel Functions / Cloudflare Workers。例：LINE bot（Webhook）
Q4
検索やSNSで見つけてほしい？
記事・メディア・LP・商品ページ。GoogleのSEOやSNSのOGP画像が要る
いいえ ↓ Q5へ
はい→
＋ SSR / 静的生成
Astro / Next.js など。例：これつるHP・各種LP
Q5
ページが多く、機能も複雑な中〜大規模？
SSRも関数もルーティングも一式まとめて管理したい
いいえ ↓ 下の結論へ
はい→
Next.js 等のフレームワーク
全部を1つの枠組みに。小規模には過剰になりがち
迷わなければ → 静的HTML ＋ Supabase で十分
今のcococreaの案件は、ほとんどがこの一番シンプルな箱で足りる
2 ｜ どこに置くか（ホスティング）
フロントの構成が決まったら、置き場所を選ぶ。分かれ目は「サーバー処理の有無」と「商用・バズ耐性」。
H1
商用案件、または注目が集まる可能性がある？
クライアントからお金をもらう／バズって一気にアクセスが来るかも
いいえ（個人・非商用・慣れ優先）→ Vercel でもOK
はい→
Cloudflare Pages ／ Vercel Pro
静的中心なら Cloudflare（無料・商用OK・帯域無制限）。Next.js等サーバー機能を使うなら Vercel Pro（月$20・商用OK）。
避ける：Vercel無料(Hobby)＝非商用限定なので商用本番はNG
H2
サーバーレス関数を使う？（Q3が「はい」だった）
鍵を隠す処理・Webhookの受け口が要る
いいえ（静的だけ）→ 上のH1で決めた方
はい→
Vercel / Cloudflare どちらも可
関数が主役なら慣れてる方で。例：LINE bot は Vercel
もう一つの選択肢：Netlify — Cloudflare/Vercelと同じ「静的＋関数」系。強みは フォーム機能が標準装備（バックエンド無しで問い合わせ・応募を受けられる）。LP・フォーム系サイトに向く。無料枠は帯域100GB/月・商用OK。
覚え方 → 静的＝Cloudflare ／ Next.js＝Vercel ／ フォーム重視＝Netlify
3 ｜ プロジェクトか、プロダクトか
機能は使ってる途中で必ず増える。だから最初に「これは終わる？育てる？」を見極める。ここで構成も予算も決まる。
終わりのある プロジェクト
例：つるみ100年の声（2027年の100周年で完結）
- 機能creep
- 起きにくい（終わりがある）
- 作り方
- 軽く・無料で（静的＋Supabase）
- ホスト
- Cloudflare（¥0）
- 増えたら
- 関数を1個後付け
育てる プロダクト
例：bloom-wave（ずっと機能追加していく）
- 機能creep
- 必ず起きる（育てる前提）
- 作り方
- 最初からNext.js（有料前提）
- ホスト
- Vercel Pro（月¥3,000〜）
- 見積
- 高めに握る
上流提案の1問：「これは “終わるプロジェクト” ですか？ “育てるサービス” ですか？」— 最初に聞けば、構成も予算も一発で決まる。
4 ｜ いつ “有料” になるか（コスト境界線）
| 構成 | できること | ホスティング費 |
|---|
| 静的 ＋ Supabase | 投稿・掲示板・フォーム・会員（ブラウザ側） | ¥0（Cloudflare無料・商用OK）＋ドメイン代 |
| フル Next.js | AI応答・通知メール・プッシュ・商用本番 | Vercel Pro 月$20（約¥3,000）＋伸びたらSupabase Pro $25 |
※Vercelの無料枠(Hobby)は非商用限定。クライアント案件で本番に使うならPro必須＝「Vercel＝有料前提」でほぼ正しい。
よくある誤解：「個人データを扱う＝Vercel/有料」ではない。 データの安全は SupabaseのRLS＋認証設計 で決まる（ホスト非依存）。サーバー側cookie認証(@supabase/ssr)もCloudflareで動く。ホストは安全のためじゃなく “機能” で選ぶ。
5 ｜ 切り替えはできる？（データは資産）
「軽く始めて後で困らない？」の答え。切り替えの種類で手間は全然違う。
| 切り替え | 手間 |
|---|
| ホストだけ替える（静的 CF↔Vercel） | ◎ 一瞬 同じファイルを別ホストに |
| 機能を1個後付け（AI・メール） | ○ 軽い 関数を1個足すだけ・移設不要 |
| 入口URLの向き先を替える（転送先） | ◎ 一瞬 QR・ステッカーは不変 |
| 静的 → フル Next.js に作り直し | △ 重い フロントは作り直し・データは引き継ぎ |
| データの引っ越し（Supabase） | ○ 可能 ただのpostgres・エクスポート可 |
原則：データは “資産”、フロントは “着せ替えできる服”。 データさえSupabaseで守られていれば、見た目も構成も後から替えられる。だから 軽く始めるのは低リスク。唯一重い切り替え＝「静的→フルNext.js作り直し」だけを最初に見極める。
6 ｜ 覚え方（ツボ）
鍵を隠したい
→ サーバーレス関数（AI・決済・メール・Webhook）
Googleに拾われたい
→ SSR / 静的生成（SEO・OGP）
Supabaseで足りる小アプリ
→ 何も足さない（静的＋Supabase）
同じ「React＋Supabase」でも
ブラウザ直（supabase-js）＝Cloudflare可 ／ Next.jsでサーバー認証（@supabase/ssr）＝Vercel
構成が置き場所を決める
「どこに置くか」より先に「どう作るか」。Next.js等はロックインではないが、純正ホストが一番ラク
7 ｜ 実例で見る：bloom と tsurumi はなぜ違う
同じ「Web ＋ Supabase」でも、案件の性格と機能で、構成もホストも分かれる。
つるみ100年の声
終わるプロジェクト（100周年）
- 機能
- 投稿・掲示板・折り鶴（サーバー処理なし）
- 構成
- 静的＋supabase-js（ブラウザ直）
- ホスト
- Cloudflare（¥0）
- 将来
- ラジオアプリ化するならVercelへ作り直し（声データ引き継ぎ）
bloom-wave
育てるプロダクト
- 機能
- AI応答・メール・プッシュ・Server Actions
- 構成
- Next.js 16 ＋ @supabase/ssr（サーバー側）
- ホスト
- Vercel（純正・Pro）
- なぜ
- Node処理・秘密鍵・SSRが要る＝Vercelが自然
8 ｜ cococrea 案件マップ
| 案件 | 性格 | 構成 | 置き場所 |
|---|
| つるみ100年の声 | 投稿・掲示板アプリ | 静的＋Supabase | Cloudflare |
| bloom-wave | Next.js（SSR認証） | Next.js＋@supabase/ssr | Vercel（純正） |
| LINE bot（クマ等） | Webhook・AI応答 | ＋サーバーレス関数 | Vercel |
| これつる会館HP | 静的サイト（素のHTML） | 静的HTMLだけ | Cloudflare（最適） |
| フォーム系（応募・問い合わせ） | 入力を受けるだけ | 静的＋フォーム | Netlify（フォーム標準） |
| 紹介ページ・LP | データなし | 静的HTMLだけ | どちらでも |