HomeCVR改善対策TipsShopifyストア離脱防止ポップアップでコンバージョンを向上!事例と作成方法も

離脱防止ポップアップでコンバージョンを向上!事例と作成方法も

効果的な離脱防止を実現する

離脱防止ポップアップを効果的に使いこなす!

離脱防止ポップアップは、Webサイトで表示される小さなウィンドウです。

サイトから離脱しようとするユーザーを説得して、離脱を防止。その後、商品購入・リード獲得SNSフォロアー獲得など目的のコンバージョンへと繋げるだけでなく、顧客への大切な告知サイト内誘導などを可能にしてくれます。

この記事では、離脱防止ポップアップの各要素について、効果の出やすいデザインやポップアップ作成方法、事例についてご紹介します。

離脱防止から成果につなぐ!
Promolayer ポップアップツール

初期費用は不要。今すぐ施策を開始!
  • 業界最先端の技術でユーザー離脱を防止
  • 完全モバイル対応デザインを崩さない
  • ご不明点はチャットサポート解決

離脱防止を使いこなす! 目次

離脱防止ポップアップとは?

離脱防止ポップアップとは、ユーザーのサイト離脱時に離脱アクション検知して表示するポップアップウィンドウの事を指します。割引クーポン進呈等の魅力的なオファーにより、離脱を防ぐ効果があります。

近年では企業や個人でコストを大きく抑えて、デザインから運用、最適化まで自社内でPDCAを回すことができる
ポップアップツールの活用が主流となっています。

離脱防止ポップアップを使うメリット

離脱防止ポップアップを活用すると、ユーザーがそのまま離脱してしまう直前にコミュニケーションを取ることができるため、結果的に離脱防止に役立ちます

またそれだけでなく、その後ユーザーにとってお得なオファーなどを提示することで、以下のようにさまざまなコンバージョンに繋げる事が可能になります。

1. コンバージョン率・売上げの向上

適切なタイミングでポップアップを表示。クリックや購入を後押しして、コンバージョン率や売上げの向上に貢献します。

2. カゴ落ち(カート落ち)の防止

カートに商品を残したまま離脱するユーザーをクーポンなどのオファーで説得し、購買意欲を刺激。コンバージョンに繋げます。

3. サイト回遊率の向上

サイト内誘導により、内部リンク先に遷移。サイトユーザーの回遊率を向上させます。

4. 見込み客の獲得や告知

入力フォームからユーザーデータを取得して、今後の購買に繋がる見込み客を獲得。その他サイトを通じてユーザーへの告知が可能です。

5. メールアドレス収集・メールリストの構築

クーポンと引き換えにメールアドレスを収集。メールマーケティング用のメールリストが構築できます。

6. ユーザーデータの取得と分析

ユーザーが何に興味を持っているかなどのデータを取得して、ニーズに沿った戦略を立てることができます。

\ 登録 1 分 クレジットカード不要!/

離脱防止ポップアップで離脱を防ぐには

離脱防止ポップアップの効果を最大化するには、ポップアップをただ見せるだけでなく、”ユーザーがサイトを離脱しようとする理由”をカバーできるオファー提示やリンク設置、割引などのお得な機会をポップアップで提示するのが効果的です。

以下の図は、基本的な説得の一例です。

 

送料が高いことが理由だった場合

ユーザーにとって高い送料が問題であった場合、送料無料キャンペーンの告知は非常に効果的です

商品総額が高いことが理由だった場合

ユーザーが送料を含む総額が高いと感じている場合、クーポンの進呈キャンペーンが効果的です

ユーザーの立場で仮説を立て、”離脱理由を解決する”という方向性で離脱防止ポップアップを活用すれば、高い効果が得られます。また、後述するABテストで顧客のニーズを知り、適したオファーを提示しましょう。

回遊率改善 トップ画像

関連記事

ECサイト運営者の共通課題といえば、カゴ落ち離脱ではないでしょうか。機会損失を防ぐために、基本と対策を確認しましょう。

Promolayer.io

離脱防止ポップアップを自作。効果的な使い方とは?

離脱防止ポップアップの使い方 ヘッダー画像

離脱防止の効果を高めるためのポイントについて以下にご紹介します。

1.用途に適したポップアップタイプ

ポップアップには、スライドインフルスクリーンなどのポップアップタイプがあります。

例えばスライドイン・ポップアップは画面の右下などに表示され、ユーザーのサイト閲覧を邪魔することなくお知らせや割引のオファー等を画面に表示することが可能となっています。ユーザーのサイト内誘導やメールリスト登録などに向いています。

