{"id":"skeleton-screen","no":539,"name":"Skeleton Screen","ja":"スケルトン・スクリーン","era":"2013–","family":"UI表現","kind":"技法","collection":"Dictionary expansion 26","addedAt":"2026-08-19","source":{"title":"LukeW (Luke Wroblewski) — Mobile Design Details: Avoid The Spinner","url":"https://www.lukew.com/ff/entry.asp?1797"},"reference":{"status":"verified","pageUrl":"https://www.lukew.com/ff/entry.asp?1797","credit":"LukeW (Luke Wroblewski) — Mobile Design Details: Avoid The Spinner"},"essence":"読み込み中に回転印を出さず、内容が入る前の空の画面を先に見せて、そこへ情報を少しずつ流し込む方法。Luke Wroblewskiが2013年に自作アプリPolarでの反省としてこの名で紹介した。待たせている事実ではなく、進んでいることを見せる。","cues":["読み込み中に回転印や進捗バーが出ない","本文や画像が入る場所に、同じ寸法の無地の面が先に置かれている","内容が届く前からレイアウトが確定していて、届いても要素が動かない","情報が一度に出ず、領域ごとに順番に埋まっていく"],"intents":["技術","信頼","静けさ"],"works":["一覧やタイムラインの初回読み込みで、回転印をやめて体感速度を上げたいとき","内容が届いた瞬間に要素がずれる画面を、位置と寸法を先に確定させて直したいとき"],"recipe":{"type":"文字は置かない。見出しと本文が入る位置には、実際の行の高さと行長に合わせた無地の面を並べる。","layout":"本番の画面の骨格をそのまま使う。要素の位置と寸法を先に確定させ、内容が入っても動かないようにする。","material":"地の色から一段階だけ離した無彩色の面を使う。角丸と寸法を実物に合わせ、色数は増やさない。"},"avoid":"実物と寸法の違う面を並べると、内容が届いた瞬間に画面全体がずれ、置き換えたはずの回転印より落ち着かない画面になる。","colors":["#FFFFFF","#E4E6EA","#F2F4F6"],"motif":"graphic","pair":["material-design","flat-design"],"study":["2013年の記事が回転印を批判した理由と、進捗をどう定義しているか","Polarで利用者の反応がどう変わったと書かれているか","無地の面の寸法が実際の内容とずれている実例"],"en":{"essence":"A loading treatment that drops the spinner and shows a blank version of the page instead, then fills information into it as the data arrives. Luke Wroblewski named the technique in 2013, writing about his own app Polar, where a spinner had made testers report that the app felt slower than the previous version. The aim is to show advance toward the goal rather than the act of waiting.","cues":["No spinner and no progress bar while the screen loads","Blank fields already standing where text and images will land, at the size they will occupy","A layout committed before the data arrives, so nothing shifts when it does","Regions filling in one after another instead of the whole screen appearing at once"],"works":["Replacing the spinner on the first load of a list or timeline to raise perceived speed","Fixing a screen where elements jump as data lands, by committing position and size in advance"],"recipe":{"type":"Set no type at all. Where headings and body will go, lay blank fields matched to the real line height and measure.","layout":"Reuse the finished screen's skeleton. Commit every position and dimension first so nothing moves once the content lands.","material":"Use neutral fields one step away from the background. Match corner radius and size to the real elements and add no further colour."},"avoid":"If the blank fields do not match the real content's dimensions, everything shifts the moment data lands, which reads worse than the spinner it replaced.","study":["why the 2013 article attacked the spinner, and how it defines progress","what change in user reaction it reports for Polar","cases where the dimensions of the blank blocks do not match the actual content"]}}