AI時代のWordPressサイト制作術!Claude x Codex x WP

2026-09-25 · Naomi Suzuki (tofulab.app)

原題: How to Build WordPress Sites in the AI Era! Claude x Codex x WP

概要

AIツール(CodexまたはClaude)を使い、HTML/CSSの静的サイトをゼロから生成し、それをWordPressテーマ化した上で、プラグイン「NovaMiira」でAIとWordPressを接続して動的サイト(お知らせ投稿、問い合わせフォームなど)に変換する一連の手順を実演する動画。

使用書(仕様書)というサイト構成をまとめたドキュメントをAIに与えることで、望み通りのサイトを生成しやすくなる。テンプレートを配布・ダウンロード可能。
design.md(デザインシステムをまとめたMarkdownファイル)を活用すると、有名企業サイトなどのデザインをそのままAIに適用できる(design.md、designmd.aiというサイトを紹介)。
Pexels・Pixabayなどの画像APIキーをプロンプトに組み込むことで、AI生成の空白部分に外部画像を自動挿入できる。
CodexはClaudeと異なり画像生成にも対応しており、サイト内画像をその場で生成・差し替え可能。
「NovaMiira」プラグインを使うとプロンプトだけでWordPressの操作(ページ作成・プラグインインストール・投稿作成・削除など)を自動化できる。
AIクライアント(Codex/Claude Desktop)の設定ファイル(config.toml、claude_desktop_config.json)にNovaMiiraの接続情報を追記することでAIとWordPressサイトを連携できる。
Contact Form 7のインストールとフォーム設置、カスタム投稿タイプの一覧表示(カルーセル形式)なども、プロンプトのみで実装可能。
生成した静的サイトをWordPressの標準エディタ「グーテンベルグ」形式に変換する試みも紹介(現状は完全一致は難しいが可能性を示す)。

新規サイト制作時は、まず仕様書とデザインMDをAIに読み込ませてから生成させると、方向性のブレが少なくなる。
画像生成や外部画像APIをあらかじめ設定しておくことで、AI生成サイトの「空白ボックス問題」を回避できる。
WordPressの繰り返し作業(プラグイン導入・フォーム設置・動的リスト表示)は、NovaMiiraのようなAI連携プラグインを使えばノーコードに近い形でプロンプト操作に置き換えられる。
変更前にバックアップを取るようAIに指示しておくと、デザイン上書きなどの実験を安全に行える。