「AI でサイトを作れる」という話は増えましたが、実際にどこまでやれるのか。弊社では自社サイト dreamsound-ltd.com を Claude Code だけで4日間リニューアルしました（要件とデータが揃っていれば、デザイン・実装で約4日間）。6ページだったサイトは14ページになり、FCP は 6.5秒から4.8秒へ、LCP は 8.0秒から5.4秒へ改善。このシリーズでは、その全工程を実例ベースでお伝えします。
第1回は「手を動かす前にやったこと」。AI を使うからといって、準備をスキップできるわけではありません。むしろ 準備の質がそのまま成果の質になります。
準備① 開発環境を整える
Claude Code はターミナル上で動く AI ツールです。ファイル操作、Git コミット、ブラウザ確認まですべてコマンドラインで完結します。そのため、ローカルの開発環境がそのまま AI の作業環境になります。
今回用意したのは以下の構成です。
- WSL2（Windows Subsystem for Linux） — Windows 上に Linux 環境を構築
- Node.js / npm — フロントエンドのビルドツール
- Git — バージョン管理とデプロイの起点
リポジトリは WSL2 のネイティブファイルシステム（/home/ 以下）に配置しました。Windows 側のファイルシステムを経由すると I/O が遅くなるためです。
準備② 技術スタックを選ぶ
リニューアル前のサイトは WordPress + Bricks Builder で構築していました。表示速度に課題があり、CSS の管理コストも高かった。そこで選んだのが ヘッドレス構成です。
| レイヤー | 技術 | 役割 |
|---|---|---|
| フロントエンド | Astro（SSG） | HTML を事前生成。JavaScript ゼロで高速表示 |
| コンテンツ管理 | WordPress + WPGraphQL | 記事・プロジェクトの管理はそのまま WordPress |
| ホスティング | Cloudflare Pages | 静的サイトを世界中のエッジから配信 |
| ルーティング | Cloudflare Worker | /wp-admin 等の管理系 URL だけ WordPress へ中継 |
WordPress のコンテンツ管理画面はそのまま使いつつ、表示側だけを高速な静的サイトに切り替える。この構成なら、コンテンツ担当者の作業フローを変えずに速度改善ができます。
準備③ 自動デプロイを設計する
AI が書いたコードを手動でサーバーにアップロードしていたら、スピードの意味がありません。Git push するだけで本番に反映される仕組みを先に作りました。
git push origin main→ GitHub Actions が起動 → rsync でサーバーへ自動デプロイ- WordPress で記事を公開 → Cloudflare Deploy Hook → Astro が再ビルド → 静的ページ更新
この2つの自動化により、Claude Code が変更をコミットした瞬間から数分で本番に反映されます。AI との作業で最も大切なのは フィードバックループを短くすることです。「変更 → 確認 → 修正」のサイクルが速いほど、4日間でできることが増えます。
次回予告
環境が整っても、AI に「サイトを作って」と言うだけではうまくいきません。第2回では CLAUDE.md というプロジェクト設定ファイルを使って、AI に要件を正確に伝える方法を解説します。
AI を活用したWEB制作に興味をお持ちですか？