ポップアップとは？種類・用途とマーケティングでの活用方法を解説

ポップアップとは？

ポップアップ（pop-up）は「飛び出す」という意味の英語で、本記事ではWebページの閲覧中に画面上へ重ねて表示する案内やフォームの総称です。主にクーポンやキャンペーン、会員登録の案内などに使われ、ツールによってはページビュー数や一定時間の経過、ページを離れようとする動きなどを表示条件に設定できます。なお、店舗の期間限定出店を指す「ポップアップストア」とは別の意味です。

ポップアップとモーダル・ダイアログの違い

似た用語に「ダイアログ」と「モーダル」があります。W3Cの定義では、ダイアログは主画面などの上に重ねて表示されるウィンドウで、モーダルダイアログ（モーダル）の表示中は、その外側のコンテンツを操作できません。

ポップアップには、背後のページを操作できるものと、操作できないものがあります。このうち、表示中に背後のページを操作できないタイプがモーダルにあたります。

参考：W3C WAI「Dialog (Modal) Pattern」

ブラウザのポップアップをブロックするには？

Webサイトを開いたときに別のウィンドウやタブが自動で表示される場合は、ブラウザの設定からブロックできます。

Chromeでは、必要なポップアップまで止まった場合、アドレスバーのブロックアイコンからそのサイトだけ許可できます。Mac版Safariでは、Webサイトごとに許可・ブロックの設定が可能です。iPhoneでは、「ポップアップをブロック」のオン・オフで切り替えます。

一方、ページ内に重ねて表示するバナーやモーダルは、ブラウザの設定で消えない場合があります。サイト運用の担当者は、ブラウザが制御するポップアップと、サイト側で表示するポップアップの違いを押さえておきましょう。

参考：Google Chrome ヘルプ「Chrome でポップアップをブロックまたは許可する」

参考：Apple サポート「Safariでポップアップ広告やポップアップウインドウをブロックする」

ポップアップの主な用途

主な用途は、キャンペーンの案内、登録や申し込みの案内、入力や操作のサポート、お知らせや注意事項の通知の4つです。

お知らせ・注意事項の通知は、メンテナンスによる停止やサービス内容の変更など、見落とされると利用者が困る情報を目立たせる用途です。ただし、重要度の低い情報までポップアップで出すと、本当に必要な通知が埋もれるおそれがあります。目安として、緊急性や影響の大きい情報に絞り、それ以外は通常のお知らせ欄やバナーで伝えるなど使い分けましょう。

同じ表示でも、出す相手と場面を誤れば逆効果になるため、具体的な設計は後半の活用例で紹介します。

表示形式で分けるポップアップの種類

ポップアップは、画面のどこに、どの大きさで表示するかによっても分けられます。主な表示形式は、次の4つです。

一般的に、中央表示は目に留まりやすい一方で、閲覧を遮る度合いも大きい形式です。スライドインやフローティングバーは画面の一部だけを使うため、本文を読み続けながら案内を確認してもらいやすいとされています。

全画面の表示は、Google 検索セントラルの説明でいう「ページ全体を覆うオーバーレイ」（インタースティシャル）にあたります。Google 検索セントラルは、法律で義務付けられている場合などを除き、インタースティシャルでページ全体を覆わないよう案内しています。また、スマートフォンの小さな画面では、中央表示でも画面の大半を占め、ページ全体を覆う表示に近くなる場合があります。表示形式を選ぶ際の注意点は、後述の「ページ全体を覆うインタースティシャルを避ける」をご覧ください。

表示条件で分けるポップアップの種類

主な表示のきっかけとして、次の4つがあります。きっかけによって、向く場面と注意点が違います。

時間指定型：一定時間の経過後に表示する

時間指定型は、ページを開いてから決めた秒数が過ぎたときに表示する方式です。複数のページに同じ秒数を設定する場合も、本文の長さや利用者の行動が違えば、表示が早すぎるページが生じます。

