Webサイトのポップアップの作り方 | AIを活用しCVRを改善
クリエイティブ制作
「サイトのCVRをもっと上げたいけど、コーディングはできない」
「ポップアップウィンドウを出したいが、エンジニアを巻き込むほどの工数は取れない」
と感じているWeb担当者やマーケターの方は多いのではないでしょうか。
CVR改善の施策はコンテンツ改善やUI変更が中心になりがちですが、実はポップアップバナーひとつ追加するだけで、既存のページからコンバージョン導線をわかりやすくする仕組みが作れます。
本記事では、LLMOコンサルティングページのCVRをさらに改善するために、Claudeを活用してポップアップバナーを設計・実装した実践例を紹介します。コーディングの知識がなくても、AIとのやり取りだけで完結できます。
目次
そもそもWebサイトのポップアップ（モーダル）とは？
Webサイトのポップアップとは、ページ閲覧中に画面上に重なって表示される小さなウィンドウのことです。モーダルやポップアップウィンドウとも呼ばれます。
細かい定義でいうと、モーダルは画面全体をオーバーレイして背後の操作を無効化するもの、ポップアップは画面の一部（右下など）に浮かぶ形で表示されるものを指すことが多いです。
ただ実務上は混同されることがほとんどのため、本記事ではまとめて「ポップアップ」と表記します。
CVR改善の手段としてなぜ有効なのか
ポップアップがCVRに効く理由はシンプルで、読み手がページを離脱する前に接触できるからです。
どれだけ良いコンテンツを用意しても、読者は必ずしもCTA（意図した行動へ促す導線）までスクロールするわけではありません。途中離脱が多いページほど、ポップアップの効果が出やすい傾向があります。
また、訴求内容やタイミングを調整しやすい点もメリットと言えます。スクロール量・滞在時間・デバイスなどの条件を設定できるため、適切なタイミングで適切な読者に表示させることができます。
ポップアップブロックへの配慮とUX設計の基本
一方で、ポップアップには「邪魔」だと感じられるリスクもあります。
ブラウザのポップアップブロック機能（ポップアップ許可設定）や、読者が×ボタンをすぐ閉じる行動は、設計が甘いと起きやすいです。
UX（ユーザーの利便性）上の基本的な配慮として、以下の3点を押さえておきましょう。
- 表示タイミングを遅らせる
ページを開いた瞬間ではなく、一定スクロール後または数秒後に表示する - 閉じやすくする
×ボタンを大きく、わかりやすい位置に置く - 再表示を抑制する
一度閉じたらセッション内では再表示しない
これらを守るだけで、読者の離脱リスクを下げながらCVRへの貢献を狙えます。
今回のポップアップ実装の背景と目的
対象ページ LLMOコンサルティングLP
今回ポップアップを設置したのは、自社のLLMOコンサルティングサービスの紹介ページです。
SEO対策や記事リライトなどのオウンドメディア施策でページへの流入は一定数、お問い合わせ数を確保できていましたが、「読んで終わり」の訪問者も一定数おり、問い合わせへのコンバージョン率に課題がありました。
課題 CVRをさらに改善したい
ページ内のコピー改善やCTA配置の見直しといった施策は既にいくつか実施済みでした。
次の一手として検討したのが、ページを離脱する前に接触できるポップアップバナーの設置です。
「Claudeとのやり取りだけで実装まで完結できるのか」という検証も兼ねて、ランニングコストがかかるツールやエンジニアへの依頼なしで進めることにしました。
方針 訴求の設計からコード生成まで、Claudeと一緒に完結させる
実装の前に、訴求の方向性を決める必要があります。
ここを曖昧なままAIに投げると、出力もぼやけます。
今回は「AIに引用されていない危機感を訴求し、問い合わせに誘導する」という方針を先に固めてからClaudeとのやり取りを始めました。
ClaudeにポップアップのWebサイト表示サンプルを作ってもらう
まず訴求軸の方向性を整理する
Claudeに最初から「バナーを作って」と投げるのではなく、まず訴求の軸を整理することから始めました。Claudeに「3パターンの構成案を出して」と依頼したところ、以下の3軸が提案されました。
| パターン | 訴求の方向 | 向いているケース |
| 緊急訴求型 | 「AIに引用されていない危機感・損失」 | CVR直結のインパクトが欲しい場合 |
| 信頼構築型 | 「資料ダウンロードなど低摩擦な入口」 | リード数を増やしたい場合 |
| キャンペーン型 | 「初回限定・無料診断」で背中を押す | 金額提示後の離脱を防ぎたい場合 |
今回のページは料金テーブルがあり、金額を見て迷っている読者が離脱しやすいと判断。キャンペーン型をベースに、緊急訴求型の要素も盛り込む方針を選びました。
Claudeとのやり取りの流れ
方針を固めたうえで、以下のようにClaudeへ依頼しました。
▼ Claudeへのプロンプト例
キャンペーン型のバナーで進めたい。
訴求は「AIに引用されていない危機感」を課題提起して。
CTAは問い合わせ（相談）への導線をわかりやすくしたい。
Claudeは「何を一番前面に出したいか」「CTAのゴールはどちらか」を確認してきました。この確認ステップがあることで、出力の精度が上がります。
最終的に採用した訴求の方向性は以下の通りです。
- ヘッドコピー：「サービスや商品の比較検討は手間です。だからこそ生成AIを使う人が増えています。」
- 悩みリスト：読者が「これ自分だ」と思える課題を3つ並べる
- CTAテキスト：「無料で診断してもらう」（押しつけ感を排除した受け身の語尾）
出力されたサンプルを見ながらブラッシュアップする
Claudeが出力したサンプルを実際に読んで、気になる点を言語化しながら修正を繰り返しました。
このとき、「なんか違う」と漠然と戻すのではなく、①何が問題か、②なぜそう感じるか、③どう変えたいか の3点を整理してClaudeに渡すことで、修正精度が大きく変わります。
例えば今回は「ヘッドラインが重くて読み手の手が止まる」と感じたため、こう整理しました。
- ①問題：「競合は今、AIに選ばれています」という書き出しが主語を他社に向けており、自分ごと化しにくい
- ②理由：読者が自分の課題として捉える前に、競合の話が来るため距離を感じる
- ③改善方針：読者自身の行動変化（生成AIで検索する人が増えている）を起点にする
この整理を渡したところ、Claudeは訴求の起点を競合から読者自身の環境変化に切り替えた文章を出力してきました。
サイトのポップアップ作り方と、デザインの詰め方
コピーの決め方
ポップアップのコピーは3層構造で考えると整理しやすいです。
- ヘッドコピー：読者の状況変化を描写する一文（共感・問題提起）
- 悩みリスト：読者が「これ自分だ」と感じる課題を短文で3つ
- CTAテキスト：行動のハードルを下げる言葉（「申し込む」より「確認する・診断してもらう」）
今回は以下の構成に落ち着きました。
- ヘッドコピー：「サービスや商品の比較検討は手間です。だからこそ生成AIを使う人が増えています。」
- 悩みリスト：①自社がAIの回答に登場しているか確認できていない ②SEO対策はしているのにAIに引用されない ③競合がAI検索で推薦されているのを見かける
- CTAテキスト：「無料で診断してもらう →」
既存サイトのトンマナに合わせる方法
「ポップアップだけ全体感から浮いて見える」という失敗はよくあります。回避するために、Claudeにサイトのページを読み込ませてトンマナを確認してもらいました。
対象ページのURLを渡して「このページのトンマナに合わせてバナーのデザインを作ってほしい」と依頼。そうすることで、Claudeはページのベースカラー・アクセントカラー・CTAボタンの色を読み取り、それに揃えた配色でバナーを生成することができました。
また、フォントについては「font-familyの指定をすべて外して、サイトのCSSを継承させる」という方法を提案してもらいました。
WordPressの場合、テーマのCSSがページ全体に読み込まれているため、バナー側で指定しなければ自動的にサイト本文と同じ字体になります。
注意書き・条件の入れ方
無料診断には一定の条件があるため、注意書きをバナー内に入れることにしました。
ここでのポイントは「くどくならないこと」です。
最初は「初回無料」バッジ・「最短3営業日でご連絡」・注意書きの3点を並べていましたが、Claudeと相談のうえ不要な要素を削除し、注意書き1行だけにシンプル化しました。
実装コードの生成とWordPressへの設置方法
ClaudeにHTMLコードを出力させる
デザインと訴求が固まったところで、Claudeに「実装用のHTMLコードに落とし込んで」と依頼しました。動作仕様として以下を指定しています。
- ページを400pxスクロール、または3秒経過でスライドイン表示
- PCのみ表示（768px以下は非表示）
- 右下固定表示（position: fixed）
- ×ボタンは大きく、ホバーで拡大するアニメーション付き
- 閉じたらセッション中は再表示しない（sessionStorageを使用）
これらを口頭で指定するだけで、Claudeが対応したコードを生成してくれます。
ポップアップブロックへの配慮
ブラウザのポップアップブロック（ポップアップ許可）の設定が問題になるケースがありますが、今回の実装はJavaScriptで動作するインページバナーのため、ブラウザのポップアップブロックとは別の仕組みです。ブロックされる心配はありません。
また、UXへの配慮として「一度閉じたらセッション中は再表示しない」仕様にしています。何度も出て読者をイライラさせない、という基本的な設計を忘れずに。
WordPressへの設置方法（3ステップ）
WordPressテンプレートへの実装は、Claudeが生成したPHPスニペットを1箇所に貼るだけで完結します。
・STEP 1 対象のPHPテンプレートファイルを開く（例：page-llmo-consulting.php）
・STEP 2 <?php get_footer(); ?> の直前に、Claudeが生成したスニペットを丸ごと貼り付ける
・STEP 3 保存してページを確認する
▼ 貼り付け位置のイメージ
<?php endwhile; endif; ?>
</main>
<?php /* ↓ここに貼る */ ?>
<!-- Claudeが生成したスニペット -->
<?php get_footer(); ?>今回のポップアップの最終仕様
以下が今回実装したポップアップバナーのHTMLコードです。<?php get_footer(); ?> の直前に貼り付けるだけで動作します。
以下ページから実際に実装したポップアップも確認いただけます。
https://dgtrends.com/service/seo/llmo-consulting
▼ 実装コード（全文）
<!-- ① </head>の前に貼る -->
<style>
#llmo-popup{position:fixed;bottom:32px;right:32px;width:360px;
background:#fff8f5;border:1px solid #f0c0a8;border-radius:14px;
overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.14);z-index:9999;
opacity:0;transform:translateY(20px);pointer-events:none;
transition:opacity .4s ease,transform .4s ease}
#llmo-popup.is-visible{opacity:1;transform:translateY(0);pointer-events:all}
#llmo-popup.is-hiding{opacity:0;transform:translateY(16px);pointer-events:none}
@media(max-width:768px){#llmo-popup{display:none}}
.lp-bar{background:#c0392b;padding:8px 12px 8px 16px;
display:flex;align-items:center;justify-content:space-between}
.lp-bar span{font-size:11px;font-weight:600;color:#fff;letter-spacing:.08em}
.lp-x{width:26px;height:26px;background:rgba(255,255,255,.2);
border:1.5px solid rgba(255,255,255,.5);border-radius:50%;color:#fff;
font-size:14px;font-weight:700;cursor:pointer;display:flex;
align-items:center;justify-content:center;
transition:background .2s,transform .15s;flex-shrink:0}
.lp-x:hover{background:rgba(255,255,255,.38);transform:scale(1.12)}
.lp-body{padding:16px 18px}
.lp-sub{font-size:15px;font-weight:700;color:#2c1008;
margin:0 0 14px;line-height:1.65}
.lp-sub em{font-style:normal;color:#c0392b;border-bottom:2px solid #f0c0a8}
.lp-div{height:.5px;background:#f0c0a8;margin:0 0 10px}
.lp-cl{font-size:10px;font-weight:600;color:#c0392b;
letter-spacing:.08em;margin:0 0 7px}
.lp-list{list-style:none;padding:0;margin:0 0 14px;
display:flex;flex-direction:column;gap:5px}
.lp-list li{font-size:11px;color:#5a2808;display:flex;
align-items:flex-start;gap:7px;background:#fff;
border:.5px solid #f0c0a8;border-radius:6px;
padding:6px 9px;line-height:1.5}
.lp-cta{display:block!important;width:100%!important;
background:#c0392b!important;color:#fff!important;
border:none!important;border-radius:6px!important;padding:13px!important;
font-size:14px!important;font-weight:600!important;cursor:pointer!important;
text-align:center!important;text-decoration:none!important;
box-sizing:border-box!important;
transition:background .25s,transform .15s!important}
.lp-cta:hover{background:#96281b!important;transform:translateY(-2px)!important}
.lp-note{margin-top:9px;font-size:10px;color:#b07850;line-height:1.7}
</style>
<!-- ② </body>の前に貼る -->
<div id="llmo-popup">
<div class="lp-bar">
<span>初回限定・無料診断</span>
<button class="lp-x" id="llmo-close">✕</button>
</div>
<div class="lp-body">
<p class="lp-sub">サービスや商品の比較検討は手間です。<br>
だからこそ<em>生成AIを使う人が増えています。</em></p>
<div class="lp-div"></div>
<p class="lp-cl">こんなお悩みはありませんか？</p>
<ul class="lp-list">
<li>自社がAIの回答に登場しているか確認できていない</li>
<li>SEO対策はしているのにAIに引用されない</li>
<li>競合がAI検索で推薦されているのを見かける</li>
</ul>
<p class="lp-cl2">まずは現状を把握するところから</p>
<a href="https://dgtrends.com/contact/" class="lp-cta">
無料で診断してもらう →
</a>
<p class="lp-note">※無料診断のご提供には一定の条件がございます。</p>
</div>
</div>
<script>
(function(){
var p=document.getElementById('llmo-popup'),shown=false;
if(sessionStorage.getItem('llmo-closed'))return;
function show(){if(shown)return;shown=true;p.classList.add('is-visible')}
window.addEventListener('scroll',function(){if(window.scrollY>400)show()});
setTimeout(show,3000);
document.getElementById('llmo-close').addEventListener('click',function(){
p.classList.remove('is-visible');p.classList.add('is-hiding');
sessionStorage.setItem('llmo-closed','1');
});
})();
</script>カスタマイズポイント
| 変更箇所 | 場所（コード内） | 変更方法 |
| CTAリンク先 | href=”https://dgtrends.com/contact/” | 自社のお問い合わせページURLに変更 |
| バー・ボタンの色 | #c0392b | 自社サイトのアクセントカラーに変更 |
| 悩みリストの文言 | <li> の中身3行 | 自社の読者像に合わせて変更 |
| ポップアップの幅 | width:360px | 画面サイズに応じて調整 |
まとめ
今回はCVRをさらに改善する手段として、ClaudeでWebサイトのポップアップバナーを設計・実装した実践例を紹介しました。
重要なのは「AIに投げる前に、訴求の方向性を自分で決めること」です。
今回で言えば「生成AI検索の普及を背景に、AIに引用されていない危機感を課題提起し、問い合わせに誘導する」という方針を先に固めたことで、Claudeとのやり取りが一貫して進みました。
また、デザインの詰め方やコードの出力・修正も、「①何が問題か・②なぜそう感じるか・③どう変えたいか」の3点を整理してClaudeに渡すことで、出力の質が大きく変わります。
エンジニアへの依頼なしに、担当者自身でポップアップバナーを実装できる時代になっています。まずは今回のコードをベースに、自社サービスページへの設置を試してみてください。
