← マニュアル保管庫
SETUP GUIDE / 2026-09-14 改訂 / ブログ

SWELLのLPとHPを
AIエージェントに作らせる

「こんなLPにしたい」と思う見本のページを1つAIに渡し、ページ全体をHTMLとCSSの1本のコードで書かせて、SWELLのLPに「カスタムHTML」ブロック1つで丸ごと貼る。 これが、2026年9月13日の相談で一番うまくいった形です。プロンプトで細かく説明するより、見本を1つ渡すほうがずっと効きます。 あなたがやるのは、見本と材料を渡すこと、写真を用意すること、できた下書きを見て直しを頼むこと、公開ボタンを押すこと。 ホームページ(会社やお店の顔になるページ)は、同じ道具で固定ページ4枚を作らせて、設定を2つ変えるだけです。

YOU DO
見本と材料を渡す・見る
MINUTES
LP 約40分
COST
無料
NEEDS
SWELL+AIの接続

WHYこうなります

2026年9月13日の相談で、講師が受講者の見本を分解し、自分のサイトで試して分かった事実です。

20段・64枚豪華さの正体は「色帯と写真の量」見本にしたSWELL製のLPを外から分解した結果。横いっぱいの色帯(フルワイド)が20段、写真が64枚、3列の並びとカバーブロック。テーマの力ではなく、量です。
1本HTML+CSSを1本書かせて貼ると、8〜9割はそのまま出る見本を渡すと、AIは色帯・カード・番号つきリスト・FAQ・画像入りのLPを書けました。SWELLのLPに「カスタムHTML」ブロック1つで丸ごと貼る。SWELLの見た目との喧嘩は、3つの決まりで防ぎます。
下書き下書きのままなら、誰にも見えないSWELLの「LP」は投稿・固定ページとは別の入れ物。下書きなら訪問者からもGoogleからも見えず、トップページも変わりません。公開しても /lp/名前/ の別の住所です。
9/13最初の版は「文章だけのLP」になって、使えなかった

この手順の最初の版は、プロンプトに「装飾の型集が無ければ、見出し・段落・箇条書き・ボタンだけで組む」と書いていました。AIはその通りに作ったので、できたのは文章の骨組みだけ。講師が見て「これは使えない」と判断しました。悪いのはAIではなく、頼み方です。

次に、見本にしたいLPをそのままAIに渡して「どこまで真似できるか」を試したところ、色帯・カード・番号つきリスト・FAQ・イラストが入ったページが出てきました。プロンプトで説明するより、見本を1つ渡すほうが効く。これがこの手順の芯です。

残った課題は2つ。①「AI感」(全部が左右対称で中央寄せ、量産イラスト、数字と名前がゼロ、決まり文句、余白が多すぎる)。②SWELLの見た目との喧嘩(書体・行間・リンク色・見出しの余白がブログに引きずられ、横幅が記事の幅に収まる)。①は手順5、②は手順3の「3つの決まり」で片づけます。

WHAT何をしているの

人・AI・WordPressの分担はこれだけです。

YOU
見本と材料を渡す
見本のURL・何のLPか・誰に・申し込み先・料金・実績・使う写真
→
AI
見本を分解→1本のコード→下書き
見本と同じ密度でHTMLとCSSを1本書き、「LP」の下書きに「カスタムHTML」1つで置く
→
YOU
LP設定→直し→公開
ヘッダーとフッターを消し、プレビューを見て直しを頼み、公開ボタン

肝は2つ。見本を渡すことと、AIに数字と実績を作らせないことです。料金・実績・お客さまの声は、あなたが渡した「確認できる事実」だけを使わせます。無いものは「未定」か、その段ごと省きます。

用語は3つだけ

