【衝撃】ClaudeとCodexでWordPressサイトを作る実演解説!初心者向けにデザインからコードまでAIで全自動化する方法【WEB制作】

概要

Claude CodeとCodexという2つのAIエージェントを使い、ローカル環境でのWordPress構築から本番公開・問い合わせフォームの動作確認までを一気通貫で実演する動画。サイト設計図とデザインファイルをAIに渡すことで、量産型のAIっぽいデザインを避けつつ、誰でも編集できるブロックエディタ形式のサイトに仕上げる手順を解説している。

主なポイント

• Localというツールで自分専用のローカルWordPress環境(砂場)を作り、AIエージェントにはまずそこで作業させてから本番移行する
• 「サイト設計図」(ページ構成・各セクション内容をまとめた1枚のMarkdownメモ)をAIへの指示書として渡すことで、ふわっとした丸投げ指示による無限修正ループを防げる
• 色・フォント・余白ルールをまとめた「デザインファイル」と、フロントエンドデザイン用のAIスキルを組み合わせることで、いかにもAI製に見えないプロ品質のデザインになる
• ChatGPTの画像生成やCodexの画像生成機能を使い、サイト全体で統一感のあるオリジナル画像をまとめて用意する
• Claude Code(Opus 4.8・高推論)とCodex(高推論)に同じプロンプトをプランモードで実行させ、静的HTML/CSSサイトを並行構築・比較する
• 完成した静的サイトをWordPressの標準ブロックエディタ形式に変換する指示を出し、独自テーマ独自ブロックよりエラーが出にくい標準ブロックで組むのが安定する
• Contact Form 7・画像軽量化プラグイン・SMTP送信プラグインの導入や設定までAIへの指示だけで自動実行できる
• All in One WP Migrationプラグインでローカル環境のサイトをファイルごと本番サーバーへ一括移行する
• 本番環境ではSMTP未設定などが原因で問い合わせメールが届かないケースが多く、独自ドメインメールとSMTP設定を行った上で必ず自分でテスト送信して到達確認する
• 制作して終わりでなく、保守管理契約やSEO・広告などのマーケティング支援まで担うことで単価と継続収益が上がる

実践に使えること

• 新規サイト制作前に、ページ構成とセクション内容を書いた1枚のMarkdown設計図を用意し、それをAIエージェントへの指示書として使う
• 色・フォント・余白ルールをまとめたデザインファイルを用意し、参考サイトのURLがあればそこからAIにデザインルールを生成させる
• Claude CodeやCodexでの作業は必ずプランモードでまず計画を確認してから自動実行に移す
• サイトの表示崩れはスクリーンショットを撮ってAIに修正指示し、標準機能で直せる部分(タイトル・サブキャッチ等)はテーマのカスタマイズ画面から直接消す
• 本番公開後は独自ドメインメールとSMTPプラグインを設定し、必ず自分で問い合わせフォームのテスト送信を行って着信確認する