Skeleton Screen

スケルトン・スクリーン / 2013– / 技法 / UI表現

読み込み中に回転印を出さず、内容が入る前の空の画面を先に見せて、そこへ情報を少しずつ流し込む方法。Luke Wroblewskiが2013年に自作アプリPolarでの反省としてこの名で紹介した。待たせている事実ではなく、進んでいることを見せる。

読み込み中に回転印や進捗バーが出ない / 本文や画像が入る場所に、同じ寸法の無地の面が先に置かれている / 内容が届く前からレイアウトが確定していて、届いても要素が動かない / 情報が一度に出ず、領域ごとに順番に埋まっていく

辞書情報

向いている用途: 一覧やタイムラインの初回読み込みで、回転印をやめて体感速度を上げたいとき。内容が届いた瞬間に要素がずれる画面を、位置と寸法を先に確定させて直したいとき
文字: 文字は置かない。見出しと本文が入る位置には、実際の行の高さと行長に合わせた無地の面を並べる。
構成: 本番の画面の骨格をそのまま使う。要素の位置と寸法を先に確定させ、内容が入っても動かないようにする。
素材: 地の色から一段階だけ離した無彩色の面を使う。角丸と寸法を実物に合わせ、色数は増やさない。
注意: 実物と寸法の違う面を並べると、内容が届いた瞬間に画面全体がずれ、置き換えたはずの回転印より落ち着かない画面になる。
関連研究: 2013年の記事が回転印を批判した理由と、進捗をどう定義しているか / Polarで利用者の反応がどう変わったと書かれているか / 無地の面の寸法が実際の内容とずれている実例

辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。

Link: https://indexstyle.org/ja/styles/skeleton-screen
Markdown: [スケルトン・スクリーン（Skeleton Screen） — デザインスタイル辞典](https://indexstyle.org/ja/styles/skeleton-screen)
HTML: <a href="https://indexstyle.org/ja/styles/skeleton-screen">スケルトン・スクリーン（Skeleton Screen） — デザインスタイル辞典</a>