離脱防止ポップアップ事例3つ｜効果・役割からデザインの原則までを解説

2024 5/23

離脱防止ポップアップとは、ウェブサイトやランディングページで、訪問者がページを離れようとしたときに表示されるメッセージやオファーのことです。

離脱防止ポップアップの目的は、訪問者の注意を引き戻し、コンバージョン率を向上させることです。離脱防止ポップアップは、様々な形式や内容で作成することができますが、効果的なものには共通の原則があります。

この記事では、離脱防止ポップアップの効果や役割について説明した後、実際の事例を3つ紹介し、デザインの原則を解説します。離脱防止ポップアップを使って、自社のウェブサイトやランディングページのパフォーマンスの最大化にお役立てください。

離脱防止ポップアップの効果は？役割も合わせて解説

離脱防止ポップアップとは、ウェブサイトの訪問者がページを離れようとしたときに表示されるメッセージやオファーのことです。離脱防止ポップアップの目的は、訪問者の注意を引き戻し、コンバージョンやエンゲージメントを向上させることです。

離脱防止ポップアップの効果は、ウェブサイトの目標や内容によって異なりますが、一般的には以下のような役割・メリットがあります。

バウンス率（直帰率）の低下
リード獲得の増加
売上の向上

バウンス率とは、ウェブサイトに訪れた人のうち、1ページしか見ずに離れてしまった人の割合です。バウンス率が高いということは、ウェブサイトが訪問者のニーズや期待に応えられていないということです。また、ポップアップCTAを活用することで、離脱防止だけでなく、自社サイトのCV（コンバージョン）数を増やすことで、売り上げになるリード獲得を増加させる可能性も高まります。

それにより、結果的にポップアップCTAの活用により売り上げの向上につながるケースが多く、離脱防止だけでに止まらない広範囲での効果が期待できると言えるでしょう。

それでは、下記では実際に離脱防止ポップアップを活用したことにより、サイトが改善された企業事例5つをみていきましょう。

下記の事例を参考にしながら自社の改善ポイントや取り組めることを見つけてみてください。

離脱防止ポップアップ事例6選

ここでは、離脱防止ポップアップを活用した事例を紹介します。

株式会社スヴェンソン

スヴェンソンは、美と健康に関する事業を展開しており、ヘアケアを中心とした4つの事業と7つのグループ企業を有しています。スヴェンソンにとってウェブサイトはマーケティングの重要な要素であり、特に高齢層のお客様にも使いやすく分かりやすいUI/UXを実現しています。

ウェブ接客ツール「f-tra CTA」は、ウィッグ購入に関心のあるお客様に適切な情報を提供するために活用しています。

「f-tra CTA」は3つの方法で効果を発揮しています。1つ目は、ページから離れようとするユーザーにおすすめウィッグのバナーを表示し、直帰率を低下させることです。このバナーにより、直帰しようとしたユーザーの約30%がサイト内に留まり、2～3%が購入に至りました。2つ目は、長時間閲覧ユーザーに対しても同じバナーを表示し、クリック率や購入率を高めることです。3つ目は、相談予約や資料請求のバナーを表示し、ユーザーが次のアクションに移りやすくすることです。

「f-tra CTA」の導入で、資料請求件数や来店件数が増えました。今後も、コンテンツの充実とターゲティングの最適化を行い、お客様に価値のある情報を提供し続けます。

ゴルフネットワークプラス株式会社

ゴルフネットワークプラス株式会社は、ゴルフ業界のリーディングカンパニーとして、視聴者とプレーヤーに向けた多彩なサービスを展開しています。当社の事業は、ゴルフスコア管理、分析、CSゴルフ専門チャンネル「ゴルフネットワーク」のインターネットでの動画配信、スマートフォンアプリ「GOLF NETWORK PLUS」の提供など、幅広くカバーしています。これらのサービスにより、ゴルフ市場の活性化と業界の発展に寄与しています。

当社のWebマーケティングの狙いは、サイトへの集客と動画視聴の促進、そして有料プランへの誘導です。そのためには自動化を推進し、ユーザーのニーズや嗜好を把握し、マーケティングに反映する取り組みを実施しています。

