Webサイトを訪れたユーザーに、お得なキャンペーン情報や重要な告知を届けたい。そんな時、ポップアップは非常に効果的なツールです。しかし、何度も同じポップアップが表示されると、ユーザーは「またか…」とストレスを感じ、サイトから離れてしまうかもしれません。
せっかくの機会を活かそうと設置したポップアップが、かえってユーザーの不満やサイト離脱を招くという事態は避けたいですよね。
ユーザーに嫌がられず、でも伝えたいメッセージはしっかり届ける。その鍵を握るのが、「初回アクセス時のみポップアップを表示する」という賢い戦略です。このシンプルな工夫一つで、ユーザー体験（UX）を損なうことなく、サイトの成果を大きく引き上げることができます。
「難しそう」「専門的な知識が必要なのでは？」と不安に思う方もいるかもしれません。ご安心ください。この記事では、専門的な技術知識がなくても、コピペするだけで実装できる具体的な方法を、初心者にもわかりやすく解説します。
この記事を読み終える頃には、あなたはポップアップを単なる「お知らせ」ではなく、ユーザーとサイトの関係をより良くする強力な武器として使いこなせるようになるでしょう。
初回アクセス時のみポップアップを表示する基本知識と仕組み
まずは、初回アクセスをどのように判定するのか、その基本的な仕組みです。
初回アクセスを判定する仕組み
Webサイトの初回アクセスを判定するためには、ユーザーのブラウザに「このサイトにアクセスしたことがある」という情報を保存する必要があります。この情報を保存する技術として、主にCookie（クッキー）とLocalStorage（ローカルストレージ）の2つが使われます。
Cookie（クッキー）
特徴: ウェブサーバーとブラウザ間で情報をやり取りするための小さなデータファイルです。有効期限を設定でき、期限が切れると自動的に削除されます。
メリット: 有効期限をコントロールできるため、「1週間後に再度表示」「セッション（ブラウザを閉じるまで）のみ表示」といった柔軟な設定が可能です。サーバー側でも情報を読み取ることができるため、ユーザー認証などにも広く利用されます。
LocalStorage（ローカルストレージ）
特徴: ブラウザにデータを永続的に保存するための仕組みです。有効期限がなく、ユーザーが手動で削除しない限りデータは残り続けます。
メリット: 永続性が高いため、「一度ポップアップを表示したら二度と表示しない」といった用途に最適です。Cookieと異なり、サーバーへの送信は行われず、ブラウザ側のみで完結するため、シンプルかつ高速に動作します。
ポップアップの初回表示判定には、有効期限を気にせず永続的に情報を保存できるLocalStorageが適しています。ユーザーがブラウザのキャッシュをクリアしない限り、二度と表示されません。
Cookie・LocalStorageを使った初回アクセス判定の方法
ここでは、LocalStorageを使って初回アクセスを判定する具体的なコード例を解説します。今回は、ポップアップの初回表示判定に最適なLocalStorageを使用します。
LocalStorageを使った判定コード例
以下のJavaScriptコードは、localStorage.setItem()とlocalStorage.getItem()という2つのメソッドを使って、ブラウザに「visited」というキーで「true」という値を保存し、次回のアクセス時にその値があるかどうかを判定する仕組みです。
JavaScript
// ポップアップを表示するための関数
function showPopup() {
document.getElementById('popup').style.display = 'block';
}
// 初回アクセスかどうかを判定する関数
function checkFirstVisit() {
// LocalStorageに 'visited' というキーが存在するかチェック
if (localStorage.getItem('visited') === 'true') {
// 2回目以降のアクセスなので、何もしない
console.log("2回目以降のアクセスです。");
} else {
// 初回アクセスの場合
console.log("初回アクセスです。ポップアップを表示します。");
// ポップアップを表示する関数を呼び出し
showPopup();
// LocalStorageに 'visited' キーをセットして、2回目以降は表示しないようにする
localStorage.setItem('visited', 'true');
}
}
// ページ読み込み完了時に判定関数を実行
window.onload = checkFirstVisit;
コードの解説
localStorage.getItem('visited') === 'true'で、ブラウザに「visited」という情報が保存されているかを確認します。- 情報がなければ（
elseブロック）、showPopup()関数を呼び出してポップアップを表示します。 - ポップアップを表示した後、
localStorage.setItem('visited', 'true')を実行し、ブラウザに「アクセス済み」という情報を永続的に保存します。 - 次回以降のアクセス時には、
ifブロックの条件がtrueとなり、ポップアップは表示されません。
このシンプルなコードだけで、初回アクセス時のみポップアップを表示するという目的を達成できます。
HTML＋JavaScriptで完結するシンプルなポップアップ表示コード例
次に、上記のJavaScriptと組み合わせるためのHTMLとCSSの具体的なコード例を見ていきましょう。このコードは、そのままコピー＆ペーストして使えるようにシンプルに構成されています。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初回アクセス時ポップアップ</title>
<style>
/* ポップアップの基本的なスタイル */
.popup-overlay {
display: none; /* 初期状態では非表示 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* 半透明の背景 */
z-index: 1000; /* 他の要素より手前に表示 */
justify-content: center;
align-items: center;
opacity: 0; /* フェードイン用 */
transition: opacity 0.5s ease-in-out; /* アニメーション設定 */
}
.popup-overlay.is-visible {
display: flex; /* 表示状態 */
opacity: 1;
}
.popup-content {
background-color: #fff;
padding: 30px;
border-radius: 10px;
text-align: center;
width: 90%;
max-width: 500px;
position: relative; /* 閉じるボタン配置用 */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.popup-close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #aaa;
cursor: pointer;
border: none;
background: none;
line-height: 1;
}
</style>
</head>
<body>
<h1>Webサイトのタイトル</h1>
<p>ここにコンテンツが入ります。</p>
<div id="popup" class="popup-overlay">
<div class="popup-content">
<button class="popup-close-btn">×</button>
<h2>限定キャンペーン実施中！</h2>
<p>今なら初回限定で全商品10%OFFクーポンをプレゼント！</p>
<a href="#" class="coupon-link">クーポンをGETする</a>
</div>
</div>
<script>
// ポップアップ要素の取得
const popupElement = document.getElementById('popup');
const closeButton = document.querySelector('.popup-close-btn');
// ポップアップを表示する関数
function showPopup() {
popupElement.classList.add('is-visible');
}
// ポップアップを閉じる関数
function closePopup() {
popupElement.classList.remove('is-visible');
}
// 初回アクセスを判定し、ポップアップを表示する
function checkFirstVisit() {
if (localStorage.getItem('visited') !== 'true') {
showPopup();
localStorage.setItem('visited', 'true');
}
}
// ページ読み込みが完了した後に実行
window.addEventListener('load', checkFirstVisit);
// 閉じるボタンにイベントリスナーを追加
closeButton.addEventListener('click', closePopup);
</script>
</body>
</html>
コードの解説
CSSの解説:
.popup-overlay
ポップアップ全体の背景（オーバーレイ）を定義します。display: none;で初期状態を非表示にし、is-visibleというクラスが付与されたときにdisplay: flex;に切り替えて表示します。transition: opacity 0.5s ease-in-out;opacityプロパティの変化を滑らかにするための設定です。これにより、ポップアップがふわりと表示されるフェードイン演出が可能です。.popup-content
ポップアップの中身となるコンテナです。背景色や影、角丸などを設定します。.popup-close-btn
ポップアップを閉じるためのボタンです。position: absolute;を使って、ポップアップコンテンツの右上隅に配置しています。
JavaScriptの解説:
popupElement.classList.add('is-visible');
HTML要素のクラスを追加・削除するclassListプロパティを使っています。これにより、CSSのスタイルを適用・解除し、ポップアップの表示・非表示を切り替えています。この方法だと、表示・非表示のロジックをCSSとJavaScriptで分離できるため、より管理しやすくなります。
実際の表示
See the Pen initial-access-popup-display-01 by watashi-xyz (@watashi-xyz) on CodePen.
※一度アクセスした場合はlocalStorageを削除をしない限りポップアップの確認ができません。もう一度見たい場合はブラウザの開発ツールでローカルストレージのvisitedを削除してみてください
実装方法別サンプルコード（コピペOK）
ここでは、より実践的なポップアップの実装方法を、具体的なコード例とともにご紹介します。
ページを開いた瞬間にモーダルウィンドウを表示する
最も基本的なポップアップの表示タイミングは、ページが完全に読み込まれた直後です。window.onloadまたはDOMContentLoadedイベントを使って、このタイミングを正確に捉えましょう。
DOMContentLoaded
HTMLドキュメントの読み込みと解析が完了した時点で発火します。CSSや画像などの外部リソースの読み込みは待機しません。
window.onload
ページ上のすべてのコンテンツ（画像、CSS、JavaScriptファイルなど）が完全に読み込まれた後に発火します。
ポップアップはHTMLの読み込み後すぐに表示したいことが多いため、DOMContentLoadedの方がより早く表示できるという利点があります。
ページ読み込み完了時のコード例
JavaScript
document.addEventListener('DOMContentLoaded', function() {
// 初回アクセスかどうかをチェック
if (localStorage.getItem('visited') !== 'true') {
const popup = document.getElementById('popup');
const closeBtn = document.querySelector('.popup-close-btn');
// ポップアップの表示
popup.classList.add('is-visible');
// ポップアップを閉じる処理
closeBtn.addEventListener('click', function() {
popup.classList.remove('is-visible');
});
// 訪問情報をLocalStorageに保存
localStorage.setItem('visited', 'true');
}
});
このコードでは、DOMContentLoadedイベントのリスナーとして無名関数を登録しています。この関数内で初回アクセス判定とポップアップ表示の処理を一括して行っています。
スマホ・PC両対応！レスポンシブなポップアップの実装方法
モバイルフレンドリーなサイトが必須となる現代では、ポップアップもレスポンシブ対応が不可欠です。CSSのメディアクエリを使って、画面サイズごとにポップアップの見た目を最適化しましょう。
レスポンシブ対応のCSSコード例
上記のCSSコードに以下のメディアクエリを追加することで、スマートフォンでの表示を改善できます。
CSS
/* スマホ向けのスタイル */
@media (max-width: 768px) {
.popup-content {
/* スマホでは画面いっぱいに表示 */
width: 100%;
height: 100%;
max-width: none;
border-radius: 0; /* 角丸をなくす */
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.popup-close-btn {
top: 20px;
right: 20px;
font-size: 30px;
}
}
実装のポイント
max-width: 768px
このブレイクポイントは、一般的にタブレットやスマートフォンの横幅に対応しています。- スマホでのデザイン
スマホでは画面全体にポップアップを広げ、コンテンツを見やすくします。width: 100%、height: 100%、border-radius: 0を設定することで、モーダルウィンドウではなく、オーバーレイページのような表示になります。 - ボタンの大きさ
指でタップしやすいよう、閉じるボタンのサイズを大きく（font-size: 30pxなど）設定します。
Cookie同意ポップアップ（GDPR対応）のサンプルコードと例文
GDPR（一般データ保護規則）やCCPA（カリフォルニア州消費者プライバシー法）などのプライバシー規制が厳しくなる中、Cookie同意ポップアップは多くのサイトで必須となっています。ユーザーがCookieを許可・拒否できる選択肢を提供することで、法律を遵守し、ユーザーの信頼を獲得できます。
GDPR（General Data Protection Regulation、一般データ保護規則）とは？
EU（欧州連合）で2018年に施行された個人データ保護に関する包括的な規則です。企業や組織が顧客やユーザーの個人データをどのように収集・利用・保管・共有するかを明確にし、透明性と安全性を確保することを目的としています。
主な特徴は以下のとおりです：
- 同意の重視：個人データの利用には、データ主体（利用者本人）の明確な同意が必要
- 利用目的の明確化：収集したデータを「いつ・何のために使うか」を説明しなければならない
- データ主体の権利強化：アクセス権（自分の情報を確認する権利）、訂正・削除請求、データの持ち運び（ポータビリティ）などが認められる
- 違反時の制裁：最大で全世界年間売上高の4％または2,000万ユーロのいずれか高い方の罰金が科される可能性がある
つまりGDPRは、単なるEU域内の法律ではなく、EU在住者のデータを扱うすべての企業に影響する国際的な規制です。日本企業であってもEUの顧客を相手にする場合は遵守が求められます。
CCPA（California Consumer Privacy Act、カリフォルニア州消費者プライバシー法）とは？
2018年に制定され、2020年から施行された米国カリフォルニア州における個人情報保護法です。カリフォルニア州在住者の個人データを収集・利用する企業に対して、消費者のプライバシー権を保障することを目的としています。
主な特徴は以下のとおりです：
- 消費者の知る権利：どのような個人情報が収集され、どの目的で利用され、誰と共有されるかを企業は開示しなければならない
- 削除請求権：消費者は自分の個人情報の削除を要求できる
- 販売の拒否権（オプトアウト）：消費者は自分の情報を第三者に「販売」することを拒否できる
- 差別禁止：プライバシー権を行使したことを理由にサービスや価格で不利益を与えることは禁止されている
- 罰則：違反した場合、民事訴訟や罰金の対象になる可能性がある
GDPRと異なり、CCPAは「消費者の権利を強調する米国型の規制」であり、特に「情報の販売」に焦点を当てている点が特徴です。また、対象はカリフォルニア州に限定されますが、オンライン事業を展開する企業にとっては州外・国外企業も影響を受ける可能性があります。
GDPR対応のポップアップコード例
このコードは、ユーザーが「同意する」ボタンをクリックした場合にのみ、訪問情報をLocalStorageに保存します。
HTML
<div id="cookie-popup" class="popup-overlay">
<div class="popup-content">
<h2>Cookie利用に関するお知らせ</h2>
<p class="cookie-text">
当サイトでは、サービスの改善、ユーザー体験の向上、および広告配信のためにCookieを使用しています。
<a href="/privacy-policy" target="_blank">プライバシーポリシー</a>をご確認ください。
</p>
<div class="cookie-buttons">
<button id="accept-cookie-btn">同意する</button>
<button id="reject-cookie-btn">拒否する</button>
</div>
</div>
</div>
JavaScript
document.addEventListener('DOMContentLoaded', function() {
const cookiePopup = document.getElementById('cookie-popup');
const acceptBtn = document.getElementById('accept-cookie-btn');
const rejectBtn = document.getElementById('reject-cookie-btn');
// 'cookie_consent' がLocalStorageになければ表示
if (localStorage.getItem('cookie_consent') !== 'true' && localStorage.getItem('cookie_consent') !== 'false') {
cookiePopup.classList.add('is-visible');
}
acceptBtn.addEventListener('click', function() {
// 同意した場合
localStorage.setItem('cookie_consent', 'true');
cookiePopup.classList.remove('is-visible');
});
rejectBtn.addEventListener('click', function() {
// 拒否した場合
localStorage.setItem('cookie_consent', 'false');
cookiePopup.classList.remove('is-visible');
});
});
法律的な注意点:
- 明示的な同意: ユーザーが「同意する」というボタンを能動的にクリックすることが求められます。
- 撤回権: ユーザーはいつでも同意を撤回できる必要があります。プライバシーポリシーページなどで、Cookieの削除方法を明記しましょう。
- 必須ではないCookie: サービスの提供に必須ではないCookie（マーケティング用など）は、ユーザーの同意がない限り利用してはいけません。
同意文言の例文:
パターン1（シンプル）:
「当サイトでは、より快適にご利用いただくため、Cookieを使用しています。サイトの閲覧を続けるには、Cookieの使用に同意してください。」
パターン2（詳細）:
「当サイトは、サイトの利便性向上、トラフィック分析、広告配信のためにCookieを利用しています。これにより、お客様に最適なコンテンツや広告を提供します。詳細については、プライバシーポリシーをご確認ください。」
パターン3（選択肢あり）:
「当サイトでは、機能性、分析、マーケティングを目的としたCookieを使用しています。すべてのCookieに同意するか、個別に設定を変更することができます。」
UX改善・CVR向上に繋げるポップアップ戦略
ポップアップはただ表示するだけでは意味がありません。ユーザーに不快感を与えず、目的の行動に繋げるための戦略が重要です。
ユーザー離脱を防ぐ「最適なタイミング・フェードイン」演出と注意点
ポップアップの表示タイミングは、その効果を大きく左右します。不適切なタイミングはユーザーを不快にさせ、すぐにサイトを離れてしまう原因となります。
効果的な表示タイミングの考え方
ページ表示から「〇秒後」に表示：
最も一般的な方法です。ユーザーがコンテンツを読み始める時間を考慮し、5秒〜10秒後に表示するのがおすすめです。
「ページスクロール後」に表示：
ユーザーがページを半分以上スクロールしたタイミングで表示します。これは、ユーザーがコンテンツに興味を持っていることを示唆するため、効果的なタイミングです。
「離脱時」に表示（Exit Intent Pop-up）：
ユーザーがブラウザのウィンドウを閉じようとしたり、別のタブに移動しようとしたりする瞬間に表示します。これにより、離脱を防ぐ最後のチャンスを作り出せます。
フェードイン演出で不快感を軽減
ポップアップが突然画面に現れると、ユーザーは驚き、不快に感じることがあります。CSSのtransitionプロパティを使って、フェードイン・フェードアウトのアニメーションを付けることで、より自然な表示にすることができます。
CSS
.popup-overlay {
/* ... 既存のスタイル ... */
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.popup-overlay.is-visible {
opacity: 1;
}
これにより、ポップアップが0.5秒かけてゆっくりと表示され、視覚的にスムーズなユーザー体験を提供できます。
ポップアップ表示でSEO評価は下がる？Googleのガイドラインを解説
「ポップアップはSEOに悪影響がある」という話を聞いたことがあるかもしれません。これは、Googleがモバイルのインタースティシャル広告について定めているガイドラインに基づいています。
Googleのガイドラインは、モバイル検索結果から遷移した際に、コンテンツの大部分を覆い隠すようなポップアップを避けるべきだと定めています。これは、ユーザーがモバイルでコンテンツにすぐにアクセスできない状態は、ユーザー体験を損なうと判断されるためです。
SEO評価を下げないための対策
コンテンツを覆い隠しすぎない：
画面下部からスライドして表示されるバナーや、画面の大部分を覆い隠さない小さなポップアップは、問題になりにくいとされています。
簡単に閉じられるようにする：
ポップアップにわかりやすい「×」ボタンや「閉じる」ボタンを設置し、ユーザーがすぐに非表示にできるようにしましょう。
ページ読み込み直後に表示しない：
ユーザーがまだコンテンツを認識していない段階でポップアップが表示されると、Googleからペナルティを受ける可能性があります。上記で解説したように、数秒後やスクロール後に表示する方が安全です。
法的義務のあるポップアップは例外
Cookie同意ポップアップや年齢確認ポップアップなど、法律や規制で表示が義務付けられている場合は、Googleもこれを許容しています。
Googleタグマネージャー＋GA4でポップアップ効果を測定する方法
ポップアップは、表示して終わりではありません。その効果を測定し、改善を繰り返すことが重要です。Googleタグマネージャー（GTM）とGoogleアナリティクス4（GA4）を使えば、ポップアップの表示回数やクリック数を簡単に計測できます。
GTMでカスタムイベントを設定する
まずは、ポップアップが表示された時と、ポップアップ内のボタンがクリックされた時に、それぞれイベントを計測するタグをGTMで作成します。
ステップ1: ポップアップ表示イベントの設定
トリガー:
「ページの表示」トリガーを設定し、ポップアップを表示する特定のページで発火するようにします。
タグ:
- タグタイプ：GA4 イベント
- イベント名：
popup_view - イベントパラメータ：
popup_type：first_visit
ステップ2: ボタンクリックイベントの設定
トリガー:
「クリック – すべての要素」トリガーを設定し、ポップアップ内のボタン（例：クーポンをGETするボタン）のCSSセレクタ（a.coupon-linkなど）を指定します。
タグ:
- タグタイプ：GA4 イベント
- イベント名：
popup_click - イベントパラメータ：
popup_button_text：{{Click Text}}（ボタンのテキストを自動取得）
GA4でコンバージョンとして設定する
GTMで設定したイベントを、GA4の管理画面でコンバージョンとしてマークします。
- GA4の管理画面で「管理」>「イベント」に進みます。
- GTMで設定したイベント名（例：
popup_click）を探します。 - 右端の「コンバージョンとしてマーク」を有効にします。
これにより、GA4のコンバージョンレポートで、ポップアップからのコンバージョン数を確認できるようになります。
よくある質問（FAQ)
-
2回目以降もポップアップが表示されてしまいます
-
localStorage.setItem(‘visited’, ‘true’);というコードが、正しく実行されていない可能性があります。JavaScriptのコンソールでlocalStorage.getItem(‘visited’)と入力し、trueが返ってくるか確認してください。また、ブラウザのキャッシュやCookieを削除した場合は、再訪と認識されずにポップアップが表示されるのが正常な動作です。
-
ポップアップがずれて表示されてしまいます
-
CSSのpositionプロパティが正しく設定されていない可能性が高いです。ポップアップの親要素にposition: relative;を、ポップアップ自体にposition: fixed;またはposition: absolute;を設定し、top、left、transformプロパティで位置を調整しましょう。特にposition: fixed;は、画面のスクロールに影響されず、常に同じ位置に表示されるため、ポップアップに適しています。
-
ポップアップの表示が遅いです
-
ポップアップの表示トリガーがwindow.onloadになっている場合、画像などの読み込みが完了するまで待機するため表示が遅れることがあります。DOMContentLoadedを使うことで、HTMLが読み込まれた直後に表示できるため、体感速度を改善できます。
-
ポップアップの内容を動的に変更したいです
-
JavaScriptでHTML要素のコンテンツ（innerHTML）を書き換えることで可能です。例えば、日替わりのキャンペーン情報をポップアップに表示したい場合は、JavaScriptで日付を判定し、表示するコンテンツを切り替えるロジックを追加します。
まとめ
この記事では、初回アクセス時のみポップアップを表示するための具体的な実装方法から、マーケティング戦略、SEOへの影響、効果測定まで、網羅的に解説しました。
ポップアップは、使い方を間違えればユーザーを遠ざけてしまう諸刃の剣です。しかし、この記事で紹介したような「ユーザーに配慮した設計」と「データに基づいた改善」を行うことで、WebサイトのUXを損なうことなく、コンバージョン率を劇的に向上させることが可能です。
