Webサイトを訪れたユーザーに良い第一印象を与えるため、洗練されたローディングアニメーションは非常に効果的です。しかし、ページを移動するたびに同じアニメーションが表示されると、かえって煩わしく感じさせてしまう可能性があります。
この記事では、ブラウザのWeb Storage APIを利用して、「セッション中の初回アクセス時」にだけローディング画面を表示させる方法を、具体的なコードと詳しい解説付きで紹介します。
なぜWeb Storageを使うのか？
この実装の目的は、「ユーザーがサイトを訪れた最初の1回だけ」という状態を記憶し、2回目以降はローディング画面をスキップすることです。この「状態の記憶」に最適なのが、ブラウザに標準で搭載されているWeb Storage機能です。
sessionStorageとlocalStorageの違い
Web Storageには、主に2つの種類があります。
| 種類 | データが保持される期間 | 用途の例 |
|---|---|---|
| sessionStorage | タブまたはブラウザを閉じるまで | 今回のように、サイト訪問中（セッション中）の初回アクセス判定に使います。 |
| localStorage | ユーザーが手動で削除するまで永続 | 「次回からこのメッセージを表示しない」といった、永続的な設定の保存に使います。 |
今回は「サイトを訪れている間（セッション中）の最初のアクセス」を判定したいため、sessionStorage を使用するのが最も適切です。
実践的なコード例
それでは、実際にHTML, CSS, JavaScriptを組み合わせた実装を見ていきましょう。
1. HTMLの構造
まず、ローディング画面本体と、Webサイトのコンテンツ部分を用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初回ローディングデモ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ローディング画面 -->
<div class="loading js-loading is-active">
<div class="loading__spinner"></div>
</div>
<!-- メインコンテンツ -->
<main class="main-content">
<h1>ようこそ！</h1>
<p>このページは、セッションの初回アクセス時にのみローディング画面が表示されます。</p>
<p>ページをリロードしても、ローディング画面は表示されません。</p>
</main>
<script src="script.js"></script>
</body>
</html>ポイント：
- ローディング画面の
div（.js-loading）に、デフォルトで表示状態を示すis-activeクラスを付与しておきます。
2. CSSで見た目を整える
次に、ローディング画面のスタイルと、簡単なスピナーアニメーションを定義します。
/* 基本スタイル */
body {
font-family: sans-serif;
}
/* ローディング画面のコンテナ */
.loading {
/* 最初は非表示にしておく */
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 9999;
/* フェードアウトのためのトランジション */
opacity: 1;
transition: opacity 0.8s ease;
}
/* is-activeクラスが付与されたら表示 */
.loading.is-active {
display: flex;
justify-content: center;
align-items: center;
}
/* スピナーのアニメーション */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading__spinner {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* コンテンツ部分 */
.main-content {
padding: 2rem;
}ポイント：
.loading自体はdisplay: none;で隠しておき、.is-activeクラスが付いたときにdisplay: flex;で表示されるように制御します。transitionプロパティを設定しておくことで、後からopacityを変更した際に滑らかなフェードアウト効果が生まれます。
3. JavaScriptで表示を制御する
最後に、sessionStorageを使って表示を制御するJavaScriptです。ここでは、よりモダンで汎用的なVanilla JS（素のJavaScript）で記述します。
document.addEventListener('DOMContentLoaded', function() {
const loadingElement = document.querySelector('.js-loading');
// 1. sessionStorageに 'visited' キーがあるか確認
if (sessionStorage.getItem('visited')) {
// 2. あった場合 (2回目以降のアクセス)
// is-activeクラスを削除して、ローディング画面を非表示にする
loadingElement.classList.remove('is-active');
} else {
// 3. なかった場合 (初回アクセス)
// 'visited' キーをsessionStorageにセット
sessionStorage.setItem('visited', 'true');
// 4. 少し遅延させてからフェードアウト処理を開始
setTimeout(() => {
loadingElement.style.opacity = '0';
// 5. フェードアウト完了後に要素を非表示にする
setTimeout(() => {
loadingElement.classList.remove('is-active');
}, 800); // CSSのtransition時間と合わせる
}, 1200); // 1.2秒間ローディング画面を表示
}
});jQueryを使用する場合のコード例
もしプロジェクトでjQueryを使用している場合は、以下のように書くこともできます。
$(function() {
var $loading = $('.js-loading');
if (sessionStorage.getItem('visited')) {
$loading.removeClass('is-active');
} else {
sessionStorage.setItem('visited', 'true');
setTimeout(function() {
$loading.fadeOut(800, function() {
$(this).removeClass('is-active');
});
}, 1200);
}
});コードの詳しい解説
sessionStorage.getItem('visited')sessionStorageからvisitedというキーで保存された値を取得します。- 値がなければ
nullが返り、初回アクセスと判断できます。 - 値があれば（2回目以降）、
ifブロックの中の処理が実行されます。
loadingElement.classList.remove('is-active')- 2回目以降のアクセス時には、即座に
is-activeクラスを取り除き、ローディング画面が表示されないようにします。
- 2回目以降のアクセス時には、即座に
sessionStorage.setItem('visited', 'true')- 初回アクセス時に、
visitedというキーで'true'という値をsessionStorageに保存します。 - これにより、ユーザーがタブを閉じるまでの間、このキーが保持され、次回以降のアクセスは「2回目以降」と判定されるようになります。
- 初回アクセス時に、
setTimeoutによる遅延処理- 初回アクセス時は、すぐにローディング画面を消すのではなく、一定時間（ここでは1.2秒）表示させます。
- その後、
opacityを0にすることで、CSSのtransitionが適用され、滑らかにフェードアウトします。 opacityが0になった後、display: none;を適用するためにis-activeクラスを削除します。これにより、非表示になったローディング画面がクリックなどを妨げることがなくなります。
まとめ
sessionStorageを活用することで、ユーザー体験を損なうことなく、サイトの第一印象を効果的に演出できます。このテクニックは、ポートフォリオサイトやキャンペーンサイトのオープニングアニメーションなど、様々な場面で応用可能です。
