スケルトンスクリーン

読み込み中に、完成後のレイアウトを灰色の枠で先に見せる表示。

解説

スケルトンスクリーンは、データの読み込み中に、完成後のレイアウトを灰色のブロックで先に表示する手法です。ヘルプサイトでは、検索結果や記事一覧のように読み込みに間がある画面で採用されます。表示する枠の数や大きさが実際の中身と食い違うと、かえって画面が動いた印象を与えます。

回転アイコンは「何かを待っている」ことしか伝えません。スケルトンは、この後どんな内容がどこに表示されるかを先に示すため、体感的な待ち時間が短く感じられ、表示完了時の画面の飛びも抑えられます。

向いているのは、一覧やダッシュボードのようにレイアウトがあらかじめ決まっている画面です。逆に、何が表示されるか分からない画面では使えません。また、読み込みが数百ミリ秒で終わる場合は、かえってちらつきに見えるため使わない判断もあります。