業務効率化・AI活用術
読了 11分

AIでWordPressテーマを自作する全手順【Claude・Gemini対応2026年版】

目次
ClaudeやGemini CLIを使ってWordPressオリジナルテーマをゼロから作る全手順を解説。仕様書作成→コード生成→PageSpeed最適化まで、制作会社が実践した流れをそのまま紹介します。

AIでWordPressテーマを作る——全体の流れと結論

結論から言うと、PHPやCSSをゼロから書けなくてもWordPressのオリジナルテーマは作れます。ただし「AIに丸投げすれば完成する」わけではありません。AIが担うのはコード生成と反復修正。人間が担うのは方向性の決定・指示の精度・完成物の判断です。

制作の全体工程はこの4ステップに整理できます。

  1. AIとの壁打ちでサイトの要件を言語化し、UIデザイン仕様書を生成する
  2. 仕様書をCLAUDE.md（またはGemini向けのコンテキストファイル）に落とし込む
  3. Claude Code または Gemini CLI でコードを生成・微調整する
  4. PageSpeed Insights の結果を見てAIに修正を依頼し、致命的な問題を潰す

各ステップを順番に見ていきましょう。

Step 1——AIとの壁打ちでサイトの方向性を固める

決めるべき5項目

コードを1行も書く前に、以下の5項目を言語化しておきます。この作業をAIとの会話の中で行うのが最も効率的です。

  • ターゲット層: 「30代の非エンジニア女性」「ITエンジニア向け技術ブログの読者」のように具体化する
  • カラーパレット: メインカラー・アクセントカラー・テキストカラーの3色をHEXで決める
  • フォント: 日本語フォント（Noto Sans JP等）とコードブロック用の等幅フォント（Fira Code等）
  • ページ構成: トップページ・記事一覧・記事詳細・固定ページの最低4テンプレートが必要
  • 参考サイト: デザインの方向性を伝えるために、UIのイメージが近いサイトのURLを1〜2本用意する

壁打ちからUIデザイン仕様書を生成する

上記5項目をClaudeに伝えながら対話を続けると、最終的にマークダウン形式のデザイン仕様書が出力できます。

たとえば以下のようなプロンプトから始めます。

AIツール解説ブログのWordPressオリジナルテーマを作りたい。

ターゲット: 30〜40代のビジネスパーソン（エンジニア・非エンジニア混在）
方向性: SaaSドキュメントのようなクリーンで知的なデザイン
メインカラー: #2563EB（ディープインディゴ）
アクセント: #F59E0B（エナジーイエロー）
テキスト: #334155（スレート）

参考サイト: https://（デザインイメージに近いサイト）

上記をもとに、UI/UXデザイン仕様書をMarkdown形式で作成してください。
見出し・目次・コードブロック・強調要素の仕様まで含めてください。

この壁打ちで生成した仕様書が、次のStep 2の土台になります。仕様書の精度がそのままコード生成の精度に直結するため、ここを省略すると後工程で修正コストが跳ね上がります。

Step 2——仕様書をCLAUDE.mdに落とし込む

CLAUDE.mdとは何か・なぜ必要か

CLAUDE.mdは、Claude Codeがプロジェクトを読み込む際に最初に参照する設定ファイルです。ここに書いた内容がすべての会話の前提になるため、「毎回同じことを説明しなくていい」状態を作れます。

Gemini CLIの場合は GEMINI.md が同じ役割を果たします。どちらも機能は同じで、「このプロジェクトのルール・設計思想・禁止事項」をAIに伝えるためのファイルです。

最低限記述すべき項目

# プロジェクト概要
WordPressオリジナルテーマ（テーマ名: mytheme）の開発

## デザイン設計
- メインカラー: #2563EB
- アクセント: #F59E0B
- テキスト: #334155
- 本文フォント: Noto Sans JP
- コードフォント: Fira Code

## ファイル構成
- style.css（テーマ情報ヘッダー）
- functions.php（スクリプト・スタイル読み込み）
- index.php / single.php / archive.php / page.php
- header.php / footer.php / sidebar.php
- assets/css/main.css
- assets/js/main.js

## 禁止事項
- jQueryへの依存（バニラJSで実装する）
- インラインスタイルの多用（main.cssに集約する）
- render-blockingなスクリプトの<head>内配置

## WordPress要件
- Cocoonではなくスクラッチのオリジナルテーマ
- WordPress Coding Standardsに準拠
- functions.phpでwp_enqueue_scripts()を使ってアセット読み込み

