Web Storageを活用し、初回アクセス時のみローディング画面を表示する方法

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>
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;}
CSS

ポイント：

  • .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秒間ローディング画面を表示 }});
JavaScript

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); }});
JavaScript

コードの詳しい解説

  1. sessionStorage.getItem('visited')
    • sessionStorageからvisitedというキーで保存された値を取得します。
    • 値がなければnullが返り、初回アクセスと判断できます。
    • 値があれば（2回目以降）、ifブロックの中の処理が実行されます。
  2. loadingElement.classList.remove('is-active')
    • 2回目以降のアクセス時には、即座にis-activeクラスを取り除き、ローディング画面が表示されないようにします。
  3. sessionStorage.setItem('visited', 'true')
    • 初回アクセス時に、visitedというキーで'true'という値をsessionStorageに保存します。
    • これにより、ユーザーがタブを閉じるまでの間、このキーが保持され、次回以降のアクセスは「2回目以降」と判定されるようになります。
  4. setTimeoutによる遅延処理
    • 初回アクセス時は、すぐにローディング画面を消すのではなく、一定時間（ここでは1.2秒）表示させます。
    • その後、opacityを0にすることで、CSSのtransitionが適用され、滑らかにフェードアウトします。
    • opacityが0になった後、display: none;を適用するためにis-activeクラスを削除します。これにより、非表示になったローディング画面がクリックなどを妨げることがなくなります。

まとめ

sessionStorageを活用することで、ユーザー体験を損なうことなく、サイトの第一印象を効果的に演出できます。このテクニックは、ポートフォリオサイトやキャンペーンサイトのオープニングアニメーションなど、様々な場面で応用可能です。

read next