Webページを閲覧する際に、ページの読み込みに時間がかかると、ユーザーは待ち時間にイライラしたり、ページが正常に表示されないのではないかと不安になったりすることがあります。ロード画面は、このようなユーザーの不安や不満を軽減するために、Webページによく用いられる仕組みです。

ロード画面の役割

Service Logo
ロード画面は、ページの読み込みが進行中であることをユーザーに視覚的に伝える役割を果たします。これにより、ユーザーは待ち時間を意識しすぎず、ページが読み込まれるまでの間に何が起こっているのかを理解できます。

一般的にロード画面はくるくる回る円やバーなどのローディングアイコンが採用されます。

Loading animation

しかし、ロード画面にブランドのロゴやキャッチコピーを差し込むことで、単なる待機時間としてだけではなく、別の役割を果たすこともあります。

  1. サイト離脱率の低下
  2. ブランドイメージの醸成
  3. 期待感の高揚

ローディングアニメーションをスプラッシュページのように使うことで、ロード画面が価値の創出に繋がります。

スプラッシュページとは:
イメージ訴求のために画像や動画、アニメーションするグラフィックスを大きく表示するページのことです。たとえば、こちらのサイトではスプラッシュページが採用されています。

ただ、ローディングとして表示するファイルは軽いデータが適しているため、スプラッシュページのような大きな画像や動画を使用するものはローディングとしては適していません(スプラッシュページはあくまでもエンターテイメント要素を創出したい時に使うもの)。そのため、素早く読み込める内容に留めるのがスマート。

では、軽いデータでどのような表現ができるのか。次でその事例を紹介してきます。

ローディングアニメーション事例

GENESIS

GENESIS

GENESIS

GAIA

GAIA

GAIA

MASSIVE

Loading of MASSIVE

MASSIVE

TENJIKU

Loading of TENJIKU

TENJIKU

HAKU

Loading of HAKU

HAKU

CURE

Loading of CURE

CURE

ローディングに使用されているのは、いずれも容量が小さいもの。素早い読み込みができて、なおかつブランドイメージの醸成・認知にも繋げるローディング画面となります。

ロード画面が
向いているサイト・向いてないサイト

ロード画面のメリットを述べてきましたが、デメリットもあります。それは、「ページごとにロード画面が表示されるのは煩わしい」という問題です。煩わしさを減らすには適度に表示制限をかけるのがおすすめです。

  • 初回アクセスのみ表示する
  • トップページのみ表示する

ただ、表示制限をかけたとしても煩わしさを感じる性質のサイトもあります。つまり、おおむね次の分類ができると思います。

向いているサイト ネットショップ、企業・店舗サイト、プロモーションサイト
向いてないサイト ブログ、ニュースサイト、メディア、ポータルサイト

まとめ

サイトのロード画面はメリットも多く、特にブランドのロゴやキャッチコピーを最初に見せられるというのはブランドイメージ醸成のためにもプラスです。これから認知させていきたいECサイトや企業サイト・店舗サイトでは最適なコンテンツになります。

  1. サイト離脱率の低下
  2. ブランドイメージの醸成
  3. 期待感の高揚

ただ、一方でブログやニュースサイトなどリピーターが多いサイトではロード画面が出る煩わしさが勝ってしまう傾向にあります。あなたのサイトがロード画面によってどれくらいメリットが得られるかを考えて実装すると良いでしょう。

TCDテーマではほぼ全テーマにロード画面のカスタマイズ機能が実装されており、主に下記項目を選択・編集可能です(※)。

  • ロゴ
  • キャッチフレーズ
  • 背景色
  • アニメーション
  • 表示するページ
  • 表示回数

TCDテーマ以外でロード画面をカスタマイズさせたい場合は、プラグインを使うのもありですね。