現在の課題は、サイトトラフィックの拡大、動画視聴の増加、有料会員登録数の向上です。また、ゴルフスコア管理アプリと動画視聴の相乗効果を高め、有料会員登録者数を増やすことも目指しています。

f-tra CTAは、ユーザーセグメンテーションやターゲティングが簡単で、サイト改修が不要である点が魅力的でした。また、運用面でのサポートが充実しており、負担が軽減されることも決め手となりました。

f-tra Pushは、アプリとWebサイトのユーザーにプッシュ通知を送信するために導入されました。ユーザーの許可を得てプッシュ通知を送信するため、重要なユーザーに情報を届ける効果的な手段として活用されています。

導入後の改善効果としては、ユーザーの滞在時間や回遊率が上昇したことが挙げられます。特に、おすすめ動画を多様化し、マルチリンクバナーで表示することで遷移率が改善されました。

エフ・コードを選んだことで、Webマーケティングの経験が少ない状況でも伴走型ツールを活用して成果を出せると実感しています。今後はシナリオを増やしてCVR（コンバージョンレート）を高める施策に注力していきます。

エフ・コードに対して期待していることは、チームとして協力し、明確な役割分担とKPIのもとでさらに成功を目指すことです。提供会社とクライアントの枠を超えて、共同で成果を創出したいと思っています。

テレビ東京ビジネスオンデマンド

「テレビ東京ビジネスオンデマンド」は、ビジネスマンに向けた動画配信サービスです。

新規会員獲得のために、チュートリアル後におすすめ番組をポップアップで表示するという施策を行いましたが、コンバージョン率が下がってしまいました。ユーザーの行動を分析した結果、ポップアップが邪魔に感じられていたことが判明しました。そこで、離脱防止ポップアップツールを導入して、サービスの品質や規模を高めるための施策を展開しています。

既存会員の離脱防止のためには、使われていない機能をアピールすることも重要です。記事コンテンツは、動画と合わせて見ることでユーザーの満足度やリテンション率を高めることができます。

ポップアップの位置やタイミングを調整することで、コンバージョン率を改善することができました。

その結果、記事コンテンツを見てもらうように促すポップアップを表示しました。この施策により、リテンション率が大幅に向上しました。

アソビュー株式会社

アソビュー株式会社が運営する「asoview!」では、オウンドメディアからのCVRアップを実現するために、離脱防止ポップアップやバナーを活用しています。

「オウンドメディアにマネタイズさせる機能」の可能性を感じ、Web接客ツールの「CODE Marketing Cloud」を導入しました。

オウンドメディアの記事から離脱する際には、閲覧していた記事と関連性の高い施設・レジャーを掲載するページに誘導するポップアップウィンドウを表示することに。

参照：体験予約に繋げるオウンドメディアに導入、1か月でCVRが1.5倍に

そして、スクロールのタイミングで、記事内で特集している施設予約ができるページへ誘導するバナーを表示するアプローチを行っています。

施設の割引チケットや同エリアの他施設についての情報をポップアップで訴求することによって、CVRは1ヶ月で1.5倍、記事単位では4倍に伸長したものもあったようです。

アソビュー株式会社の導入活用事例はこちら

SBIホールディングス株式会社

SBIホールディングス株式会社では、多岐にわたる金融サービスを提供する上で、UI/UX改善に取り組むべく、Web接客ツールを導入しています。

中でも、インズウェブ事業部で運用している保険比較サイトにおける見積もりフォームにおいて、ポップアップウィンドウを活用した施策を実施しています。

フォーム内の「延床面積」で離脱する人が非常に多いことから、面積の目安をお知らせするポップアップを表示させました。これによって、フォームのCVRが2.5ポイント改善しました。

参照：顧客ヘ新たな価値提供を。横断組織で全社及び地方のDXを推進

また、緩和型医療保険の資料請求フォームでは、成約上一つひとつの商品説明ができないという課題がありました。そこで、ポップアップウィンドウを使って説明を表示することで、CVRが2ポイント近く上がったとのことです。
SBIホールディングス株式会社の導入活用事例はこちら

株式会社カラフルカンパニー