一方、離脱防止を目的としたポップアップの場合はよりユーザーの視線を奪うことができるポップアップタイプが有効とされており、ユーザーが必ず内容を確認できる表示するフルスクリーン・ポップアップ等が有効です。

バナー素材おすすめサイトトップ画像

関連記事

ポップアップバナーを効果的に活用するには表示する内容とタイミング、そしてデザインが大切。種類や活用事例を知り、コンバージョン率向上に役立てましょう。

Promolayer.io

2.離脱防止ポップアップのデザイン

離脱防止ポップアップは、デザインも重要な要素。

刺さるコピーや強制改行のない明確で分かりやすい文言、入力フォームの扱いやすさ、キャラクターGIF等を使って親しみやすくするなど、ポップアップ全体のバランスを重視しましょう。

アニメーションポップアップがより有効

離脱防止の効果を考える上では、楽しいアニメーションGIFを取り入れたアニメーションポップアップはよりユーザーのエンゲージメントが期待できるポップアップになります。

アニメーションGIFと取り入れる例として、ポップアップ上にロゴやキャラクターが飛び込んでくる、花火や紙吹雪を設定して演出するなどのアレンジが可能です。DIYでポップアップが作成できればアイデア次第で効果の高いポップアップが作成できます。

バナー素材おすすめサイト37選 (フリー・有料) トップ画像

関連記事

ポップアップバナー作成で悩ましい素材集め。Promolayerおすすめの使えるバナー素材(フリー・有料)を一挙にご紹介します!

Promolayer.io

3.表示ターゲットページ

離脱防止ポップアップを設置するページの一例としては、以下のようなページが挙げられます。

  •  ランディングページ(LP)・・・ユーザー離脱直前に特別なオファーを提示する
  • 商品ページ・・・送料無料や割引のオファーを提示して離脱を防ぎ、コンバージョンに繋げる
  • 離脱率が高いページ・・・離脱を防いで回遊率を向上させる

運営するWebページのユーザーの動線を確認し、トリガーや表示の設定を行います。

4.ポップアップ表示トリガーやタイミングの設定

ユーザーの離脱防止施策では、もしポップアップ表示設定がユーザーの動線に沿っていなかったり、ユーザーのサイト閲覧を邪魔して不快にさせるような設定にしてしまった場合、ユーザーを不快にさせてしまい、離脱を防ぐことは難しいでしょう。

先述の通り、どのタイミングで、どのアクションをきっかけに、誰にポップアップを表示するかの設定も大切な要素です。になります。
提供しているサイトのサービスやユーザー動向をヒントに、適切な設定を行います。

5.離脱理由のカバーと断りづらいオファー

ユーザーを説得し、最終的にコンバージョンへとつなげる離脱防止ポップアップは、ポップアップがユーザーの離脱理由を解決できているか、また提示するオファーが離脱を防止するのに適切なものかを確認します。

6.カウントダウンタイマーを追加する

離脱防止ポップアップによる割引クーポンやクーポンコードの提示は、ユーザーの支払額に関する離脱理由を解決するためのひとつの施策ですが、ここにカウントダウンタイマー機能を追加することでユーザーのFOMOを誘発し、お得な商品を買い逃したくないという心理的効果によるエンゲージメント向上が期待できます。

FOMO・・・商品を買いそびれる、または取り残される不安や恐怖

7.モバイルでも適切に表示する

2024年 母の日 母の日ギフト早割 レスポンシブデザイン

近年利用率が高まるモバイル端末でも、離脱防止ポップアップを表示することが可能ですモバイル端末のブラウザにはカーソルがありませんが、タブ間の移動バックボタン押下の検知などユーザーの離脱を検知してポップアップを表示します。

ポップアップツールによっては、モバイル表示対応が十分でないツールもあります。モバイルでも適切にポップアップを表示できるポップアップツールが有用です。

 

ポップアップの作り方 (Promolayer)

1. 新規作成 → テンプレートを選ぶ

登録後、新規作成をクリックして用途・シナリオに合ったポップアップテンプレートを選択。

2. ポップアップデザインを編集

テンプレートをもとに、ドラッグ&ドロップで好ましいデザインに編集。ゼロからの編集も可能です。ポップアップのスマホ表示も確認しましょう。

3. 表示ルールやターゲットを設定

ルールセクションでポップアップを表示する対象ユーザーや表示ページ、表示のタイミング等を選択。

4. プレビュー確認、すぐ施策開始!

プレビューで本番環境での表示を確認。ライブモードに変更すればすぐに施策を開始できます。

