ページ読み込み中に表示される「ロード画面」には、さまざまな演出があります。
ただ読み込み中であることを伝えるだけではありません。サイトの世界観を表現したり、待ち時間そのものを体験の一部として見せたり。演出のスタイルは、コンセプトや目的によって大きく変わります。
当記事にロード画面のアイデアをまとめています。演出のヒントとして、ぜひご活用ください。
目次
ロード画面の役割
そもそもロード画面は何のためにあるのか。ざっとこのような役割があります。
- ページが読み込み中であることを示す。
- サイトが動作していることを伝える。
- 待ち時間のストレスを軽減する。
- 世界観やブランディングを伝える。
ロード画面のおかげで、「サイトが表示されない？」「フリーズした？」といった不安を解消できますし、待ち時間を少しでも快適にしたり、ブランドの雰囲気を伝える場としても活用できるんですよね。
Webページを閲覧する際に、ページの読み込みに時間がかかると、ユーザーは待ち時間にイライラしたり、ページが正常に表示されないのではないかと不安になったりすることがあります。ロード画面は、このようなユーザーの不安や不満を軽減するために、Webページによく用いられる仕組みです。 ロード画面の役...
ロード画面のいろんな演出アイデア
こちらにロード画面の演出アイデアをまとめているので、参考にご覧ください。
ローディングアイコン
まずは一番シンプルな「ローディングアイコン」を表示するタイプ。くるくるまわるサークルアイコンや、ドットで読み込み中であることを表現しているものがメジャーですね。
ちなみにこういったローディングアイコンなら、TCDテーマでかんたんに再現できます。詳しくはこちらの記事でご紹介しています。
多くのTCDテーマには、ロード画面を表示&カスタマイズできる機能が備わっています。 サイト訪問時やページ読み込み時に表示されるロード画面を、お好みに合わせて設定可能です。 当記事では、TCDテーマオプション「ロード画面」の設定方法を解説いたします。 Word...
オリジナルの画像をロードアイコンとして使いたい場合は、こういったプラグインもありますので、ご興味のある方はチェックしてみてください。
WordPressサイトにロード画面を実装できるプラグインをご紹介いたします。シンプルなロード画面なら簡単に実装可能です。重たいページを表示する際など、中途半端に読み込まれている状態を隠すために役立ちますので、チェックしてみてください。 有料版（Pro）にアップデートもできるようですが、当記事...
ロゴを表示する
サイトのロゴを表示するタイプもメジャーなロード画面の一つです。上記参考サイトのロゴは読み込み中に形が変化しておもしろいです。シンプルにロゴを表示させるだけでも十分成り立ちます。
キャッチコピーを表示する
キャッチコピーの後にロゴ画像も表示したTCDのデモ
サイトのキャッチコピーを表示するタイプ。世界観に引き込む演出をしたり、企業やサービスのスローガンを打ち出したい場合に使えますね。フェードで表示される綺麗なアニメーションですね。
マスクアニメーション
ロゴや画像をマスクアニメーションで見せるタイプです。
マスクアニメーションで表示したTCDのデモ
セットするロゴや画像との相性もありますが、いずれもスタイリッシュな動きですね。
ロゴと背景色が連動して変化
ロゴと背景色が変化するアニメーション。2色のイメージカラーを見せるタイプですね。シンプルなのにかっこいい演出です。
コンテンツの一部を先に表示する
軽い要素だけを先に表示しているタイプです。読み込む都度、要素の配置が変わるユニークな動きです。
進捗が伝わる演出
数字やプログレスバーを表示するなど、進捗が伝わる演出が施されているタイプです。
キャラクターアニメーション
キャラクターが歩いたりして、進捗を教えてくれるタイプです。
キャラクターが歩いているロード画面
猫の写真が動くロード画面
どちらもユニークなロードアニメーションですね。
プログレスバー
プログレス（進捗）バーを表示するタイプです。よくある表現方法ですが、シンプルなものからエフェクトにこだわったものまであります。
シンプルなバー
数値とエフェクトを足したタイプ
サイト表示までカウント
こちらもよく見る演出です。サイト表示まで数字でカウントされるので、進捗具合が伝わりやすいです。
シンプルに数値のみを表示
ロゴとパーセンテージ（右下）を一緒に表示
まとめ
今回は、いろんなタイプのロード画面をご紹介しました。
ロード画面は、単なる待ち時間ではなく、サイトの世界観を伝えるチャンスでもあります。ロゴやコピーを見せたり、進捗を示したり、時には遊び心を加えることで、ユーザーの印象は大きく変わります。
演出次第で待ち時間すら魅力的な体験に変わるので、ぜひロード画面づくりの参考にしてみてください。
TCDテーマをお使いの方は、ロード画面機能をご利用いただけます。
コメント