LP
1ページで1つの申し込みに誘導するページ。SWELLでは管理画面の「LP」メニューから作る専用の入れ物があり、通常の記事や固定ページとは別に管理されます。
カスタムHTML
WordPressの標準ブロックの1つで、コードをそのまま置ける箱。AIが書いたHTMLとCSSを、この箱1つに丸ごと入れます。編集画面では「HTML」と「プレビュー」を切り替えて見られます。
LP設定
LPを開いたときに右側に出る設定。「SWELLのヘッダーを使用する」「SWELLのフッターを使用する」のチェックを外し、タイトルを非表示にすると、ブログの顔が消えて、申し込みに集中できるページに変わります。

作り方は3つある。この手順は B

道やり方向き・不向き
ASWELLの部品(フルワイド・ボタン・FAQ・STEP・キャプションボックス)で組む簡単で、崩れにくい。ただし素朴な見た目で止まる。ブログの装飾編で型集を作ってあれば、その延長でできる
B
この手順
AIにHTMLとCSSを1本で書かせ、SWELLのLPに「カスタムHTML」ブロックを1つ置いて丸ごと貼る見本に近い見た目が出る。SWELLの中で下書き・公開を管理できる。SWELLの見た目との喧嘩は「3つの決まり」で防ぐ
CHTMLファイルをサーバーの /lp/名前/index.html に置く完全に自由。ただしファイルをサーバーへ送る手順(FTPなど)が別に要るので、最初の1本には重い
MEMO「下書きのLP」は本当に誰にも見えない?

見えません。SWELLの「LP」は投稿・固定ページとは別の入れ物で、下書きのままなら訪問者からもGoogleからも見えず、ブログのトップページも変わりません。AIは裏口(/wp-json/wp/v2/lp)から下書きを置くだけで、公開ボタンはあなたが押します。公開すると /lp/名前/ の別の住所が付きます。

YOULPは5つ、HPは1つ

前提は、WordPressにAIが繋がっていること(手順1。済んでいれば飛ばす)。ブログの装飾編の「型集」は、この道(B)では要りません。

ORDER送る順番

LP:手順1 つなぐ → 手順2 見本と材料と写真を用意 → 手順3 プロンプト①(最初の1回) → 手順4 LP設定 → プレビュー → 直しはプロンプト②、止まったらプロンプト③ → 手順5 AI感を消す → 公開

HP:手順6 プロンプト④「固定ページ4枚を作って」→ 設定を2つ変える(ホームページの表示・メニュー)→ 公開

1
つなぐ:AI用に「編集者」のユーザーを1人作って、合鍵を渡す
10分 / 管理画面 / 初回だけ
なぜ:AIがLPの下書きを置くには、WordPressに入る鍵(アプリケーションパスワード)が要ります。あなた自身の鍵ではなく、AI専用のユーザーを1人作って、その人の鍵を渡す形にすると、AIができることが「記事とページを書く」までに収まり、サイトの設定やプラグインには手が届きません。
  1. 管理画面 → 「ユーザー」→「新規追加」。ユーザー名は ai のような短いもの、メールはあなたが持っているもう1つのアドレス、権限グループは「編集者」 → 追加
  2. 「ユーザー」の一覧で、いま作ったユーザーを開く → 下のほうの「アプリケーションパスワード」→ 名前(例: claude)を入れて「新しいアプリケーションパスワードを追加」
  3. 出てきた文字列(スペース入りの24文字)が合鍵。この画面でしか表示されないので、閉じる前に控える
  4. AIへの渡し方は、別の1枚 ChatGPT(Codex)でWordPressに下書き投稿(ChatGPTアプリの人)か AIエージェントでWordPressに半自動投稿(Claude Codeの人)のとおり。合鍵はチャットに貼らず、設定ファイルへ。ユーザー名は、いま作ったAI用のもの
こうなればOK

AIに「WordPressに繋がっている? テストの下書きを1本入れて」と頼み、管理画面の「投稿 → 下書き」に1本入れば完了です(テストはあとでゴミ箱へ)。

注意「アプリケーションパスワード」の欄が出ない›

サイトが https:// でないときや、セキュリティのプラグインが止めているときに出ません。

