状態
ローディング
Loading
ローディングとは、いま画面が何かを読み込んでいる最中だとユーザーに伝え、待ち時間の不安をやわらげる状態です。
定義
ローディングは、いま画面が何かを読み込んでいる最中だということをユーザーに伝えるための状態です。 くるくる回るスピナーを見せたり、実際のコンテンツが入る場所にグレーの骨組みだけを先に敷いておく スケルトンを使ったりして、もうすぐ中身が埋まることを予告します。サーバーからデータを受け取っている あいだ画面をまっさらな白紙のままにしておくと、ユーザーは止まっているのか壊れているのか分からず 不安になります。ローディング表示はまさにその空白の時間を埋めて、いま一生懸命動いているので もう少し待ってほしい、という合図を代わりに伝えてくれます。一覧を読み込むとき、画面を初めて開くとき、 ボタンを押して保存するときのように、結果がすぐに返ってこないほとんどの場面でこのローディング表示が活躍します。
なぜ重要か
人は画面が反応せずに止まっていると、実際にかかった時間よりもずっと長くもどかしく感じます。 何の表示もない数秒は永遠のように感じられ、ユーザーはリロードを押したり、いっそ画面を閉じて しまったりします。ローディング状態はこの不安をなだめる仕掛けです。何かが進行しているという 視覚的な合図があるだけで、人はずっと辛抱強く待てるようになります。とくにスケルトンは、最終的な 画面がどんな形で埋まるのかを先に見せてくれるので、実際の速度は同じでも体感速度が目に見えて 速くなります。結果がいつ来るのか予測できるようになるだけで、待ち時間の質が変わるのです。 逆にローディング表示がないと、どれだけサーバーが速くても画面が鈍く頼りない印象を与えてしまいます。 結局ローディング状態は、実際の性能を超えて、ユーザーが待ち時間をどう感じるかという体感の問題を 扱う仕掛けなのです。同じ3秒でも、よく設計されたローディングの前では短く感じられ、何の表示もない 静けさの前ではただひたすら長く感じられます。
よくある間違い
- ごく短い待ち時間にまでローディング表示を出してしまうことです。0.1秒で終わる処理にスピナーが パッと点滅すると、かえって画面が雑然と不安定に見えます。目障りなちらつきだけが残ります。
- 1秒以上かかっているのに、何の表示もなく画面をそのままにしておくことです。ユーザーは止まったと 勘違いして同じボタンをもう一度押したり、離脱してしまったりします。
- スケルトンの形が実際のコンテンツと全然違うことです。骨組みと実際の画面のサイズや位置が ずれていると、中身が入ってくる瞬間にレイアウトがガクッと跳ねて、かえって散らかって見えます。
実務のヒント
- 待ち時間が短く結果の位置を予測しにくいときはスピナーを、入ってくるコンテンツの場所がはっきり しているときはスケルトンを使いましょう。スケルトンは最終的な姿を先に見せるので体感速度を目に見えて高めます。
- 1秒以上かかる処理には必ずローディング表示を置き、ごく短い待ち時間にはあえて出さないように しましょう。一瞬のちらつきは、かえって画面を不安定に見せてしまいます。
- スケルトンのサイズと配置は実際のコンテンツにできるだけそっくり合わせましょう。場所が正確に 予約されていれば、中身が埋まるときにレイアウトが跳ねず、なめらかにつながります。
AIに頼む
下に貼り付けるコンポーネントで、データを待っている間に画面がただ空っぽのままになっている箇所を全部見つけて。1秒以上かかる可能性のあるリクエストには必ずローディング表示を入れて、ただし入ってくるコンテンツの場所がはっきりしているリスト・カード・プロフィールにはスケルトンを、結果の位置が予測しにくい短い操作にはスピナーを配置して。0.1秒以内に終わる即時の操作には何も表示しないで。各箇所ごとにスピナー／スケルトンのどちらをなぜ選んだのかと、修正したコードを一緒に出して。
下に貼り付ける[コンポーネント — 例: 商品カードのリスト]の実際のマークアップを基準に、サイズ・位置・間隔がぴったり合うスケルトンを作って。実際のコンテンツが占めるwidth・height・行数をそのまま予約して、データが入ってくる瞬間にレイアウトがずれないように(CLSなしで)場所を確保して。スケルトンの形が実際の画面とずれると、かえってごちゃごちゃするから、テキストの行・サムネイル・ボタンの位置まで、できるだけ実際と一致させて。スケルトンコンポーネントのコードと、実際のコンテンツに対してどこをどう合わせたのかを説明して。
下に貼り付けるローディングロジックで、スピナーが一瞬で現れて消えてちらつく問題を直して。リクエストが始まってすぐには表示せず、約300msが過ぎても終わらないときだけスピナーを見せるように遅延をかけて、0.1秒で終わるリクエストにはそもそも表示されないようにして。その代わり、一度表示されたスピナーは最低500msは維持して、現れた途端に消えるちらつきを防いで。この遅延・最小表示ロジックを再利用できるフックか関数として切り出して、修正したコードを出して。