\ 登録 1 分 クレジットカード不要!/

ABテストによる離脱防止ポップアップの最適化

ABテストではユーザーの離脱理由を探ったり、また離脱防止に効果のある文言やボタン、画像やポップアップタイプなど、ポップアップのデザインについてエンゲージメントの確実なデータを取得しながら、複数のポップアップを比較することが可能です。

例えば、

  • ポップアップを設置しないケース
  • ポップアップAを設置するケース(画像を主体とした派手なデザイン)
  • ポップアップBを設置するケース(文言を中心とした質素なデザイン)

このように特徴の異なるポップアップをランダムに表示することで、ユーザーのエンゲージメント率が最も高いディスプレイを選定することができます。なお、コンバージョン率が最も高いポップアップを選定した後は、さらに次の段階のABテストを実施。これにより、ポップアップを常に効果の高いものに最適化できます。

「A/Bテスト」の基本知識とポップアップのテスト トップ画像

関連記事

「ABテスト」はCROに向けて異なった複数のアイデアがある場合、その中から最も効果的なアイデアを選び出すのに優れた効果を発揮します。

Promolayer.io

離脱防止ポップアップ事例と使い方のコツ

割引クーポンを提供する離脱防止ポップアップ

離脱防止ポップアップの使い方7
離脱防止ポップアップの使い方3

例えば、ユーザーが支払金額や利用料金の高さを理由に商品購入やサービスの利用をためらっていると仮定した場合、離脱防止ポップアップで割引クーポンやクーポンコードを入手できることを告知すれば、この離脱理由を解決することができます。

ユーザーはメールアドレスをフォームに入力し、フォーム下のボタンを押下することで割引クーポンを手に入れることができます。これにより、サイト運営側では離脱防止だけでなく顧客情報としてメールアドレスを収集でき、見込み客として顧客リストの作成にも役立てられます。

 

送料無料を提供する離脱防止ポップアップ

離脱防止ポップアップの使い方4
離脱防止ポップアップの使い方5

オンラインショッピングの需要が高まる現在、”送料の安さ”はユーザーにとって商品を購入するかどうかの主要な検討材料となっています。もし、ユーザーが送料を理由に離脱すると仮定した場合、離脱防止ポップアップで送料無料キャンペーンを告知すれば、送料に関する離脱理由を解決することができます。こちらも送料無料キャンペーンに参加する条件としてフォーム入力を設定すれば顧客の情報を収集するなど、さまざまな使い方が可能です。

 

カゴ落ち防止ポップアップ

離脱防止ポップアップの使い方8
離脱防止ポップアップの使い方6

商品をカゴやカートに入れたまま、購入せずにサイトを離脱するユーザーにも離脱防止ポップアップが有効です。

カゴ落ちの背景として、ユーザーが商品を閲覧しカートに一度商品を入れたということは、高い購入意思があると考えられます。しかし、登録するクレジットカードが手元にない、カートに入れるまで商品の総額が分からず、送料等を含めると思っていたよりより高くなったなど、何かしらの理由によって離脱が起きます。

その際に離脱防止ポップアップで商品がカートに入ったままであることをお知らせしたり、お得な初回割引などの特典を提示することで、ユーザーが抱える問題を解決へと導くことができます。

 

カウントダウン機能付き離脱防止ポップアップ

離脱防止ポップアップの使い方1
離脱防止ポップアップの使い方2

カウントダウン機能を追加した離脱防止ポップアップです。

クーポンの取得や利用に制限時間が設けられることで、ユーザーに”お得な条件で商品やサービスを買い逃したくない”という心理が働くことで、コンバージョンへの行動が促進されます。また顧客が明らかにお得な条件での商品やサービスの購入を逃さないようにするという役割も果たします。

なお、カウントダウン機能は離脱防止以外にも新商品の発売前、季節やイベントにおけるセールの開始予告や、セール等の終了までの期限を表示するなど、色々な使い方が可能となっています。

 

アニメーション付き離脱防止ポップアップ

離脱防止ポップアップの使い方9
離脱防止ポップアップの使い方13
離脱防止ポップアップの使い方12
離脱防止ポップアップの使い方11

時には反射的に閉じられてしまうこともあるポップアップですが、アニメーションを加えることでよりユーザーの注目を集めるため、離脱防止効果が高くなります。実際に静止画のみの離脱防止ポップアップと、アニメーションポップアップでは見た目のインパクトが非常に異なる事がわかります。

