スケルトンスクリーンはなぜ広まったのか

アプリを開くと、まだ中身は来ていないのに、灰色の四角や帯がうっすらと並んでいる。やがてそこへ、写真や文章が順に流し込まれていく。この「中身の入っていない器」を先に見せる手法を、スケルトンスクリーンと呼ぶ。回り続けるスピナーに代わって、この十年ほどで一気に広まった。両者は同じ「待機中の表示」でありながら、利用者に渡すものがまるで違う。

スピナーが示すもの

スピナーは、システムが何かをしていることを伝える。回っているあいだ、処理は続いている。だが、それが何の処理で、あとどれくらいで終わり、結果としてどんな画面が現れるのか——スピナーは何も語らない。利用者は抽象的な「処理中」という事実だけを受け取り、結末を想像できないまま待つ。ローディング画面で述べたとおり、終わりや中身の見えない待ちは長く感じられる。

もう一つの問題は、スピナーが画面の構造を一度まっさらにしてしまうことだ。さっきまであった配置が消え、白い画面に小さなアイコンだけが残る。中身が来れば配置はまた組み直される。この「消えて、また現れる」往復が、体感の待ち時間を水増しする。

スケルトンが示すもの

スケルトンスクリーンは、別の戦略をとる。これから来る内容の輪郭——見出しの位置、画像の大きさ、本文の行数——を、灰色の図形で先に描く。利用者は中身を見る前に、画面の地図を受け取る。ここに写真、ここに見出し、ここに本文。あとはそれぞれの枠が実際の内容で満たされるのを待つだけだ。

「スケルトンスクリーン」という呼び名は、デザイナーのルーク・ロブレウスキーの記述を通じて広まったとされる。彼は、利用者の注意をローディングそのものから、これから現れるコンテンツへと向け直す効果に着目した。画面遷移が因果の手がかりを与えるように、スケルトンは結末の手がかりを与える。空白を眺める時間が、組み上がりを見守る時間に変わる。

輪郭が裏切るとき

もっとも、スケルトンにも落とし穴がある。先に描いた輪郭と、実際に届いた内容が食い違う場合だ。三行の本文を予告したのに実際は一行だった、画像の枠を用意したのに画像がなかった。こうした食い違いは、組み上がる瞬間に画面を不自然に飛び跳ねさせ、かえって違和感を残す。

また、内容の構造が毎回大きく変わる画面では、そもそも輪郭を予告できない。何が来るか分からないものの器を、先に描くことはできないからだ。スケルトンが効くのは、レイアウトがある程度決まっている画面に限られる。

予感の設計

スピナーとスケルトンの違いは、待機中に「進行」を見せるか「結末」を見せるか、という違いに集約される。一方は動いていることを、他方はもうすぐ満たされることを伝える。裏を返せば、待機表示の進化とは、利用者により具体的な予感を渡そうとする試みの歴史だった。灰色の器が一瞬だけ立ち上がるその設計に、待ち時間を扱う発想の変化が刻まれている。