ポップアップバナーとは？種類、効果、設置方法まで徹底解説

2024年4月12日

Webサイト閲覧中に突然現れるポップアップバナー。

ウザいと思っていませんか？

実は、ポップアップバナーは、うまく活用すれば、コンバージョン率向上に効果的なツールなんです。

今回の記事では、

ポップアップバナーの基礎知識
種類
効果
設置方法

まで、ポップアップバナーを効果的に運用するために必要な情報を網羅しました。

ポップアップバナーの活用を検討している方は、ぜひ参考にしてみてください！

ポップアップバナーとは

ポップアップバナーは、Webサイト閲覧中に画面上に自動的に表示される広告です。

ユーザーの注意を引く効果があります。

キャンペーン情報
クーポン
ニュースレターの登録

など、さまざまな情報を訴求することができます。

ニュースレターとは？種類、メリット、作り方まで徹底解説

 【保存版】ニュースレターとメルマガの違いを徹底解説！それぞれの特徴とメリット・デメリット

ポップアップバナーの種類

ポップアップバナーには、さまざまな種類があります。

モーダルポップアップ

画面全体を覆うように表示されるポップアップバナーです。

最も目立つ効果があります。

重要な情報を訴求するのに適しています。

ノンモーダルポップアップ

画面の一部を覆うように表示されるポップアップバナーです。

モーダルポップアップよりも目立ちにくいため、ユーザーの邪魔になりにくいのが特徴です。

スライドインポップアップ

画面の端からスライドして表示されるポップアップバナーです。

他のポップアップバナーよりも目立ちにくいため、ユーザーにさりげなく情報を伝えるのに適しています。

スクロールポップアップ

ユーザーがページをスクロールした一定の位置に表示されるポップアップバナーです。

ユーザーの行動に合わせたタイミングで情報を提示することができます。

ポップアップバナーの効果

ポップアップバナーは、うまく活用すれば、以下のような効果が期待できます。

コンバージョン率の向上
ブランド認知度の向上
顧客情報の獲得
売上向上

ポップアップバナーの設置方法

ポップアップバナーは、さまざまな方法で設置することができます。

ここでは、代表的な3つの方法を紹介します。

WordPressプラグイン
HTMLコード
JavaScript
ポップアップバナー作成ツール

WordPressプラグイン

WordPressプラグインを使うと、簡単にポップアップバナーを設置することができます。

無料プラグインも多数あるので、まずは試してみるのもおすすめです。

代表的なプラグイン

Popup Maker: https://wordpress.org/plugins/popup-maker/
OptinMonster: https://wordpress.org/plugins/optinmonster/
Popper: https://wordpress.org/plugins/popper/

プラグインのインストールと設定方法

WordPress管理画面にログインします。
プラグイン > 新規追加を選択します。
検索窓に「ポップアップバナー」と入力し、検索します。
使いやすいプラグインを選び、インストール・有効化します。
プラグインの設定画面を開き、ポップアップバナーのデザインや表示設定などを設定します。
設定が完了したら、プレビューで動作確認を行います。
問題なければ、公開します。

HTMLコード

HTMLコードを使って、ポップアップバナーを設置することもできます。

ただし、HTMLやCSSの知識が必要になります。

HTMLコードの例

HTML

<div id="popup-banner">
  <div class="content">
    <h1>このサイトではクッキーを使用しています</h1>
    <p>このサイトでは、ユーザーエクスペリエンスを向上させるためにクッキーを使用しています。クッキーの使用に同意する場合は、「同意する」ボタンをクリックしてください。</p>
    <a href="#" class="button">同意する</a>
  </div>
</div>

コードは注意してご使用ください。

CSSの例

CSS

#popup-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

#popup-banner .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 500px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
}

#popup-banner .button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
}

コードは注意してご使用ください。

JavaScript

JavaScriptを使って、ポップアップバナーを設置することもできます。

HTMLやCSSの知識に加え、JavaScriptの知識が必要になります。

JavaScriptの例

JavaScript

const popupBanner = document.getElementById('popup-banner');

const showPopupBanner = () => {
  popupBanner.style.display = 'block';
};

const hidePopupBanner = () => {
  popupBanner.style.display = 'none';
};

window.addEventListener('load', showPopupBanner);

const closeButton = document.querySelector('#popup-banner .button');

closeButton.addEventListener('click', hidePopupBanner);

コードは注意してご使用ください。

上記以外にも、さまざまな方法でポップアップバナーを設置することができます。

自分のスキルや目的に合った方法を選びましょう。