#150
心理学・認知バイアス
#150すけるとんすくりーん
スケルトンスクリーン
別名・表記:Skeleton ScreenSkeleton LoadingPlaceholder
UIXHERO Definition
「読み込み中の骨組み」。コンテンツのシルエットを先に表示しておく手法。
概要
AppleやFacebookなどが早期に導入し、一般化したUIパターン。 以前は「Loading...」の文字やスピナーを表示するのが一般的だったが、スケルトンスクリーンは「もうすぐここにコンテンツが表示されますよ」という期待感を持たせることで、ユーザーのイライラを軽減する効果がある。
UXでの活用
- 体感速度の向上: 画面が真っ白（White Screen）な時間が減るため、実際にはロード時間が変わらなくても、ユーザーには「サクサク動いている」ように感じられる。
- 視線の誘導: コンテンツが表示される前からレイアウト構造を提示できるため、ユーザーの視線を事前にコントロールし、スムーズな視線移動を促すことができる。
💡 使いどころ
ページ全体の読み込みや、リストの無限スクロール時。特にモバイルアプリやSPA（Single Page Application）で標準的に使われる。
⚠️ 注意点・誤用
スケルトンのレイアウトと、実際に表示されるコンテンツのレイアウトが大きく異なると、表示された瞬間にガタつき（Layout Shift）が発生し、逆効果になる。あくまで「完成予想図」であるべき。
具体例
- YouTubeの動画読み込み画面（グレーの四角とテキストの線が表示される）
- Facebookのタイムライン読み込み
出典・参考文献:
- Nielsen, J. (1993). Usability Engineering. Academic Press.
- Harrison, C., Amento, B., Kuznetsov, S., & Bell, R. (2007). Rethinking the progress bar. In Proceedings of the 20th annual ACM symposium on User interface software and technology (pp. 115–118).
- Bouch, A., Kuchinsky, A., & Bhatti, N. (2000). Quality is in the eye of the beholder: Meeting users' requirements for internet quality of service. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp. 297–304).
- Google. (2020). Core Web Vitals. Retrieved from