本文へスキップ
待機の設計

スケルトンスクリーンは何を隠すのか

スケルトンスクリーンは何を隠すのか

要点

  • スケルトンスクリーンは、内容の輪郭を先に見せて読み込みの予感を作る手法。
  • 回転するスピナーよりも、待機を短く感じさせやすいとされる。
  • 効果の核心は、空白の不安を「もうすぐ形になる」という期待に置き換える点にある。
  • ただし中身がなかなか来なければ、輪郭はむしろ空約束として裏切りに変わる。

画面が真っ白になる瞬間が、いちばん長く感じる。読み込み中の数秒、何も起きていないように見えるその空白を、私たちは時計よりも大きく見積もってしまう。スケルトンスクリーン——これから現れる要素の輪郭を、灰色の四角や線で先に描いておく手法——は、この空白の扱いに対する一つの答えだ。中身の代わりに骨格を見せる。だから「スケルトン」と呼ばれる。

ルーク・ロブレウスキーは二〇一三年に、回転するスピナーを避けるべきだと書いた。スピナーは「待っている」という事実だけを伝え、何が起きているのかを語らない。対してスケルトンは、これから何が、どこに現れるのかを先取りして示す。利用者の視線は、空白を埋めるためではなく、もうすぐ届く内容を待つために置かれる。同じ待機でも、向ける先が変わる。

不安を期待に置き換える

なぜ輪郭を見せるだけで体感が変わるのか。鍵は、待機のあいだに利用者が何をしているか、にある。空白を前にした人は、止まっているのか、壊れたのか、と疑いはじめる。その疑いの時間が、待機を実際より長く感じさせる。進捗の演出が体感を左右するのと同じ構図で、ここでも問題は秒数ではなく、秒数に対する不安のほうだ。

スケルトンは、その不安に先回りして輪郭という約束を差し出す。約束があれば、人は完成形を思い描きながら待てる。占有された時間は、手持ち無沙汰の時間より短く感じられる——待ち行列の心理でも語られるこの原則が、ここでも働いている。灰色の骨格は、視線と想像を占有しておくための装置なのだ。

輪郭が約束する以上、果たさねばならない

だが、この手法には裏面がある。輪郭は一種の約束であり、約束は果たされてこそ意味を持つ。骨格を見せたのに中身がなかなか届かなければ、利用者は二度裏切られる。一度目は待たされたことで、二度目は「もうすぐ」という予感が嘘だったことで。一方、読み込みが一瞬で終わるなら、スケルトンを出す必要はそもそもない。点滅する骨格が一瞬だけちらついて消えるのは、かえって落ち着かない。

つまりスケルトンスクリーンが効くのは、待機が「短すぎず、長すぎない」帯域に限られる。あまりに速ければ邪魔になり、あまりに遅ければ空約束になる。もっとも、この中間の帯域こそ、現実の通信環境でもっとも頻繁に訪れる時間でもある。だからこの手法は、例外的な場面の小技ではなく、日常の待機を整える基本的な作法として広まった。

白い画面が灰色の骨格に変わったところで、データが早く届くわけではない。サーバーの処理は同じだけかかる。それでもスケルトンスクリーンは、待つという経験そのものを書き換える。何も見せないことは、何も設計していないことに等しい。空白をどう満たすかという問いに、輪郭という最小限の答えを差し出すこと——待機の設計とは、結局のところ、見えない時間に手触りを与える作業なのだと思う。

参考文献

  1. Luke Wroblewski「Mobile Design Details: Avoid The Spinner」LukeW Ideation + Design, 2013.
  2. Nielsen Norman Group「Progress Indicators Make a Slow System Less Insufferable」(待機インジケータに関する解説記事).
Window Latency 編集部 体感時間と待機の設計を追う編集チーム

ニュースレター

待つ時間の観察を、週に一度。

体感時間・待機・同期にまつわる新着記事を、控えめにお届けします。