まずサイトのURLが https:// で始まっているかを見る。始まっていれば、セキュリティ系のプラグインの設定に「アプリケーションパスワード」や「REST API」を止める項目が無いか、渡した人と一緒に確認してください。

2
見本のURL・材料・写真を用意する
10分 / 手元の作業
なぜ:LPの出来は「何を渡したか」で8割決まります。見本が無ければ文章だけのLP、写真が無ければ色の帯だけのLPが出てきます。逆に、この3つが揃っていれば、AIは見本と同じ密度のページを一度で書けます。
  1. 見本のURLを1つ決める。「こういう見た目にしたい」と思うLP。9月13日に見本にしたのは、SWELL製のデモ wpdemopresents.com のLPサンプル(色帯20段・写真64枚)です。文章と写真を写すのではなく、構成と密度を真似るための見本です
  2. 材料を5行書く。何のLPか・誰に・申し込み先のURL・料金と締切・実績とプロフィール。決まっていないものは「未定」。AIに埋めさせると、存在しない数字がページに載ります
  3. 写真を用意する。実物(あなたの顔・現場・商品)があればそれが一番。無い段はGPT Image 2で「写真風」に作る(頼み方は下のMEMO)。フラットなイラストにしない。人物は、実在の人に見えるものを使わない
  4. 写真を管理画面 → 「メディア」→「新規追加」でアップロードし、ファイル名を控える(例: top.jpg、step1.jpg)。プロンプト①の「使う画像」に、この名前を書きます
MEMO画像はGPT Image 2で「写真風」に

この手順を作った人の画像のルールは、GPT Image 2(ChatGPTの画像づくり)で作ること。頼み方の例:「50代の女性が自宅の机でノートパソコンを開いている。実写の写真のように。顔は写さず手元と画面を中心に。明るい自然光」。「実写のように」「イラストにしない」を必ず入れ、人物は顔を写さないか後ろ姿にすると、実在の人に見える心配がありません。1枚ずつ、段の数だけ作ります。

こうなればOK

見本のURLが1つ、材料が5行、メディアに写真が入ってファイル名を控えてある。この3つで手順3へ。

3
プロンプト①を貼る:見本を渡して、1本のコードを「カスタムHTML」に入れさせる
10分 / AIとの会話 / プロンプト①
なぜ:AIには「見本を分解する」「同じ密度で1本のコードを書く」「LPの下書きに置く」を一度に頼みます。SWELLの部品を使わせないのが肝で、部品で組むと素朴な見た目で止まり、1本のコードなら見本に近づきます。そのぶん、SWELLの見た目とぶつからないための「3つの決まり」をプロンプトに入れてあります。
RULEBの道で守る3つの決まり(これで8〜9割はそのまま出る)

