「こんなLPにしたい」と思う見本のページを1つAIに渡し、ページ全体をHTMLとCSSの1本のコードで書かせて、SWELLのLPに「カスタムHTML」ブロック1つで丸ごと貼る。 これが、2026年9月13日の相談で一番うまくいった形です。プロンプトで細かく説明するより、見本を1つ渡すほうがずっと効きます。 あなたがやるのは、見本と材料を渡すこと、写真を用意すること、できた下書きを見て直しを頼むこと、公開ボタンを押すこと。 ホームページ(会社やお店の顔になるページ)は、同じ道具で固定ページ4枚を作らせて、設定を2つ変えるだけです。
2026年9月13日の相談で、講師が受講者の見本を分解し、自分のサイトで試して分かった事実です。
/lp/名前/ の別の住所です。この手順の最初の版は、プロンプトに「装飾の型集が無ければ、見出し・段落・箇条書き・ボタンだけで組む」と書いていました。AIはその通りに作ったので、できたのは文章の骨組みだけ。講師が見て「これは使えない」と判断しました。悪いのはAIではなく、頼み方です。
次に、見本にしたいLPをそのままAIに渡して「どこまで真似できるか」を試したところ、色帯・カード・番号つきリスト・FAQ・イラストが入ったページが出てきました。プロンプトで説明するより、見本を1つ渡すほうが効く。これがこの手順の芯です。
残った課題は2つ。①「AI感」(全部が左右対称で中央寄せ、量産イラスト、数字と名前がゼロ、決まり文句、余白が多すぎる)。②SWELLの見た目との喧嘩(書体・行間・リンク色・見出しの余白がブログに引きずられ、横幅が記事の幅に収まる)。①は手順5、②は手順3の「3つの決まり」で片づけます。
人・AI・WordPressの分担はこれだけです。
肝は2つ。見本を渡すことと、AIに数字と実績を作らせないことです。料金・実績・お客さまの声は、あなたが渡した「確認できる事実」だけを使わせます。無いものは「未定」か、その段ごと省きます。
| 道 | やり方 | 向き・不向き |
|---|---|---|
| A | SWELLの部品(フルワイド・ボタン・FAQ・STEP・キャプションボックス)で組む | 簡単で、崩れにくい。ただし素朴な見た目で止まる。ブログの装飾編で型集を作ってあれば、その延長でできる |
| B この手順 | AIにHTMLとCSSを1本で書かせ、SWELLのLPに「カスタムHTML」ブロックを1つ置いて丸ごと貼る | 見本に近い見た目が出る。SWELLの中で下書き・公開を管理できる。SWELLの見た目との喧嘩は「3つの決まり」で防ぐ |
| C | HTMLファイルをサーバーの /lp/名前/index.html に置く | 完全に自由。ただしファイルをサーバーへ送る手順(FTPなど)が別に要るので、最初の1本には重い |
見えません。SWELLの「LP」は投稿・固定ページとは別の入れ物で、下書きのままなら訪問者からもGoogleからも見えず、ブログのトップページも変わりません。AIは裏口(/wp-json/wp/v2/lp)から下書きを置くだけで、公開ボタンはあなたが押します。公開すると /lp/名前/ の別の住所が付きます。
前提は、WordPressにAIが繋がっていること(手順1。済んでいれば飛ばす)。ブログの装飾編の「型集」は、この道(B)では要りません。
LP:手順1 つなぐ → 手順2 見本と材料と写真を用意 → 手順3 プロンプト①(最初の1回) → 手順4 LP設定 → プレビュー → 直しはプロンプト②、止まったらプロンプト③ → 手順5 AI感を消す → 公開
HP:手順6 プロンプト④「固定ページ4枚を作って」→ 設定を2つ変える(ホームページの表示・メニュー)→ 公開
ai のような短いもの、メールはあなたが持っているもう1つのアドレス、権限グループは「編集者」 → 追加claude)を入れて「新しいアプリケーションパスワードを追加」AIに「WordPressに繋がっている? テストの下書きを1本入れて」と頼み、管理画面の「投稿 → 下書き」に1本入れば完了です(テストはあとでゴミ箱へ)。
サイトが https:// でないときや、セキュリティのプラグインが止めているときに出ません。
まずサイトのURLが https:// で始まっているかを見る。始まっていれば、セキュリティ系のプラグインの設定に「アプリケーションパスワード」や「REST API」を止める項目が無いか、渡した人と一緒に確認してください。
top.jpg、step1.jpg)。プロンプト①の「使う画像」に、この名前を書きますこの手順を作った人の画像のルールは、GPT Image 2(ChatGPTの画像づくり)で作ること。頼み方の例:「50代の女性が自宅の机でノートパソコンを開いている。実写の写真のように。顔は写さず手元と画面を中心に。明るい自然光」。「実写のように」「イラストにしない」を必ず入れ、人物は顔を写さないか後ろ姿にすると、実在の人に見える心配がありません。1枚ずつ、段の数だけ作ります。
見本のURLが1つ、材料が5行、メディアに写真が入ってファイル名を控えてある。この3つで手順3へ。
① CSSは全部、独自の目印(例 #lp-xxxx)の下にだけ効くように書く。書体・行間・リンク色・見出しの余白は、その下で自分で指定し直す。
② 横いっぱいの帯は width:100vw; margin-left:calc(50% - 50vw) の書き方で、記事の幅の外まで広げる。
③ LP設定(右側)で、ヘッダーとフッターを使わない・タイトルを非表示にする。
①と②はプロンプト①に入っています。③はあなたが手順4でやります。
WordPressに繋いだフォルダ(WordPress編なら blog)のチャット欄に貼り、上の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設定でヘッダーとフッターを使わない・タイトルを非表示・プレビューで見る)を教えて。
管理画面 → 左メニュー「LP」→ 一覧に下書きが1本あり、開くと「カスタムHTML」のブロックが1つだけ入っていれば完了です。
コードを作るところまでは、繋がっていなくてもできます。プロンプト①の6と7を「コードを1本、ファイルに書き出して」に変えると、AIがHTMLファイルを作ります。
管理画面 → 「LP」→「新規追加」→ 「+」で「カスタムHTML」ブロックを1つ置く → AIが作ったファイルの中身を全部貼る → 「下書き保存」。これで手順4へ進めます。
見本のサイトが外からの読み取りを止めていることがあります。
見本のページを上から下までスクロールしながらスクショを5〜6枚撮って、チャットに貼る。「このスクショが見本です。段の数と色帯と写真の置き方を真似て」と一言足せば、同じように進みます。
テーマがSWELLでないか、SWELLの設定でLPの機能が止まっている可能性があります。
「外観 → テーマ」でSWELLが有効か見る。有効なのに無いときは、SWELL設定の中で機能が止まっていないかを、渡した人と一緒に確認してください。
この手順を作った環境で、テストのLPをAIにゴミ箱へ移させたところ、サーバーの防御(WAF)が「削除」の命令だけを弾きました。作る・直すは通ります。
要らない下書きは、管理画面の「LP」一覧で自分でゴミ箱へ。AIに任せるなら「削除の命令ではなく、POSTでメソッドを上書きして」と言えば通ることがあります(この環境ではそれで通りました)。
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行で教えて。公開はしない。
上にメニューが無く、色帯が画面の端まで届き、最初の画面に約束の一言と写真とボタンがあり、下まで読むともう一度ボタンがある。この形になったら、手順5へ。
「3つの決まり」の②が抜けています。SWELLのLPは、ヘッダーとフッターを消しても、中身は記事と同じ幅の箱の中に入ります。帯を外まで広げる書き方が無いと、こうなります。
プロンプト③をそのまま貼る。症状は「横幅がブログの記事と同じで狭い」。
「3つの決まり」の①が抜けているか、CSSがまるごと消されています。編集画面でブロックを開き、「HTML」に <style> が残っているかを見ます。
残っていれば、プロンプト③(症状は「文字の書体や行間がブログと同じ」)。消えていれば、AI用のユーザーの権限が「編集者」より下(投稿者・寄稿者)になっています。手順1に戻って権限を「編集者」に。
9月13日に、SWELLの部品で組んだ版をコードエディターから貼ったときに出ました。ブロックの形が少し違うときの警告で、表示は崩れていませんでした。
「ブロックのリカバリーを試行」を押して、下書き保存 → プレビュー。崩れていなければそのまま。崩れたら、プロンプト③。
| AI感の正体 | 直し方(AIへの言葉) |
|---|---|
| フラットな量産イラスト | 実写の写真に替える。手順2のGPT Image 2で「写真風」に作り、メディアに入れて「◯◯.jpg に替えて」 |
| 全部が左右対称・中央寄せ | 「段ごとに形を変える。左に写真・右に文、次は逆、その次は3列。角丸と中央寄せを減らす」 |
| 数字や名前が1つも無い | あなたの事実を渡す。年数・地名・講座名・日付・人の名前(出してよいものだけ)。「数字と名前は私が渡したものだけ入れる」 |
| 決まり文句(「あなたの人生が変わる」「今すぐ」) | 自分の言葉に替える。受講者やお客さまが実際に言った言葉があれば、それを渡す |
| 余白が多すぎる | 「見本と同じ密度で。余白を3割減らす。見出しにバッジと下線を入れる」 |
プロンプト②の1行目に、次の言葉をそのまま足します。
LP全体のAI感を消して。見本と同じ密度で。写真は実写(私がメディアに入れたものだけ)。段ごとに形を変える(左に写真・右に文、次は逆、その次は3列)。角丸と中央寄せを減らす。見出しにバッジと下線を入れる。余白を3割減らす。数字と名前は私が渡したものだけ入れて、決まり文句(「あなたの人生が変わる」「今すぐ」など)は消す。 直したら、同じLPの下書きの「カスタムHTML」を丸ごと入れ替えて更新して、管理画面のURLを教えて。CSSの目印と3つの決まりはそのまま。公開はしない。
/lp/名前/ の形です段ごとに形が違い、写真が実写で、あなたの数字と名前が入っている。知り合いに見せて「これ、自分で作ったの?」と聞かれる状態が目安です。
同じチャット欄に貼り、上の5行を自分のものに書き換えます。
このサイトで、会社(お店)のホームページ用の固定ページを4枚、下書きで作ってください(裏口は /wp-json/wp/v2/pages)。 事業の内容: やっていること・売っているもの(3つまで): 対象のお客さま・地域: 連絡先(電話・メール・LINEなど、公開してよいものだけ): プロフィール(確認できる事実だけ): 4枚: ①トップ(一言の紹介+やっていること3つ+お問い合わせへのボタン) ②サービス(やっていることごとに、誰向け・内容。料金は決まっていなければ「未定」) ③プロフィール ④お問い合わせ(連絡先+「ここにフォームを置く」という印だけ。フォームはプラグインなので、私があとで置く) 文章は短く。実績や数字を作らない。装飾は、「装飾の型集.md」があればその部品だけ。 入れたら4枚のURLを教えて。あわせて、私が管理画面でやる2つ(「設定 → 表示設定 → ホームページの表示」を「固定ページ」にしてトップを選ぶ/「外観 → メニュー」で4枚を並べる)を、画面の名前で教えて。公開はしない。
サイトのURLを開くと「トップ」が出て、上のメニューから「サービス」「プロフィール」「お問い合わせ」に飛べれば、ホームページの形です。
フォーム(名前とメールを入れて送るあの部品)は、WordPressの標準にはなく、プラグイン(Contact Form 7 など)で作ります。AIは「ここにフォームを置く」という場所を空けるまでです。
プラグインを入れてフォームを1つ作り、出てきた短い呼び出しコードを「お問い合わせ」ページに貼る。ここは渡した人と一緒にやると10分です。フォームの送信テストは、自分のメールで1回行ってください。
SWELLのトップの大きな写真は、固定ページの中身ではなく「外観 → カスタマイズ」の中の設定です。AIが固定ページに置くのとは別の場所です。
まず4枚の文章を通してから、「外観 → カスタマイズ → トップページ」で写真を入れます。写真は実物を。
LPは1本のコードで作りましたが、毎日の記事は、SWELLの部品(吹き出し・枠・マーカー・FAQ)で書くほうが崩れにくく、直しも楽です。AIにテスト記事を1本書かせて、崩れていない部品だけを「型集」に固定する手順は、別のマニュアル SWELLの装飾をAIエージェントに覚えさせて入稿 にあります。上の「作り方 A」で組みたいときも、この型集から始めます。
「作り方 C」のように、AIが書いた1本のコードをファイルのまま別の場所で公開する道もあります。置き場の作り方は Cloudflare Pagesでサイトを公開する。SWELLに縛られない代わりに、置き場の設定が1つ増えます。まずはSWELLの中で1本作ってから、で十分です。
| 見たいもの | 場所 |
|---|---|
| AIが作ったLP | 管理画面 → 左メニュー「LP」→ 一覧(下書き) |
| AIが書いたコード | LPを開く → 「カスタムHTML」ブロックをクリック → 「HTML」。普段は見なくて構いません。「プレビュー」に切り替えると、その場で見た目が出ます |
| LP設定 | LPを開いた右側。ヘッダー・フッター・タイトルの3つ |
| LPのURL | 公開後は https://あなたのサイト/lp/名前/。下書きの間は、編集画面の「プレビュー」からだけ見られます |
| アップロードした写真 | 管理画面 → 「メディア」。ファイル名をクリックすると、AIが使うURLも見られます |
| AI用のユーザーと合鍵 | 「ユーザー」→ AI用のユーザーを開く → 下の「アプリケーションパスワード」。「最終使用」の日時が更新されていれば、AIが動いた証拠です |
| AIが作った固定ページ | 管理画面 → 「固定ページ」→ 下書き |
| トップに何を出すか | 「設定 → 表示設定 → ホームページの表示」 |
| 上のメニュー | 「外観 → メニュー」 |
| やり方 | 向いている人 | この手順との違い |
|---|---|---|
| この手順(SWELLのLP+カスタムHTMLに1本のコード) | すでにWordPressとSWELLがあり、見本にしたいLPがある人 | 追加費用なし。見本に近い見た目。ブログと同じ場所で下書き・公開を管理できる |
| SWELLの部品だけで組む(作り方 A) | 素朴でいいから、まず1本を早く出したい人 | 崩れにくく直しも楽だが、色帯と部品の範囲で見た目が止まる |
| LP作成サービス(ペライチなど) | WordPressが無い人 | 簡単だが月額がかかるものが多く、ブログと別管理になる |
| 1本のコードを別の場所で公開(作り方 C) | WordPressに縛られたくない人 | 自由度は一番高いが、置き場(サーバーのフォルダやCloudflare Pages)への送り方がもう1つ要る |
| 制作会社に頼む | 写真撮影から任せたい人 | 数万円〜。直したいときに毎回頼む形になる |
この手順自体は無料です。SWELL(購入済みのはず)と、AIエージェント(Claude CodeかChatGPTのCodex)が使える契約だけ。写真をGPT Image 2で作る場合は、ChatGPTの契約の範囲で作れます。お問い合わせのフォームは無料のプラグインで足ります。
/lp/名前/ の住所ができます。覚える必要はありません。「何が動いているか知りたい」ときだけどうぞ。
| やりたいこと | 裏口(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の設定)。管理画面で |