アニメーションGIF素材を使って自社のキャラクターをポップアップ上で動かしたり、また季節やイベントに合った素材を集めてアニメーションを加える等、想像力を頼りにインパクトが強く親しみのあるポップアップの作成が可能です。

 

SNSフォロアー獲得に繋げる離脱防止ポップアップ

離脱防止ポップアップの使い方222

離脱防止ポップアップでは、SNSのフォロアー獲得を促進するポップアップの表示も可能となっています。

上記の例のようにLINEであればお友達登録、またInstagramならアカウントのフォローで割引クーポンを進呈します。デスクトップユーザーにはQRコードを、スマートフォンを利用しているユーザーにはSNSアカウントへのリンクボタンを表示することで、ユーザーはよりSNSアカウントにアクセスしやすくなります。割引特典、そしてSNSをフォローしてもらうことでサイト運営側は見込み客を獲得でき、今後のマーケティング施策に役立てられます。

 

離脱防止から成果につなぐ!
Promolayer ポップアップツール

初期費用は不要。今すぐ施策を開始!
  • 業界最先端の技術でユーザー離脱を防止
  • 完全モバイル対応デザインを崩さない
  • ご不明点はチャットサポート解決

離脱防止ポップアップを理解する

サイトの回遊率を向上させてカゴ落ち防止、離脱率を低減させることを可能にする離脱防止ポップアップは、コストを掛けて業者に任せることなく自社にてDIYで作成できます。

またそれだけでなく、ABテストでポップアップを確実な実績データを取得しながら最適化することも可能となっており、より効果の高いポップアップを選定し活用し続けることが可能となっています。

離脱防止ポップアップにはデザインや表示するページの設定、トリガー設定など、さまざまな要素があります。自社が提供するサービスや商品、そしてユーザーの導線をヒントに離脱防止ポップアップを設置することでユーザーの離脱理由を解決でき、最終的なコンバージョンへと繋げることが可能です。

「離脱防止ポップアップ」の使い方を理解して、コンバージョン率の向上に役立てましょう。

離脱防止に関するFAQ

サイト離脱とは何ですか?

サイト離脱とは、訪問者がウェブサイトから完全に去ることを指します。これは、ユーザーがブラウザのタブを閉じたり、他のサイトへ移動したりする際に発生します。サイト離脱は、ウェブサイトのパフォーマンスやユーザーエクスペリエンスに関する重要な指標の一つです。

離脱防止とは何ですか?

離脱防止とは、ウェブサイト訪問者がページを離れるのを防ぐための施策です。訪問者がサイト内で長く滞在し、目的のコンテンツや商品にたどり着くように工夫します。これにより、サイトのエンゲージメントやコンバージョン率を向上させます。

離脱率は何故高くなるのですか?

離脱率が高くなる原因には、コンテンツの品質が低い、ページの読み込みが遅い、ナビゲーションが分かりにくい、モバイルフレンドリーでない、または期待と異なる情報が提供されているなどが挙げられます。ユーザーが求めている情報や体験を提供できていないと、高い離脱率に繋がります。

離脱率を下げる方法は?

離脱率を下げるためには、以下の方法があります:

  1. ページ速度を改善する。
  2. 質の高い、価値あるコンテンツを提供する。
  3. ユーザビリティを向上させ、ナビゲーションを分かりやすくする。
  4. モバイル最適化を行う。
  5. 明確で魅力的なCTA(Call to Action)を設置する。

これらの対策により、訪問者がサイトに留まり、目的のアクションを起こしやすくなります。

離脱防止モーダルとはなんですか?

離脱防止モーダルとは、訪問者がウェブページを閉じる前に表示されるポップアップウィンドウです。割引や特典、ニュースレター登録などのオファーを提示し、訪問者の関心を引き、離脱を防ぐことを目的としています。

離脱防止ポップアップとはなんですか?

離脱防止ポップアップとは、ユーザーがページを閉じる際に表示される小さなウィンドウで、特典やプロモーション、追加情報を提供し、ユーザーの離脱を防ごうとするものです。

モーダルとほぼ同様の機能を持ちますが、デザインや表示タイミングに工夫を加えることで、さらに効果的になります。

離脱を防止してCVを獲得。

初期費用は不要。今すぐ施策を開始!
  • 業界最先端の技術でユーザー離脱を防止
  • 完全モバイル対応デザインを崩さない
  • ご不明点はチャットサポート解決

Book a 1:1 demo

A 30 minute personalized demo with a member of the Promolayer team.

We will walk you through the application, advise you on how to best utilize Promolayer in your marketing stack and answer any questions you may have.