ローディング画面の簡単な作り方！JavaScriptをコピペするだけで実装できる方法

ウェブサイトの離脱率を下げたい
ブランドイメージをよくしたい
どうしても最初に伝いたいメッセージがある

そんなあなたに、おすすめのローディング画面の作り方の記事です。

ウェブサイトの読み込みが遅くて、コンテンツを見てもらう前に、ユーザーが離脱していませんか。だからといって読み込みに時間がかかるとしても、外せないコンテンツもあるので困ってしまいますよね。ウェブサイトに来た瞬間0.1秒でも目に入る画面は、ユーザーがすぐに離脱しないようするために、とても重要なものです。

そんな重要な瞬間に表示させる画面を、ユーザーがすぐに離脱しないようにできる方法があります。少しの工夫でウェブサイトの直帰率を下げることができるのなら、やっておきたいですよね。

実際に何をするかというと、コンテンツを表示する前にローディング画面を作り表示させます。ウェブサイトに限らずアプリなどでも、ローディング画面を表示させてるサービスを見たことあるのではないでしょうか。

ローディング画面作り方を覚えて、ローディング画面を表示させることで、ユーザーに読み込み時間中のストレスを与えず、アニメーションやメッセージで期待感を高めることも可能です。

この記事では、ローディング画面の作り方、そのHTML、CSS、JavaScriptのコードを紹介します。このページの最初に表示されていたものを、コピペでそのまま使用できますので、ぜひ最後まで読んでください。

ローディング画面の作り方
ローディング画面の簡単な作り方まとめ

ローディング画面の作り方

この項目で、ローディング画面の作り方を紹介します。用意してある表示方法は、「読み込み完了→フェードアウト2秒」と「3秒表示→ファードアウト2秒」の2つです。コピペでできるようになっていますが、必要に応じて修正をしてください。

ユーザーに読み込み時間中のストレスを与えない用が、JavaScript①「読み込み完了→フェードアウト2秒」で、ブランドイメージをよくするため、最初に伝えたいメッセージがある用が、JavaScript②「3秒表示→ファードアウト2秒」です。

ローディング画面の作り方の手順

HTMLコードをコピペ

そのままHTML部分にコピペ。表示を変更したいなら「ローディング中…」の部分にコンテンツを入れる
CSSコードをコピペ

そのままCSS部分にコピペ。背景色、コンテンツの表示位置を変更したい場合は修正する
JavaScriptコードをコピペ

そのままJavaScript部分にコピペ。表示させる秒数を変更したいなら秒数を調整する
表示チェック

表示に問題ないか、思ってる通りか確認する
完了

ローディング画面の表示に問題なければ完了

HTML

<div class="loading">
ローディング中…
</div>

<div class="loading">〜div の間にローディング画面で表示させたいコンテンツを入れる。

CSS

.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  /* 背景色の設定 */
  background-color: #ffffff;
  z-index: 9999;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

background-color: #ffffff;:で背景色を白に設定してるので、変更する場合はここに別のカラーコードを設定する。

JavaScript①

このJavaScriptのコードは「読み込み完了→フェードアウト2秒」

こちらで動作を確認できます。

$(function () {
  function end_loading() {
    // ページ読み込み完了後フェードアウトする時間
    $('.loading').fadeOut(2000);
  }
  $(window).on('load', function () {
    // ページ読み込み完了時にend_loading()を実行
    if ($('body').attr('data-loaded') === 'true') {
      end_loading();
    } else {
      $(window).on('pageshow', function () {
        end_loading();
      });
    }
  });

  // ページ読み込み完了時にdata属性を追加
  $(document).ready(function () {
    $('body').attr('data-loaded', 'true');
  });
});

$('.loading').fadeOut(2000);でファードアウトする時間を2秒に設定してあるので、変更したい場合はここに秒数を設定する。1000で1秒となっているので、500で0.5秒、10000で10秒。

JavaScript②

このJavaScriptコードは「3秒表示→ファードアウト2秒」

こちらで動作を確認できます。

$(function () {
  function end_loading() {
  // フェードアウトする時間
    $('.loading').fadeOut(2000);
  }
  $(window).on('load', function () {
    setTimeout(function () {
      end_loading();
  // ローディング画面を表示する時間
    }, 3000)
  })
})

$('.loading').fadeOut(2000);でファードアウトする時間を2秒に設定してあるので、変更したい場合はここに秒数を設定する。

}, 3000)でユーザーがページを開いてからの表示時間を3秒に設定してあるので、変更したい場合はここを変更。

HTMLとCSSのコードは共有で、JavaScriptコードは目的に合わせて①と②と選択してください。

WordPressで使用する場合に、テーマによってはサイドバーのレイヤーが1番上にきてる場合があります。その場合こちらのCSSコードをstyle.cssに記述してみてください。

#main {
  z-index: 1;
}
#sidebar {
  z-index: 0;
}

ローディング画面の簡単な作り方まとめ

HTMLコード、CSSコード、JavaScriptコードの①か②のどちらかをコピペすれば簡単にローディング画面が作れます。ただし環境によって表示がおかしい場合は調整が必要です。

この記事を紹介しておきながらですが、使う前提ではなく、目的があり、目的とローディング画面の表示が一致しているなら使用することをおすすめします。リッチコンテンツが多くて読み込み時間がかかるページ、企業や商品サイトでのブランドイメージの向上、などなど。

この記事に「3秒表示→ファードアウト2秒」のローディング画面を最初つけていましたが、リダイレクトエラーでGoogleにインデックスされませんでした。ローディング画面自体がインデックスされるかどうか直接的な影響はないようですが、表示の調整が必要なので、この記事にローディング画面が不要と判断したので外してます。

インデックスされずに、リダイレクトエラーになっていたのは、Search Consoleの「インデックス登録のリクエスト」するURLの最後にスラッシュ（ / ）をつけてなかったのが原因でした。ローディング画面をつけてもインデックスに支障ありません。

以上、ローディング画面の簡単な作り方についてでした。