ClaudeにWordPressでLPを作成してもらう方法

昨今のAIはLP（ランディングページ）をいとも簡単に生成してしまいます。本当に一瞬です。

ただ、生成されるLPはHTMLファイルであることが多く、それはそれで良いのですが、WordPressサイト内にLPを作りたい方も多いでしょう。

というわけで、本記事ではClaudeにWordPressでLPを作成してもらう方法をプロンプト付きで解説しています。

2026年10月追記：作り方を見直して、LPをゼロから作り直しました。仕上がりがいまひとつだったため、「先にAIにデザインを作らせ、決まってからWordPressに移植させる」流れに変えています。本記事も新しい手順に合わせて書き直しました。

記事を、そのまま収益に。

WordPressサイトで記事の有料販売ができる
無料のプラグイン「YOMERU」。

YOMERU

こんなLPができました。

LPサンプルURL

テーマは「カフェ開業マニュアルの無料PDFを配布する」という架空のLPです。WordPressテーマ「SALON」のデモサイトに、固定ページとして作ってもらいました。ヘッダー、目次、数字で見せるセクション、著者紹介、申込フォーム、FAQまで、すべてAIが作っています。

事前準備

今回はClaudeのデスクトップアプリとブラウザを使うので、以下を準備してください。

Claudeの有料プランに加入する
Claudeのデスクトップアプリ（Claude Code）をインストール
Chrome拡張機能「Claude in Chrome」をインストール

WordPressの管理画面には、自分でChromeからログインしておいてください。AIはパスワードを入力しないので、ログインだけは人の作業になります。

前回の作り方と、何を変えたか

前回は、TCDテーマのランディングページ機能をそのままAIに使わせていました。メインビジュアルにヘッダー画像とキャッチコピーを入れ、本文の見出しや強調はエディターのクイックタグで装飾する、という作り方です。

手軽な反面、テーマの部品を組み合わせるだけなので、デザインの自由度には限界がありました。正直なところ、出来上がったLPは「あまり美しくない」ものでした。

そこで今回は、手順を3つに分けました。

AIに、LPのデザインをHTMLでゼロから作ってもらう
気になる点を伝えて、見た目を詰める
形が固まったら、WordPressの固定ページに移植してもらう

デザインを先に固めておくと、WordPressの操作とデザインの修正が混ざりません。やり取りがずっと楽になります。

ステップ1：デザインを作ってもらう

最初の指示はシンプルです。今回は、前回のLPを見せて「作り直して」と頼みました。

以下は、SALONというデモサイトの仮想のLPサンプルです。
AIが操作して作成したランディングページ


現状あまり美しくないので、ゼロベースでLPを作り直してください。
内容は仮想で構いません。例えば、カフェ開業マニュアルの無料レポートを配布するという内容でも良いです。

Claudeはページの中身を読み取り、数分でHTMLのLPを作ってプレビューを見せてくれます。

ご自身の商材でLPを作る場合は、内容をできるだけ詳しく伝えてください。次の項目を埋めて、上の指示に付け足すと精度が上がります。

LPの内容（独自プロンプト）：

## LPのテーマ・ゴール
- (例)カフェ開業ハウツーPDFの無料配布
- 最終アクション:(例)メルマガ登録フォームへの入力
### PRしたい商材
ここにLPでPRしたい商材の内容を書く。
　例：60分の動画で、不動産投資に関するハウツー情報。動画はメールアドレス入力すると、登録アドレスにダウンロードURLが送信される仕組み。
### デザインのテイスト
- トンマナ(色・雰囲気)の希望があれば一言（なければお任せも可）
- サイトのロゴやデモサイトのURLがあれば、それに合わせるよう伝える

## ページ構成
1. ヘッダー(キャッチコピー・画像)
2. 導入文
3. 目次・内容紹介
4. プロフィール(写真+経歴)
5. なぜ無料か
6. CTA(フォーム/ボタン)
- 「登録したメールアドレスにはメルマガが配信される」旨の注釈をフォーム下に入れる。
7. FAQ(◯項目)

ステップ2：見た目を詰める

1回目のデザインは整っていたものの、どこか「AIが作った感じ」がしました。そこから、気になる点を一言ずつ伝えて直してもらいます。今回、実際に送った指示はこんな感じです。

「Cafe Blanc → SALON で使われてるロゴにして」
「デザインは素敵です。ただ、少しClaudeっぽさがあります。Claudeっぽさをなくしつつ、カッコよくできますか？」
「画像が粗いので、もっと良いのない？」
「別の画像を提案して」
「約1MBを圧縮すると、見栄えは悪くなりますか？」

「Claudeっぽさをなくして」と伝えると、生成り色の背景に明朝体、差し色という、AIが作るページにありがちな組み合わせをやめました。SALON本体と同じモノクロに、デモサイトの写真を大きく使う形に変えています。

ヘッダー画像は、高解像度の候補を4つ探してきて、実際のヘッダーに当てはめた比較ページを作ってくれました。そこから1枚を選んで差し替えています。

「Claudeっぽさをなくして」という曖昧な指示でも、そのまま通じました。AI自身が「AIが作るページにありがちなデザイン」を把握しているので、細かく指定しなくても方向を変えてくれます。

ステップ3：WordPressに移植してもらう

デザインが決まったら、「WordPressのSALONデモに移植して」と頼むだけです。ただ、TCDテーマ特有の設定がいくつかあるので、次のプロンプトを添えると確実です。

移植用プロンプト：

# 作成したLPを、WordPressの固定ページに移植したい。

## 進め方
- 私が管理画面にログインし、操作はあなた（AI）がChromeブラウザで行う。
- 管理画面URL https://xxx.com/wp-admin/ から操作する。
- 公開中のページは直接触らない。新しい下書きページで作業し、私が確認してから公開する。
- 既存のページを置き換えるときは、先に「複製」で控えの下書きを作っておく。

## 固定ページの設定
- ページ属性 > テンプレート「ランディングページ」を使用。
- 「ヘッダーバー」「ヘッダーメッセージ」「メインビジュアル」「フッター」は「表示する」にチェックしない（ヘッダーとフッターはLP側で作る）。
- 目次「目次を表示しない」にチェック。
- 本文はテキストエディターにHTMLで入れる。WordPressが自動で段落や改行を足さないよう、HTMLの改行は詰める。
- CSSは固定ページ内のカスタムCSSに、JavaScriptとWebフォントの読み込みはカスタムスクリプトに入れる。テーマのファイルは触らない。
- CSSはLPの外枠のIDの中だけに効くように書き、テーマの見出し・リスト・表のスタイルと混ざらないようにする。
- 画像はメディアライブラリにアップロードして使う。

## 確認
- 下書きのプレビューで、PC幅とスマホ幅の両方を確認する。
- 横スクロールが出ていないか、テーマのスタイルで崩れていないかを確認する。

移植の途中では、テーマ側のスタイルとぶつかる箇所がいくつか出ました。自動で入る目次、中央寄せになる見出し、リストの記号、ページ上部の余白などです。どれもClaudeがプレビューを見て自分で見つけ、カスタムCSSで直してくれました。上のプロンプトには、そのとき分かったことを入れてあります。

一度移植してもらったら、後は修正の繰り返しです。自分で修正してもいいし、AIに修正させるのも良し。あなたのやりやすいようにしてください。

ブラウザを操作させる方法のほかに、WordPress公式の「MCP Adapter」を使って、AIをWordPressに直接つなぐ方法もあります。