ロード画面でステータス表示に使われるUI部品にスケルトンローダーやスピナー、プログレスバーがあります。これらの使い分けを考察します。
スケルトンローダー？
YouTubeの初期画面にあるのがスケルトンローダーです。スケルトンスクリーンとも呼ばれていますね。
最たる特徴は、読み込み後のコンテンツの情報が推測しやすい点にあります。カードを読み込み中ならカードの形、リストであればリスト形…といった具合でスケルトンローダーを表示することで、ユーザーへレイアウトをあらかじめ提示することができます。
読み込み中のステータス表示に加えてコンテンツレイアウトも提示するので、ユーザーは多くの情報を待ち時間に体験し、結果的に待ち時間が短く感じる…といった効果を生み出せるらしい。
これは読み込むコンテンツが画面上の大半を占める場合に非常に強力です。一方で、例えば「アップロード中…」のような小さなアクションのステータスを示すには向かないUI部品だと思います。ユーザーのアクション処理時にはスピナーの出番です。
スピナー？
よく見かけるくるくる回るやつですね。小さな待ち時間・小さな表示領域にピッタリなUI部品です。
プログレスバー？
だんだん増えてくタイプのインジケータです。スケルトンローダーやスピナーとの大きな違いは、進行状況（今パーセントか）がひと目でわかるところです。どれくらい待ち時間（処理工数）が発生するかがあらかじめわかる場合に利用されます。Webサイトでは待ち時間が通信速度に左右されるので、あまり見かけないかもしれません。
まれに「100%になったと思ったら次のプログレスバーが出てきた」なんて小出しに表示される最悪なものも見かけますが…こんなものを作ってはいけませんよ（笑）
スケルトンローダー vs スピナー vs プログレスバー
待ち時間が発生するケースをもとに、どのインジケータを使うべきかを考察します。
アプリケーションの初期画面では？
スマホアプリやSPAなど、コンテンツを読み込むアプリの初期画面にはスケルトンローダーが適しているでしょう。
冒頭のYouTubeと同じく、Instagramの初期画面でも使用されていますね。初期画面では読み込むコンテンツの占める表示領域が比較的大きくなります。読み込み中であること+レイアウトをあらかじめ見せられるスケルトンローダーがオススメです。
スピナーだけだとあまりにも情報が少ないですし、プログレスバーを表示するほど待ち時間が発生しない場合が多いですしね。
データ送信中は？
フォーム等のデータ送信中に表示するインジケータは何通りか考えられますが、一例としてスピナーを挙げてみます。
スピナーは省スペース性がありますので、どんなレイアウトでも使いやすいのが特徴です。またユーザーの見慣れたUI部品のため、わかりやすさもピカイチです。軽量なデータ送信時に有効ですね。
一方で、待ち時間が長くなると考えられる場合（データサイズが大きい場合）はスピナーだけでは不十分です。スピナーだけが表示され続けると、「処理終わらないけど不具合かな…？」とユーザーへ誤解を与えてしまう可能性があるためです。
サイズの大きいデータの通信中は？
サイズの大きいデータの通信中（待ち時間がかかる）場合は、プログレスバーを利用してください。
Nintendo Switchでは、ゲームデータのダウンロード中にプログレスバーが表示されます。プログレスバーだけでなく、スピナー、進行度（何%か）と残り時間が表示されます。
スピナーによって、「処理中であること」を明確にしています。プログレスバーだけだと、ダウンロードが進まない場合に「処理が止まった…？」と誤解を与えるおそれがあるからでしょう。残り時間が表示されるのも非常に親切ですね。
スピナーとプログレスバーの使い分けとしては、待ち時間で分けるのが良いでしょう。待ち時間が数秒（4秒以下）の時はスピナー、それ以上はプログレスバーと分けることで、ユーザーへストレスを与えないとされています。
待ち時間が長いということは、それだけユーザーが処理中の画面を見る時間が長いということです。現在何がどれくらい進んでいるのかを明確にすべきですし、アニメーション等を使ってユーザーを楽しませる工夫をこらすのも良いと思います。
待ち時間のデザインは意外に重要
この記事で紹介したのは待ち時間に表示するUI部品です。待ち時間のデザインは、アプリ開発の観点から言えば詳細な部分なので重要視されないかもしれません。
ユーザーを待たせるような処理はできるだけ避けるべきですが、全てを回避できないのが現実です。よって細かい待ち時間でユーザーに何を提供するかは重要な部分だと思います。待ち時間を正しくデザインすることで、いわばボトルネックとなる部分の改善となります。待ち時間が増えるほど重要性が増します。
主要な機能で快適な体験を提供することも重要ですが、ユーザーが不快に感じるところを潰すもの重要です。待ち時間のデザインに、スケルトンローダーを使うのか、スピナーかプログレスバーかあるいは別のUI部品を使うのか、ぜひこの記事を参考にしてみてください。
この記事の 最終更新：2021.3.13