難しいのは秒数の決め方です。短すぎれば内容を読む前に遮り、長すぎれば読み終えた人がすでに去ったあとになります。アクセス解析でページの平均的な滞在時間を確かめてから、秒数を決めてください。

スクロール型：読み進めた位置に合わせて表示する

スクロール型は、ページ内のスクロール位置を条件にして表示します。たとえば、ページの70％地点に達したときに関連資料を案内する、といった使い方です。

ただし、同じ割合を指定すると、表示されるまでのスクロール量はページの長さに比例して変わります。短いページでは早い段階で条件を満たしてしまうため、ページごとに位置を調整するか、特定の見出しを通過した時点を条件にしましょう。

クリック型：利用者が押したときに表示する

クリック型では、利用者が自分でボタンやリンクを押したときにポップアップが開きます。本人が求めた情報を出すため、閲覧の妨げになりにくくなります。

注意したいのは、押す前の表記と開いた後の中身をそろえることです。「料金の内訳」と書いたボタンから登録フォームが開けば、利用者の信頼を損ないます。

離脱検知型：ページを離れそうなときに表示する

離脱検知型は、ページを去る前に起こりやすい操作を条件にして表示する方式です。パソコンではマウスが画面の外へ向かう動きを使えます。一方、スマートフォンでは同じ操作を捉えられません。滞在時間やスクロール位置を条件にする場合は、離脱を直接検知する方式と区別してください。

表示する内容は、利用者が去る理由に答えるものにします。たとえば送料や納期への不安が原因なら、割引ではなく送料や納期の条件を案内します。割引だけでは、その疑問を解消できないためです。

ポップアップを活用するメリット

ポップアップを使うと、伝えたい情報を画面上で目立たせたり、利用者の状況に合う案内へつないだりできます。導入方法によっては、ページ本文を大きく改修せずに案内内容や表示条件を変更し、利用者の反応を比べることも可能です。

ここでは、ポップアップの活用メリットをいくつかご紹介します。

見落とされやすい情報に気付いてもらえる

キャンペーン情報や送料の条件などを本文中に掲載していても、利用者がその位置まで進まなければ情報は届きません。ポップアップは画面上へ案内を表示できるため、とりわけ伝えたい内容へ注意を向けてもらう用途に使えます。

一方、本文を覆うほど大きく表示すると閲覧の妨げになります。読み終わりや操作の区切りなど、利用者が案内を受け取りやすいタイミングを選び、必要な内容を短く伝えることが大切です。

利用者の状況に合う案内を出せる

条件指定に対応するWeb接客ツールでは、利用者が閲覧しているページや訪問状況に応じて、表示するポップアップを変えられます。たとえば、ブログ記事を読んでいる人にはお役立ち資料のダウンロード、商品ページを見ている人には初回購入のクーポンを表示するといった使い方です。利用者がその場で知りたい内容に合わせて案内できるため、必要な情報へつなぎやすくなります。

効果を測る際に注意したいのは、表示された人数の違いです。たとえば配信対象を狭くすると、クリック数が減ってもクリック率は上がる可能性があります。表示回数に対するクリック率、案内を受けた人が申し込み・購入へ進んだ割合などを追い、「誰に・どの案内を出すと反応がよいのか？」を考えます。

ページ全体を変えずに施策を試せる

ポップアップには、ページ本文を書き換えずに案内を追加できるタイプがあります。本文を修正しなくても、表示の条件や見せ方を変えて反応を比べられるのが利点です。

たとえば、表示までの秒数を5秒と15秒で比べる、同じ案内を時間指定型と離脱検知型で出し分ける、画像ありと文字だけの案内を比べるといった試し方があります。ABテストで結果を比べ、より反応のよい表示方法へ調整していけます。

ポップアップを使うデメリット

「目立つこと」がポップアップのメリットですが、表示方法によってはその特徴が利用者の負担になります。本文を覆う表示、繰り返される案内、追加される外部処理などに注意を払いましょう。

