ポップアップバナーとは？設置方法を解説

ポップアップバナーとはサイトを閲覧しているユーザーの画面の前面に突如出現するバナーのことを指します。サイト閲覧中のユーザーにポップアップバナーを通じて適切なオファーを行うことによりCVR向上が狙えます。本コンテンツではポップアップバナーとは何かに加えて、そのメリット・デメリットや設置方法について解説します。

ポップアップバナーとはユーザーの特定の行動をトリガーにして画面前面に突然出現するバナーのことを指します。閲覧中のホームページ内のコンテンツに関わらずさまざまなオファーを表示できるので上手に活用すればCVRの向上が見込めます。表示方法によっていくつかの種類には分類できますが、いずれにしてもメリットは一緒です。HTMLやJavaScriptを活用して埋め込む場合もありますし、近年は簡単にポップアップバナーをホームページに実装できるようにツールも開発されています。

ポップアップバナーはCVRを向上させられる可能性がある半面、突然画面に表示されるのでタイミングが悪ければ離脱の原因になる可能性もあります。ポップアップバナーを使用するメリット・デメリットについて解説します。

ポップアップバナーを設置するメリットはCVRの向上が期待できる点にあります。たとえば、ホームページから離脱しようしているユーザーにお得な情報を与えることによってそのユーザーの離脱を防止できる可能性が高まります。また、ポップアップバナーは視認性が高く画像を使ってのアプローチもできるので商材・サービスの魅力を伝えるのに適しています。

ポップアップバナーを使用することによりエンゲージメント向上、離脱防止などが期待でき、結果としてCVRの向上が見込めます。

ポップアップバナーはCVRを向上させる効果が期待できる反面、使い方を誤るとユーザーの離脱率・直帰率が向上する可能性もあります。ポップアップバナーは突然画面に現れるものなので、タイミングやオファー内容がミスマッチであればユーザーのストレスとなる可能性があります。その結果として、ユーザーはホームページから離脱・直帰します。

こういったポップアップバナーのデメリットを低下させるためにはポップアップバナーの表示方法や出現するタイミングやトリガー、出現させるバナーのデザインなどがユーザーにマッチしているか常にPDCAを回す必要があります。

ポップアップバナーのメリット・デメリットを把握したうえで、具体的にどのようなシチュエーションでポップアップバナーを使用するべきなのか3つの活用事例について説明します。

おもにECでのポップアップバナーの活用方法です。ECでは商品をカートに入れたものの、そのまま購入手続きをせずにホームページから離脱するユーザーは一定数存在します。そして、その離脱の中にはうっかりカートに商品を入れているのを忘れている、購入完了したつもりになっての離脱も一定数存在します。こうしたカートに商品を入れたのに手続きを忘れての離脱を防止するためにポップアップを表示します。

商品ページを何回も見に来ているもののなかなか購入に至らないユーザーに対してセール・キャンペーン情報を提示して、購入への後押しをすることもあります。ユーザーはセールやキャンペーン情報を見逃しているかもしれないので、ポップアップバナーにより表示することにより必要な情報をわかりやすく伝えられます。

会員登録・資料請求などをポップアップバナーで促すのも有効です。たとえばメディアサイトの場合、ユーザーはメディア内のコンテンツを閲覧しにきたのであって、そこから会員登録や資料請求のWebページを見に行くためにはそれがどれほど重要なことなのかを訴求する必要があります。ただし、わざわざ会員登録や資料請求のWebページを閲覧してくれるとは限らないので、ポップアップを使ってコンテンツに満足しているであろうユーザーに対して会員登録・資料請求を促すのが有効です。

ライトボックス型とは背景を半透明もしくは暗くしてWebページの前面に表示されるポップアップバナーです。背景からポップアップバナーにユーザーの視線が誘導できるのでユーザーはポップアップに集中します。CVを促したいときに使用します。

ページを閲覧しているとページの一部に滑るように登場してくるポップアップしてくるバナーを指します。ユーザーがページをスクロールしている最中に自然な形で注意を引けるので、ストレスなくユーザーに情報を伝えられます。

閲覧しているWebページ全体の前面に現れるポップアップバナーです。インパクトが強く、過度の使用はユーザーの離脱を引き起こす可能性がありますが、確実にユーザーの印象には残るので特に重要なオファーをするときに使用します。

Webページの上部や下部に常時表示されており、スクロールと共に移動するポップアップバナーです。ユーザビリティを毀損しない程度の大きさであれば、ユーザーにストレスを与えることなく、常にユーザーがCVしやすい状況を作れます。

ポップアップバナーを設置する方法としては次の4パターンが想定できます。その概要とそれぞれのメリット・デメリットについて説明します。

HTMLやCSSを使ってポップアップバナーを作成できます。ただし、この方法で実装する場合はHTMLやCSSを自身で編集する必要があり、専門的な知識も必要となります。

HTML&CSSに加えてJavaScriptも活用すればより自由度高くポップアップを表示できます。ただし、HTML&CSSで編集する場合と同様に専門的な知識が必要になり、編集の手間もかかります。

WordPressを活用してホームページを作っている場合はプラグインを活用してポップアップバナーを実装できます。Popup MakerやOptinMonster、Popperといったプラグインがあり無料のプラグインも多数存在するのでぜひ試してください。

ポップアップバナー作成ツールを活用してポップアップバナーを作成する方法もあります。利用料は発生しますが、バナーの作成から実装までツールのサポートを受けられるのでノンデザイナーであっても利用できるのがメリットです。Sales Banner、フリップデスク、PROMOLAYERなどのツールが存在します。

ポップアップバナーを上手に活用すればCVR向上が見込めます。ただし、ポップアップバナーの過度な仕様はユーザビリティを損なう可能性もあるので控えてください。実装方法としては、HTMLを編集したり、ポップアップバナー作成ツールを使用したりとさまざまな方法があるので環境に合わせて一番良い方法を選択してください。

ちなみにSales Bannerというツールはバナー作成から、バナーのサイト内のアクション、クリックされたときの動作まで自由に設定でき、豊富なテンプレートが用意されているのでノンデザイナーであっても自由にポップアップバナーの作成・実装・管理ができます。30日間の無料トライアルも設定しているのでぜひお試しください。