この特典について
本編で、画像のLPを作って公開するところまでやりました。ここから先は、もっと実践で使えるようにするための「追加カスタマイズ」集です。
どれも、新しく覚えることはありません。下の枠をコピーして、ChatGPTに貼るだけ（一部は無料のWebサービスを使います）。LPの index.html を作ったのと同じチャットで頼むのが一番ラクです。
1
申し込みボタンを「キラーン」と光らせる
こんなとき
いちばん下の申し込みボタンを、もっと目立たせたい。スッと光が走るような、思わず押したくなる見た目にしたい。
コピペする
index.html の一番下にある申し込みボタンに、「光が走る」演出をつけてください。 - ボタンの上を、ときどき光がスッと横切る（きらめき／シャイン） - やりすぎず上品に。スマホでもパソコンでも崩れないように - 文字やリンク先は今のまま - 変更後の index.html の全文を出してください
ひとこと光が強すぎると、逆に安っぽく見えます。「ちょっと物足りないかな」くらいで、ちょうどいいです。間隔を変えたいときは「光が走る間隔をもっとゆっくり」と追加で頼めばOK。
2
申し込みボタンを「ぷるんぷるん」動かす
こんなとき
①の光らせ方とは別に、ボタンそのものをやさしく動かして、視線を集めたい。
コピペする
index.html の一番下にある申し込みボタンに、やさしく動く演出をつけてください。 - ゆっくり「少し大きく→もとに戻る」をくり返す、呼吸のような動き（ぷるんと弾む感じ） - 速すぎず、上品に。ずっと見ていても疲れない強さで - スマホでもパソコンでも崩れないように - 文字やリンク先は今のまま - 変更後の index.html の全文を出してください
ひとこと①の「光らせる」と②の「動かす」は、両方つけると、うるさくなります。基本はどちらか一方。両方やるなら、片方をかなり控えめにしてください。
3
パソコンで見たときの背景をアレンジする
こんなとき
スマホではきれいなのに、パソコンで開くと、中央のLPの左右が真っ白でさみしい。その余白を、おしゃれにしたい。
コピペする
このLPをパソコンで見ると、中央のLPの左右が真っ白でさみしいので、背景をアレンジしてください。 - 中央のLP本体（最大600px）はそのままで、その後ろの背景だけ変える - LPの世界観に合う色で、やわらかいグラデーションか、上品な薄い模様に - 中央のLPがふわっと浮いて見えるよう、うっすら影をつけてもOK - スマホでは余白が出ないので、今まで通りでいい - 変更後の index.html の全文を出してください
ひとこと背景は「主役のLPより目立たない」のが鉄則です。色が強すぎたら「背景の色をもっと薄く」と頼んでトーンを落とします。LPの一番上で使った色に寄せると、まとまりが出ます。
4
画像・イラストを差し替える
こんなとき
AIが作った仮の人物やイラストを、自分の本物の写真に変えたい。あるいは、1枚だけ雰囲気が合わないので、その絵だけ作り直したい。
どちらも、対象の画像をチャット欄に貼り付けて（ドラッグするか、画像アイコンからアップロードして）頼みます。「何枚目か」を伝えなくても、貼った画像そのものを見て作り直してくれるので、確実です。
コピペする
(1) その1枚だけ作り直す（同じ世界観のまま）
いま貼り付けた画像を、作り直してください。 - 世界観（配色・フォント・イラストのタッチ・トーン）と比率は、貼った画像のまま完全にそろえる - 変えたいのはここ：（例：人物を、もっと年配の男性に／写真風からイラストに など） - 文字（見出しと中身）は、貼った画像のまま
コピペする
(2) 自分の写真に入れ替える（その画像＋自分の写真の2枚を貼る）
1枚目の画像の人物を、2枚目の画像（私の写真）の人物に差し替えてください。 - 世界観（配色・フォント・トーン）・レイアウト・比率は、1枚目のまま完全にそろえる - 文字（見出しと中身）も、1枚目のまま
ひとこと顔写真や実績写真など「本物が信頼になる場所」だけ実写にして、雰囲気づくりの絵はAIのままでOK。全部を差し替える必要はありません。差し替えた画像は、同じファイル名（例：06.jpg）で上書き保存すれば、LPはそのまま表示されます。
5
ライティングを洗練させて、申し込み率を上げる
こんなとき
見た目は整ったけど、文章がもう一歩、刺さっていない気がする。申し込みにつながる率を上げたいなら、いじるのは見た目より「言葉」です。
文章を直すのに一番ラクなのは、まだ画像にしていない「設計図」の段階です。これから作る人は、設計図ができたタイミングで言葉を磨いてから画像に進むのが、いちばんきれいです。
コピペする
方法1：設計図の段階で、シュガーマン流に磨く
あなたは、ジョセフ・シュガーマン流のセールスコピーライターです。 この潜在層向けLPの設計図の文章を、シュガーマン流に磨き直してください。 - 「最初の一行が次の一行を読ませる」よう、文をすべらかにつなぐ（スリッパリースライド） - ヘッドラインは、思わず続きが気になる「好奇心の入口」に - 売り込み口調や専門用語は避け、やさしい問いかけ・本音の言葉で - とくに、ヘッドライン・P（問題提起）・申し込みボタンの言葉を重点的に - 各セクション、方向ちがいで2〜3案。なぜ効くのか、ひとことずつ理由も添える
コピペする
方法2：もう画像にした人は、あとから反映する
いま貼り付けた画像に、次の言葉を反映してください。 世界観・配色・レイアウト・比率は、貼った画像のまま完全にそろえる。 文字だけ、次の新しいコピーに差し替えて作り直す： 「（設計段階で磨いた、その画像ぶんのコピーを貼る）」
ひとこと全部を一度に直そうとしないこと。効くのは、ほとんどがヘッドラインとボタンの言葉です。この2つを磨くだけでも、反応が変わります。長くするより、短く言い切るほうが、潜在層には刺さります。
6
説得力を上げる「コンテンツ追加」
こんなとき
公開してみたけど、もう一押し足りない気がする。「選ばれる理由・USP」や「お客様の声」は標準の11セクションに入っているので、ここでは、それ以外の“ダメ押し”を足します。
潜在層（まだ知らない人）に効くのは、この2つ。
おすすめのもう一押し
- ありがちな不安への、先回りQ&A（「○○が心配…」→「大丈夫、こうです」）
- かんたんな実績や数字（「相談◯件」など、ひとつあると、ぐっと信用される）
コピペする
① まず、新しいセクションを1枚つくる
このLPに、新しく「（例：よくある不安へのQ&A）」のセクションを1枚、追加したいです。 - 世界観（配色・フォント・イラストのタッチ・トーン）は、今までと完全にそろえる - 比率は 横長 3:2 - 中身は、（例：Q&Aを3つ、質問と答えのカード型で）。文字は短く、箇条書きやカードで読みやすく - 設計図の長い文章は貼らず、要点を短い言葉で
コピペする
② できたら、LPに組み込む
いま作った画像を、LPの「（例：N 絞り込み）」の前に入れたいです。 index.html を、画像を1枚増やした形に作り直してください。 - 追加する画像のファイル名は 12.jpg - 入れる位置は、（例：10.jpg N 絞り込みのすぐ上） - 残りはすべて今のまま
ひとこと足しすぎは逆効果です。潜在層は、読み疲れると離れます。「不安をひとつ先回り」「具体例をひとつ」くらいの“もう一押し”がちょうどいい。たっぷり読ませて売るのは、潜在層ではなく、もっと購入に近い層（比較・検討層）の仕事です。
7
お客様の声などのYouTube動画を埋め込む
こんなとき
お客様のインタビューや、サービスの紹介動画をYouTubeに上げている。文字や画像だけより、動いて話す姿があるほうが、ぐっと信用される。それをLPの中に埋め込みたい。
コピペする
このLPの中に、YouTube動画を1つ埋め込みたいです。 index.html を、動画を埋め込んだ形に作り直してください。 - 埋め込むYouTubeのURL：（ここに動画のURLを貼る） - 入れる位置：（例：07 お客様の声 の画像のすぐ下。とくに強い対談・インタビュー動画なら、ファーストビューのすぐ下に置いてもOK） - スマホでもパソコンでも、横幅に合わせてきれいに表示されるように（はみ出さない） - 動画の上に「お客様の声（動画）」のような小さな見出しを1行つけてOK - 残りはすべて今のまま - 変更後の index.html の全文を出してください
ひとことお客様インタビューや対談の動画は、すごく強力です。話している姿そのものが信頼になるので、無理に短く切る必要はありません。引き込まれる内容なら、長くても最後まで見てもらえます。本当に良い動画なら、思い切ってファーストビューのすぐ下に置いて、主役のひとつにしてもいいくらいです。動画が複数あるときは、いちばん効く1本にしぼると、ページも重くなりません（重さは⑧で軽くできます）。
8
画像を軽くして、表示を速くする
こんなとき
画像をたくさん縦に並べたLPは、どうしても「重く」なって、開くのが遅くなりがち。中身はそのままで、表示だけ速くします。
いちばん効くのは、画像そのものを軽くすること。無料サイト「TinyPNG（タイニーピング）」を使えば、見た目はほぼそのままで、ファイルだけ小さくできます。
まず、これだけでOK
- ブラウザで https://tinypng.com を開く
- 画面まんなかの点線の枠に、src フォルダの画像をまとめてドラッグする（一度に20枚までOK）
- 自動で圧縮が始まり、どれだけ軽くなったか（◯%オフ）が表示される
- 「Download all」（まとめて保存）を押して、軽くなった画像をダウンロードする
- ダウンロードした軽い画像で、src フォルダの中身を同じ名前のまま入れ替える（01.jpg は 01.jpg に上書き）
- その index.html と src フォルダを、もう一度 Netlify Drop にドラッグして公開し直す
（「Squoosh（スクッシュ）」でも同じことができます。1枚ずつ細かく調整したい人はこちら。）
コピペする
もう一歩、速くしたい人へ（コピペでOK）
index.html を、画像が「画面に近づいたら順番に読み込まれる」形にしてください。 - 上から順に、見えるところだけ先に表示する（スクロールに合わせて、あとの画像を読み込む） - 画像が読み込まれる前でも、レイアウトがガタッとずれないようにする - 見た目やデザインは今のまま - 変更後の index.html の全文を出してください
ひとことまずは「TinyPNGで軽くする」だけで十分です。スマホで開いて「すっと出るな」と感じればOK。それでもまだ重いと感じたら、いちばん大きい画像だけ、もう一度軽くしてみてください。
9
申し込みフォームを埋め込む
こんなとき
本編で作ったLPは、いちばん下に「申し込みボタン」が1つあります。でも、押したらどこに飛ぶか（リンク先）は、まだ決めていません。まずは行き先を設定し、進みたい人はフォームを埋め込みます。
ステップ1：ボタンの行き先を決める（まずはこれだけでOK）
- 公式LINE（友だち追加のURL）
- メール（タップでメールが立ち上がる）
- 電話（スマホでタップすると、そのまま発信）
- Googleフォーム（用意した申し込みフォームのURL）
コピペする
ステップ1：ボタンの行き先を設定する
index.html のいちばん下にある申し込みボタンの「行き先（リンク先）」を設定してください。 - 行き先：（ここに、公式LINEのURL／メールアドレス／電話番号／GoogleフォームのURL のどれかを書く） - ボタンを押したら、その行き先が、スマホでもパソコンでも正しく開くように - 電話番号ならタップで発信、メールアドレスならタップでメールが立ち上がる形に - 見た目やデザインは今のまま - 変更後の index.html の全文を出してください
コピペする
ステップ2：ページの中にGoogleフォームを埋め込む
このLPに、Googleフォームを埋め込みたいです。 index.html を、フォームを埋め込んだ形に作り直してください。 - 埋め込むGoogleフォームのコード：（ここに、コピーした埋め込みコードを貼る） - 入れる位置：いちばん下の申し込みボタンの、すぐ上 - スマホでもパソコンでも、はみ出さずきれいに表示されるように - 残りはすべて今のまま - 変更後の index.html の全文を出してください
ひとことはじめは、ステップ1（ボタンの行き先を公式LINEにする、など）だけで十分です。まず反応を見たいなら、それがいちばん速い。フォームの埋め込みは、本格的に申し込みを受けたくなってからで大丈夫です。
10
WordPressで公開する
こんなとき
Netlifyではなく、自分が持っているWordPressのサイトに、このLPを載せたい。
手順は3ステップ
- WordPressの管理画面 →「メディア」→ 画像（01〜11。08は08a・08bの2枚）をアップロード → それぞれの画像URLをコピー
- 「固定ページ」→「新規追加」→ ブロックの追加で「カスタムHTML」を選ぶ
- 下のプロンプトで作ってもらったコードを貼り付け、画像URLを差し替えて「公開」
コピペする
このLPを、WordPressの「カスタムHTML」ブロックにそのまま貼れる形に作り直してください。 - デザイン（中央600px・ボタン固定など）は今のまま - <style> も同じブロックに収まるよう、ひとつにまとめる - 画像は、あとで自分のメディアURLに差し替えられるよう、 【01の画像URLをここに】…【11の画像URLをここに】と、分かりやすく空けておく（08は08a・08bの2枚） - はじめての人向けに、貼り付け手順も3ステップで添えてください
ひとことテーマによっては、ページの上下にヘッダーやメニューが出ることがあります。すっきり見せたいときは、固定ページの「テンプレート」で〈全幅〉や〈空白〉が選べないか探してみてください。
うまくいかないところや「こういうことはできる？」という相談は、公式LINEからお気軽に。
※この特典の再配布はご遠慮ください。