訪問者がウェブページに滞在する時間は実はそれほど長くなく、平均するとわずか54秒です。しかし、離脱防止ポップアップを活用すれば、もっとウェブページにとどまってもらえるかもしれません。
ウェブサイトの滞在時間が長くなるほど、コンバージョン率も上がります。ウェブサイト上の他のCTA（Call-To-Action）は見落とされてしまっても、離脱防止ポップアップで一部の訪問者を引き止められるでしょう。そうすれば、ウェブページをさらに読み続けたり、メールマガジンに登録したり、あるいは購入に踏み切ってくれる可能性も高まります。
また、新しいリード（見込み客）の創出にかかるコストも増大しています。以前の調査では、60％を超えるマーケティング担当者が過去3年間で顧客獲得費用が増加したと回答しました。
離脱防止ポップアップは、適切なメッセージを適切なタイミングで届けることで、費用対効果に優れたリードジェネレーション（見込み客の創出）ツールとなり、次のような効果をもたらします。
- 訪問者のウェブサイト滞在時間が延びる
- コンバージョン率が上がる
- カート放棄率が下がる
- Eメールの受信登録者数が増える
離脱防止ポップアップとは
離脱防止ポップアップとは、訪問者がウェブサイトを離脱しようとすると画面上に表示されるポップアップです。一般的には、コンテンツや特典などのオファーを提示してウェブサイトに引き止めます。
つまり、訪問者がブラウザーのウィンドウを閉じようとしていることを感知して、訪問者をページにとどまらせたり、理想としてはリードに転換したりするための有益なオファーやメッセージを表示します。
離脱防止ポップアップの仕組み
例えば、オンラインストアで製品一覧のページを見ている訪問者が、そのページから離れようとしてウェブページからカーソルを外すと、クーポンコードや無料トライアルなどのオファーを提示するポップアップが表示され、ページにとどまるよう促します。これにより、訪問者の離脱を防ぎ、CTAを通じてリードへの転換を図ります。
モバイルサイトでの離脱防止ポップアップ
ウェブトラフィックの半分以上（英語）がモバイルデバイスで発生しているにもかかわらず、モバイルでは離脱を検知する確実な方法がありません。離脱防止ポップアップがカーソルの動きを追跡して機能しているのだとしたら、モバイルデバイスではどのように対処したらよいのでしょうか。
モバイルデバイス用のポップアップツールは、さまざまな操作から離脱の予兆を検出しています。モバイルデバイスでウェブサイトを訪問すると、次のような操作を行ったタイミングでポップアップが表示されます。
- ［戻る］ボタンを押す
- ページの一定割合をスクロールする
- 下ではなく上方向にスクロールする
- ブラウザーのタブを切り替える
- 一定時間ページに滞在した
- ページがアイドル状態になる
- JavaScriptが起動する
2016年、ポップアップなどのインタースティシャルに対するGoogle のアプローチが大きな話題を呼びました。同社は、煩わしいインタースティシャルを含むモバイルページのエクスペリエンススコアを下げるようにアップデートすることを発表したのです。
さらに2022年2月のGoogle によるアップデート（英語）で、インタースティシャルはデスクトップのページエクスペリエンスの評価要素にも含まれるようになりました。そのため現在では、訪問者にとって良質な離脱防止ポップアップを作成することが欠かせません。
対処法としては、デスクトップ用とモバイル用に別々の離脱防止ポップアップを作成することがおすすめです。そうすれば、閲覧手段にかかわらずオーディエンスに最高の体験を届けることができます。
離脱防止ポップアップを活用すべき理由
離脱防止ポップアップは、すぐに得られる分かりやすい価値をウェブサイトの訪問者に提示することで、効果を発揮します。
離脱防止ポップアップを的確に活用すれば、訪問者のウェブサイト滞在時間を延ばすことができます。また、適切なウェブページに離脱防止ポップアップを配置し、適切なタイミングで表示させることで、収益拡大に貢献できる可能性もあります。
注意点：離脱防止ポップアップは、訪問者がまだ行動を起こしていない場合にのみ作動させるようにしましょう。間違ったタイミングでポップアップが表示されると、オーディエンスに不快感や機械的な印象を与える恐れがあります。
効果的な離脱防止ポップアップを作成するヒント
ポップアップは、万人に受け入れられているわけではありません。しかし、考え抜いて巧みなポップアップを用意することで、非常に大きな効果が期待できます。
反対に、1つのウェブサイトであまりにも多くのポップアップが表示されたり、設計が悪かったりすると、せっかくのオファーもすぐに迷惑に思われてしまいます。
効果的な離脱防止ポップアップを作るヒントを要素別に見ていきましょう。
コピー
離脱防止ポップアップでは、大胆かつシンプルなメッセージを伝える必要があります。そのため、見出しにインパクトを持たせ、説明は読みやすく簡潔にしましょう。
どうすればポップアップによって訪問者の課題を解決できるか、有益な解決策を提供できるかという視点で考えてください。
CTA
CTAは明確で分かりやすいものにしましょう。動機付けの効果がある言葉やフレーズが鍵となります。また、ブランドに沿った独自のオファーを提示する必要があります。
画像
離脱防止ポップアップに掲載する画像は、オファーに関連するものを選びましょう。また、ターゲットオーディエンスともつながりがある画像でなくてはなりません。注目を集めつつも派手過ぎず、オファーへの注意をそらさない画像が最適です。
デザイン
すっきりしていて、瞬時に内容が伝わる、モバイルデバイスでも見栄えの良いポップアップにしましょう。ウェブサイトのデザインや雰囲気に合わせることも重要です。
また、ユーザーエクスペリエンスも考慮する必要があります。ポップアップがウィンドウいっぱいに広がっても気にならないユーザーもいれば、大きいポップアップはやり過ぎだと感じ、画面の横や下にもっと小さいポップアップが表示されるのを好むユーザーもいます。
テスト
A/Bテストを実行すると、ポップアップの配置やメッセージングの向上に役立ちます。例えば、離脱防止ポップアップを使ってEメールリストをセグメント化するのは良い考えですが、うまく機能させるには時間がかかる場合があります。
営業チームに引き継がれている見込み客や、購入の最終検討に差し掛かった見込み客など、カスタマージャーニーの段階に応じたポップアップが表示されるように設定するには、何度かテストを行う必要があるかもしれません。
離脱防止ポップアップの作成方法
ウェブページにポップアップを追加する最も簡単な方法は、離脱防止ソフトウェアツールを利用することです。
具体例を挙げて、こうしたツールの機能やメリットを紹介していきます。
離脱防止ポップアップツール：HubSpotの離脱防止フォーム
価格：無料ツールはずっと無料、月額5,400円（Starter）、月額96,000円（Professional）、月額384,000円（Enterprise）
HubSpotのポップアップフォームは、ウェブサイトの訪問者が離脱しそうなタイミングで表示できます。
カスタムの離脱防止フォームを表示した後は、お礼のメッセージを表示したり、連絡先を登録してくれた新しいリードにEメールを自動配信したりできます。また、過去の訪問やポップアップフォームへの反応に関するデータに基づいて対象者を絞ることも可能です。
HubSpotでの離脱防止フォームの追加は素早く簡単です。このツールを使うと、メッセージ、テーマ、表示タイミングもカスタマイズできます。
離脱防止ポップアップに対応しているその他のツールとしては、OptinMonster（英語）、Sleeknote（英語）、Informizely（英語）などが市場に提供されています。
ポップアップの作成は、見出しの作成に似ています。シンプルなようですが、良いものを生み出すのは難しくもあります。次のセクションでは、参考になる離脱防止ポップアップの実例をご紹介します（各ページは一部を除き英語です）。
リードジェネレーションの促進における離脱防止ポップアップの優れた活用例
2021年の調査によると、マーケティング担当者の77％以上がEメールのエンゲージメントが増加したと回答しています。ただ、しっかりとした受信登録者リストがなければ、Eメールで顧客と関係を築くことはできません。
ここからは、離脱防止ポップアップを作成する際の参考として、リードジェネレーションにおける離脱防止ポップアップの優れた活用例を紹介します。
Eメールやメールマガジンの受信登録を促す離脱防止ポップアップ
1. PushLiving
注目ポイント：どのようなユーザーを対象としたメールマガジンなのか、登録するとどのようなメリットがあるのかが、分かりやすく記載されています。大きくて目立つ［SUBSCRIBE（登録）］ボタンのおかげで、期待されるアクションが明確になっています。
2. Omsom
注目ポイント：ブランドイメージに沿った、目を引くポップアップが適切なタイミングで表示されます。マーケティングEメール（英語）の受信登録によって、素晴らしい料理や文化に触れたり、創業者からの限定記事を読めたりすることを明確に示しています。
資料を提供する離脱防止ポップアップ
3. ActiveCampaign
注目ポイント：6種類のEメールテンプレートを無料で提供しています。
ActiveCampaignは、役に立つ情報を提供することでターゲットオーディエンスに価値をもたらすと同時に、業界のソートリーダーとしての地位を確立しようとしています。
4. Tim Ferriss
注目ポイント：印象的な見出しとシンプルなダウンロードボタン、有名インフルエンサーTim Ferriss氏の姿が際立つ画像で構成されたこのポップアップからは、Ferriss氏が自身の成功の秘訣を共有してくれるのだろうと想像できます。
コースやレッスンを案内する離脱防止ポップアップ
5. General Assembly
注目ポイント：無料のワークショップへの参加を呼びかけるスマートな見出しで、このポップアップフォームへの入力を促しています。項目は3つだけで、選択肢も限定されているため、すぐに入力できます。
また、ウェブサイトをざっと見ただけではGeneral Assemblyがどのようなトピックを扱っているのか分からなかったとしても、ポップアップの下部にあるチェックボックスの項目を見れば分かるようになっています。
Eメールリストのセグメント化における離脱防止ポップアップの活用例
マーケティング担当者がEメールによる成果を向上させるには、パーソナライズが最適です。既存の受信登録者をセグメント化する（英語）方法は数多くありますが、登録と同時にセグメント化できるとしたら、パーソナライズの機会を先送りする必要はありません。
このセクションでは、リードが受信登録をしたタイミングでセグメント化できる離脱防止ポップアップの例をご紹介します。この方法を取り入れると、登録直後からリードの関心に合わせたEメールコンテンツ（英語）を提供することが可能になります。
「はい／いいえ」式のフォームを使った離脱防止ポップアップ
6. Coursera
注目ポイント：このポップアップは、離脱前に訪問者にある事柄を尋ねるために画面下部に表示されます。それはCourseraのことを知ったきっかけです。率直な言葉で、アンケートの所要時間と内容を簡潔に伝えています。
フィードバックを集める離脱防止ポップアップ
7. Everlane
注目ポイント：割引を提示してEメールの受信登録を促しています。また、興味のあるカテゴリーを尋ねるシンプルな項目を追加することで、登録者が最も購入しそうな商品を紹介するEメールを送信できるようになっています。
8. thredUP
注目ポイント：このウェブサイトを閲覧していると、購入プロセスを支援する数多くのポップアップが表示されます。離脱しようとすると、ウェブサイト体験のパーソナライズ情報を次回の訪問時に引き継げるように新規登録を提案されます。このフォームを使うことで、訪問者から共有された情報を簡単に保存できます。
このポップアップは、ユーザーの邪魔にならず、ショッピングプロセスの自然な流れの一部に感じられます。また、次回のショッピングを容易にする手段にもなっています。
9. HEYMAEVE
注目ポイント：このフォームには、ファッションに詳しい訪問者には慣れ親しんだ言葉が取り入れられています。訪問者が好むスタイルを尋ねると同時に、取り扱っている商品の幅をアピールすることができます。
これは、購入に至らないとしても、リードに好印象を残す顧客体験の一種と言えるでしょう。なぜなら、リードに寄り添った体験だからです。ウェブサイトへの再訪問や、知人等への口コミによる宣伝といった行動につながる可能性があります。
訪問者に合わせたオファーを提示する離脱防止ポップアップ
10. GQ
注目ポイント：訪問者がウェブサイトをどのような流れで閲覧したかを踏まえ、最も関心がありそうなトピックに基づいてオファーを提示しています。例えば、［Recommended（おすすめ）］をクリックしてトレンド情報をざっと読んでいると、この「GQ Daily」のフォームが表示されました。
また、フォームを色分けすることで、選んでほしい選択肢を強調しています。
11. Patagonia
注目ポイント：このポップアップでは、ユーザーをセグメント化していません。しかし、アパレルブランドとしてのサステナビリティーへの取り組みに関する情報を簡潔に提供することで、ユーザーエクスペリエンスを向上させています。このリンクから、価値ある情報が掲載された別のウェブサイトへと潜在顧客を誘導します。
また、元のウェブサイトに戻ればオンラインストアでのショッピングを継続できる（カートの中身はそのまま残っている）ことを伝えて、ユーザーを安心させています。
懸賞や景品を提供する離脱防止ポップアップ
12. JewelScent
注目ポイント：スクラッチくじのポップアップが設置されています。楽しい色使いで、良いことが起こりそうな印象を与えています。参加方法が分かりやすく示されていて、初めての訪問者にとっては予想もしていないようなちょっとした楽しみを提供しています。
13. West Elm
注目ポイント：West Elmのウェブサイトで表示されていたのは、休息とくつろぎをテーマとした懸賞のポップアップです。母の日まで数週間というタイミングもあり、世のお母さんの疲れを癒す景品を用意して期間限定のキャンペーンを実施していました。
チャットの利用を促す離脱防止ポップアップ
14. M.M.LaFleur
注目ポイント：このポップアップは、サイズ選びやスタイリングについてスタイリストがチャットでサポートしていることを示しています。オンラインショッピングでのよくある障壁を想定して、解決方法を提示しているのです。
成約へと導く離脱防止ポップアップの活用例
自社サイトにトラフィックを誘導しようと多くの時間とリソースを費やしても、オンラインストアのショッピングカート放棄率は平均69.82％（英語）にものぼります。
訪問者のほとんどが購入まであとわずかのところに到達していながら、ゴールする直前で離脱しているというのは、受け入れがたい事実かもしれません。
ここからは、自社サイトに呼び寄せられたユーザーをコンバージョンまで引き留める手段として離脱防止ポップアップを活用している主な例を紹介します。
カートの放棄を防ぐ離脱防止ポップアップ
15. Rothy’s
注目ポイント：カートに商品が入っているユーザーがマウスをウェブサイトから外した瞬間に表示することで、カートの放棄を防いでいます。
ショッピングカートに商品が残っていることを知らせるだけでなく、すぐに使える割引を提示して、最も関心があるコンテンツの受信登録を行えるようにしています。
ユーザーの意見やフィードバックを重視する姿勢をアピールできるため、非常に効果的です。
購入時の割引を提示する離脱防止ポップアップ
16. Elaluz
注目ポイント：ランディングページから離脱しようとすると、15％割引のオファーが画面上に表示されます。
クーポンコードは購入行動に影響を与えます。また、この例では、Eメールアドレスの登録が必須となっています。つまり、クーポンコードを獲得するには、すぐにコードを使うかどうかにかかわらず、Eメールアドレスを提供しなくてはなりません。
17. Mochi Kids
注目ポイント：訪問者の興味を引けるよう、楽しい印象のタイポグラフィー、色、グラフィックを使った大胆なデザインになっています。割引を提示するだけでなく、自社の商品が子どもたちにもたらす世界観も示しています。
18. The Sill
注目ポイント：生き生きとした植物の写真と、「Get the dirt」で始まるメッセージ（「土」を意味する”dirt”は「うわさ話」などの意味も持つ）で構成されたこのポップアップは、The Sillのブランドと商品にマッチしています。加えて魅力的な割引も提示されています。
19. CURLS
注目ポイント：効果的なタイミングで現れることに加え、ページ中央という、訪問者が必然的にカーソルを動かさなくてはならない理想的な場所に表示されています。ポップアップ内の「CURLista」という単語は、登録によって、自分と同じくらいヘアスタイルに関心がある人々が集うコミュニティーの一員になれることを表現しています。
20. Skullcandy
注目ポイント：割引と懸賞への応募が抱き合わせになっているところがユニークです。登録すれば20％の割引は確実に受けられますが、特別な自転車が当たるかどうかは分からないため、ワクワクさせる魅力的な内容になっています。
21. Nguyen Coffee Supply
注目ポイント：このポップアップは、Eメールアドレスと引き換えに割引を提供する形式にはなっていません。代わりに、訪問者がウェブサイトを離脱する前に割引を提示するという意図を明確にした上で、割引コードを送信する手段としてEメールアドレスを教えてもらうという流れになっています。
このアプローチにより、メーリングリストへの登録を増やすためではなく、ニーズに応えるためのオファーだという印象を与えられます。
限定オファーを提示する離脱防止ポップアップ
22. Madewell
注目ポイント：分かりやすいイラストや印象的なデザインが使われています。そうした要素が追加されていることで、読みやすく入力しやすいフォームに感じられ、情報が多すぎる印象はありません。左側には、登録のメリットが大まかに説明されているほか、さらなるメリットの可能性も示されています。
23. Mimochai
注目ポイント：ハートが描かれた封筒など、デザインの細部から温かい歓迎の気持ちが伝わってきます。ページ上で目立つデザインではありますが、煩わしさは感じられません。
製品のデモを案内する離脱防止ポップアップ
24. Zendesk
注目ポイント：このポップアップには余計なものが一切ありません。同社製品の全容を1枚のスクリーンショットで端的に紹介し、製品のデモへと誘導しています。オファーによって提供されるものを見出しで示し、続く文章では製品によってどのような課題を解決できるかを説明しています。
Zendeskのダッシュボードが画像で掲載されているため、訪問者は現在使っているダッシュボードと容易に比較できます。あとは下部のボタンをクリックして、デモを申し込むだけです。
切迫感を与えるポップアップ
25. Flamingo
注目ポイント：同社のイベントに参加しようと考えている訪問者に対して、早期に参加登録を済ませると参加費が割引になるという有益な情報を提供しています。期限が明記されているほか、文字とデザインの組み合わせにより、早めに登録した場合の割引額を正確に伝えています。
26. Codeacademy
注目ポイント：さまざまな文字サイズを使うことで、最も重要な読むべき情報を強調しています。最初に期限を示してから、すぐに行動した場合のメリットを伝えています。さらに、割引の適用方法を説明し、鮮やかな黄色のボタンをクリックした後の手続きで困ることがないようにしています。
関連商品や人気の商品を提案する離脱防止ポップアップ
27. Blavity
注目ポイント：印象的な画像と太字を使って注目を集めています。ブランドをアピールするメッセージに加えて、太字で「Get The App（アプリをインストール）」と書かれたコントラストの強いピンク色のボタンが、モバイルコンテンツを受信したい場合にすべきことを明確に示しています。
懸念を払拭するポップアップ
28. TOMS
注目ポイント：オンラインのショッピングカートが放棄される一番の理由（英語）である配送料に対する懸念を解消すると同時に、画像で主力商品を強調しています。そうすることで、興味を持った買い物客に閲覧を続けるよう誘導することができます。
29. Quince
注目ポイント：この大胆なオファーを訪問者は完全に無視することはできないでしょう。1回限りではなく、全ての注文で送料が無料になるのです。
オンラインショッピングにおいて無料配送は重要なオファーになります。しかし一般的には、購入手続きを進めるまで配送に関する情報は表示されません。そのため、ポップアップでお知らせするというのは賢いやり方です。
離脱防止ポップアップでコンバージョンを増加させましょう
離脱防止ポップアップは、シンプルでありながら、マーケティングやリードジェネレーションの効果的な施策となります。導入すれば、ウェブサイトにとどまる読者を増やし、コンバージョンと収益の増加につなげることができます。
ポップアップを実装したら、次はその成果を分析してさらに向上させる方法について確認することをおすすめします。
編集メモ：この記事は、2021年11月に投稿した内容を包括性の観点から加筆・訂正したものです。
