JavaScript

Webページ読み込みの待ち時間を活用！ロゴ表示でブランド力アップのテクニック

  /

Webサイトを訪れた際、ページの読み込みに時間がかかると、ユーザーの離脱率が高まる可能性があります。しかし、この待ち時間を有効活用して、訪問者に企業のロゴやブランドイメージを印象付けることができれば、ブランド認知度の向上につながります。

この記事では、Webページのリソースがすべて読み込まれるまで中央にロゴ画像を表示し、読み込み完了後に本来のページを表示させる方法について、HTML、CSS、JavaScriptを用いた具体的なコード記述とともに解説します。

Contents

メリット

  • ユーザー体験の向上：
    読み込み中にロゴを表示することで、ユーザーはページがただ待機状態であると感じることなく、ブランドのイメージを受け取ることができます。
  • ブランド認知度の向上：
    ロゴやブランドカラーを用いることで、訪問者の記憶に残りやすくなり、ブランド認知度が向上します。
  • 技術的な信頼感の醸成：
    スムーズなページ遷移やローディング画面のデザインは、サイトの技術的な信頼感を高める効果があります。

コードの説明や具体的な記述

HTMLコード

このコードでは、#loading 要素にロゴ画像を配置し、ページのコンテンツは #content 要素内に配置します。

<div id="loading">
    <img src="https://dad-union.com/wp-content/uploads/2023/06/logo2.jpg" alt="ロゴ画像">
</div>
<div id="content" style="display: none;">
  <!-- ここにWebページのコンテンツを配置 -->
  <h1>Webページ読み込み待ち時間にロゴを表示させてます</h1>
  <!-- コンテンツの終わり -->
</div>

CSSコード

CSSの transition プロパティを使って、コンテンツの表示が滑らかになるようにしています。

<style>
body {
    font-size: 16px;
    text-align: center;
    margin: 0;
}
h1{
    text-align: center;
    font-size: 20px;
    padding: 40px 0;
    line-height: 1.8em;
}
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    text-align: center;
}
#loading img{
  width: 200px;
  margin: 0 auto;
}
#content {
    opacity: 0;
    transition: opacity 0.5s ease;
}
</style>

JavaScriptコード

JavaScriptの addEventListener で load し、ページのすべてのリソースが読み込まれたら #loading 要素を非表示にし、#content 要素を表示させます。

<script>
window.addEventListener('load', function() {
    document.getElementById('content').style.display = 'block';
    setTimeout(function() {
        document.getElementById('content').style.opacity = 1;
        document.getElementById('loading').style.display = 'none';
    }, 1200); // 少し遅延させてから透明度を変更
});
</script>

Webページ読み込み待ち時間にロゴを表示するデモページ

上記を実装した内容は以下のデモページから確認できます。

Webページ読み込み待ち時間にロゴを表示するデモページ

注意点

  • ロゴ画像の最適化：
    ロゴ画像はできるだけ軽量化することが重要です。画像が重いとローディング画面自体の表示に時間がかかり、逆効果となります。
  • アクセシビリティの確保：
    ローディング画面の表示時間が長くなると、視覚障害を持つユーザーがページの読み込み状況を把握しにくくなる可能性があります。適切なタイミングでローディング画面を非表示にすることが大切です。
  • ブラウザの互換性：
    使用するCSSプロパティやJavaScriptの機能がすべてのブラウザでサポートされているか確認し、必要に応じてポリフィルや代替手段を検討してください。

まとめ

Webページの読み込み中にロゴ画像を表示することは、ユーザー体験の向上やブランド認知度の向上に効果的な手段です。
HTML、CSS、JavaScriptを適切に組み合わせることで、スムーズで印象的なローディング画面を実装することが可能です。
注意点を押さえつつ、自社のWebサイトにもこのテクニックを取り入れてみてはいかがでしょうか。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

addEventListener .load ページ読み込み
関連記事