Webサイト開発時、稀に必要とされるロード画面。ロード画面（あるいはロードアイコン）が必要ないほど高速にサイトが表示されることが一番望ましいのですが、そうもいかない状況が発生します。
そこでこの記事では、Nintendo Switchの有名ゲームソフトの1つであるゼルダの伝説 ブレスオブザワイルドに施されているロード画面を解剖しつつ、Webサイトでロード画面が必要とされる場面や、ロード画面設計時のポイントなどをまとめています。
ロード画面は無いに越したことはない
冒頭でも述べましたが、ロード画面は無いに越したことはありません。ロード画面を表示するということはすなわち、ユーザーを待たせてしまうことと同意だからです。ユーザーを待たせるのはもちろん好ましくありません。待ち時間が発生しないような仕組みづくりが重要です。
しかしながら、Webシステム構築・運営時の様々な場面で、どうしてもユーザーを待たせてしまう場面が出てきます。次では有名なゲームソフトを例として取り上げ、ユーザーの待ち時間に対してどのようなアプローチをとっているかをみてみます。
ゼルダの伝説 ブレスオブザワイルドにみるロード画面
（引用 : ゲーム内スクリーンショット）
ここでは、Nintendo Switchの有名ソフトの1つである、ゼルダの伝説 ブレスオブザワイルド（以下、ゼルダの伝説）を例に、ゲーム内でどのようなロード画面が施されているかを見ていきます。
ゼルダの伝説は、広大なオープンワールドを自由に冒険できるアクションアドベンチャーゲームです。精密に設計されたゲームシステムと独特な世界観により、全世界で累計1,741万本売り上げられたゲームタイトルになります。（出典：任天堂 2020年3月 決算説明資料 19スライド目）
一般にゲームでは、3Dオブジェクトを読み込み処理やレンダリング処理など、非常に大きな機械的処理がなされます。中でも3Dオブジェクトは、オブジェクトの数が多ければ多いほど、またオブジェクトが精密であればあるほど、読み込みには時間がかかります。
これはゼルダの伝説でも例外ではありません。実際に画面が遷移する時（ある場所へワープする時）に多くの3Dオブジェクトが読み込む必要があり、結果としてユーザーの待ち時間が発生します。何度か計測したみたところ、発生する待ち時間は平均10秒ほどでした。
ユーザーが操作できない待ち時間中の画面で、ユーザーを退屈させないため工夫が施されています。
（引用 : ゲーム内スクリーンショット）
ゼルダの伝説では、待ち時間に上の画像のような画面が表示されます。この画面では、
- ゲーム内の進捗状況
- ゲームをより楽しむためのアドバイス
- アイコンを駆使したアニメーション
などが表示されます。
ゼルダの伝説では待ち時間が比較的長い（平均して10秒ほど）ため、その時間を有効に使い上記のようなユーザーが見て楽しく感じるコンテンツが表示される仕組みです。この仕組みにより、待ち時間においてもユーザーが退屈することなく、楽しい気持ちを継続してゲームをプレイすることが可能になります。
ロード画面1つを取り上げただけでも細部まで精密に設計されたUI・UXデザインが施されており、大変勉強になるなと感じます。
さて、ここではゲームのゼルダの伝説を例に取り上げましたが、次からはWebサイトでどのような場合で待ち時間が発生するかを考えます。
Webサイトにおいてどのような場合にユーザーの待ち時間が発生するか
Webサイトにおいてはどのような場合にユーザーの待ち時間が発生する3パターンほどあげます。
- コンテンツ読み込み中の待ち時間（GET）
- ファイルアップロード中の待ち時間（POST・PUT・PATCH）
- 通信ネットワーク状況により発生する待ち時間
コンテンツ読み込み中の待ち時間（GET）
これは上で紹介したゲームの例と似ているものです。Webサイトにおいても頻繁に、コンテンツ（主に画像や動画、音楽など）を読み込むことが必要とされます。コンテンツを軽量化することでファイルサイズを落とし、必要とされる読み込み時間を短縮することが最優先ですが、それでも待ち時間が発生するかも知れません。
ファイルアップロード中の待ち時間（POST・PUT・PATCH）
フォームの送信時、中でもファイルアップロード時にはファイルサイズに応じたデータ送信時間がかかります。特に画像ファイル等をアップロードする場合はファイルサイズが比較的大きいため、それ相応の待ち時間が発生してしまいます。
通信ネットワーク状況により発生する待ち時間
これは主にSPA（シングルページアプリケーション）において解決が必要とされる問題です。SPAではHTML・CSS・JavaScriptを先に読み込み、コンテンツ（データ）その都度読み込む構成です。よって「画面自体は見えてるけど、動画とか画像のコンテンツの読み込みには時間がかかるな…」となる場合が考えられます。
このように通信ネットワーク状況はユーザーによって全く異なるので、ネットワーク状況の悪いユーザーへの配慮も欠かせません。
ロード画面設計時のポイント
上ではどのような場合にユーザーに待ち時間が発生するかをあげました。最後にユーザーの待ち時間を考慮した上で、適切なロード画面設計時のポイントをまとめます。
ロード画面自体を読み込む時間は短くする
ロード画面自体の読み込みに時間がかかってしまっては本末転倒です。例えユーザーの待ち時間が長い場合であっても、ロード画面自体の読み込みは速いものであるべきです。
ロード画面には、待ち時間に応じたコンテンツを表示する
ロード画面では、待ち時間に応じたコンテンツを表示するべきです。
「3秒の待ち時間に2,000字もの文章」であったり、「20秒の待ち時間に"ロード中"の4文字だけ」されるべきではありません。3秒程度の待ち時間であればロードアイコンだけ事足りるでしょうし、20秒ほど待ち時間が発生する場合はその時間を用いてユーザー楽しませる工夫が必要です。
上で紹介したゼルダの伝説では、比較的長い待ち時間に対して、様々なコンテンツをロード画面に表示することで、ユーザーを退屈させないUXを実現していました。Webサイトであれば、必要に応じてJavaScriptでネットワーク状況を判断し、ロード画面に表示するコンテンツを切り替える工夫をしても良いかも知れません。
ユーザーの通信ネットワーク状況を考慮する
スマートフォンアプリやSPAなどでは特に、ユーザーの通信ネットワーク状況を考慮したロード画面が必要になるでしょう。
YouTubeが良い例です。YouTubeでは、ユーザー端末のネットワーク状況に応じて読み込む動画の画質を自動的に切り替えています。これにより、そもそもの待ち時間を減らすことに努めています。それでも待ち時間が発生する場合は、クルクルと回るロードアニメーションが表示されます。
ロード画面をなるべく見せずに済むよう工夫した上で、それでも待ち時間が発生する場合のみロードアニメーションが表示される仕組みです。
最後に
この記事ではユーザーを退屈させないためのロード画面に焦点を当て執筆されました。
待ち時間を退屈させない仕組みの実装には、多少なりとも労力を要します。しかし小さな待ち時間も積み重なれば大きな時間となりますから、ユーザーの大切な時間を有意義に使ってもらう工夫は必要でしょう。
この記事が何かを作り出す人（今この記事を読んでいただいているあなた）の役に立てていれば幸いです。
この記事の 最終更新：2020.6.10