閲覧や操作を妨げる

利用者が本文を読んでいる途中で画面を大きく覆うと、読み進める前にポップアップを閉じる手間がかかります。スマートフォンでは、ポップアップが画面の大半を占めていないか、閉じるボタンが指の届きにくい位置にないかを実機で確かめましょう。

後述の「ポップアップ設置時のSEO・UXの注意点」で解説するとおり、ページ全体を覆う表示はSEOにも影響するおそれがあります。

繰り返し表示で不快感を与える

一度閉じたポップアップが何度も表示されたり、複数の案内が同時に重なったりすると、利用者が本来のコンテンツへ進みにくくなります。

同じ案内が何度も出ると、利用者は案内そのものを煩わしく感じ、サイトの印象を損なうおそれがあります。再表示の条件の決め方は、後述の「不要な再表示を防ぐ条件を決める」をご覧ください。

表示処理がページの負担になる

外部サービスを利用したポップアップでは、追加したJavaScriptや画像などがページの表示性能へ影響する場合があります。第三者のスクリプトは通信や実行処理を増やし、読み込みや操作を遅らせる要因になり得ます。

導入前後でページの表示性能を計測し、低下があれば負荷の大きいスクリプトや画像を特定してください。検索順位は複数の要因で決まるため、速度の変化のみを根拠にSEOへの影響を断定せず、利用者への影響と検索パフォーマンスを継続的に測ります。

ポップアップ設置時のSEO・UXの注意点

ポップアップを設置する際は、本文へのアクセスを妨げないことと、利用者が閉じたり操作したりしやすいことを意識します。

SEOとUXの両面から、次の点を確かめておきましょう。

ページ全体を覆うインタースティシャルを避ける

避けたいのは、ページ全体を覆い、利用者が本文へすぐアクセスできない表示です。Google 検索セントラルでは、インタースティシャルを「ページ全体を覆うオーバーレイ」、ダイアログを「ページの一部のみを覆うオーバーレイ」と説明しています。煩わしいインタースティシャルやダイアログが表示されると、Googleなどの検索エンジンがコンテンツを把握しにくくなり、検索のパフォーマンスが低下する可能性があるとされています。

プロモーションを表示する場合は、画面の一部を占めるバナーなど、本文へのアクセスを妨げにくい形式を検討してください。表示面積に加えて、表示するタイミングや閉じ方も利用者の操作を妨げないように設定します。

参考：Google 検索セントラル「煩わしいインタースティシャルやダイアログを避ける」

案内文とボタンは、利用者に求める行動を1つに絞る

ポップアップの案内文では、見出しで何の案内かを示し、ボタンで押すと何が起きるかを伝えます。行動を促すボタンや文言（CTA）は、「資料をダウンロードする」「クーポンを受け取る」のように、押した後の結果が分かる表現にしましょう。

1つのポップアップに、メール登録と資料請求、問い合わせなど複数の行動を詰め込むと、利用者はどれを選べばよいか迷いやすくなります。一般的には、求める行動を1つに絞り、案内文も短くまとめるほうが、内容を把握してもらいやすいとされています。

あわせて、ボタンの表記と開いた先の内容をそろえることも大切です。クリック型の解説でも触れたとおり、表記と異なる画面が開くと、利用者の信頼を損なうおそれがあります。

メールアドレスなどを入力してもらうポップアップでは、送信ボタンを押す前に目に留まる位置に、利用目的やプライバシーポリシーへのリンクを置きましょう。個人情報保護法では、Webサイトの入力画面などで本人から直接個人情報を取得する場合、原則として、あらかじめ本人に利用目的を明示する必要があります。

参考：個人情報保護委員会「個人情報の保護に関する法律についてのガイドライン（通則編）」

閉じる操作を分かりやすくする

ポップアップには、利用者がすぐ分かる閉じる操作を用意します。スマートフォンの小さな画面で押しやすい位置に配置してください。

