サイト訪問時にスプラッシュ画面を一度だけ表示させる方法

ウェブサイトを訪れた際に、最初に目に入るのが「スプラッシュ画面」です。スプラッシュ画面は、サイトのロゴやメッセージ、アニメーションなどを一時的に表示して訪問者にインパクトを与えるために使われます。これにより、サイトにアクセスしたときに、ユーザーにブランドを認識してもらうことや、デザインを強調することができます。しかし、何度も訪問しているリピーターに対して、毎回スプラッシュ画面が表示されるのは煩わしい場合もあります。

この記事では、初回訪問時にのみスプラッシュ画面を表示し、次回以降の訪問ではスキップする方法について詳しく説明します。このテクニックは、訪問者に一度だけインパクトを与え、次回以降はスムーズにコンテンツにアクセスしてもらうための手法として非常に有効です。

Contents

スプラッシュ画面を初回訪問時に表示するための方法
- クッキーを使った方法
- ローカルストレージを使った方法
スプラッシュ画面のユーザビリティ向上
まとめ

スプラッシュ画面を初回訪問時に表示するための方法

まず、初回訪問時にだけスプラッシュ画面を表示する方法にはいくつかの手段があります。代表的な方法としては、以下の二つが挙げられます。

クッキーを使用して訪問履歴を保存する方法
ローカルストレージを使用して訪問履歴を保存する方法

この2つの方法のどちらも、ユーザーのブラウザに情報を保存し、次回の訪問時にその情報を読み取ってスプラッシュ画面を表示するかどうかを判断します。それぞれの方法について、メリットとデメリットを見ていきましょう。

クッキーを使った方法

クッキーは、ユーザーのブラウザに情報を保存するための非常に一般的な方法です。以下に、クッキーを使用してスプラッシュ画面を初回訪問時にだけ表示するコードの例を示します。

$(window).on('load', function() {
    // クッキーに訪問フラグを保存するキー名（ページごとに一意に設定する）
    var visitKey = 'visited_' + window.location.pathname;

    // クッキーから訪問フラグを取得
    function getCookie(name) {
        var value = "; " + document.cookie;
        var parts = value.split("; " + name + "=");
        if (parts.length == 2) return parts.pop().split(";").shift();
    }

    // クッキーに訪問フラグを保存
    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

    // 訪問フラグが存在しない場合は一回目の訪問とみなす
    if (!getCookie(visitKey)) {
        // クッキーに訪問フラグを保存（ここでは30日間有効）
        setCookie(visitKey, 'true', 30);

        // スプラッシュ画面とロゴを表示
        $("#splash").delay(1500).fadeOut('slow');
        $("#splash_logo").delay(1200).fadeOut('slow');
    } else {
        // 一回目以降の訪問の場合はスプラッシュ画面を非表示にする
        $("#splash").hide();
    }
});

クッキーのメリット

幅広いブラウザサポート：クッキーはほぼすべてのブラウザでサポートされており、古いバージョンでも問題なく動作します。
有効期限の設定：クッキーには有効期限を設定することができ、例えば30日後にもう一度スプラッシュ画面を表示したい場合などに便利です。

クッキーのデメリット

データ量の制限：クッキーに保存できるデータのサイズは非常に小さい（約4KB程度）ため、大量のデータを保存するには不向きです。
プライバシー問題：クッキーはユーザーのブラウザに情報を保存するため、GDPR（欧州一般データ保護規則）などの規制に基づき、訪問者に通知する必要がある場合があります。

ローカルストレージを使った方法

一方、ローカルストレージは、HTML5で導入された比較的新しい技術で、ユーザーのブラウザに情報を保存するために使われます。クッキーとは異なり、保存できるデータ量が多く、ユーザーの同意を得る必要がないため、スプラッシュ画面の表示制御には非常に便利です。

以下は、ローカルストレージを使用した場合のスプラッシュ画面の表示コードです。

$(window).on('load', function() {
    // クッキーに訪問フラグを保存するキー名（ページごとに一意に設定する）
    var visitKey = 'visited_' + window.location.pathname;

    // クッキーから訪問フラグを取得
    function getCookie(name) {
        var value = "; " + document.cookie;
        var parts = value.split("; " + name + "=");
        if (parts.length == 2) return parts.pop().split(";").shift();
    }

    // クッキーに訪問フラグを保存
    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

    // 訪問フラグが存在しない場合は一回目の訪問とみなす
    if (!getCookie(visitKey)) {
        // クッキーに訪問フラグを保存（ここでは30日間有効）
        setCookie(visitKey, 'true', 30);

        // スプラッシュ画面とロゴを表示
        $("#splash").delay(1500).fadeOut('slow');
        $("#splash_logo").delay(1200).fadeOut('slow');
    } else {
        // 一回目以降の訪問の場合はスプラッシュ画面を非表示にする
        $("#splash").hide();
    }
});

ローカルストレージのメリット

保存できるデータ量が多い：ローカルストレージはクッキーに比べてはるかに多くのデータ（約5MB）を保存できます。これにより、様々なデータをユーザーのブラウザに保存しておけるため、柔軟な使い方が可能です。
セキュアな保存：ローカルストレージはクッキーのようにサーバーに自動的に送信されないため、データのセキュリティをある程度確保できます。