スケルトンスクリーン

解説

スケルトンスクリーンは、ページやデータを読み込んでいる間に、表示される予定の画面の骨組みを、ワイヤーフレームのような図形で先に示すデザインパターンです。ヘルプサイトでは、検索結果や記事一覧のように、読み込みに時間がかかる画面で使われることがあります。

実務での使われ方

スケルトンスクリーンは、待ち時間を短く感じさせる目的で使います。回転アイコン（スピナー）は、何かを待っていることしか伝えません。一方で、スケルトンスクリーンは、どのような内容が画面のどこに表示されるかを先に示します。そのため、NN/gによると、画面が徐々に完成形へ移っていくように見え、待ち時間が短いように感じられます。さらに、表示が完了したときの画面の飛びも抑えられます。

スケルトンスクリーンが向いているのは、一覧やダッシュボードのように、レイアウトがあらかじめ決まっている画面です。反対に、何が表示されるか分からない画面では、内容の配置を先に示せないため、スケルトンスクリーンは向きません。

注意点

読み込みがすぐに終わる画面では、スケルトンスクリーンは不要です。NN/gは、読み込みが1秒未満であればスケルトンスクリーンもスピナーも必要なく、スケルトンスクリーンは10秒未満で終わるページ全体の読み込みに使うものとしています。

また、表示する枠の数や大きさが実際の中身と食い違うと、読み込みが終わったときに、かえって画面が大きく動いた印象を与えます。