AIエージェントでWordPressテーマを爆速制作｜Claude Codeで「AI Quest」テーマを数分で作った話

「AIエージェントでWordPressテーマを爆速制作」実録レポート

赤澤さん、本日のミーティングで話題に出た「Figma × Claude Code → WordPressテーマ化」の流れを、実際にやってみた記録としてまとめます。

やったこと

「AI Quest」というコンセプトで、ゼロからオリジナルWordPressテーマを1セッションで完成させました。

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

• style.css（テーマ定義・全スタイル）
• functions.php（WordPress機能の登録）
• header.php / footer.php（共通パーツ）
• front-page.php（トップページ：ヒーロー→概要→最新記事）
• single.php（個別記事ページ）
• index.php（ブログ一覧）
• assets/main.js（アニメーション制御）

通常、これだけのファイルをゼロから書くと、コーダーへの依頼なら数日・数万円かかります。それが、Claude Codeへの指示1本で数分で出来上がりました。

指示の流れ

指示はほぼ会話形式で行いました。

1. コンセプトを伝える
「AI Questというファンタジー×近未来のWordPressテーマを作って」

2. 要件を箇条書きで渡す
「トップページにヒーロー・About・最新記事カードが欲しい」「single.phpも一緒に」「WPループを使って」

3. Claudeが全ファイルを自動生成
ローカルサイトのテーマフォルダに直接書き出し、即座にWordPressで有効化できる状態に。

ポイント

「何を作るか」さえ言語化できれば、コードは書かなくていい。

これが今回の最大の学びです。赤澤さんが先日おっしゃっていた「AIをレベル2で使う」とは、まさにこういうことで、AIに作業を丸投げするのではなく、自分がディレクターとして指示を出し、AIがエンジニアとして動くという構造です。

Figmaでデザインカンプを作り → それをプロンプトに落とし込み → WordPressテーマとして出力する、という一連の流れが完全にAIだけで回せるようになっています。

今後の応用

この流れは、テーマ制作に限らず使えます。

• LP1枚を丸ごとコーディング
• 既存テーマのデザイン修正
• プラグインなしで機能を追加するカスタムコード
• FigmaのデザインをそのままHTML化

「作りたいもののイメージ」を持っている人が、AIという職人を使いこなす時代。その第一歩を、本日一緒に体験できました。

ご不明点や「ここをもっと詳しく」という箇所があればお気軽に。引き続きよろしくお願いします！