Claude CodeでWordPressテーマ＆ゲームページを1セッションで本番リリースした話

Claude Codeで「AI Quest」を丸ごと作った記録

先日、赤澤さんとのコンサルセッションで面白い実験をしました。
「AI Questというコンセプトのサイトを、Claude Codeで丸ごと作ってXserverの本番環境に上げるまでを1セッションでやりきれるか」という挑戦です。

結論：できました。しかも想像以上に速かった。

やったこと

1. WordPressカスタムテーマをゼロから制作

Claude Codeに「AI Quest」のコンセプト（ファンタジー×近未来、黒背景・グリーンのターミナル調）を伝えて、テーマファイルを丸ごと生成しました。

作成したファイルはこちらです。

• style.css — テーマ定義・全スタイル（ダークUI・グロー演出）
• functions.php — WordPress機能登録
• header.php / footer.php — 共通パーツ
• front-page.php — ヒーロー・About・記事一覧・お問い合わせフォーム
• single.php — 個別記事ページ
• index.php — ブログ一覧
• assets/main.js — スクロールアニメーション

コーダーに依頼すれば数日・数万円のボリュームです。指示1本で数分で出来上がりました。

2. Xserverへ本番デプロイ

SSH経由でXserverに直接接続し、WordPressのインストールから設定まで進めました。

途中いくつかトラブルもありました。

• index.html が残っていてWordPressインストール画面が出ない → 削除
• MySQLの認証情報の確認に時間がかかった → パネルで確認して解決

こういった「詰まりポイント」もClaude Codeと一緒に順番に潰していけるのが強みです。エラーメッセージを貼り付けるだけで原因を特定して次の手を提案してくれます。

3. お問い合わせフォームを追加

トップページの下部に、WordPressのネイティブ機能（wp_mail()）を使ったお問い合わせフォームをClaude Codeで実装。プラグインなし・完全カスタムです。

4. ゲームページを組み込み

「冒険をはじめる」ボタンを押すと、ビジュアルノベル形式のRPGゲームが起動するページを追加しました。Linuxコマンドを実際に入力して敵を倒す学習ゲームです。

WordPressのページテンプレート機能（page-game.php）を使い、既存のVNエンジン（HTML/JS）をそのままWordPressに組み込みました。

気づいたこと

「指示の精度」が成果物の精度を決める。

Claude Codeは、こちらの要求が曖昧だと曖昧なものを返してきます。「ファンタジー×近未来のWordPressテーマ」より「黒背景・グリーンのグロー・ターミナル風UI・ヒーロー→About→記事カード→フォームの構成」と伝えた方が、ずっと精度の高いものが返ってきます。

コードを書く時間はゼロ。それよりも「何を作るかを言語化する力」の方が価値を持つ時代になっています。

まとめ

AI × WordPressの組み合わせは、まだまだ可能性が広がっています。
「作りたいものがある人」がAIを道具として使いこなす——その第一歩を体験した1日でした。