Webサイト上で、なんらかのアクションに反応して小さい別ウィンドウが立ち上がる機能を「ポップアップ」と呼びます。重要な告知やセール情報など、確実に伝えたいメッセージがある場合やユーザーに特定の行動を促したい時に活用できます。
【無料】WordPressでのウェブサイト作成方法
HubSpotのウェブサイトエキスパートが、WordPressでのウェブサイト作成を成功に導くための22のステップをまとめました。サイトの最適化やメンテナンスについても詳しく解説しています。
WordPressを用いてWebサイトを構築している場合は、プラグインを導入するだけでポップアップを実装できるため簡単です。
今回はポップアップ機能を導入するメリットとデメリットを整理した上で、おすすめのプラグインや導入時の注意点を紹介します。
上の画像で、前面に表示されている部分がポップアップです。特定のページを訪問したときや閲覧開始して○秒経過したときなど、ある行動をトリガーにして表示させるよう設定できます。
BtoCのサービスサイトやECサイトだと期間限定セールやイベント告知などに、BtoBのサービスサイトだと資料請求の案内や会員登録のメリットなどの訴求に利用されています。
サイトに設置されているボタンやバナーよりも見てもらえる確率が高く、CTA（call to actionの略。ユーザーの行動を促すための装置）として非常に優れているため、商品購入や資料請求、会員登録など何かしらのコンバージョンポイントがあるWebサイトは活用するべきでしょう。
一方ユーザーの意図とは関係なく表示され、ポップアップ画面を閉じる作業をユーザーに強いるため「邪魔」などネガティブな印象を与えてしまう可能性は否めません。そのため、特に企業サイトではユーザーが見て良い印象（綺麗、便利、気が利いているなど）をもってもらう工夫が必要です。
ポップアップの実装は、WordPressを利用したWebサイトであればプラグイン導入で完了します。プラグインを使えば、基本的にはHTMLやCSSなどの専門知識は不要です。
ポップアップは具体的に、以下のようなシーンで活用できます。
Webサイトに表示されるポップアップは、「モーダル」と呼ばれることもあります。同様に混同されやすい「ダイアログ」もあわせて、3つの用語の違いについて解説します。
ポップアップは、その言葉が示すとおり画面上に突然現れるものを指します。
それまで見ていたページを残しつつ新しい情報を提示できるため、Webサイトにおいてはさまざまな活用があります。
モーダルは、現れるという動きではなく、ユーザーの操作を制御するという機能に注目した言葉です。
例えば、一定の長さのスクロールで表示されるポップアップがあったとき、スクロールの操作を一時的に制御して情報を表示するためモーダルに該当します。
一方、ユーザーのクリックによって出現するポップアップは、ユーザーの意図する結果を返しているためモーダルではありません。
ダイアログは、「対話」と訳せるようにユーザーとのやり取りをリクエストするものを指します。
重要な決定を行ってもらう際の「本当によろしいですか？」といったクッションや、上位プラン・アプリの利用を促すポップアップなどがダイアログに該当します。
このように、ポップアップ・モーダル・ダイアログには注目する視点が異なることがわかります。
違いを押さえておくことでWebサイトにおけるユーザーとのコミュニケーション設計に活かせますが、本記事では基本的にポップアップとして解説を続けていきます。
訴求力が高いポップアップは、上手く使えばコンバージョン向上につながりますが、企業やブランドに対するイメージを損ねてしまうリスクもあります。
Webサイトに常時設置されているバナーやボタンよりもはるかに注目を集められるので、問い合わせや購入、リード獲得などのコンバージョン率向上が期待できます。
初回訪問者にはこのクーポンを、リピーターにはこのクーポンを、というように表示内容をユーザーのステータスに合わせて適切に出し分けすると、コンバージョン率のさらなる向上が期待できます。
ポップアップは、上手く使うことでコンバージョン率の向上につながります。
具体的には、一定時間ページを閲覧しているユーザーに対し興味のありそうなキャンペーンを表示する、ECサイトにて何回か閲覧した商品を表示するなどの活用方法があり、ユーザーの利益になるように表示することがポイントです。
特に離脱防止を目的としたポップアップを表示されることで、離脱率の改善も期待できます。
誤って戻るボタンを押してしまったときにページに留めてくれるようなポップアップであれば、ユーザー体験の向上にもつながるでしょう。
ユーザーに知らせなければならない重要なお知らせや、そのセグメントにとって有益なクロスセルの情報があれば、コンバージョン率やエンゲージメントの向上につながります。
重要なお知らせには、キャンペーンの終了日や、実店舗における天候の影響などがあります。
ポップアップは強力にアプローチ手段ゆえに、使いすぎるとユーザー体験を悪化させるリスクがあります。
ポップアップの内容が興味関心とかけ離れていたり、急に出てきたポップアップにコンテンツ消費を邪魔されたりすると、「煩わしいな」と思われてしまう可能性が高くなります。あまりにも表示回数を増やすと押し売り感が出てしまい、企業やブランドイメージが低下する恐れもあります。
ポップアップを利用する際は、表示タイミングや内容、回数などに配慮し、ユーザーにストレスを与えない工夫が必要です。
ポップアップには、用途ごとにいくつかの形状があります。それぞれ適したシーンやターゲットが異なります。
これまで見ていたWebページに薄いグレーをかけ、手前に四角のボックスを表示させるタイプのポップアップです。ポップアップのスタンダードな形状であり、モーダルとしてユーザーの操作を制御しつつ必要なお知らせや訴求を行います。
×ボタンやライトボックス外のクリック、ダイアログへの回答などによって元の画面に戻ります。
ページの横などからスライドインのアニメーションによって表示されるポップアップです。
アニメーション効果により視覚的な注目度を上げることができます。
ページ下部や上部に固定され、スクロールに追従するポップアップです。
モーダルとして操作を邪魔することなく、目立つ位置にお知らせや訴求を表示できます。
見ている画面全体に表示されるポップアップです。
メッセージを強く表示できる一方でユーザー体験を損なう可能性が高いため、重要なお知らせやロイヤルティの高い顧客向けの訴求など、ここぞといったときの使用に限るといいでしょう。
一般的にプラグインを選ぶ際には多くのサイトで使われており、満足度が高く機能の更新や不具合対応などが継続的に行われていることを確認しましょう。プラグインの説明ページで下記項目をみれば判断できます。
本章では、WordPressでおすすめのポップアッププラグインを2つ紹介します。
Popup Maker – Popup Forms, Opt-ins & More – WordPress プラグイン | WordPress.org 日本語
以下の6種類のポップアップデザインがデフォルトで用意されており、それぞれカスタマイズできます。
WordPressのクラシックエディタと同じ操作でコンテンツを作成します。
HubSpot – CRM, Email Marketing, Live Chat, Forms & Analytics – WordPress plugin | WordPress.org
本プラグインにはWebサイトの訪問者からリードを獲得するための機能が備わっています。モバイル端末にも最適化された使いやすいポップアップ画面を簡単に作成することができ、ポップアップ画面からリード獲得を促進することができます。
ポップアップの表示タイミングは「ページの50％をスクロールしたとき」「ページを離脱時」「一定時間が経過後」のいずれかを選択できます。
プラグインをインストールしたら、HubSpotアカウントを所持していない場合はアカウントの作成を行います。
次に以下の画面が表示されます。まずは「１.訪問者をリードに転換する」の「今すぐ開始」をクリックします。
次に「フォームを作成」をクリックします。
次に「ポップアップフォーム」をクリックします。
するとポップアップフォームを作成する画面になります。本プラグインでは、画面左側の設定項目を入力・選択していく度に、ポップアップ画面のイメージをリアルタイムに確認できます。（画面右側）
《コールアウト（最初に表示するポップアップ画面）》
《フォーム（リード情報の入力画面）》
《サンキュー（リード情報の入力完了を知らせる画面》
ここでは当社HubSpotが提供するWordPressプラグインについてご紹介しましたが、HubSpotではマーケティングに優れた各種ツールとの連携が可能なソフトウェアとして「Content Hub」も提供しています。
Content Hubではマーケティングに特化した独自のCMSを利用できますが、すでにWordPressでWebサイトを構築している場合は、「コンテンツ埋め込み」機能により、HubSpotツール内で作成したコンテンツをドラッグ＆ドロップでWordPressへ埋め込むことが可能です。
Content Hubの詳しいことは、こちらのページをご覧ください。
Webサイト構築の観点で理解しておくべき注意点は次の3点です。
それぞれについて詳細を確認してみましょう。
ポップアップに限ったことではないですが、WordPressでプラグインをインストールするとプラグイン同士で競合してしまい、正常に動作しないことがあります。
プラグインの競合が発生した際には、同じような機能を持つ別のプラグインに変更するなどしてみましょう。
ポップアップの表示設定によっては、Google ボットをブロックしてクロールエラーを発生させ、SEOに悪影響を与えてしまうプラグインがあります。
なお、容易に閉じることができる、且つ妥当なサイズのポップアップはSEOへの悪影響はありません。
ポップアップ表示を設定した場合には読み込むファイル数が大きくなり、ポップアップ導入前より表示に時間が長くなることがあります。
表示速度を上げるためには、プラグイン数を絞ることが大切であることも覚えておきましょう。
ポップアップは、Webサイト上のキャンペーンやサービスの告知、リード獲得に非常に有効な手段です。
ただし、繰り返しにはなりますが使いすぎは禁物です。活用したいなら、ユーザーにストレスを与えない表示頻度、内容を検討し続けましょう。メインコンテンツを覆い隠さず、簡単に閉じられるような設定にしておくことも大切です。
訴求力の維持とユーザー体験の向上のバランスを見ながら、ポップアップを利用してコンバージョン向上に役立ててください。