【この記事は全部AIで書いています】
こんにちは、Keiです。今回は、自宅サーバーで長年運用してきた静的HTMLサイトを WordPress に全面移行した顛末をまとめます。
この作業の最大の特徴は、サイト設計からステージング環境構築・テーマ開発・コンテンツ移行・本番リリース・セキュリティ設定まで、すべての工程を Claude Code(AIコーディングアシスタント)との対話だけで完結させた点です。自分でコードを一行も書かずに、AIへの指示(日本語の会話)だけでサイトを作り上げました。
「こういうことをやりたい」と伝えるだけで、スクリプト作成・ファイル修正・API操作・SSH越しのデプロイまでClaude Codeが全部やってくれました。自分の作業はほぼ”承認するだけ”。
1. なぜWordPress化したのか
もともと自宅サーバーには、Perlで書いたCGIや静的HTMLのページが混在していました。コンテンツを更新するたびにSSHでサーバーに入ってファイルを直接編集する運用で、正直しんどかった。
「管理画面からサクッと更新したい」「テーマをまとめて管理したい」「プラグインでゲーム機能も作りたい」という欲が重なり、WordPressへの移行を決意しました。
2. Claude Codeとのワークフロー
作業は一貫して次の流れで進めました:
- 「○○したい」とClaude Codeに日本語で伝える
- Claude CodeがNode.jsスクリプト・PHPファイル・設定ファイルを生成
- WordPress REST API や SSH 経由でサーバーに自動反映
- 結果を確認して、必要なら追加指示
Git管理・コミットメッセージ作成・ファイル整理まですべてClaude Codeが行い、自分はレビューと承認をするだけ。まさに”AIがエンジニアを務める”体験でした。
3. ステージング環境の構築
いきなり本番を触ると怖いので、まず同じサーバー内に ステージング領域 を作ってWordPressをインストール。ここで動作確認しながら開発を進める方針にしました。
「ステージング環境でWordPressを動かしたい」と伝えると、Claude Codeが WordPress REST APIクライアント(Node.js)を生成し、記事投稿・ページ作成・テーマデプロイを自動化するスクリプト一式を用意してくれました。この「ローカルでAIに指示してAPIで反映」というワークフローが、後半まで一貫して使えました。
4. カスタムテーマの開発
既存サイトのデザインをそのまま踏襲したWordPressテーマをClaude Codeに自作させました。functions.php・style.css・各テンプレートファイルをゼロから生成。自分はデザインの意図を言葉で伝えるだけです。
スマホ表示の崩れや、画面回転時にナビゲーションメニューの状態がリセットされるバグも、「こう動いてほしい」と伝えるだけで修正コードを生成・デプロイしてくれました。
5. 既存コンテンツの移行
旧サイトの /help/ 以下にあった大量の静的HTMLページを、Claude Codeが生成したクローラースクリプトで再帰取得し、WordPress REST API経由で一括インポート。内部リンクのURL書き換えや、画像のメディアライブラリ移行も自動化スクリプトで対応しました。
6. SEO対応
「SEOを強化したい」と伝えると、Claude Codeがテーマにまとめて実装してくれました:
- メタタグ(description, OGP)
- JSON-LD形式の構造化データ
- パンくずリスト
- H1タグの修正
7. ゲーム機能の実装(カスタムプラグイン)
サイトの目玉コンテンツとして、ゲームを2本カスタムWordPressプラグインとして実装しました。もちろんコードはClaude Codeが生成。
連想ゲーム(マジカルバナナ)
「○○といえば?」と連想ワードを答え合わせていくゲームです。旧サイトにあったものをWordPressプラグイン化し、データをDBに移行しました。
クイズゲーム
- 4択クイズ形式
- 難易度選択(☆1〜☆5)
- スコア記録・分布グラフ表示
- 合格判定・殿堂入り機能
- 管理画面でCRUD(問題のメンテができる)
問題数は最終的に約29,000問まで拡充。「もっと問題を増やしたい」と伝えたら、データ収集・変換・インポートまでClaude Codeがスクリプトで自動化してくれました。
8. 本番環境への移行
ステージングでの動作確認後、本番ドメインへ切り替え。「本番に移行したい」と伝えると、Claude Codeが移行スクリプトを生成し:
- 本番ディレクトリへのファイル配置
- DB内のステージングURL全置換
- テーマ・プラグインの本番向け再デプロイ
をすべて自動実行してくれました。
9. セキュリティ強化
「WordPressのセキュリティを固めたい」と伝えると、.htaccess の設定をClaude Codeが生成・デプロイしてくれました:
- 管理画面(wp-admin)へのアクセスをイントラネット+自宅IPのみに制限
- xmlrpc.php の無効化
- ユーザー列挙対策
- uploadsディレクトリのPHP実行禁止
まとめ:Claude Codeでノーコード移行は現実的か?
結論から言うと、現実的に使えます。特に今回のような「やりたいことは明確だがコーディングが本業ではない」ケースでは、Claude Codeが非常に強力なパートナーでした。
| 工程 | 自分の作業 | Claude Codeの作業 |
|---|---|---|
| テーマ開発 | デザイン意図を言語化 | PHP/CSS/JS全生成・デプロイ |
| コンテンツ移行 | 「移行したい」と伝える | クローラー・インポートスクリプト生成 |
| ゲーム実装 | 仕様を日本語で説明 | プラグイン丸ごと生成 |
| 本番移行 | 「本番に切り替えたい」と伝える | 移行スクリプト生成・実行 |
| セキュリティ | 「固めたい」と伝える | .htaccess生成・デプロイ |
「AIに任せて自分は何もしない」ではなく、「AIと対話しながら方向性を決め、実装はAIに任せる」という分業が正確な表現です。それでも、従来なら数週間かかる作業が大幅に圧縮できました。
各フェーズの詳細については、別途記事にしていく予定です。何か質問あればコメントで!
— Kei