WordPressオリジナルテーマを作っていると、AIツールに助けてもらえる場面はかなり多いです。ただ、全部を1つのAIに投げるより、ChatGPT、Codex、Claude Codeを役割で分けた方が、修正の往復が少なくなります。
この記事では、宣伝ではなく実際のWordPress開発で感じた使いやすさをベースに、3つのAIツールをどう使い分けると効率が上がるかをまとめます。
SEOタイトル
Codex・Claude Code・ChatGPTを使い分けてWordPressを開発する方法【実体験】
meta description
ChatGPT、Codex、Claude CodeをWordPressオリジナルテーマ開発でどう使い分けるか、設計・実装・調査・リファクタリングの実体験から解説します。
まず結論
| ツール | 向いている作業 | 注意点 |
|---|---|---|
| ChatGPT | 企画、要件整理、記事構成、実装方針の相談 | リポジトリの実ファイルを見ない前提だと、一般論になりやすい |
| Codex | リポジトリを見ながらの実装、修正、テスト、差分確認 | 依頼が曖昧だと、どこまで変更するかの範囲指定が必要になる |
| Claude Code | 広いコード調査、複数ファイルの関係整理、大きめのリファクタリング相談 | 細かい最終実装は、既存運用に合わせた確認が必要 |
ChatGPTの役割
ChatGPTは、いきなりコードを書くより前の段階で使いやすいです。記事の構成、機能の要件整理、画面の目的、SEOの方向性、実装方針の比較など、考えを整理する相手として向いています。
- 記事タイトルや見出しを考える
- 機能要件を箇条書きにする
- 実装パターンのメリット・デメリットを比較する
- 読者目線で説明が足りないところを探す
Codexの役割
Codexは、リポジトリの中を確認しながら実装する作業で使いやすいです。WordPressテーマの場合、functions.php、header.php、single.php、scss、js、migrationなど複数のファイルが関係するので、既存の書き方に合わせて変更できるのが大きいです。
- 既存テーマの構成を読んでから実装する
- PHP、CSS、JavaScriptをまとめて修正する
- WP-CLI用の公開スクリプトを作る
- 差分確認や構文チェックまで進める
Claude Codeの役割
Claude Codeは、広い範囲のコードを読みながら「どこを直すべきか」を整理したいときに使いやすいと感じています。特に、古いテーマを整理したいときや、複数ファイルにまたがる設計の見直しでは、最初の調査役として相性が良いです。
- テーマ全体の構造を把握する
- 重複している処理を見つける
- 大きめのリファクタリング案を出す
- LaravelやFlutterなど別プロジェクトとのつながりを整理する
WordPress開発での使い分け
| 作業 | おすすめ | 理由 |
|---|---|---|
| テーマ開発 | Codex | 既存テンプレート、CSS、JSを見ながら実装しやすい |
| REST API | Codex | register_rest_route、permission_callback、返却JSONまで実装しやすい |
| CSS調整 | Codex + ChatGPT | 方針はChatGPT、既存CSSへの反映はCodexが向く |
| JavaScript | Codex | 既存DOMや読み込み方法に合わせて修正しやすい |
| Laravel連携 | Claude Code + Codex | 全体調査はClaude Code、実装はCodexに分けると進めやすい |
| Flutter連携 | ChatGPT + Claude Code | 仕様整理と画面設計を先に固めると迷いにくい |
実際の開発フロー
- ChatGPTで「何を作るか」「誰に向けるか」「記事にするならどこが価値か」を整理する
- Codexにリポジトリを読ませ、既存のファイル構成に合わせて実装してもらう
- 動作確認と差分確認をCodexで進める
- 変更が大きくなったらClaude Codeで全体の影響範囲を見直す
- 最後にChatGPTで記事化・説明文・タイトルを整える
苦手な使い方
AIツールは便利ですが、何でも一発で任せると逆に時間がかかります。特にWordPressでは、テーマ独自の関数、プラグインの有無、サーバー環境、既存CSSの優先度が絡むので、前提を渡さない依頼は失敗しやすいです。
- 「いい感じにして」だけで実装を依頼する
- 本番環境の認証情報を貼る
- 既存の命名規則を無視してサンプルコードだけ入れる
- テストや表示確認をせずに公開する
アイキャッチ案
白背景のデスクに、ChatGPT・Codex・Claude Codeを「設計」「実装」「調査」の3つのカードとして並べ、中央にWordPressテーマのコード画面を置く構図。NINESらしく赤をアクセントにすると統一感が出ます。
内部リンク案
- WordPressでGoogle Analytics Data APIを使ってPVを取得する方法
- WordPressオリジナルテーマでダッシュボードを作る方法
- REST APIを自作してWordPressからJSONを返す方法
まとめ
ChatGPT、Codex、Claude Codeは、どれか1つを選ぶというより、工程ごとに分けると使いやすくなります。WordPress開発では、ChatGPTで考えを整理し、Codexで実装し、Claude Codeで広い調査や見直しをする流れが現実的です。
