2020/02/28 情報を更新いたしました。

ネットサーフィンをしていると画面内に突然別のウィンドウが表示されることはないでしょうか。煩わしいこともありますが、制作サイドの視点で考えるとマーケティング的に有効な手段の一つにもなります。モーダルウィンドウとよばれるこの機能は、jQueryなどを使って実装する方法もありますが、本項では、レスポンシブデザインに対応したモーダルウィンドウをおそらく最も簡単に実装できるプラグイン「Popup Maker」の使い方についてご紹介いたします。

モーダルウィンドウとは

冒頭でも説明いたしましたが、ある特定の箇所をクリックした際や、時間経過などに合わせて、自動で表示されるポップアップウィンドウのことです。

基本的にモーダルウィンドウが表示された後は、ユーザーが何かしらのアクション(クリックやesc)を起こさない限り、画面が切り替わらず一時的にユーザーの操作を制限するという特徴があります。その特徴からも、ユーザーサイドからは、煙たがられる機能ともいえますが、本来はユーザーに対して、有益な情報を最善の形で表現できる機能です。その主な役割は以下の通りです。

モーダルウィンドウの役割

普段のブラウジングにおいてモーダルウィンドウをよく目にする箇所としては、主に下記のような場合が挙げられます。

  • 重要な確認事項をユーザーに通知する場合
  • 警告メッセージをユーザーに通知する場合
  • 確実に閲覧してほしい広告を表示する場合
  • ロード中というメッセージを表示させる場合

弊社のリリースしているテーマにもモーダルウィンドウを表示可能なモーダルCTAを実装しているテーマがあります。ROCKやFAMOUSなどです。実際にデモサイトをご覧いただいた方はすでにご存知でしょう。もちろん下記のテーマでは、本項で紹介するプラグインを導入せずに詳細を設定可能です。

ROCK(デモサイト)
FAMOUS(デモサイト)

プラグインのインストール

下記のボタンより、プラグイン「Popup Maker」をダウンロードできます。
wp-content/pluginsディレクトリにインストールした後、管理画面から有効化してください。

Popup Maker

使い方

基本設定

以下の手順通りに進めれば、必ずモーダルウィンドウを表示可能です。大きく分けて以下の3ステップで設定していきます。

  1. モーダルウィンドウの中身を設定
  2. モーダルウィンドウの起動条件を設定
  3. 表示させたいページに設定して確認

有効化するとダッシュボードのツール内に「Popup Maker」が表示されますので、「Add New Popup」をクリックし、下記の画面を表示させます。

1.通常の固定ページと同様、タイトルや、本文を入力し、挿入したい画像などを設定する

2.「Popup Settings」にてモーダルウィンドウの起動条件を設定する

1.の設定が完了したら、下にスクロールし「Add New Trigger」をクリックし条件を設定します。
「Click Open」(クリックして起動)か「Time Delay/Auto Open」(時間の経過によって自動で起動)から選択可能です。

<クリックして起動する場合>
下記箇所に表示させたいCSSのセレクタを入力します。特に入力しなくても、投稿や固定ページにリンクを表示させることで、モーダルウィンドウを表示させることが可能です。

<時間経過によって自動で起動する場合>
下記箇所にてミリ秒単位で設定可能です。設定した秒数後に自動でポップアップ表示されます。

それぞれ、クッキーを設定することで、ポップアップ画面が何度も表示されないようにもできます。
クッキーは、Trigerのすぐ下の「Add New Cookie」で設定できます。

クッキーが作成されるタイミングは、ポップアップを開いた時、閉じた時などから選択可能です。設定が完了したら公開をクリックしておきます。

公開後に、「All Popups」をクリックし一覧を表示します。ここで以下の数字をコピーしておきます。

3.表示させたいページに設定して確認

最後に表示させたい投稿ページや固定ページのテキストタブにて、下記のコードを記述します。

[popup_trigger id="2.でコピーした数字" tag="span"]任意のテキスト[/popup_trigger]

今回の例であれば、下記のように記述します。

これで実際の画面には、以下のように表示されます。

ポップアップの詳細設定

ポップアップの編集画面の下部の「Popup Settings」では、基本設定にて設定したTrigger(起動条件)以外にも以下のような設定が可能です。

  • Targeting(ポップアップを表示するページをページ単位で設定可能)

    下部のチェックボックスでスマホやタブレットでポップアップを表示するか否かを設定できます。

  • Display(テーマの選択、ポップアップのサイズ、ポップアップのアニメーション、ポジション等)
  • Close(クローズボタンが表示されるまでの秒数、オーバーレイをクリックして閉じられるかどうかなど)

モーダルウィンドウのデザインを選択可能

以下の6種類のデザインがデフォルトで用意されていますので、任意に変更可能です。

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

またデフォルトのテーマをそれぞれ編集することができ、新たなテーマを自身で追加することも可能です。非常に細かいデザインまでこだわって反映させることができます。

  • オーバーレイの設定(色、透明度)
  • コンテンツの詳細設定(パディング、枠、背景色の透明度、枠線のスタイル、ドロップシャドウ等)
  • タイトルの詳細設定(カラー、フォント、行間、配置等)
  • 本文の詳細設定(色、フォント、文字のスタイル等)
  • クローズボタンの詳細設定(テキスト、ポジション、サイズ、フォント、枠線、ドロップシャドウ等)

編集画面右手には、リアルタイムでプレビューも表示されるので、どこがどう変化するのか直感的な操作で確認できるのも実用的です。

まとめ

モーダルウィンドウを用途はさまざまで、使い方によっては、ユーザーに不快な思いをさせてしまいます。しかし、そのほとんどが適切な活用ができていない場合に起こります。当記事で紹介してきた「Popup Maker」プラグインでは、ユーザーに配慮した細やかな設定が可能ですので、うまく活用すれば、モーダルウィンドウから鬱陶しさのみを取り除き、スタイリッシュなマーケティングツールの一つとして活用できるのではないでしょうか。

最後に。本プラグインの動画解説をご視聴になりたいからはこちらからどうぞ。