2025.07.08(Tue)

Web制作

sessionStorageを使って「モーダルウィンドウを一度閉じたら、次にサイトを訪れるまで表示しない」ようにする方法

Webサイトでキャンペーンやお知らせを表示するのによく使われる「モーダルウィンドウ」。

ただし、ユーザーにとっては何度も表示されると煩わしく感じることもあります。

そこで今回は、「一度閉じたら、そのセッション（＝タブが閉じられるまで）は二度と表示しない」という仕様を、JavaScriptのsessionStorageを使って簡単に実装する方法をご紹介します。

1 デモ
2 sessionStorageとは？
3 実装方法：HTML＋CSS＋JavaScript
4 まとめ

デモ

まずはデモページをご覧ください。

sessionStorageとは？

sessionStorageは、ブラウザのセッション単位（タブを閉じるまで）でデータを保存できる仕組みです。

同じタブ内であればページ遷移してもデータは保持されますが、タブを閉じれば自動でデータが削除されるのが特徴です。

つまり、「一度閉じたら、タブを閉じるまで再表示しない」動作にぴったりというわけです。

実装方法：HTML＋CSS＋JavaScript

HTML（モーダルの基本構造）

<div id="modal" class="modal">
	<div class="modal-content">
		<span id="modal-close" class="modal-close">×</span>
		<p>キャンペーン実施中！</p>
	</div>
</div>

CSS（シンプルなモーダルの見た目）

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background: white;
    padding: 20px;
    margin: 100px auto;
    width: 300px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

JavaScript（sessionStorageによる制御）

<script>
	document.addEventListener("DOMContentLoaded", function () {
		// sessionStorageにフラグがなければモーダルを表示
		if (!sessionStorage.getItem("modalClosed")) {
			document.getElementById("modal").style.display = "block";
		}

		// 閉じるボタンの処理
		document.getElementById("modal-close").addEventListener("click", function () {
			document.getElementById("modal").style.display = "none";
			// フラグを立てる（このセッションでは再表示されない）
			sessionStorage.setItem("modalClosed", "true");
		});
	});
</script>

まとめ

モーダルの表示・非表示のタイミングをユーザーに優しくコントロールすることで、UX（ユーザー体験）は大きく向上します。今回紹介したsessionStorageを使えば、「今のセッション中だけ表示しない」という手軽な制御が可能です。

サイトを訪れた瞬間にモーダルを見せたいが、2回目以降は煩わしくしたくない──そんな時に有効です。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 120 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。Web制作に関わる情報やワーケーション日記などを執筆しています。