禁止事項を明示しておくことが特に重要です。書かないと「動くけどPageSpeedスコアが低い」コードが生成されやすくなります。

Step 3——Claude Code / Gemini CLIでコードを生成する

環境セットアップ（前提と必要なもの）

Claude Codeの場合

  • Node.js 18以上がインストールされていること
  • npm install -g @anthropic-ai/claude-code でインストール
  • テーマフォルダ（wp-content/themes/mytheme/）内でターミナルを開き、claude コマンドで起動

Gemini CLIの場合

  • npm install -g @google/gemini-cli でインストール
  • Google AIのAPIキーが必要（Google AI Studioで無料取得可能）
  • 同様にテーマフォルダ内で gemini コマンドで起動
ローカル環境はLocal（旧Local by Flywheel）が最もセットアップが楽です。WordPressをワンクリックで立ち上げられるため、テーマの動作確認が即座にできます。

最初の1プロンプトの書き方

CLAUDE.mdを配置したら、最初のプロンプトはシンプルでかまいません。

CLAUDE.mdの設計に従って、WordPressオリジナルテーマのベースファイルを
すべて生成してください。まずファイル構成を確認してから着手してください。

Claude CodeはCLAUDE.mdを自動で読み込んだうえで、ファイルを順番に生成していきます。生成後は「ヘッダーのナビゲーションをハンバーガーメニューに変えて」「h2見出しの左に4pxのアクセントラインを追加して」のように追加指示を続けます。

子テーマ vs スクラッチ、どちらを選ぶか

　子テーマ（Cocoon等）スクラッチ
向いている人既存テーマのデザインを変えたい完全オリジナルを作りたい
制作時間短い（差分のみ生成）長い（全ファイル生成）
AIとの相性親テーマの構造を理解させる必要ありCLAUDE.mdで全設計を指定できる
将来の保守親テーマのアップデートに依存自己完結

Cocoonを使っている場合は 「Cocoonの子テーマのstyle.cssとfunctions.phpを生成して」 の一文からでも始められます。スクラッチの場合は本記事のStep 2のようにCLAUDE.mdで仕様を固めてから着手する方が品質が安定します。

Step 4——PageSpeed Insightsの結果を潰す

テーマの見た目が完成したら、必ずPageSpeed Insightsにかけます。URLは https://pagespeed.web.dev/ です。

PageSpeed Insightsはスコアが90以上なら良好、50〜89は改善が必要、50未満は不良と判定されます。モバイルスコアが特に重要で、テーマ選定の基準として、モバイルスコア80点以上を目安にするのが一般的です。

致命的なスコアが出る典型3パターン

①レンダーブロッキングリソース

内でCSSやJSを同期読み込みしていると、ページの表示開始が遅れます。Claude Codeへの修正指示はこのように書きます。

functions.phpのwp_enqueue_scripts()を修正して。
CSSはrel="preload"で事前読み込み、JSはdefer属性を付けてください。

②画像の最適化不足（LCPの悪化）

LCPの合格ラインは2.5秒以内で、画像圧縮・CSS/JSの最小化・CDN活用が引き続き有効です。テーマ側でできる対策はタグへの loading="lazy" と width・height 属性の明示的な指定です。

single.phpとarchive.phpの<img>タグすべてに
loading="lazy"、width、heightを追加してください。
アイキャッチ画像の最初の1枚にはloading="eager"を使うこと。

③CLSの発生（レイアウトシフト）

フォントの読み込み完了前後でテキストがずれると、CLS（Cumulative Layout Shift）スコアが悪化します。Google Fontsの読み込みにfont-display: swapを指定することで改善できます。

functions.phpのGoogle Fonts読み込みURLに
&display=swapを追加してください。

AIへの修正依頼プロンプトの書き方

PageSpeed InsightsのレポートをスクリーンショットまたはテキストでそのままClaude Codeに貼り付けると、原因の特定と修正コードの生成が一度で完了します。

PageSpeed Insightsのモバイルレポートを貼ります。
スコア55。改善項目の「レンダーブロッキングリソースの除去」と
「適切なサイズの画像」を優先して修正してください。

[レポートのテキストをここに貼り付け]

「致命的（赤字）」の項目から順番に対応し、「改善の余地あり（オレンジ）」は影響度を見て判断します。

ロゴ・サムネイルはGemini Imagen（Google AI Studio）で生成する