① CSSは全部、独自の目印(例 #lp-xxxx)の下にだけ効くように書く。書体・行間・リンク色・見出しの余白は、その下で自分で指定し直す。
② 横いっぱいの帯は width:100vw; margin-left:calc(50% - 50vw) の書き方で、記事の幅の外まで広げる。
③ LP設定(右側)で、ヘッダーとフッターを使わない・タイトルを非表示にする。

①と②はプロンプト①に入っています。③はあなたが手順4でやります。

WordPressに繋いだフォルダ(WordPress編なら blog)のチャット欄に貼り、上の8行だけ自分のものに書き換えます。

プロンプト①「見本を渡して、LPを下書きで作って」(上の8行を書き換え)
このサイトのテーマはSWELLです。SWELLの「LP」(管理画面の左メニューにある LP。裏口は /wp-json/wp/v2/lp)に、ランディングページを下書きで1本作ってください。

見本のLP: https://(真似したいページのURL)
何のLPか: (例: ◯◯講座/◯◯のサービス)
誰に: (例: 50代で◯◯に困っている人)
申し込み先のURL: https://
料金と締切: (決まっていなければ「未定」と書く。数字を作らない)
私の実績・プロフィール: (確認できる事実だけ。無ければ「未記入」)
使う画像: (メディアにアップロード済みのファイル名。例: top.jpg、step1.jpg。無ければ「無し」)
CSSの目印: lp-(好きな英字。例: lp-kouza)

作り方:
1. 先に見本のLPを開いて、段の数・色帯の使い方・写真の数と置き方・列(カラム)の組み方・ボタンの位置を書き出して、私に見せる。見本の文章と写真はそのまま写さない。真似るのは構成と密度だけ。
2. 見本と同じ密度で、ページ全体を HTML と CSS の1本のコードにする。SWELLの部品(ブロック)やテーマの装飾は使わない。
3. CSSの決まり(SWELLの見た目とぶつからないため):
   ・全部のCSSは、独自の目印 <div id="CSSの目印"> の中にだけ効くように書く。#CSSの目印 p のように、1行残らず目印から始める。
   ・書体、文字の大きさ、行間、文字色、リンクの色と下線、見出しの上下の余白は、目印の下で全部自分で指定し直す。
   ・横いっぱいの色帯は width:100vw; margin-left:calc(50% - 50vw); で、記事の幅の外まで広げる。
   ・スマホ(幅600px以下)でも崩れないようにする。
4. 実績・数字・お客さまの声を作らない。材料に無いものは「未定」と書くか、その段を省く。
5. 画像は「使う画像」に書いたファイルだけ使う(メディアの一覧からURLを調べて入れる)。画像が無い段は色の帯にする。画像を作らない。よそのサイトの画像を使わない。
6. できたコードを、SWELLの「LP」に下書きで1本入れる。中身は「カスタムHTML」ブロック1つ(<!-- wp:html --> と <!-- /wp:html --> で包む)に丸ごと入れる。公開(publish)はしない。
7. 最後に、管理画面で開く場所(URL)と、私がやる3つ(LP設定でヘッダーとフッターを使わない・タイトルを非表示・プレビューで見る)を教えて。
  1. 送信する。「許可しますか」が出たら「許可」
  2. AIがまず見本の分解結果(段の数・色帯・写真の数)を返す。「これでいい」と一言返すと、コードを書いて下書きに入れる
  3. AIが「LPの下書きに入りました」と管理画面のURLを返す。あわせて、あなたがやる3つ(LP設定)を教えてくれる
こうなればOK

管理画面 → 左メニュー「LP」→ 一覧に下書きが1本あり、開くと「カスタムHTML」のブロックが1つだけ入っていれば完了です。

注意AIがWordPressに繋がっていない(手順1を飛ばしたい)›

コードを作るところまでは、繋がっていなくてもできます。プロンプト①の6と7を「コードを1本、ファイルに書き出して」に変えると、AIがHTMLファイルを作ります。

管理画面 → 「LP」→「新規追加」→ 「+」で「カスタムHTML」ブロックを1つ置く → AIが作ったファイルの中身を全部貼る → 「下書き保存」。これで手順4へ進めます。

注意AIが見本のページを開けないと言う›

見本のサイトが外からの読み取りを止めていることがあります。

見本のページを上から下までスクロールしながらスクショを5〜6枚撮って、チャットに貼る。「このスクショが見本です。段の数と色帯と写真の置き方を真似て」と一言足せば、同じように進みます。

注意左メニューに「LP」が無い›

テーマがSWELLでないか、SWELLの設定でLPの機能が止まっている可能性があります。

「外観 → テーマ」でSWELLが有効か見る。有効なのに無いときは、SWELL設定の中で機能が止まっていないかを、渡した人と一緒に確認してください。

実際に起きたAIが「削除できない(403)」と言う›

この手順を作った環境で、テストのLPをAIにゴミ箱へ移させたところ、サーバーの防御(WAF)が「削除」の命令だけを弾きました。作る・直すは通ります。

要らない下書きは、管理画面の「LP」一覧で自分でゴミ箱へ。AIに任せるなら「削除の命令ではなく、POSTでメソッドを上書きして」と言えば通ることがあります(この環境ではそれで通りました)。

4
管理画面で「LP設定」を3つ変えて、プレビューで見る。直しはプロンプト②、止まったらプロンプト③
10分 / 管理画面+AIとの会話 / プロンプト②③
なぜ:LP設定だけはAIが触れません(ページの中身ではなく、SWELLの設定だからです)。3つのチェックで、ブログの顔(ヘッダー・フッター・タイトル)が消えて、LPらしいページに変わります。「3つの決まり」の③はここです。
  1. 管理画面 → 「LP」→ 下書きを開く
  2. 右側の「LP設定」で、「SWELLのヘッダーを使用する」「SWELLのフッターを使用する」のチェックを外す。「タイトルの表示」を非表示にする(画面の名前は2026年9月のSWELL)→ 下書き保存
  3. 「プレビュー」で、パソコンとスマホ幅の両方を見る。色帯が画面の端まで広がり、書体や行間がブログと違っていればOK
  4. 直したい段があれば、プロンプト②。表示がおかしいときは、プロンプト③
プロンプト②「ここを直して」(毎回・◯◯を書き換え)
LPの「◯◯」を直して。(例: 最初の画面の写真を top2.jpg に/料金の段を「未定」から「3,000円」に/お客さまの声の段を消す/3段目の背景をもっと薄い色に)
直したら、同じLPの下書きの「カスタムHTML」を丸ごと入れ替えて更新して、管理画面のURLをもう一度教えて。CSSの目印と3つの決まり(目印の下だけのCSS・書体や行間の指定・横いっぱいの帯)はそのまま。公開はしない。
プロンプト③「表示がおかしい」(止まったとき・症状を書き換え)
LPのプレビューで、こうなっています: (例: 表示が崩れた/横幅がブログの記事と同じで狭い/文字の書体や行間がブログと同じになっている/ボタンを押しても飛ばない/横にスクロールできてしまう)
原因はSWELLのCSSとの衝突だと思うので、この順で確かめて直して。
1. CSSが1行残らず、独自の目印(#lp-…)から始まっているか。始まっていない行があれば直す。
2. 書体・行間・文字色・リンク色・見出しの余白を、目印の下で自分で指定し直しているか。足りないものを足す。
3. 横いっぱいの帯に width:100vw; margin-left:calc(50% - 50vw); が付いているか。横にスクロールできてしまうときは、はみ出しを止める。
4. ボタンが飛ばないときは、リンクのURLが https:// から始まっているか、コードの途中で消えていないかを見る。
直したら下書きを更新して、何を直したかを3行で教えて。公開はしない。
こうなればOK

上にメニューが無く、色帯が画面の端まで届き、最初の画面に約束の一言と写真とボタンがあり、下まで読むともう一度ボタンがある。この形になったら、手順5へ。

注意色帯が記事の幅に収まって、両脇が白い›

「3つの決まり」の②が抜けています。SWELLのLPは、ヘッダーとフッターを消しても、中身は記事と同じ幅の箱の中に入ります。帯を外まで広げる書き方が無いと、こうなります。

プロンプト③をそのまま貼る。症状は「横幅がブログの記事と同じで狭い」。

注意書体も行間もブログと同じで、見本と違う›

「3つの決まり」の①が抜けているか、CSSがまるごと消されています。編集画面でブロックを開き、「HTML」に <style> が残っているかを見ます。

残っていれば、プロンプト③(症状は「文字の書体や行間がブログと同じ」)。消えていれば、AI用のユーザーの権限が「編集者」より下(投稿者・寄稿者)になっています。手順1に戻って権限を「編集者」に。

注意開くと「このブロックには想定されていない内容が…」と出る›

9月13日に、SWELLの部品で組んだ版をコードエディターから貼ったときに出ました。ブロックの形が少し違うときの警告で、表示は崩れていませんでした。

「ブロックのリカバリーを試行」を押して、下書き保存 → プレビュー。崩れていなければそのまま。崩れたら、プロンプト③。

5
「AI感」を消して、公開する
10分 / AIとの会話 / プロンプト②に言葉を足す
なぜ:形はできても、ひと目で「AIが作った」と分かるページは信用されません。9月13日にできたLPを講師が見て、AI感の正体を5つに分けました。どれも直し方が決まっているので、言葉にして頼めば消えます。
AI感の正体直し方(AIへの言葉)
フラットな量産イラスト実写の写真に替える。手順2のGPT Image 2で「写真風」に作り、メディアに入れて「◯◯.jpg に替えて」
全部が左右対称・中央寄せ「段ごとに形を変える。左に写真・右に文、次は逆、その次は3列。角丸と中央寄せを減らす」
数字や名前が1つも無いあなたの事実を渡す。年数・地名・講座名・日付・人の名前(出してよいものだけ)。「数字と名前は私が渡したものだけ入れる」
決まり文句(「あなたの人生が変わる」「今すぐ」)自分の言葉に替える。受講者やお客さまが実際に言った言葉があれば、それを渡す
余白が多すぎる「見本と同じ密度で。余白を3割減らす。見出しにバッジと下線を入れる」

プロンプト②の1行目に、次の言葉をそのまま足します。

プロンプト②に足す言葉「AI感を消して」(そのまま貼る)
LP全体のAI感を消して。見本と同じ密度で。写真は実写(私がメディアに入れたものだけ)。段ごとに形を変える(左に写真・右に文、次は逆、その次は3列)。角丸と中央寄せを減らす。見出しにバッジと下線を入れる。余白を3割減らす。数字と名前は私が渡したものだけ入れて、決まり文句(「あなたの人生が変わる」「今すぐ」など)は消す。
直したら、同じLPの下書きの「カスタムHTML」を丸ごと入れ替えて更新して、管理画面のURLを教えて。CSSの目印と3つの決まりはそのまま。公開はしない。
  1. プレビューで見て、まだ気になる段があれば「◯段目だけ、写真を左に」のように1つずつ。2〜3往復で落ち着きます
  2. 申し込み先のボタンを自分で1回押して、正しいページに飛ぶことを確かめる
  3. 納得したら、「公開」を自分で押す。URLは /lp/名前/ の形です
こうなればOK

段ごとに形が違い、写真が実写で、あなたの数字と名前が入っている。知り合いに見せて「これ、自分で作ったの?」と聞かれる状態が目安です。

6
HP:固定ページ4枚をAIに作らせて、設定を2つ変える
20分 / AIとの会話+管理画面 / プロンプト④
なぜ:会社やお店のホームページは、中身は固定ページ4枚(トップ・サービス・プロフィール・お問い合わせ)で、それを「トップに何を出すか」「メニューに何を並べるか」の2つの設定で繋いだものです。4枚はAI、2つの設定はあなた、で分けます。LPと違って、こちらはブログと同じ見た目(SWELLの部品)で十分です。

同じチャット欄に貼り、上の5行を自分のものに書き換えます。

プロンプト④「固定ページ4枚を作って」(上の5行を書き換え)
このサイトで、会社(お店)のホームページ用の固定ページを4枚、下書きで作ってください(裏口は /wp-json/wp/v2/pages)。

事業の内容:
やっていること・売っているもの(3つまで):
対象のお客さま・地域:
連絡先(電話・メール・LINEなど、公開してよいものだけ):
プロフィール(確認できる事実だけ):

4枚:
①トップ(一言の紹介+やっていること3つ+お問い合わせへのボタン)
②サービス(やっていることごとに、誰向け・内容。料金は決まっていなければ「未定」)
③プロフィール
④お問い合わせ(連絡先+「ここにフォームを置く」という印だけ。フォームはプラグインなので、私があとで置く)
文章は短く。実績や数字を作らない。装飾は、「装飾の型集.md」があればその部品だけ。
入れたら4枚のURLを教えて。あわせて、私が管理画面でやる2つ(「設定 → 表示設定 → ホームページの表示」を「固定ページ」にしてトップを選ぶ/「外観 → メニュー」で4枚を並べる)を、画面の名前で教えて。公開はしない。
  1. AIが4枚のURLと、あなたがやる2つの設定を返す
  2. 管理画面 → 「設定 → 表示設定」→「ホームページの表示」を「固定ページ」にして、ホームページに「トップ」を選ぶ → 保存
  3. 「外観 → メニュー」→ 新しいメニューを作り、4枚を並べて、表示位置に「ヘッダー」のような場所を選ぶ → 保存(画面の名前はWordPressの標準)
  4. 4枚をプレビューで見て、直しは日本語で頼み、納得したら1枚ずつ「公開」
こうなればOK

サイトのURLを開くと「トップ」が出て、上のメニューから「サービス」「プロフィール」「お問い合わせ」に飛べれば、ホームページの形です。

注意お問い合わせのフォームはAIが作れない›

フォーム(名前とメールを入れて送るあの部品)は、WordPressの標準にはなく、プラグイン(Contact Form 7 など)で作ります。AIは「ここにフォームを置く」という場所を空けるまでです。

プラグインを入れてフォームを1つ作り、出てきた短い呼び出しコードを「お問い合わせ」ページに貼る。ここは渡した人と一緒にやると10分です。フォームの送信テストは、自分のメールで1回行ってください。

注意トップページの大きな画像(メインビジュアル)›

SWELLのトップの大きな写真は、固定ページの中身ではなく「外観 → カスタマイズ」の中の設定です。AIが固定ページに置くのとは別の場所です。

まず4枚の文章を通してから、「外観 → カスタマイズ → トップページ」で写真を入れます。写真は実物を。

NEXTLPが1本できたら

別の1枚ブログ記事の装飾は、部品の「型集」で

LPは1本のコードで作りましたが、毎日の記事は、SWELLの部品(吹き出し・枠・マーカー・FAQ)で書くほうが崩れにくく、直しも楽です。AIにテスト記事を1本書かせて、崩れていない部品だけを「型集」に固定する手順は、別のマニュアル SWELLの装飾をAIエージェントに覚えさせて入稿 にあります。上の「作り方 A」で組みたいときも、この型集から始めます。

別の1枚WordPressの外にLPを置きたくなったら

「作り方 C」のように、AIが書いた1本のコードをファイルのまま別の場所で公開する道もあります。置き場の作り方は Cloudflare Pagesでサイトを公開する。SWELLに縛られない代わりに、置き場の設定が1つ増えます。まずはSWELLの中で1本作ってから、で十分です。

SEEできたものはどこで見られるの

見たいもの場所
AIが作ったLP管理画面 → 左メニュー「LP」→ 一覧(下書き)
AIが書いたコードLPを開く → 「カスタムHTML」ブロックをクリック → 「HTML」。普段は見なくて構いません。「プレビュー」に切り替えると、その場で見た目が出ます
LP設定LPを開いた右側。ヘッダー・フッター・タイトルの3つ
LPのURL公開後は https://あなたのサイト/lp/名前/。下書きの間は、編集画面の「プレビュー」からだけ見られます
アップロードした写真管理画面 → 「メディア」。ファイル名をクリックすると、AIが使うURLも見られます
AI用のユーザーと合鍵「ユーザー」→ AI用のユーザーを開く → 下の「アプリケーションパスワード」。「最終使用」の日時が更新されていれば、AIが動いた証拠です
AIが作った固定ページ管理画面 → 「固定ページ」→ 下書き
トップに何を出すか「設定 → 表示設定 → ホームページの表示」
上のメニュー「外観 → メニュー」

CAREこれだけは気をつけてください

取り返しがつかないことと、信用を落とすこと

  • 数字と実績をAIに作らせない。料金・件数・お客さまの声は、あなたが渡した事実だけ。無ければ「未定」か、その段を省く。
  • 見本の文章と写真を写さない。真似てよいのは構成と密度(段の数・色帯・写真の量)。文章と写真はよそのものです。
  • 人物の写真は、実在の人に見えるものを使わない。AIで作るなら、顔を写さないか後ろ姿に。自分や許可をもらった人の実物なら問題ありません。
  • 公開ボタンは自分で押す。AIには「公開はしない」を毎回入れてあります。
  • 申し込み先のURLは、公開前に自分で1回押して確かめる。ボタンの先が違うと、LPの意味がなくなります。
  • 「LP」と「固定ページ」を混ぜない。売るページはLP、会社の顔は固定ページ。同じ内容を両方に置かない。

VSほかのやり方と、正直な比較

やり方向いている人この手順との違い
この手順(SWELLのLP+カスタムHTMLに1本のコード)すでにWordPressとSWELLがあり、見本にしたいLPがある人追加費用なし。見本に近い見た目。ブログと同じ場所で下書き・公開を管理できる
SWELLの部品だけで組む(作り方 A)素朴でいいから、まず1本を早く出したい人崩れにくく直しも楽だが、色帯と部品の範囲で見た目が止まる
LP作成サービス(ペライチなど)WordPressが無い人簡単だが月額がかかるものが多く、ブログと別管理になる
1本のコードを別の場所で公開(作り方 C)WordPressに縛られたくない人自由度は一番高いが、置き場(サーバーのフォルダやCloudflare Pages)への送り方がもう1つ要る
制作会社に頼む写真撮影から任せたい人数万円〜。直したいときに毎回頼む形になる
MONEY費用

この手順自体は無料です。SWELL(購入済みのはず)と、AIエージェント(Claude CodeかChatGPTのCodex)が使える契約だけ。写真をGPT Image 2で作る場合は、ChatGPTの契約の範囲で作れます。お問い合わせのフォームは無料のプラグインで足ります。

Q&Aよくある疑問

装飾編の「型集」は要る?
この手順(作り方 B)では要りません。AIはSWELLの部品を使わず、1本のコードで書くからです。ブログの記事や、作り方 Aで組むときには要ります。
下書きの間、誰かに見られない?
見られません。SWELLの「LP」は別の入れ物で、下書きなら訪問者からもGoogleからも見えず、ブログのトップページも変わりません。公開して初めて /lp/名前/ の住所ができます。
公開中のLPを直したい
プロンプト②に「公開中のLPです」と一言足してください。直した瞬間に読者に見えるので、大きな直しは「同じLPを下書きでもう1本コピーして、そちらで直して」と頼み、見比べてから入れ替えます。
Cocoonなど別のテーマでも?
「カスタムHTMLに1本のコードを貼る」道は、どのテーマでも使えます(固定ページに貼る)。SWELL独自なのは「LP」の入れ物と、ヘッダー・フッターを消すLP設定だけ。固定ページ4枚のHP(手順6)も、どのテーマでも同じです。
ChatGPTのCodexでも?
頼み方は同じです。この手順を作った人は、Claude Codeで「LP」の下書きが入ることと、見本からLPが書けることを確かめました。Codexでは未検証なので、最初の1回は渡した人と一緒に。

CHEAT裏で動いているもの

覚える必要はありません。「何が動いているか知りたい」ときだけどうぞ。

やりたいこと裏口(REST API)への命令
LPを下書きで作るPOST /wp-json/wp/v2/lp に {"title","content","status":"draft"}(SWELLが lp の窓口を出している)
カスタムHTMLとして入れるcontent を <!-- wp:html --> と <!-- /wp:html --> で包む。中の <style> は、編集者以上の権限なら消されない
写真のURLを調べるGET /wp-json/wp/v2/media?search=ファイル名
固定ページを作るPOST /wp-json/wp/v2/pages(記事の posts と同じ形)
LPを直すPOST /wp-json/wp/v2/lp/ID
要らないLPをゴミ箱へDELETE /wp-json/wp/v2/lp/ID。サーバーの防御が DELETE を弾くときは POST …/ID?_method=DELETE
LP設定(ヘッダー・フッター・タイトル)裏口からは触れない(ページの中身ではなくSWELLの設定)。管理画面で