WordPressからAstroへ — コーポレートサイトをClaude Codeと一緒に移行した話
WordPress + SWELL で運用していたコーポレートサイトを、Astro + Cloudflare Pages に移行しました。開発経験のないデザイナーが、Claude Code との対話だけでどこまでできたかの記録です。
なぜ移行したのか
MARI LAB のコーポレートサイトは、もともと WordPress + SWELL テーマで運用していました。ロリポップのサーバーで、特に不便はなかったのですが、いくつか気になる点がありました。
- ページの表示速度
- WordPress 本体やプラグインのアップデート管理
- 限られた更新頻度に対して、サーバー維持のコストが見合うか
とはいえ、自分はデザイナーであって開発者ではありません。コードを書いてサイトを構築するなんて、ふつうに考えたら選択肢に入らないはずでした。
Claude Code という相棒
きっかけは、Claude Code を触りはじめたことです。
「WordPress から静的サイトに移行したい」と相談したら、Astro + Cloudflare Pages という構成を提案してくれました。正直、Astro という名前すら知りませんでしたが、対話の中で構成を理解していきました。
移行作業は、ほぼすべて Claude Code との対話で進めました。自分がやったのは「こうしたい」「これは違う」「ここをこう直して」と伝えることだけ。コードは Claude Code が書き、自分はブラウザで確認してフィードバックを返す。そのサイクルの繰り返しです。
移行でやったこと
サイト全体の構築
WordPress のページ構成（トップ、Philosophy、News、Contact、Privacy Policy）をそのまま Astro で再現しました。デザインは SWELL テーマのトーンをベースに、よりミニマルに整理しています。
URL 構造も WordPress 時代と同じにしてあるので、検索順位への影響は最小限のはずです。
お問い合わせフォーム
WordPress では Contact Form 7 を使っていましたが、静的サイトにはサーバーサイドの処理が必要です。Cloudflare Pages Functions と Resend（メール送信 API）を組み合わせて実装しました。スパム対策はハニーポット方式です。
CMS の導入
記事の更新は Decap CMS を使っています。/admin/ にアクセスすると、ブラウザ上で WordPress のような管理画面が使えます。裏側では GitHub に Markdown ファイルがコミットされる仕組みです。
GitHub OAuth 認証の設定も Claude Code と一緒に構築しました。自前で認証サーバーを立てる必要がないのは、Cloudflare Pages Functions のおかげです。
制作実績ページの Basic 認証
/works/ は制作実績のページですが、まだ準備中なのでパスワードで保護しています。Astro のミドルウェアで Basic 認証をかけていて、環境変数でユーザー名とパスワードを管理しています。
下書きプレビュー
ブログ記事を公開前にデザイン確認したい、という要望も Claude Code に伝えたら、ローカルの開発サーバーでだけ下書き記事が見える仕組みを入れてくれました。npm run dev するだけで、本番には出ない記事のデザインが確認できます。
技術構成
最終的な構成はこうなりました。
項目 | 技術 |
|---|---|
フレームワーク | Astro 5 |
ホスティング | Cloudflare Pages |
CMS | Decap CMS（GitHub OAuth） |
メール送信 | Resend |
アクセス解析 | GA4 |
DNS / CDN | Cloudflare |
WordPress 時代はサーバー代（ロリポップ）＋ドメイン代でしたが、今は Cloudflare Pages の無料枠に収まっています。
つまずいたところ
スムーズに進んだわけではありません。
- SSR モードへの切り替え — Basic 認証を動かすために、静的サイトから SSR モードに変更する必要がありました。全ページに
prerender設定を追加する作業が発生しましたが、Claude Code が一括で対応してくれました。 - Cloudflare Functions の互換性 — SSR モードに切り替えたら、OAuth 認証やお問い合わせフォームの Functions が動かなくなりました。Astro の API ルートに書き直す必要があり、CMS のログインが 404 になるトラブルも経験しました。
- GitHub OAuth の設定 — コールバック URL の不一致でエラーが出て、GitHub の OAuth App 設定を修正する場面もありました。
どのトラブルも、Claude Code に状況を伝えたら原因を特定して修正してくれました。自分だけでは絶対に解決できなかったと思います。
デザイナーが感じたこと
開発経験がなくても、コーポレートサイトの移行は可能でした。ただし、それは「コードを書けるようになった」のとは違います。
自分がやったのは、設計の意思決定とフィードバックです。「このページ構成にしたい」「この色に変えて」「Basic 認証をかけたい」「下書きをローカルで確認したい」——やりたいことを言語化して伝える力が、コードを書く力の代わりになりました。
デザイナーにとって Claude Code は、開発スキルを代替するツールというより、自分の設計意図を実装に翻訳してくれるパートナーという感覚です。
これから
ブログの記事を増やしていくことと、/works/ の制作実績ページを作り込むことが次のステップです。このブログ自体が、AI と一緒にものをつくる実験の記録になればいいなと思っています。
