ウェブサイト用ポップアップテンプレート：目的別にすぐ使える16のデザイン

ポップアップの価値は、表示されるタイミングで決まります。デザインも大切ですが、コンバージョンにつながるか煩わしがられるかを分けるのは、ターゲティング、タイミング、そして形式がメッセージに合っているかどうかです——配送のお知らせには細いバー、新商品の発表には全画面のオーバーレイ、というように。

ここでは、16のウェブサイト用ポップアップテンプレートを紹介します。バー、モーダル、オーバーレイ、トースト、ゲーム型のインタラクション、プログレス表示まで、よく使われる形式を網羅しています。どれもそのまま使えるテンプレートで、コピー、色、ターゲティング、表示頻度をコードなしで設定できます。それぞれ詳しい設定ガイドにリンクしています。

よいポップアップデザインの条件

テンプレートの前に、行動してもらえるポップアップと閉じられるポップアップを分ける基準を押さえておきましょう：

• 役割は1つ。メールアドレスを求め、セールを告知し、新機能を案内するポップアップは、どれも達成できません。
• 形式はメッセージの重さに合わせる。小さなメッセージには小さな面積を。全画面のオーバーレイは、本当に中断に値する場面のために取っておきましょう。
• 閉じるボタンを見えるように。閉じにくいポップアップは、離脱を不満に変えてしまい、モバイルではGoogleのペナルティのリスクもあります。
• 表示頻度の制限。同じメッセージの2回目の表示は1回目より効果が落ち、5回目はむしろ逆効果です。
• タイミングよりターゲティング。「5秒後に表示」は大雑把なルールです。「リピーターで、カートが$50以上、このオファーをまだ見ていない」なら、表示する理由になります。

バー：常に表示される、邪魔にならないメッセージ

バーはページの上部または下部に表示され、コンテンツを隠しません——決断を迫るのではなく、見えたままにしておきたい内容に最適です。

お知らせバー——サイト全体に向けたメッセージ（送料のオファー、セール、商品ニュース、規約のお知らせなど）のための、全幅の細いバー。上部か下部か、固定か静的かを選べます。

ローテーションお知らせバー——同じバーで最大5つのメッセージを切り替えて表示。メッセージごとにリンクを設定でき、タイマー、ドットナビゲーション、フェードまたはスライドのトランジションに対応します。1つの枠を複数の内容が取り合うときに便利です。

送料無料ステータスバー——訪問者のプロファイルから値を読み取るライブのプログレスバー——「送料無料まであと$65」——で、カートが増えるにつれて伸びていきます。

段階式ステータスバー——ロイヤルティ版。現在のランク、次のランクへの進捗、そこで解放される特典を、ポイント、購入金額、注文数に基づいて表示します。

ポップアップとモーダル：焦点を絞った依頼

センターモーダル——暗いオーバーレイの上に中央表示されるポップアップ。1つのテンプレートに4つの画像レイアウトがあり、モバイルでの画像の位置も調整できます。明確なオファーを1つ出すときの定番です。

全画面オーバーレイ——ビューポート全体を覆うウェルカム画面。背景は単色、グラデーション、全面画像から選べます。新商品の発表、季節のキャンペーン、初回訪問時の歓迎に。

コーナートースト——画像、見出し、短いメッセージ、CTAを組み合わせたコンパクトな通知カード。押しつけがましくないので、ソーシャルプルーフ、控えめなプロモーション、機能の案内に最適です。

クーポンポップアップ——クリックでコピー、クリックで表示、常に表示から選べるクーポンコードに、画像、見出し、CTA、注意書きを添えられます。

リード獲得フォーム——訪問者の情報を収集してPersonyzeのプロファイルに書き込むため、フォローアップやセグメント化、次に表示する内容のパーソナライズができます。横並びまたは縦積みのレイアウト。

インタラクティブ型・ゲーム型の形式

これらは訪問者に何かをしてもらう形式です。エンゲージメントははるかに高くなりますが、使いすぎたときの代償も大きくなります。

スピンホイール——当選確率を調整できるゲーム感覚の抽選ホイール。縦積みまたは全画面のレイアウトで表示できます。各訪問者の当選内容はプロファイルに保存され、あとからターゲティングに使えます。

レコメンドクイズ——いくつかの質問に答えると、各回答が結果グループに投票し、最後にその人に合ったおすすめとCTAが表示されます。

どちらも詳しくは ゲーミフィケーション・マーケティングのガイドをご覧ください。

スピンホイールを詳しく

インタラクティブなテンプレートの中でも、スピンホイールはしっかり説明する価値があります——割引が手渡されたものではなく勝ち取ったものに感じられるためコンバージョンにつながりやすく、正しく設定すれば、クーポンの利用以上に多くの情報を集められるからです。

