Claudeでデザイン、Codexで実装。WP File Managerとiframeで作る、AI特化型ロードマップLP実践記

2026.07.10

今回は結構実践の成果が詰まってます、ある程度ワードプレスが触れる人、そしてクロードのプロかGPTのプラス以上のプランを契約している人ならすぐに試す事もできると思います。ブログ全体を現在改修中なのでこの部分でちょっと骨が折れるかと思っていたらGPTにサイト診断をさせるという方法でも結構効率上がったのでそれはまた別途記事にしてもいいかも、Geminiもこういうのは得意だと思うんですけどコーデックスの場合はスクショを撮影する感覚で対象のウィンドウを添付できるからそれが最近のお気に入り。

海外独自ブランドのVAIちゃんも画面共有機能はあって結構特徴は出てきたんですけどいかんせんタスクを実行する能力が実装されていないので権限与えまくってなんでもガンガン作業するってなった時にはまた紹介するかもしれません、基本機能に加えてでィフュージョンモデルも追加されたから意外と人によってはそっちで課金する価値があるかもしれないのですが。

こういうビジュアル要素強目の画像は結構いい感じで作れるんですけど日本人向きは文字入りなんですよね、組み合わせればいいっていうのは一手間増えるのでここで拡散モデル画像作成⇨LLMもしくはデザインソフトで文字入れみたいなのが自動化できるともう一段妥協の無いアイキャッチが作れるのでしょう、誰か作ってください、私は今手一杯です。

今回のGeminiくん、ちょっとセンスがアレかも・・・

📝 記事本文

【実践】Claude×CodexでWordPressに超美麗LPを爆速実装！AIアフィリエイトの新戦略

1. 記事を書くだけの時代は終わり。「使える仕組み」が最強のSEOになる

最近、ブログを書いていてこんな風に感じることはありませんか？

「AIを使えば誰でも綺麗な記事が書けるからこそ、普通のテキスト記事だけでは読者が定着しない…」

実は、これからのAI副業・アフィリエイトサイトを伸ばすための鍵は、単なる情報発信ではなく「読者が実際に使える仕組み（ツールやダッシュボード）」を提供することにあります。

そこで今回私は、AIツール（ClaudeとCodex）をフル活用して、WordPress上に「AIトレンド・アフィリエイト用のロードマップLP」を自作して実装してみました。

本記事では、ただの作業記録ではなく、AIを使ったサイト構築の具体的な手順や、途中でつまずいたリアルな問題点、そして「なぜこのLPが最強の武器になるのか」という戦略までを包み隠さず公開します。

2. 今回作ったもの：圧倒的デザインの「AIトレンドロードマップLP」

今回作成したのは、ブログの読者が「AI副業で稼ぐためのステップ」を視覚的に理解できる、動きのあるリッチなロードマップLPです。

これを単なる画像ではなく「動的HTML（Webサイト）」として作り込みました。

狙いは2つあります。

自分用: トレンド記事作成やアフィリエイト導線を管理する「作業場（ダッシュボード）」として使うため。
読者用: 後々、「このロードマップと同じ環境が作れるテンプレート」として、強力なアフィリエイト特典（リードマグネット）にするため。

3. 実装手順：AIに役割分担させる最強のワークフロー

このLPをWordPressに実装するために、私はAIたちに「役割分担」をさせました。デザインはClaude、実装ロジックはCodex（GPT）という布陣です。

1.Claudeでデザイン素材を作成:

まずはUI/UXに強い「Claude Design」を使い、グラスモーフィズム（ガラス風の透け感）を取り入れたハイエンドなロードマップのHTML/CSSコードを生成させます。

2.Codexで実装方法を整理:

完成したコードをどうWordPressに組み込むか？ Codex（GPTのデータ分析モード）に相談し、「WordPressの固定ページにiframeで埋め込むのが一番安全でスマート」という構成案を策定してもらいました。

3.WP File Managerでファイルアップロード:

WordPressのプラグイン「WP File Manager」を使用し、Claudeが作ったHTMLファイルと画像素材（assets）を、サーバーの特定のディレクトリにアップロードします。

4.Elementorでiframe埋め込み＆表示:

WordPressの固定ページを作成し、ページビルダーの「Elementor」を開きます。そこにHTMLウィジェットを配置し、<iframe src="アップロードしたURL"></iframe> を記述して外部HTMLを読み込ませました。

4. 途中で起きた問題と「Elementor Canvas」の罠

スムーズにいったように見えますが、実践の中ではいくつかリアルな壁にぶつかりました。これから実装する方はぜひ参考にしてください。

iframe先が未アップロードで404エラーにHTMLファイルをアップロードする前にiframeのコードを書いてしまい、盛大に404エラー画面が表示されました。ファイルのパス（階層）とアップロードの順番には注意が必要です。
同名ファイルの上書き確認微調整したHTMLファイルを再アップロードする際、上書きの警告が出ました。本番環境を触る作業なので、Codexのアドバイス通り「副作用のある操作は慎重に確認する」というルールが身に染みました。
テーマ側のヘッダーや余白が残ってダサい…（最大の罠）いざ表示させてみると、せっかくの全画面LPなのに、ブログテーマ（TCDなど）の標準ヘッダーやサイドバー、謎の余白が残ってしまい、デザインが台無しに。

💡 解決策：Elementor Canvasの設定

固定ページの「ページ属性」から、テンプレートを**「Elementor Canvas」**に変更することで、テーマのヘッダーやフッターを完全に消し去り、純粋な全画面のLPとして表示させることに成功しました！

5. 今後の展開：制作物そのものが「実績」になる

今回の実装を通して、固定ページごとに「これはLP用」「これはブログ用」と明確に役割を分ける必要性が見えてきました。今後はこのロードマップをさらに進化させます。

自分用キーワード工場: トレンドキーワードを自動抽出するダッシュボード機能の追加。
読者向けデモとマニュアル化: 各ロードマップの工程をクリックすると、その手順の詳しいマニュアル（ブログ記事）に飛ぶように導線を強化。
「このLPの作り方」自体をコンテンツ化: 今回の「Elementor固定ページ＋HTML iframe実装手順」自体を、WordPress構築パートのマニュアルとして追加します。