モーダルでは、キーボードでも操作できるようにします。W3Cのパターンでは、モーダルを開いた際にフォーカスを内部へ移し、Tabキーによる移動をモーダル内に保ち、Escapeキーで閉じられるようにするのが基本です。閉じるためのボタンを用意し、キーボードで到達できるようにすることも推奨されています。

参考：W3C WAI「Dialog (Modal) Pattern」

不要な再表示を防ぐ条件を決める

一度閉じた案内を短い間隔で繰り返すと、サイト内の操作を妨げる原因になります。利用するツールで再表示条件を設定できる場合は、案内の目的に応じて表示回数や再表示までの期間を決めます。

申し込みや登録を終えた利用者へ同じ案内を出す必要がない場合は、完了後に対象から外せるかも確かめてください。どの利用者に、いつまで案内するのかを決めておくと、不要な表示を減らせます。

申し込みへの影響まで計測する

ポップアップの効果は、表示回数やクリック率だけで決めません。申し込みや問い合わせを目的としている場合は、ポップアップ経由の行動やコンバージョンまで追えるようにします。

あわせて、ページ全体の離脱やコンバージョンの変化も調べておきましょう。ポップアップ単体の反応とページ全体の結果を追うことで、案内を続けるか、内容や表示条件を変えるかを検討しやすくなります。

ポップアップの活用例

ECサイト・BtoBサイト・記事コンテンツでのポップアップの活用例をご紹介します。なお、いずれも一般的な設計例であり、特定企業の成果を表すものではありません。

ECサイトで購入条件を案内する

商品ページやカートで購入を検討している利用者には、送料や配送条件など、購入前に知りたい情報を案内する方法があります。

たとえば「あと1,000円で送料無料」と表示すれば、送料無料になる条件と現在の購入金額との差をその場で把握できます。購入を急かすより、迷いの原因になりやすい条件を分かりやすく伝える使い方です。

実施後は、ポップアップのクリック率に加え、カート追加率や購入完了率、平均購入金額などを追います。案内を表示した利用者が購入まで進んだかを追うと、施策の効果を捉えやすくなります。

BtoBサイトで資料請求へつなぐ

料金ページやサービス紹介まで読み進めた利用者には、さらに詳しい情報をまとめた資料を案内できます。たとえば料金体系が複雑なサービスなら、プランごとの料金や提供範囲をまとめた資料へ誘導する使い方です。

利用者は必要な情報をサイト内で探し回る手間を減らせます。企業側は、サービスへの関心が高まった利用者と資料請求を通じて接点を持てるのが利点です。

実施後は資料請求数に加え、資料請求後の商談件数や商談化率も追います。資料請求で終わらず、その後の商談につながっているかまで把握すると、営業への貢献度を捉えやすくなります。

記事の読了後にメール登録を案内する

記事を最後まで読んだ利用者には、同じテーマの更新情報や関連記事を受け取れるメール登録を案内する方法があります。本文の途中で表示するより、読み終えたタイミングなら記事の閲覧を遮りにくく、次に得られる情報も伝えやすくなります。

たとえばSEOの記事なら、「SEOの最新情報をメールで受け取る」と案内し、登録後に同じテーマの記事を届ける使い方です。

実施後は、登録率と、その後メール経由でサイトへ戻った人の動きを追います。登録数と再訪の両方が分かれば、継続的な接点づくりにつながっているかを判断できます。

ポップアップを作る方法

ポップアップの作り方は、コードで作る、CMSの拡張機能を使う、専用ツールを使うの3通りです。方法によって、必要な知識と公開後の運用の負担が違います。

作る段階の知識に加えて、公開後に誰が表示条件を変更するかも選ぶ基準の1つです。

コードで作成する

自社でコードを書けば、表示の見た目や条件を要件に合わせて設計できます。専用ツールの利用料はかからない一方、開発と保守には費用や工数が必要です。表示速度への影響は実装によるため、導入前後で測ります。