株式会社カラフルカンパニーでは、家を建てる人のための住宅情報サイト「家づくりナビ」を運営する上で、ポップアップウィンドウを活用しています。

ノーコードで施策ができるツールを探している中で、クリエイティブを制作する手間や工数を削減できるCODE Marketing Cloudを導入しました。

いくつかのコンテンツのうち、最終的にイベント予約につながりやすいものはどれか、画像やテキストのパターンを簡単に試せることが良い点だそう。

ポップアップウィンドウには、埋め込みや追従などのメニューがあるため、「サイト全体は大きく変更できないものの導線が弱い」という部分に活用しているとのことです。

当初はテンプレートのポップアップバナーだけを使っていましたが、クリエイティブにこだわりたい際はオリジナルのポップアップを作成しているそうです。

株式会社カラフルカンパニーの導入活用事例はこちら

▼下記の資料では、Webサイトの離脱率の主な原因と、ユーザーに満足してもらうためのサイト構造をわかりやすく解説しています。

・離脱率の改善方法
・UX/UIの観点から見るサイト回遊を高める方法
・Webサイトの回遊率を高めるためのおすすめツール

「Webサイトの離脱率を改善したい」や「Webサイトの回遊性を上げたい」とお考えの方は、ぜひ下記の資料をダウンロードして、自社サイトの改善のチェックシートとしてお役立てください。

離脱防止ポップアップのデザイン・表示方法で守りたい原則3つ

離脱防止ポップアップとは、ユーザーがサイトを離れようとしたときに表示されるメッセージやオファーのことです。このポップアップの目的は、ユーザーの興味を引き戻して、サイトにとどまらせることです。

しかし、ポップアップを適切にデザイン・表示しないと、逆効果になる可能性があります。ユーザーはポップアップにイライラして、サイトから離れてしまうかもしれません。

そこで、離脱防止ポップアップを効果的に使うためには、以下の3つの原則を守るようにしましょう。

原則1.「ウザがれない」ようにポップアップを出しすぎない

ポップアップは、ユーザーの注意を引くための強力なツールですが、使いすぎると逆効果になります。ユーザーは、自分の意思に反して何度もポップアップが表示されることに不快感を覚えます。

また、ポップアップが多すぎると、ユーザーはそれらを無視するようになります。つまり、ポップアップの効果が薄れてしまいます。

そこで、ポップアップを出す回数や頻度を制限することが重要です。例えば、一度表示したポップアップは、一定期間は再表示しないように設定することができます。また、同じページ内で複数のポップアップを表示しないようにすることもできます。

これらの方法で、ユーザーの不快感を減らし、ポップアップの効果を高めることができます。

原則2.ユーザーの回遊行動を妨げるようなデザインにはしない

ポップアップは、ユーザーの目的やニーズに合わせてデザインする必要があります。ユーザーがサイト内で探している情報やサービスに関連するポップアップであれば、ユーザーは興味を持ちやすくなります。

しかし、ユーザーの目的やニーズと関係ないポップアップであれば、ユーザーは邪魔されていると感じます。また、ポップアップのデザインが悪いと、ユーザーはサイトから離れたくなります。

例えば、ポップアップが画面全体を覆ってしまったり、閉じるボタンが見つからなかったりすると、ユーザーは困惑します。そこで、ポップアップのデザインは、ユーザーの回遊行動を妨げないようにすることが重要です。

ポップアップは画面の一部分だけを占めるようにすることや、閉じるボタンや×マークを明確に表示することができます。これらの方法で、ユーザーの操作性や利便性を向上させることができるでしょう。

原則3.表示するタイミングを離脱の直前にしておく

ポップアップは、ユーザーがサイトを離れようとしたときに表示することで、最大の効果を発揮します。

ユーザーがサイトを離れようとするときは、ユーザーの注意力が最も高いときです。このときに、ユーザーにとって価値のあるポップアップを表示することで、ユーザーの興味を引き戻すことができます。

しかし、ポップアップを表示するタイミングが早すぎると、逆効果になります。ユーザーがサイトに到着した直後や、サイト内で何かを読んだり操作したりしている最中にポップアップが表示されると、ユーザーは不快感を覚えます。

