【実験ログ】Claude Codeで1日に3サイト立ち上げてみた

実験の概要

項目	内容
目的	Astroテンプレートを使って複数サイトを最速で立ち上げる
使用ツール	Claude Code, Astro, Tailwind CSS, Cloudflare Pages
所要時間	約12時間（2日間）
成果	3サイト稼働、合計35記事以上

---

作ったもの

サイト1: Trip Journal（旅行メディア）

• trip-journal.net
• 記事11本（河口湖、箱根、目黒川、秩父、千鳥ヶ淵、ローマ、台北、バリ、バンコク、築地、錦市場）
• Google Maps Places APIで店舗写真を自動取得
• SpotCard、Timeline、Calloutなどのリッチコンポーネント

サイト2: Vibe Code Lab（バイブコーディング入門）

• vibe-code-lab.com
• 記事15本（入門4 + ツール6 + 実践5）
• ステップ形式のカテゴリページ
• 学習ロードマップ型のトップページ

サイト3: AI Cowork Lab（AI活用ラボ）

• ai-cowork-lab.com
• 記事9本（Claude Code 3 + 業務活用 3 + 実験ログ 3）

---

何が速さの鍵だったか

1. テンプレートの再利用

最初のサイト（trip-journal）でベースを作り、2サイト目以降はコピーしてsite.tsを書き換えるだけ。コンポーネントはそのまま再利用。

2. site.tsによるサイト差別化

色、ロゴ、ナビ、カテゴリを全てsite.tsに集約。ここだけ変えれば別サイトになる設計。

3. Cloudflare Pagesの簡単さ

GitHubにpush → 自動デプロイ。3サイトとも同じ手順で5分で公開。

---

失敗と学び

失敗	学び
Wikimediaの画像がブロックされた	外部画像のホットリンクは信頼できない
Cloudflareのドメイン設定で手間取った	Pages側からCustom domainを設定するのが正解
Google Maps APIキーのウェブサイト制限	ビルド時はサーバーから呼ぶので制限なしが必要