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

WordPressを利用している場合は、ポップアップ用のプラグインを導入するだけで実装できます。

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

失敗しないCMS導入手順の秘訣をまとめた初心者向けCMS完全攻略ガイド

ポップアップとは?

リスト数を確実に増やすための5つの方法とおススメのツール|HubSpot

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

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

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

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

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

ポップアップは何に使える?

ポップアップ機能を有効に使えるシーンについてもう少し詳しく見ていきましょう。

まず、ポップアップ画面はどのようなタイミングで表示するよう設定できるのでしょうか。主なポイントをご紹介します。

ページのアクセス ユーザーがWebページを開いたときに表示。キャンペーン情報など、訪問者全員にとってメリットのある情報を伝えたい時に有効です。
ページの離脱 タブを閉じたりページをバックしたりなど、ユーザーがWebページを離脱しようとしたら表示されます。入力フォームなどで入力途中に誤って離脱してしまうのを防止できます。
クリック ユーザーがボタンやテキストをクリックした際に表示されます。商品紹介のページで拡大写真などの追加の情報を表示できます。
経過時間 ユーザーがページを開いて一定時間が経過したときに表示されます。一定時間滞在している=ある程度興味関心があると推測できるユーザーに向けたメッセージを表示できます。

大体のポップアップにはモーダルが採用されています。モーダルとは、閉じるやキャンセルなどのアクションをしない限り別の操作ができないよう制御する機能を指します。
 

ポップアップを利用するメリット・デメリットは?

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

メリット

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のクラシックエディタと同じ操作でコンテンツを作成します。
 

ポップアップの各種設定

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

 

Popups

Popups – WordPress Popup – WordPress プラグイン | WordPress.org 日本語

ポップアップさせる経過時間だけでなく「ユーザーのスクロールによるページ長さの何%まで到達」をイベントにして、ポップアップを表示させることができます。追加フォーム、追加トリガー(ポップアップ表示条件)、時間経過によるポップアップ画面クローズ、Google Analyticsとの連係などの機能が追加された有料版の「Popups Premium」もあります。
 

コンテンツ作成画面

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

ポップアップの各種設定

項目名 設定内容の説明
PopUp Appearance ポップアップ画面の色、ポップアップ画面の背面の色やぼかし度合いなどを設定できます。カスタムCSSも設定できます。
PopUp Display Rules ポップアップを表示するページ(投稿、固定など)を設定します。
Display Options ポップアップを表示する場所、トリガー(クリック、経過時間、ユーザーのスクロール量)が設定できます。また、ポップアップをスライド効果やフェード効果で登場させる設定ができます。

下記項目では、有料版の紹介、ショートカットの説明が記載されています。

項目名 記載内容
Popups Premium Popups Premium(有料版)で追加される機能
Popups Shortcodes FacebookボタンやTwitterボタンを表示するショートカットコードの説明

 

HubSpot(CRM・Email Marketing・Live Chat・Forms・Analytics)

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

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

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

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

プラグインをインストールすると次の画面が表示されます。まずは「1.訪問者をリードに転換する」の「今すぐ開始」をクリックします。

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

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

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

 

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

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

項目名 設定内容の説明
キービジュアル ポップアップ画面左側に表示する画像
コールアウトテキスト ポップアップ画面のテキスト(タイトル)
コールアウト本文 ポップアップ画面のテキスト(本文)
コールアウトテキストボタン 「フォームに移行するボタン」に表示するテキスト
テーマカラー 「フォームに移行するボタン」の色

《フォーム(リード情報の入力画面)》

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

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

項目名 設定内容の説明
サンキューメッセージ リード獲得後のメッセージ
ボタンを追加 ボタンを追加して、利用者をリンク先に誘導できる

 

ポップアッププラグイン導入時の注意点

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

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

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

プラグイン間の競合

ポップアップに限ったことではないですが、WordPressでプラグインをインストールするとプラグイン同士で競合してしまい、正常に動作しないことがあります。プラグインの競合が発生した際には、同じような機能を持つ別のプラグインに変更するなどしてみましょう。
 

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

ポップアップの表示設定によっては、Googleボットをブロックしてクロールエラーを発生させ、SEOに悪影響を与えてしまうプラグインがあります。なお、容易に閉じることができる、且つ妥当なサイズのポップアップはSEOへの悪影響はありません。
 

サイト表示速度への影響

ポップアップ表示を設定した場合には読み込むファイル数が大きくなり、ポップアップ導入前より表示に時間が長くなることがあります。表示速度を上げるためには、プラグイン数を絞ることが大切であることも覚えておきましょう。
 

ポップアップは「適切に」活用しよう

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

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

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

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

cms_guide_for_beginners

元記事発行日: 2020年5月07日、最終更新日: 2020年5月08日