また、ポップアップが表示されるタイミングが不規則だと、ユーザーは混乱します。そこで、ポップアップを表示するタイミングは、離脱の直前にしておくことが重要です。例えば、ユーザーがブラウザのタブやバックボタンをクリックしたり、マウスカーソルを画面の上部に移動させたりしたときにポップアップを表示するなど。

これらの方法で、ポップアップのタイミングを最適化することができます。

以上、離脱防止ポップアップのデザイン・表示方法で守りたい原則3つについてご紹介しました。ポップアップは、サイトのコンバージョン率やリピート率を向上させるための有効な手段ですが、使い方によっては逆効果になる可能性もあります。

そこで、ポップアップを効果的に使うためには、ユーザーの目的やニーズに合わせてデザイン・表示することが重要です。

▼下記の資料では、離脱率を改善するために必須となる、Webサイトのシナリオ設定のやり方をわかりやすく解説しています。

・Web接客におけるシナリオとは？
・Web接客でシナリオ設計する理由や効果
・Web接客のシナリオ設計手順

デジタルマーケティングにおける顧客対応がますます重要性を増している今、Web接客を導入しようとお考えの方は、ぜひ下記の資料をダウンロードしていただき、自社サイトの改善のチェックシートとしてお役立てください。

効果的な離脱防止ポップアップの要素5つ

ポップアップウィンドウは、ユーザーによっては不快感を覚えることもあり、万人に受け入れられるわけではありません。

ユーザーの興味を引くポップアップを作るには、要素別にポイントを把握しておくことが大切です。

コピー
画像
デザイン
CTA
A/Bテスト

それぞれ順に見ていきましょう。

コピー

離脱防止ポップアップには、シンプルかつ目を引くキャッチコピーを伝えます。

簡潔で読みやすい説明でありながら、インパクトのある見出しにすることで、ユーザーに興味を持ってもらえる可能性が高まります。

ユーザーの課題を解決できるような有益なコピーを用意しましょう。

画像

離脱防止ポップアップで活用する画像は、オファーやターゲット層と関連性の高いものを選びましょう。

注目を集めつつも、オファーの内容が分かりづらくならないよう、派手すぎない画像を選ぶのが最適です。

デザイン

ポップアップの内容が瞬時に伝わりやすく、すっきりとしたデザインにすることも大切です。

ポップアップウィンドウは、モバイルデバイスで表示すると小さくなることがあります。そのため、スマホなどで文字が読みづらくないか、見栄えが良いかも確認するといいでしょう。

CTA

CTAは、明確で分かりやすくなるように工夫しましょう。動機付けができるフレーズで誘導することで、CVRを高めやすくなります。

商品やブランドに合った独自のオファーを提示するために、いくつかのパターンでCTAを用意するといいでしょう。

A/Bテスト

A/Bテストを実施することで、ポップアップ経由のCVRの改善につながります。

1つのパターンではなく、さまざまな配置やコピーを組み合わせて複数のパターンを用意し、どのポップアップが最も効果的かをテストしましょう。

▼下記の資料では、離脱率の低減に必要となる、UX/UI改善のプロセスや実施ポイントをわかりやすく解説しています。

・UX/UIを改善するプロセス
・UX改善を成功させるポイント
・UX/UI改善の成功事例

デジタルマーケティングにおける顧客対応がますます重要性を増している今、UX/UI改善の改善が必要不可欠です。もし「UX改善の具体的なプロセスが分からない」や「考え方や改善のポイントを詳しく知りたい」とお考えの方は、ぜひ下記の資料をダウンロードして、自社サイトの改善チェックシートとしてお役立てください。

離脱防止ポップアップツール3つ

上記のように、離脱防止ポップアップは使い方によってユーザーのストレスになってしまう可能性もあるため、活用の際には戦略的かつ慎重に行って初めて効果を最大限に発揮できます。

しかし、手動でポップアップの設置や活用を行うのは工数はもちろん、経験や知識がなければ最大限の効果を引き出すのは難しいもの。

そこで、以下ではポップアップにより効果を引き出すためのアシストを実現してくれる「ポップアップCTAツール」を3つご紹介します。