テーマのコードができたら、サイトの顔になるロゴとアイキャッチのサムネイルも同じくAIで生成します。Google AI Studioに搭載されているImagenモデル（Imagen 3 / Nano）が現時点で無料枠でも品質が高く、サムネイル生成に向いています。

Google AI Studioでの使い方

  1. https://aistudio.google.com/ にアクセスしてGoogleアカウントでログイン
  2. 左メニューから「Image generation」を選択
  3. モデルは「Imagen 3」または「Imagen 3 Fast」を選ぶ
  4. 以下のようなプロンプトを入力して生成する

サムネイル生成プロンプトの例（日本語）

横長（1200×630px）のブログサムネイル。
背景色: 濃紺 #1A2B4C。
アクセントカラー: ライトブルー #0EA5E9。
中央にPCの画面とAIのアイコンを配置したフラットデザインのイラスト。
白文字で「AIでWordPressテーマを自作する」とテキストオーバーレイ。
モダン・ビジネス向け・日本語テキスト対応。

サムネイル生成プロンプトの例（英語版・精度が高い）

Wide blog thumbnail, 1200x630px.
Dark navy background #1A2B4C with light blue #0EA5E9 accent.
Flat design illustration showing a laptop screen displaying WordPress theme editor and AI chat interface.
White Japanese text overlay "AIでWordPressテーマを自作する" centered.
Modern, clean, business-oriented style.
No photorealism. Minimalist vector-style.

英語プロンプトの方が画像生成AIの精度が上がりやすいため、両方試して出来の良い方を採用します。

ロゴ生成のポイント: ロゴはサイズが小さく使われるため、シンプルなベクター風のデザインを指定します。「SVG style」「icon design」「simple mark」などのキーワードを加えると背景が透過に近いシンプルな画像が生成されやすくなります。

よくある質問（FAQ）

Q: PHPの知識がないと無理ですか？

基本的なWordPressテーマの骨格を生成するだけなら不要です。ただし、エラーが発生したときに「どのファイルの何行目を見ればいいか」の判断は必要になります。WordPressのwp_enqueue_scripts()やテンプレート階層（index.php・single.php等の役割）だけ把握しておくと、AIへの指示精度が上がります。

Q: Claude CodeとGemini CLIはどちらがおすすめですか？

コード生成の精度と複数ファイルの整合性という点ではClaude Codeが安定しています。Gemini CLIは無料枠が広く、Gemini 2.5 Proを使った場合のUI/CSSの提案が視覚的なデザイン寄りになりやすいという特徴があります。最初はClaude Codeで骨格を作り、デザインの微調整をGemini CLIで行う使い分けも有効です。

Q: Google SEOガイドライン的にAI生成テーマは問題ありませんか？

テーマのコード自体はGoogleのSEO評価対象ではありません。GoogleはAIが生成したコードやデザインを問題視しておらず、評価するのはあくまでコンテンツの品質とCore Web Vitalsです。ただし2026年のSEOはコンテンツをAIに引用されることが重要な指標になっており、FAQ・HowToなどの構造化データ（JSON-LD）の実装と、SSRで重要情報をHTMLに出力することが技術基盤として求められます。テーマ生成時にCLAUDE.mdへ「Article・BreadcrumbList・WebSiteの構造化データをfunctions.phpで出力すること」と書いておくと、自動で実装されます。

Q: 子テーマとオリジナル、どちらが長期的に良いですか？

Cocoonのような無料テーマの子テーマは、親テーマのアップデートで動作が変わるリスクがあります。一方、スクラッチのオリジナルテーマは保守が完全に自己責任になります。商用サイトや長期運用を前提にする場合はスクラッチ、まず動かすことを優先するなら子テーマ、というのが実務での判断基準です。

まとめ——AIテーマ制作で変わること・変わらないこと

変わること

  • テーマのコード生成にかかる時間が、数日から数時間に短縮される
  • デザイン仕様書→コードの変換を人間が行う必要がなくなる
  • PageSpeed修正のような反復作業をAIに任せられる

変わらないこと

  • サイトの方向性・ターゲット・デザインの意思決定は人間の仕事
  • 完成物の品質チェック（表示確認・動作テスト・スコア測定）は必須
  • SEO評価を決めるのはコンテンツの価値であり、テーマの生成方法ではない

AIはツールです。仕様書という「指示書」の精度が上がれば、その分だけ出力の品質も上がります。まず小さなテーマをClaude Codeで動かしてみることから始めてみてください。

関連記事