業務活用 約2分で読めます
AIでWebサイトを作る ── 企画からデプロイまで半日で完了した話
やったこと
Claude Codeとの対話だけで、旅行メディアサイトをゼロからデプロイまで完了した。
成果物
- Astro + Tailwind CSSのWebサイト
- 記事11本（MDXでリッチコンテンツ）
- Google Maps Places APIで店舗写真を自動取得
- Cloudflare Pagesで無料ホスティング
- 独自ドメイン設定
かかった時間
- 企画・設計: 30分
- テンプレート構築: 1時間
- 記事作成: 2時間
- デザイン調整: 1.5時間
- デプロイ・ドメイン設定: 1時間
- 合計: 約6時間
何が良かったか
1. 設計の壁打ちが速い
「トップページどうする？」→ AIが構成案を出す → 「これでいこう」→ 実装。通常なら設計に半日かかるところが30分。
2. コンポーネントの量産
SpotCard、Timeline、Callout、PhotoGalleryなどのコンポーネントをAIが次々と生成。自分で書いたら1つ30分のところが5分。
3. 記事のリサーチ＋執筆
「河口湖周辺のカフェを調査して」→ AIがWebで情報を収集 → SpotCardに整形。調査と執筆が同時に進む。
苦労したポイント
画像の問題
- Wikimedia Commons: ホットリンクがブロックされた
- Pixabay: 同様にブロック
- 結局Google Maps Places APIで解決（無料枠で十分）
Cloudflareのドメイン設定
- ネームサーバー変更の反映に時間がかかった
- DNSレコードが自動追加されず手動対応
ℹ️
学び
外部画像のホットリンクは信頼できない。自前でホスト（ダウンロード or API）するのが確実。
従来の方法との比較
| AIなし | Claude Codeあり | |
|---|---|---|
| 設計 | 半日〜1日 | 30分 |
| コーディング | 2〜3日 | 2〜3時間 |
| コンテンツ | 1週間 | 半日 |
| デプロイ | 半日 | 1時間 |
| 合計 | 1〜2週間 | 半日 |
10倍以上の時間短縮。しかもクオリティは十分実用レベル。
