【WordPress】ポップアップどう使う？活用シーン・おすすめプラグイン・使い方を紹介

Webサイト上で、なんらかのアクションに反応して小さい別ウィンドウが立ち上がる機能を「ポップアップ」と呼びます。重要な告知やセール情報など、確実に伝えたいメッセージがある場合やユーザーに特定の行動を促したい時に活用できます。

WordPressを用いてWebサイトを構築している場合は、プラグインを導入するだけでポップアップを実装できるため簡単です。

今回はポップアップ機能を導入するメリットとデメリットを整理した上で、おすすめのプラグインや導入時の注意点を紹介します。

WordPressを使ったウェブサイトの作成方法

このガイドとチェックリストでは、WordPressでウェブサイトを作成するための詳細な手順をご確認いただけます。

• ドメイン名の設定
• SSL証明書のインストール
• コンテンツの分析
• ウェブサイトのバックアップ

今すぐ無料ダウンロードする 詳しく見る 今すぐ無料ダウンロードする

今すぐダウンロードする

全てのフィールドが必須です。

ダウンロードの準備ができました

下記のボタンよりダウンロードいただけます。

今すぐダウンロードする

上の画像で、前面に表示されている部分がポップアップです。特定のページを訪問したときや閲覧開始して○秒経過したときなど、ある行動をトリガーにして表示させるよう設定できます。

BtoCのサービスサイトやECサイトだと期間限定セールやイベント告知などに、BtoBのサービスサイトだと資料請求の案内や会員登録のメリットなどの訴求に利用されています。

サイトに設置されているボタンやバナーよりも見てもらえる確率が高く、CTA（call to actionの略。ユーザーの行動を促すための装置）として非常に優れているため、商品購入や資料請求、会員登録など何かしらのコンバージョンポイントがあるWebサイトは活用するべきでしょう。

一方ユーザーの意図とは関係なく表示され、ポップアップ画面を閉じる作業をユーザーに強いるため「邪魔」などネガティブな印象を与えてしまう可能性は否めません。そのため、特に企業サイトではユーザーが見て良い印象（綺麗、便利、気が利いているなど）をもってもらう工夫が必要です。

ポップアップの実装は、WordPressを利用したWebサイトであればプラグイン導入で完了します。プラグインを使えば、基本的にはHTMLやCSSなどの専門知識は不要です。
 

ポップアップは具体的に、以下のようなシーンで活用できます。

• ページへのアクセス直後：ユーザーがWebページを開いたときに表示。キャンペーン情報など、訪問者全員にとってメリットのある情報を伝えたい時に有効です。
• クリック：ユーザーがボタンやテキストをクリックした際に表示されます。商品紹介のページで拡大写真などの追加の情報を表示できます。
  ポップアップの中では、アクションに対してユーザーの意図した結果が返ってくるため、煩わしいと思われることはほとんどないでしょう。
• 経過時間：ユーザーがページを開いて一定時間が経過したときに表示されます。
  一定時間滞在している＝ある程度興味関心があると推測できるユーザーに向け、エンゲージメントを高めるためのメッセージを表示できます。
• ページの離脱：タブを閉じたりページをバックしたりなど、ユーザーがWebページを離脱しようとしたら表示されます。入力フォームなどで入力途中に誤って離脱してしまうのを防止できます。
  また、お得なキャンペーンを知らせてページに留まってもらう意図でポップアップを表示することもあります。
  離脱防止用ポップアップについては、以下コラムに詳しくまとめています。

Webサイトに表示されるポップアップは、「モーダル」と呼ばれることもあります。同様に混同されやすい「ダイアログ」もあわせて、3つの用語の違いについて解説します。
 

「ポップアップ」は突然現れるもの

ポップアップは、その言葉が示すとおり画面上に突然現れるものを指します。

それまで見ていたページを残しつつ新しい情報を提示できるため、Webサイトにおいてはさまざまな活用があります。
 

「モーダル」はユーザーの操作を制御するもの

モーダルは、現れるという動きではなく、ユーザーの操作を制御するという機能に注目した言葉です。

例えば、一定の長さのスクロールで表示されるポップアップがあったとき、スクロールの操作を一時的に制御して情報を表示するためモーダルに該当します。

一方、ユーザーのクリックによって出現するポップアップは、ユーザーの意図する結果を返しているためモーダルではありません。
 

「ダイアログ」はユーザーとのやり取りをリクエストするもの

ダイアログは、「対話」と訳せるようにユーザーとのやり取りをリクエストするものを指します。

重要な決定を行ってもらう際の「本当によろしいですか？」といったクッションや、上位プラン・アプリの利用を促すポップアップなどがダイアログに該当します。

このように、ポップアップ・モーダル・ダイアログには注目する視点が異なることがわかります。