セグメントは4〜8個設定し、それぞれにラベル、色、当選メッセージ、クーポンコードを持たせます。訪問者がクリックするとホイールが減速し、当選したセグメントのメッセージが紙吹雪や光とともに表示されます。

• 当選確率はあなたが決める。各セグメントには、相対的な当選確率の重みがあります——35／25／20／12／5という重みは、そのままそのパーセンテージになります。大きな賞品はまれに、小さな賞品はよく当たるようにしましょう。
• ドキドキ感のためにハズレ枠を加える。セグメントにもう一度のようなラベルを付けてクーポンを空欄にすれば、ハズレ枠として扱われます。
• 再スピンをコントロールする。 試行モードは、シングル（1回で結果確定）、リトライ（ハズレ枠のときだけ当たるまで再度回せる）、マルチ（決まった回数だけ回せる）から選べます。
• インラインか全画面か。ページ内に埋め込むことも、暗くしたオーバーレイの中央に表示することもでき、どちらでも確率は同じです。
• 結果をプロファイルに保存する。多くの抽選ホイールにない部分です——当選した賞品とコードが訪問者のプロファイルに書き込まれるため、送料無料が当たったのに注文していない人へのフォローアップや、すでに受け取った人の除外ができます。

メールアドレスが欲しいときは、フォーム付きバージョン

標準のホイールは、あえて回す前にフォームを置きません——回すこと自体が報酬なので、ハードルが低く保たれます。遊びよりリードが重要な場合は、 フォーム付きスピンホイールがホイールの前にフォームを置きます。

ホイールは最初の瞬間から見えていますが、グレーアウトされて南京錠が付いているため、訪問者はメールアドレスと引き換えに何がもらえるのかを正確に把握できます。送信するとフォームがお礼メッセージに置き換わり、ホイールのロックが解除されて回ります——そしてメールアドレスと当選した賞品が同じプロファイルに記録されます。1つ注意点があります。メールアドレスで「支払った」人にとってハズレは痛いものなので、ハズレ枠はまれにするか、すべての枠で何かがもらえるようにしましょう。

詳しい設定方法は スピンホイール テンプレートのドキュメント、より詳しい解説は 抽選ホイールの実践ガイドをご覧ください。

進捗、ステータス、緊急性

ステータスカード——進捗の仕組みをカード形式にしたもの。訪問者が送料無料や特典にどれだけ近いかを、ライブのプロファイル値に基づいて、中央のカードまたはポップアップで表示します。

段階式ステータスカード——同じカードでロイヤルティのランク進捗を表示。ブロンズ、シルバー、プラチナと、次のランクまでの差を示します。

カウントダウンタイマー テンプレート——カード、バー、イベントバーの3種類が1つのタイマーエンジンを共有。セールの終了、値上げ、イベントの開始に。

イベント進捗カウントダウン——数字だけに頼らず、日付が近づくにつれて伸びるバーと登録ボタンを備えています。ウェビナー、新商品の発表、ライブセッション向けです。

ページ内：ヒーロー枠

ヒーロースライダー——最大4枚のスライドを切り替えるヒーローバナー。スライドごとに画像、見出し、サブテキスト、ボタンを設定でき、テキストは画像の横にも、全面背景の上にも配置できます。

目的別のポップアップ例

得たい成果が決まっているなら、これが形式を選ぶ最短ルートです：

• メールリストを増やす——リード獲得フォーム、当選後にアドレスを尋ねるスピンホイール、または回す前に尋ねる フォーム付きスピンホイール。
• 客単価を上げる——送料無料ステータスバーまたはステータスカード。
• プロモーションを動かす——クーポンポップアップ。締め切りが本物ならカウントダウンタイマーも。
• サイト全体に告知する——お知らせバー。メッセージが複数あるならローテーション版。
• 訪問者の選択を手伝う——レコメンドクイズ。
• イベント登録を増やす——イベント進捗カウントダウン。
• つなぎとめて報いる——段階式ステータスバーまたはカード。

テンプレートを選ぶ必要すらありません

ここまでの内容は、ライブラリを見て選ぶことを前提にしています。もっと速い方法もあります：欲しいポップアップを説明し、AIエージェントに作ってもらうことです。そうすれば、テンプレートを選んでスタイルを調整する作業が、すでに完成したものを確認する作業に変わります。

単なるテンプレート生成ツールではない理由が3つあります：

• 実際のサイトからスタイルを取り込む。作成の前に、エージェントはページをスキャンして、ブランドカラー、フォント、ボタンのスタイル、コピーのトーンを読み取ります。仕上がりはテンプレートを上に貼り付けたものではなく、自社サイトそのものに見え——訪問者には生成されたものだと分かりません。
• 普通の言葉が本物のターゲティングになる。「料金ページに到達したモバイルの初回訪問者」と言えば、それを実際のターゲティングルールにコンパイルし、確認できるようにコンパイル後のルールを読み上げてくれます。
• 本番のトラフィックには一切届かない。作成したものはすべてステージングに作られます——ステージング用IPからアクセスした訪問者にしか表示されません。実際のページでプレビューし、公開は自分で行います。

