コーポレートサイト・メディア
LP、ブログ、非エンジニアが更新
推奨：Astro＋ヘッドレスCMS
推奨
Astro＋ヘッドレスCMS
- 静的出力でサーバー保守がほぼ不要、非エンジニアの更新はCMSで賄える（§19-1）
構成行を開くと詳細（乗り換える条件・根拠・費用・習熟度）
フロントAstro＋Tailwind CSS
Astro
ケース別の構成§19
- コーポレートサイト・LP・メディアフロント：Astro＋Tailwind CSS
習熟度
Tailwind CSS
CMSmicroCMS（セルフホストならPayload）
ホスティングCloudflare Pages
Cloudflare Pages
ケース別の構成§19
- コーポレートサイト・LP・メディアホスティング：Cloudflare Pages
フォームCloudflare Workers＋Resend、スパム対策にCloudflare Turnstile
Cloudflare Workers
既定：エッジ・軽量APIどこで動かすか
成長したら → Neon／RDS（Hyperdrive経由で接続）§24
- きっかけ
- 1データベースの容量上限に近づく、複雑なJOINやトランザクションが増えた
- 最初からの備え
- DrizzleなどでSQLite固有の書き方を避ける。データアクセスを1か所にまとめる
ケース別の構成§19
- コーポレートサイト・LP・メディアフォーム：Cloudflare Workers＋Resend、スパム対策にCloudflare Turnstile
- 個人開発・MVPエッジ：Hono＋Cloudflare Workers＋D1／R2
Resend
ケース別の構成§19
- コーポレートサイト・LP・メディアフォーム：Cloudflare Workers＋Resend、スパム対策にCloudflare Turnstile
Cloudflare Turnstile
ケース別の構成§19
- コーポレートサイト・LP・メディアフォーム：Cloudflare Workers＋Resend、スパム対策にCloudflare Turnstile
分析Cloudflare Web Analytics（取引先やマーケティング担当がGA4を求めるならGA4）
Cloudflare Web Analytics
代替：Webサイトのアクセス解析プロダクト分析・機能フラグ
既定は PostHog（Web解析。プロダクト分析と1ツールで済む）。静的サイトでCookieなしの最小限の計測だけ欲しいとき に乗り換える。
GA4
代替：Webサイトのアクセス解析プロダクト分析・機能フラグ
既定は PostHog（Web解析。プロダクト分析と1ツールで済む）。取引先やマーケティング担当がGA4のレポートを求めるとき に乗り換える。
ケース別の構成§19
- コーポレートサイト・LP・メディア分析：Cloudflare Web Analytics（取引先やマーケティング担当がGA4を求めるならGA4）
監視Better Stack（外形監視）
Better Stack
ケース別の構成§19
- コーポレートサイト・LP・メディア監視：Better Stack（外形監視）
§19-1の構成
構成図 コーポレートサイト・LP・メディア
flowchart TB U["ユーザー"] --> CF["Cloudflare Pages<br/>Astro 静的サイト"] E["編集者"] --> CMS["microCMS"] CMS -- "Webhook" --> B["ビルド"] --> CF U -- "フォーム送信" --> W["Cloudflare Workers"] --> R["Resend"]
更新の即時反映は、CMSのWebhookからビルドを起動して行う。
作り始める
共通の準備
# 言語・ツールのバージョン固定（使う言語だけ）
mise use node@lts pnpm@latest
mise use go@latest
mise use ruby@latest
mise use python@latest uv@latest
# Gitフックと依存更新
pnpm add -D lefthook && pnpm exec lefthook install
# renovate.json を置き、GitHubでRenovateアプリを有効化するコーポレートサイト（§19-1）
pnpm create astro@latest
pnpm astro add tailwind
# Cloudflare Pages にリポジトリを接続してデプロイ