違いを押さえておくことでWebサイトにおけるユーザーとのコミュニケーション設計に活かせますが、本記事では基本的にポップアップとして解説を続けていきます。
 

訴求力が高いポップアップは、上手く使えばコンバージョン向上につながりますが、企業やブランドに対するイメージを損ねてしまうリスクもあります。
 

メリット

Webサイトに常時設置されているバナーやボタンよりもはるかに注目を集められるので、問い合わせや購入、リード獲得などのコンバージョン率向上が期待できます。

初回訪問者にはこのクーポンを、リピーターにはこのクーポンを、というように表示内容をユーザーのステータスに合わせて適切に出し分けすると、コンバージョン率のさらなる向上が期待できます。
 

コンバージョン率の向上

ポップアップは、上手く使うことでコンバージョン率の向上につながります。

具体的には、一定時間ページを閲覧しているユーザーに対し興味のありそうなキャンペーンを表示する、ECサイトにて何回か閲覧した商品を表示するなどの活用方法があり、ユーザーの利益になるように表示することがポイントです。
 

離脱率の改善

特に離脱防止を目的としたポップアップを表示されることで、離脱率の改善も期待できます。

誤って戻るボタンを押してしまったときにページに留めてくれるようなポップアップであれば、ユーザー体験の向上にもつながるでしょう。
 

重要なお知らせやクロスセル

ユーザーに知らせなければならない重要なお知らせや、そのセグメントにとって有益なクロスセルの情報があれば、コンバージョン率やエンゲージメントの向上につながります。

重要なお知らせには、キャンペーンの終了日や、実店舗における天候の影響などがあります。
 

デメリット

ポップアップは強力にアプローチ手段ゆえに、使いすぎるとユーザー体験を悪化させるリスクがあります。

ポップアップの内容が興味関心とかけ離れていたり、急に出てきたポップアップにコンテンツ消費を邪魔されたりすると、「煩わしいな」と思われてしまう可能性が高くなります。あまりにも表示回数を増やすと押し売り感が出てしまい、企業やブランドイメージが低下する恐れもあります。

ポップアップを利用する際は、表示タイミングや内容、回数などに配慮し、ユーザーにストレスを与えない工夫が必要です。
 

ポップアップには、用途ごとにいくつかの形状があります。それぞれ適したシーンやターゲットが異なります。
 

ライトボックス

これまで見ていたWebページに薄いグレーをかけ、手前に四角のボックスを表示させるタイプのポップアップです。ポップアップのスタンダードな形状であり、モーダルとしてユーザーの操作を制御しつつ必要なお知らせや訴求を行います。

×ボタンやライトボックス外のクリック、ダイアログへの回答などによって元の画面に戻ります。
 

スライドイン

ページの横などからスライドインのアニメーションによって表示されるポップアップです。

アニメーション効果により視覚的な注目度を上げることができます。
 

フローティング

ページ下部や上部に固定され、スクロールに追従するポップアップです。

モーダルとして操作を邪魔することなく、目立つ位置にお知らせや訴求を表示できます。
 

フルスクリーン

見ている画面全体に表示されるポップアップです。

メッセージを強く表示できる一方でユーザー体験を損なう可能性が高いため、重要なお知らせやロイヤルティの高い顧客向けの訴求など、ここぞといったときの使用に限るといいでしょう。
 

一般的にプラグインを選ぶ際には多くのサイトで使われており、満足度が高く機能の更新や不具合対応などが継続的に行われていることを確認しましょう。プラグインの説明ページで下記項目をみれば判断できます。

• 最終更新
• 有効インストール数
• WordPress バージョン、検証済み最新バージョン
• 評価

本章では、WordPressでおすすめのポップアッププラグインを2つ紹介します。
 

Popup Maker

Popup Maker – Popup Forms, Opt-ins & More – WordPress プラグイン | WordPress.org 日本語

以下の6種類のポップアップデザインがデフォルトで用意されており、それぞれカスタマイズできます。

• Default Theme
• Light Box
• Enterprise Blue
• Hello Box
• Cutting Edge
• Framed Border

コンテンツ作成画面

WordPressのクラシックエディタと同じ操作でコンテンツを作成します。
 

ポップアップの各種設定

• Triggers：ポップアップが表示される条件を設定します。
  クリックによるポップアップ、時間経過によるポップアップを選択できます。
• Targeting：ポップアップを表示するページを指定します。個別の投稿や固定ページだけでなく、「すべての投稿」「すべての固定ページ」で表示するような設定も可能です。
  また、スマホやタブレットで表示するかどうかも選択できます。