実際の使い方

どちらの側からでも始められます。「初回訪問者向けのウェルカムオファーのポップアップを作って」と頼めば、ブランドに合った完成済みのポップアップが、ターゲティング付きで出来上がります。あるいは上のライブラリからテンプレートを選び、オファーはそのままにエージェントにブランドに合わせてもらうこともできます。どちらの場合も、「バーにして」「別の色を試して」「リピーターも対象に」と会話で調整でき、CSSパネルを開く必要はありません。

逆方向にも使えます。「今週は何を改善すべき？」と尋ねれば、ページやキャンペーン全体の改善機会を優先度順に、ワンタップのアクション付きで返してくれます。数百ページあるサイトでは、どこにポップアップを追加する価値があるかを知ることが、たいてい難しいほうの半分です。

エージェントはPersonyzeのパネル内で動作します（詳しくはAIパーソナライゼーション・エージェントをご覧ください）。同じ機能には ClaudeやChatGPTからもアクセスできるので、普段使っているアシスタントから作業することもできます。詳しくは AIマーケティング・エージェントのガイドをご覧ください。

Claudeで作業したい場合は、ディレクトリからコネクタをインストールしてください。 ClaudeディレクトリのPersonyzeをご覧ください。

ポップアップのベストプラクティス

• モバイルに配慮する。Googleはモバイルでの押しつけがましいインタースティシャルを、ランキング上の問題として扱います。モバイルではオーバーレイよりバーやトーストのほうが安全です。
• 時間だけでなく、意図をトリガーにする。離脱意図、スクロールの深さ、カート金額、再訪問は、どれも適当な遅延時間より効果的です。
• 行動のあとは表示を止める。すでに登録した人に、登録ポップアップを再び表示すべきではありません。
• デザインより先にオファーをテストする。インセンティブを変えるほうが、ボタンの色を変えるよりはるかにコンバージョンを動かします。
• 結果を保存する。好みを取得して訪問者プロファイルに書き込むポップアップは、キャンペーン終了後も成果を生み続けます。

ポップアップテンプレート：よくある質問

ポップアップはいくつから多すぎますか？

1回の訪問につき有効な依頼は1つ、というのが安全なルールです。常時表示のバーとインタラクティブなポップアップ1つなら、バーは決断を求めないので共存できますが、競合する2つのオーバーレイは互いの効果を打ち消します。

ポップアップはSEOに悪影響がありますか？

モバイルで押しつけがましい場合だけです。バー、トースト、実際のエンゲージメントのあとに表示されるポップアップはペナルティを受けません。詳しくは パーソナライゼーションとSEOをご覧ください。

これらのテンプレートは編集できますか？

はい——どれも出発点です。コピー、色、レイアウト、画像、トリガー、ターゲティングルール、表示頻度はすべて設定でき、さらに踏み込みたい場合は基盤のHTMLとCSSも編集できます。

ポップアップとお知らせバーの違いは何ですか？

ポップアップはページの上に重なり、訪問を中断して決断を求めます。バーはビューポートの端に帯状の領域を確保して邪魔にならないため、単発の依頼よりも継続的なメッセージに向いています。

AIにポップアップを作ってもらえますか？

はい。欲しいものを説明すると、Personyze AIエージェントがまずサイトをスキャンしてブランドカラー、フォント、ボタンのスタイル、トーンを読み取り、ページに合ったものを作成します。自然な言葉のターゲティングは実際のルールにコンパイルされて読み上げられ、すべてステージングに作成されるため、公開するまで本番のトラフィックには影響しません。

スピンホイールは当選内容をどう決めていますか？

4〜8個の各セグメントには相対的な当選確率の重みがあり、重みを合計して実際の確率が決まります。つまり35、25、20、12、5という重みは、そのままそのパーセンテージになります。「もう一度」のようなラベルでクーポンのないセグメントはハズレ枠になります。当選した賞品とコードは、あとでターゲティングに使えるよう訪問者のプロファイルに保存されます。

始める

16のテンプレートはすべて、コードなしで設定・ターゲティングできます。デモを予約、または プランをご覧ください。

どれも話しかけるだけで作れます。詳しくはAIパーソナライゼーション・エージェントをご覧ください。

関連記事

• ゲーミフィケーション・マーケティング——インタラクティブなテンプレートを支える仕掛け。
• スピン・トゥ・ウィンの抽選ホイール——ホイールを詳しく。
• 送料無料バーと段階式ロイヤルティバー——客単価アップの施策。
• ポップアップとバナー——ターゲティングと表示頻度の仕組み。