【jQuery】初回アクセス時に一度だけ表示するポップアップの実装方法

【jQuery】初回アクセス時に一度だけ表示するポップアップの実装方法 jQuery

ウェブサイトの新規訪問者への第一印象は、その後のユーザーエンゲージメントにとって極めて重要です。特に、ユーザーがサイトに初めて訪れたときにウェルカムメッセージを表示することは、一瞬で親しみやすい雰囲気を醸し出す強力なツールとなり得ます。

しかし、このメッセージは訪問ごとに表示されると煩わしく感じられるかもしれません。そこで今回は、初回訪問時に一度だけ表示されるウェルカムポップアップの実装方法を紹介します。jQueryとブラウザのlocalStorageを使用して、新規訪問者に対して一度だけポップアップを表示し、その後の訪問では表示されない仕組みを作りましょう。手順はシンプルで、どなたでも簡単に取り組めます。

なぜ初回訪問者向けのポップアップが必要なのか？

ウェブサイトに新規訪問者が来た時、その第一印象は非常に大切です。ウェルカムメッセージのポップアップを表示することで、ユーザーとの関係をすぐに構築し、親しみやすい雰囲気を作り出すことができます。しかし、同じポップアップが何度も表示されると、ユーザーにとっては煩わしくなるかもしれません。そこで必要なのが、一度だけ表示するポップアップです。

サンプルコード

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover, .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="welcomePopup" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <h2>Welcome!</h2>
        <p>This is your first visit!</p>
      </div>
    </div>
    <script src="popup.js"></script>
</body>
</html>

JavaScript(jQuery)（popup.jsとして保存）

$(document).ready(function(){
    // 初回アクセス判定
    if(localStorage.getItem("visited") !== "true"){
        // 初回アクセス時の処理
        $('#welcomePopup').css('display', 'block');
        // localStorageにvisitedキーでtrueを設定
        localStorage.setItem("visited", "true");
    }

    // 'x'をクリックしたらポップアップを閉じる
    $('.close').click(function(){
        $('#welcomePopup').css('display', 'none');
    });
});

このスクリプトは、localStorageのvisitedキーを確認します。もしvisitedがtrueでなければ、ポップアップを表示します。そしてvisitedキーをtrueに設定します。次にユーザーがページを訪れたとき、visitedがtrueであるためポップアップは表示されません。そして、’x’をクリックするとポップアップが閉じます。

一度だけ表示するポップアップの仕組み

このポップアップの表示制御には、ブラウザのlocalStorageを活用します。localStorageは、ウェブページのデータをユーザーのブラウザに保存できる機能で、そのデータはブラウザを閉じても保持されます。これにより、ユーザーがサイトを再訪した際にはポップアップが表示されないようにすることが可能です。

まとめ

今回は、新規訪問者に対して一度だけ表示されるウェルカムポップアップの作成方法を学びました。jQueryとブラウザのlocalStorageを使用することで、初回訪問時にウェルカムメッセージを表示し、その後の訪問では表示しないという効果的な手法を実装しました。

ポップアップメッセージは、新規訪問者に対する第一印象を良くし、親しみやすい雰囲気を作り出すのに役立ちます。一方で、その表示は訪問ごとではなく初回訪問時のみに制限することで、リピート訪問者が煩わしさを感じることを避けています。

以上の知識と実装を通じて、よりユーザーフレンドリーなウェブサイトを作成するための一歩を踏み出すことができたことでしょう。今後は、この基本的な機能をさらに拡張し、訪問者の行動や属性に応じて表示するメッセージをカスタマイズするなど、さらに高度なユーザーエクスペリエンスを提供する挑戦に取り組んでみてください。