• Display：ポップアップをスライド効果やフェード効果で登場させる設定ができます。また表示場所の設定も行えます。
• Close：ポップアップを閉じるための設定ができます。クリックだけでなく、ESCボタンやF4ボタンで画面を閉じるようにできます。
  ポップアップ画面が表示された後、しばらくしてクローズボタンを表示する設定も可能です。
• Advanced：ポップアップが開いた時、フォーカスを固定するなどの設定ができます。

HubSpot（CRM・Email Marketing・Live Chat・Forms・Analytics）

HubSpot – CRM, Email Marketing, Live Chat, Forms & Analytics – WordPress plugin | WordPress.org

本プラグインにはWebサイトの訪問者からリードを獲得するための機能が備わっています。モバイル端末にも最適化された使いやすいポップアップ画面を簡単に作成することができ、ポップアップ画面からリード獲得を促進することができます。

ポップアップの表示タイミングは「ページの50％をスクロールしたとき」「ページを離脱時」「一定時間が経過後」のいずれかを選択できます。
 

プラグインインストール後からポップアップ画面設定までの流れ

プラグインをインストールしたら、HubSpotアカウントを所持していない場合はアカウントの作成を行います。

次に以下の画面が表示されます。まずは「１.訪問者をリードに転換する」の「今すぐ開始」をクリックします。

次に「フォームを作成」をクリックします。

次に「ポップアップフォーム」をクリックします。

するとポップアップフォームを作成する画面になります。本プラグインでは、画面左側の設定項目を入力・選択していく度に、ポップアップ画面のイメージをリアルタイムに確認できます。（画面右側）

ポップアップ画面の設定項目

《コールアウト（最初に表示するポップアップ画面）》

• キービジュアル：ポップアップ画面左側に表示する画像
• コールアウトテキスト：ポップアップ画面のテキスト（タイトル）
• コールアウト本文：ポップアップ画面のテキスト（本文）
• コールアウトテキストボタン：「フォームに移行するボタン」に表示するテキスト
• テーマカラー：「フォームに移行するボタン」の色

《フォーム（リード情報の入力画面）》

• フォーム本文：ポップアップ画面のテキスト（本文）
• フォームボタンテキスト：リード情報入力後にクリックしてもらうボタンのテキスト
• 通知と同意/正当な利害関係：チェックボックスとテキストを表示し、個人情報取り扱いなどの同意を促す
• 言語：フォームの言語
• CAPTCHA：スパム防止機能

《サンキュー（リード情報の入力完了を知らせる画面》

• サンキューメッセージ：リード獲得後のメッセージ
• ボタンを追加：ボタンを追加して、利用者をリンク先に誘導できる

WordPressにコンテンツを埋め込みできる「Content Hub」

ここでは当社HubSpotが提供するWordPressプラグインについてご紹介しましたが、HubSpotではマーケティングに優れた各種ツールとの連携が可能なソフトウェアとして「Content Hub」も提供しています。

Content Hubではマーケティングに特化した独自のCMSを利用できますが、すでにWordPressでWebサイトを構築している場合は、「コンテンツ埋め込み」機能により、HubSpotツール内で作成したコンテンツをドラッグ＆ドロップでWordPressへ埋め込むことが可能です。

Content Hubの詳しいことは、こちらのページをご覧ください。

Webサイト構築の観点で理解しておくべき注意点は次の3点です。

• プラグイン間の競合
• ポップアッププラグインによるSEOへの影響
• サイト表示速度への影響

それぞれについて詳細を確認してみましょう。
 

プラグイン間の競合

ポップアップに限ったことではないですが、WordPressでプラグインをインストールするとプラグイン同士で競合してしまい、正常に動作しないことがあります。

プラグインの競合が発生した際には、同じような機能を持つ別のプラグインに変更するなどしてみましょう。
 

ポップアッププラグインによるSEOへの影響

ポップアップの表示設定によっては、Google ボットをブロックしてクロールエラーを発生させ、SEOに悪影響を与えてしまうプラグインがあります。

なお、容易に閉じることができる、且つ妥当なサイズのポップアップはSEOへの悪影響はありません。
 

サイト表示速度への影響

ポップアップ表示を設定した場合には読み込むファイル数が大きくなり、ポップアップ導入前より表示に時間が長くなることがあります。

表示速度を上げるためには、プラグイン数を絞ることが大切であることも覚えておきましょう。
 

ポップアップは、Webサイト上のキャンペーンやサービスの告知、リード獲得に非常に有効な手段です。

ただし、繰り返しにはなりますが使いすぎは禁物です。活用したいなら、ユーザーにストレスを与えない表示頻度、内容を検討し続けましょう。メインコンテンツを覆い隠さず、簡単に閉じられるような設定にしておくことも大切です。

訴求力の維持とユーザー体験の向上のバランスを見ながら、ポップアップを利用してコンバージョン向上に役立ててください。