Skeleton

Dictionary

画面の読み込み中であることをプレースホルダーとしてユーザーに通知します。

読み込み完了後に表示される要素の形状を事前に示すことで、ユーザーの待機時間に対する体感を改善させます。

読み込み完了後に表示される要素の形状が未定の場合、適切なSkeletonを決定できないため、Progress Indicatorの使用を推奨します。

画像単体の読み込みには、低解像度の画像を事前に表示する手法（LQIP: Low Quality Image Placeholder）を推奨します。

ソフトでぼやけた見た目の低解像度画像を事前に表示することで、画像の読み込みが完了するまでのプレースホルダーの役割を担います。

Skeletonが瞬間的にのみ表示されると、画面の点滅として認識される可能性があります。平均的な読み込み時間が0.5秒以上かかる場合にのみSkeletonを使用してください。

コンテンツの読み込みを開始すると、Skeletonが表示されます。

読み込み処理の進行中、Skeletonは継続的にアニメーションを表示します。

コンテンツの読み込みが完了すると、Skeletonは非表示となり、実際のコンテンツが表示されます。

読み込みに失敗した場合は、失敗の理由をユーザーに通知し、次に実行可能なアクションを明確に提示します。

読み込み完了後に表示される要素を模した形状をします。また、Skeletonの表面には明滅するアニメーションを繰り返し表示します。

各コンポーネントに対応するSkeletonは以下の通りです。

以下のプロパティを指定することで、独自のSkeletonを作成できます。

Skeletonの幅を決定します。

Skeletonの高さを決定します。

Skeletonの角丸の大きさを決定します。