文言・条件を誰が変更できるかは、更新画面の有無や編集権限、公開手順に左右されます。社内の開発体制と、公開後にどの程度の頻度で案内を変えるかを踏まえて選んでください。

CMSの拡張機能で作成する

WordPressなどのCMSでは、対応する拡張機能から設置できる場合があります。管理画面で文言を更新できるか、掲載中のテーマや他の拡張機能と併用できるかを導入前に調べてください。

出し分けの条件と効果測定の範囲は、拡張機能によって違います。訪問回数や流入元での出し分け、申し込みまでの計測が必要なら、その機能を備えるか、別の計測方法を用意できるかを確かめます。

専用ツールで作成する

専用ツールには、出し分けの条件設定や効果測定に対応する製品があります。導入前に想定する表示条件を機能一覧と照合し、申し込みまで計測できるか、公開作業を誰が担うかを販売元へ尋ねてください。

費用は、初期費用と継続利用料を合わせて、試したい規模に見合うかで判断します。当サイトに掲載しているポップアップのサービス一覧から、各製品の機能や料金を比べてみてください。

ポップアップについてよくある質問

ポップアップを導入する際は、言葉の意味やSEOへの影響、表示頻度、設置方法やツールの違い、選び方で迷うことがあります。ここでは、運用担当者が押さえておきたい6つの疑問を取り上げます。

ポップアップ広告とは？

ポップアップ広告は、Webページを開いたときなどに、別のウィンドウやタブとして自動で開く広告を指すことが多い言葉です。主にこうした別ウィンドウで開く表示が、ブラウザの設定によるブロックの対象になります。一方、本記事で扱うポップアップは、企業が自社サイトのページ内に重ねて表示する案内で、ブラウザの設定では止まらない場合があります。

ポップアップはSEOに影響する？

表示方法によっては影響する可能性があります。本文へのアクセスを妨げるページ全体を覆う表示は避け、画面の一部を使うバナーなど、本文を読み続けられる表示を選びましょう。詳しくは「ページ全体を覆うインタースティシャルを避ける」で解説しています。

ポップアップの表示頻度はどのくらいがよい？

一律の基準はありません。案内の目的や利用者の反応によって、適した頻度は変わります。一度閉じた人に再び表示するまでの期間を決め、表示回数やクリック率、ページ全体の離脱の変化を追いながら調整します。

ポップアップツールを使えばコードを書かずに設置できる？

管理画面からポップアップを作成・更新できるツールなら、公開後はコードを書かずに運用できる場合があります。

ただし、導入時にタグやスクリプトの設置が必要な製品もあります。初期設定に開発担当者が必要か、公開後はマーケティング担当者だけで更新できるかを契約前に確かめてください。

Web接客ツールとポップアップツールは何が違う？

主な違いは、扱える接客機能の範囲です。ポップアップの作成・配信を中心とするツールもあれば、チャットなど複数の接客機能を備えるWeb接客ツールもあります。

ポップアップツールは何を基準に選ぶ？

自社で実施したいポップアップを作成・運用できるかを基準に選びます。表示条件、管理画面で変更できる範囲、効果測定、料金、サポート内容などは製品によって異なります。

具体的な製品を比べる際は、当サイトに掲載しているポップアップのサービス一覧を参考に、自社の運用に合うツールを探してみてください。

まとめ

ポップアップを活用する際は、誰に、どの場面で、何を伝えるかを決めることが重要です。本文を大きく覆わない表示にし、閉じ方や再表示の条件にも配慮して、利用者の閲覧や操作を妨げないようにしましょう。

公開後は、クリック率に加えて申し込みや問い合わせ、ページ全体の離脱なども追い、内容や表示条件を調整します。継続的に施策を試したい場合は、必要な表示条件や計測機能を備えたポップアップツールの導入も検討してみてください。