AI Land の中身 — Astro + R3F + Tailwind v4 でブログを作る

設計のゴール

ヒーローは派手に、本文は軽く。

ブログでよくある失敗が「凝った 3D を入れた結果、記事ページまで重い」こと。 このサイトでは Astro Islands を使って、3D は トップページの hero セクションだけ に閉じ込めています。

レイヤーの分け方

レイヤー	使っているもの	役割
静的部分	Astro	本文・ナビゲーション・SEO
3D ヒーロー	React Three Fiber + drei	ヤシ・ロボット・ビーチ
アニメ	Framer Motion	フェードイン・hover・stagger
ページ遷移	View Transitions API	ふわっと切り替え
スタイル	Tailwind CSS v4	@theme で AI Land パレット

Astro Islands の使いどころ

<!-- index.astro -->
<HeroIsland client:load />     <!-- 即座にハイドレート -->
<PostCard client:visible />    <!-- ビューポートに入ったら -->
<ScrollHint client:idle />     <!-- アイドル時 -->

ポイント: 3D Canvas は client:load で即時、その他は client:visible で必要になってから。これで初回 JS バンドルが膨らみません。

prefers-reduced-motion を最初から尊重する

HeroIsland.tsx で (prefers-reduced-motion: reduce) を見て、true なら 3D シーンを描画せずグラデーション背景にフォールバック。 アクセシビリティ的にも、モバイルバッテリー的にも親切。

なぜ Cloudflare Pages なのか

• 無料枠が広い
• ビルド npm run build をそのまま流せる
• Edge で配信されるので海外読者にも速い
• カスタムドメイン + 自動 HTTPS が秒で終わる

次のステップ

• Phase 2: Supabase Auth + 投稿管理画面
• Phase 3: 招待制マルチユーザー
• Phase 4: LinkedIn 自動投稿

詳細は About ページ にも書いています。