クリックでは閉じないモーダルを表示し、10秒後に自動で別ページへ遷移させる方法

Webサイト運営において、
重要なお知らせを確実に読んでもらいたい
一定時間表示後に自動で別ページへ誘導したい
といったケースは少なくありません。

本記事では、

• モーダルをクリックで閉じられないようにする
• 一定時間（10秒）経過後に自動で別ページへリダイレクトする
• 表示頻度を制御する（例：12時間に1回）

という仕様を、汎用サンプルコードで解説します。

実装イメージ

• ページ読み込み時にモーダルを表示
• ユーザー操作（クリック）では閉じられない
• 表示から10秒後に自動的に別ページへ移動
• 同一ユーザーには短時間で何度も表示しない

HTML（モーダル構造サンプル）

<div class="modal-overlay">
  <div class="modal-contents">
    <div class="modal-body">
      <p class="title">【タイトル】</p>
      <p>タイトルが入ります。</p>
      <p>
        テキスト記入エリアテキスト記入エリア
      </p>
    </div>
  </div>
</div>

※ URL・文言はすべてサンプルです。

JavaScript（10秒後に自動リダイレクト）

<script>
$(function () {
    var overlay = $('.modal-overlay');

    // 表示制御用キー
    var modalKey = 'modalLastShown';
    var limitTime = 12 * 60 * 60 * 1000; // 12時間

    var lastShown = localStorage.getItem(modalKey);
    var now = new Date().getTime();

    // 初回アクセス or 一定時間経過後のみ表示
    if (!lastShown || (now - parseInt(lastShown)) > limitTime) {
        overlay.addClass('active');
        localStorage.setItem(modalKey, now.toString());

        // 10秒後に自動遷移
        setTimeout(function () {
            window.location.href = 'https://example.com/sample-redirect/';
        }, 10000);
    }

    // クリックによる閉じ操作はあえて実装しない
});
</script>

毎回表示させる場合

<script>
$(function () {
    var overlay = $('.modal-overlay');

    // 常にモーダル表示
    overlay.addClass('active');

    // 10秒後に必ずリダイレクト
    setTimeout(function () {
        window.location.href = 'https://example.com/sample-redirect/';
    }, 10000); // 10秒
});
</script>

ポイント解説

① クリックで閉じられない設計

• 閉じるボタンを設置しない
• 背景クリックによる close 処理を実装しない

これにより、ユーザー操作では閉じられないモーダルになります。

② setTimeout で時間指定リダイレクト

setTimeout(function () {
    window.location.href = '遷移先URL';
}, 10000);

• 10000 = 10秒
• 数値を変更するだけで表示時間を調整可能

③ localStorage による表示回数制御

localStorage.setItem('modalLastShown', now.toString());

• 同一ブラウザでは一定時間モーダルを再表示しない
• 過度な表示によるUX低下を防止

この仕組みが向いているケース

• サービス終了・重要告知
• 運営方針変更のお知らせ
• 専用ページへの案内を確実に表示したい場合
• LP やキャンペーンページへの強制導線

注意点

• 自動リダイレクトはユーザー体験に配慮して使用する
• モバイル環境では表示時間をやや長めにするのも有効
• ブラウザの仕様により、新規タブ自動オープンは制限される

---

まとめ

クリックでは閉じられないモーダルと、
時間経過による自動リダイレクトを組み合わせることで、

• 重要情報の視認性向上
• 誘導率の安定化
• 運営側の意図を明確に伝える

といった効果が期待できます。

本記事のサンプルコードをベースに、
表示時間やリダイレクト先を調整して活用してみてください。

Favorite