スケルトン・スクリーン
Skeleton Screen / 2013– / 技法 / UI表現
読み込み中に回転印を出さず、内容が入る前の空の画面を先に見せて、そこへ情報を少しずつ流し込む方法。Luke Wroblewskiが2013年に自作アプリPolarでの反省としてこの名で紹介した。待たせている事実ではなく、進んでいることを見せる。
ひと目で判断
見た目の特徴
- 読み込み中に回転印や進捗バーが出ない
- 本文や画像が入る場所に、同じ寸法の無地の面が先に置かれている
- 内容が届く前からレイアウトが確定していて、届いても要素が動かない
- 情報が一度に出ず、領域ごとに順番に埋まっていく
向いている用途
- 一覧やタイムラインの初回読み込みで、回転印をやめて体感速度を上げたいとき
- 内容が届いた瞬間に要素がずれる画面を、位置と寸法を先に確定させて直したいとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 文字は置かない。見出しと本文が入る位置には、実際の行の高さと行長に合わせた無地の面を並べる。
- 構成
- 本番の画面の骨格をそのまま使う。要素の位置と寸法を先に確定させ、内容が入っても動かないようにする。
- 素材
- 地の色から一段階だけ離した無彩色の面を使う。角丸と寸法を実物に合わせ、色数は増やさない。
- 注意
- 実物と寸法の違う面を並べると、内容が届いた瞬間に画面全体がずれ、置き換えたはずの回転印より落ち着かない画面になる。
- 関連研究
- 2013年の記事が回転印を批判した理由と、進捗をどう定義しているか / Polarで利用者の反応がどう変わったと書かれているか / 無地の面の寸法が実際の内容とずれている実例
関連項目
- マテリアルデザイン（Material Design）共通する印象：信頼 / 技術。スケルトン・スクリーンとマテリアルデザインの違いを見る
- フラットデザイン / ベクターミニマリズム（Flat Design / Vector Minimalism）同じ「UI表現」の系統。スケルトン・スクリーンとフラットデザイン / ベクターミニマリズムの違いを見る
UI表現をさらに見る
同じ「UI表現」から、共通する印象が多い順に次の項目を選んだ。
- ソラライズド（Solarized）共通する印象：技術 / 静けさ / 信頼。
- コマンドパレット（Command Palette）共通する印象：技術 / 静けさ / 信頼。
- ターミナルUI（Terminal UI）共通する印象：技術 / 静けさ。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- 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>