スケルトンスクリーン
Skeleton Screen
Webやアプリでデータを読み込む間、画面に表示される仮の灰色の枠組み
簡単に説明すると
スケルトンスクリーンは、アプリなどでデータが読み込まれるのを待つ間、画面に仮のレイアウトを表示する仕組みだよ。 動画アプリやSNSを開いた時に、文字や画像が入る部分にグレーの四角い枠が先に表示されて、後から中身がパッと現れる動きがこれにあたるんだ。画面が真っ白なまま待たされるより、読み込み中であることが視覚的に伝わりやすくなるよ。
名前のヒミツ
スケルトンスクリーン（Skeleton Screen）は、英語で『骨格』を意味する『スケルトン』と『画面』を組み合わせた言葉だよ。データの読み込み中に、画面に表示されるコンテンツの配置や骨組みを薄い灰色などの図形で表現することからこう呼ばれているんだ。海外ではスケルトンローダーと呼ばれることもあるよ。
くわしく見てみよう！
スケルトンスクリーンとは、Webサイトやアプリでデータが読み込まれるまでの間に表示される、画面の骨組みのような仮のデザインのことだよ。
画面全体が真っ白なまま何も表示されない状態が続くと、人は「動いていないのかな？」と不安になりやすいんだ。
これを表示しておくことで、システムが今まさにデータを読み込んでいる最中であることを伝えることができるよ。
かんたんに言うと、これから表示される情報の「下書き」のような役割を果たしているよ。
例えば、記事のタイトルが入る場所には細長いグレーの四角、写真が入る場所には大きめのグレーの四角といったように、画面のレイアウトに合わせたブロックが並べられるんだ。
これにより、次にどんな情報が画面のどこに表示されるかが事前に分かり、待っている間の体感時間が短くなると言われているよ。
スマートフォンアプリや多くのWebサイトでは、画面の中央でくるくると回り続けるマークの代わりに、このデザインを採用するケースが多く取り入れられているよ。
画面全体が少しずつ出来上がっていくような視覚的な演出をすることで、ただ待たされているような感覚を和らげる効果があるんだ。