1.CODE Marketing Cloud

CODE Marketing Cloudは、マーケティングオートメーション（MA）ツールとして有名なサービスです。MAツールとは、ユーザーの行動や属性に応じて自動的にメールやWebサイトなどのコンテンツを配信する仕組みのことです。

CODE Marketing Cloudでは、Webサイト上でポップアップを表示する機能も提供しています。ポップアップは、ユーザーの行動や属性、セグメントなどに応じてカスタマイズできるため、離脱防止だけでなく、リード獲得やコンバージョン向上など様々な目的に合わせて活用できます。

また、CODE Marketing Cloudでは、ポップアップの効果測定やA/Bテストも簡単に行えるため、最適なポップアップを見つけることができます。さらに、ポップアップで獲得したリードやコンバージョンをMAツールと連携させることで、一貫した顧客体験を提供することができます。

2.KARTE

KARTEは、リアルタイムパーソナライゼーション（RTP）ツールと呼ばれるサービスです。RTPツールとは、Webサイト上でリアルタイムにユーザーの行動や属性を分析し、最適なコンテンツを表示する仕組みのことです。

KARTEでは、Webサイト上でポップアップを表示する機能も提供しています。ポップアップは、KARTEが収集した豊富なデータをもとに、ユーザーごとに最適化されたメッセージやデザインを自動的に生成します。これにより、離脱防止だけでなく、購買意欲や満足度の向上など様々な効果が期待できます。

また、KARTEでは、ポップアップの効果測定やA/Bテストも簡単に行えるだけでなく、AIが自動的に最良のバリエーションを選択してくれる機能もあります。さらに、ポップアップで獲得したデータをKARTE内の他の機能と連携させることで、メールやチャットなど多様なチャネルで顧客とコミュニケーションすることができます。

3.Robee

Robeeは、Webサイト上でポップアップを表示することに特化したツールです。ポップアップは、ユーザーの行動や属性、セグメントなどに応じてカスタマイズできるだけでなく、様々な種類のポップアップを用意しています。例えば、離脱防止ポップアップやクーポンポップアップ、アンケートポップアップなどです。

Robeeでは、ポップアップの作成や設定が非常に簡単で、コーディングやデザインの知識がなくても問題ありません。また、Robeeでは、ポップアップの効果測定やA/Bテストも簡単に行えるため、最適なポップアップを見つけることができます。

Robeeは、ポップアップに特化したツールであるため、他のツールと比べて低価格で利用できるのも魅力的です。また、Robeeは、他のサービスと連携することで、ポップアップで獲得したデータを活用することができます。例えば、Google AnalyticsやMailchimpなどです。

離脱防止ポップアップはツールですぐに実現できる

Web接客の成功を確保するためには、離脱防止ポップアップCTA戦略の構築が不可欠です。ユーザーの行動データを分析し、適切なメッセージを正確なタイミングで提供することが、ポップアップCTAの最大限の効果を発揮する鍵です。過去の行動データの分析によって、ユーザーの関心やニーズを把握し、それに基づいて離脱防止ポップアップCTAを展開する方法が明確になるでしょう。

CODE Marketing Cloudは、離脱防止ポップアップCTAの戦略を実現するために必要なツールを提供しています。経験の浅いユーザーでも、効果的なWebマーケティングを実行できるように、使いやすいインターフェースを提供します。ポップアップCTAのデザインと運用を効果的にサポートし、さらに、業界に合わせた最適なテンプレートも用意されており、パーソナライズが簡単に行えます。

CODE Marketing Cloudは、ユーザーのWeb行動を詳細に分析し、高度な離脱防止ポップアップCTAを実現する機能も提供しています。これにより、最適なタイミングで最適なメッセージを提供できます。また、過去のユーザーデータと連携できるため、新規ユーザーにも個別に適したアプローチを提供できます。

CODE Marketing Cloudを利用することで、離脱防止ポップアップCTA戦略を効果的に実施し、ユーザーエンゲージメントの向上やコンバージョン率の増加を可能にする幅広い機会が開かれます。CODE Marketing Cloudに興味をお持ちの方は、以下のURLからサービスの詳細をご確認ください。