Skeleton
Skeleton は、画面の読み込み中であることを、読み込み完了後に表示される要素の形状を模したプレースホルダーとして示すコンポーネントです。形状を事前に提示することで、ユーザーの待機時間に対する体感を改善します。
1. 概要 (Overview)
説明
Skeleton は、読み込み完了後に表示される要素の輪郭をあらかじめ示すことで、ユーザーが「この場所に何が表示されるのか」を予測できるようにします。
明滅するアニメーションを継続的に表示することで「いま読み込み中である」ことを伝え、読み込み完了とともに実際のコンテンツに差し替わります。
リンク
2. 構成要素 (Anatomy)
Skeleton は、読み込み完了後に表示される要素の形状を模したシェイプによって構成されます。各コンポーネントに対応する形状を組み合わせることで、ページ全体のレイアウトを再現します。
Shape
矩形・円・テーブル行など、読み込み完了後に表示される要素の輪郭を表す図形です。表面には明滅するアニメーションを繰り返し表示します。
必須/任意: 必須
3. 使い分け (Usage)
いつ使うか
- 読み込み完了後に表示される要素の形状がある程度定まっている場合
- 平均的な読み込み時間が 0.5 秒以上かかる場合
- 読み込みの体感速度を改善したい場合
いつ使わないか
Progress Indicator を使用したほうがよい場合
読み込み完了後に表示される要素の形状が未定の場合、適切な Skeleton を決定できないため、Progress Indicator の使用を推奨します。
画像のみを読み込む場合
画像単体の読み込みには、低解像度の画像を事前に表示する手法（LQIP: Low Quality Image Placeholder）を推奨します。ソフトでぼやけた見た目の低解像度画像を事前に表示することで、画像の読み込みが完了するまでのプレースホルダーの役割を担います。
読み込みが 0.5 秒未満で完了する場合
Skeleton が瞬間的にのみ表示されると、画面の点滅として認識される可能性があります。平均的な読み込み時間が 0.5 秒以上かかる場合にのみ Skeleton を使用してください。
類似コンポーネントとの違い
- Progress Indicator: 読み込み完了後の要素の形状が未定の場合や、進捗を示したい場合に使う。Skeleton は形状が定まっている場合に使う。
4. バリエーション (Variants)
各コンポーネントに対応する Skeleton が用意されています。読み込み完了後に表示するコンポーネントに合わせて選択します。
Avatar
Button
Checkbox
Radio
Interactive List
Single line
Multi lines
Interactive Table
独自の Skeleton を作成する
対応する Skeleton が用意されていないコンポーネントには、以下のプロパティを指定して独自の Skeleton を作成できます。
| 役割 | |
|---|---|
| Width | Skeleton の幅を決定する |
| Height | Skeleton の高さを決定する |
| Radius | Skeleton の角丸の大きさを決定する |
5. ステート (States)
読み込みの開始
コンテンツの読み込みを開始すると、Skeleton が表示されます。
読み込み中
読み込み処理の進行中、Skeleton は継続的にアニメーションを表示します。
読み込みの完了
コンテンツの読み込みが完了すると、Skeleton は非表示となり、実際のコンテンツが表示されます。
読み込みの失敗
読み込みに失敗した場合は、失敗の理由をユーザーに通知し、次に実行可能なアクションを明確に提示します。
6. アクセシビリティ (Accessibility)
このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。
- Skeleton 自体は装飾要素として扱い、
aria-hidden="true"を設定してスクリーンリーダーから読み上げられないようにする - 読み込みが進行中であることはルート領域に
aria-busy="true"を設定して伝える - 読み込みが完了したら
aria-busyをfalseに切り替え、実際のコンテンツに差し替える - アニメーションが激しくなりすぎないようにし、
prefers-reduced-motion設定を尊重する
7. ライティング (Writing)
Skeleton 自体はテキストを持たないため、ライティング上の固有ルールはありません。読み込み失敗時のエラーメッセージは、Progress Indicator のライティングに準じます。