スケルトンステートシステム

スケルトンステートシステム は何をしますか？

目的

スケルトンステートシステムは、インターフェースの「読み込み中」状態をデザインするための手法を提供します。一般的なスピナーやプログレスバーとは異なり、スケルトンは「ボーン」（低忠実度の形状）を使用して最終的なレイアウトを近似します。これにより、ユーザーの体感待ち時間を短縮し、コンテンツが到着する前に必要なスペースを確保することで**Cumulative Layout Shift（CLS）**を防ぎます。

ユースケース

• データ負荷の高いダッシュボード: 複数のウィジェットが異なる速度で読み込まれる場合。
• コンテンツフィード: 記事、製品、ソーシャル投稿のリストをスクロールする場合。
• 画像が多いグリッド: 高解像度画像のスペースを確保し、ページの「ジャンプ」を防ぐ場合。
• 検索・フィルタービュー: システムがクエリを処理中であることを即座にフィードバックする場合。
• シングルページアプリケーション（SPA）: データを非同期にフェッチするルート間の遷移を管理する場合。

使用すべきでない場合

• 即時インタラクション: コンテンツが300ms未満で読み込まれる場合、スケルトンは気が散る「ちらつき」を引き起こす可能性があります。
• シンプルでコンテキストの少ない読み込み: 単一のボタンや小さなタグのような小さな要素には、標準的なスピナーや「読み込み中...」テキストが適切です。
• 静的コンテンツ: ハードコードされているかキャッシュされており、即座にレンダリングされるコンテンツ。
• 高速なリアルタイムデータ: データの変化が速すぎてスケルトンが常に表示・非表示を繰り返す場合、視覚的な疲労を引き起こす可能性があります。

入力

1. ターゲットレイアウト: コンポーネントまたはページの最終的な「完全読み込み済み」デザイン。
2. コンテンツ変数: UIのどの部分が動的か（テキスト、画像、価格、アバター）。
3. 空間的寸法: 最終要素の正確な高さ、幅、アスペクト比。
4. ブランドトーン: 「ボーン」のベースとシマー効果に使用するプライマリカラーとセカンダリカラー。

出力

1. スケルトンブループリント: ボーンの配置を示す低忠実度マップ。
2. ボーン仕様: 形状（円 vs 長方形）とサイズ（固定 vs パーセンテージベース）の定義。
3. トランジション戦略: スケルトンがフェードアウトし、コンテンツがフェードインするためのルール。
4. アクセシビリティ要件: aria-busy と aria-hidden の実装に関するガイダンス。

ワークフロー

1. 「ターゲット」ジオメトリのマッピング

最終的なコンポーネントを基本的な幾何学的プリミティブに分解します。

• 円: アバター、アイコン、丸いボタン用。
• 長方形（角丸）: カード、画像コンテナ、テキストブロック用。
• 線: テキストの単一行（見出し、メタデータ）用。

2. ボーン階層の定義

すべての要素にボーンが必要なわけではありません。構造的な「アンカー」に焦点を当てます。

• プライマリボーン: 最大の視覚要素（例：商品画像）。
• セカンダリボーン: 見出しと主要なメタデータ。
• ターシャリボーン: 小さなメタ詳細またはアクションボタン（小さすぎる場合は省略可能）。

3. 空間マッチングの確立（CLSルール）

スケルトンの寸法が最終的なコンテンツのコンテナと正確に一致することを確認します。

• アスペクト比: ボーンには固定アスペクト比（例：動画は16:9）を使用し、アセットが読み込まれてもサイズが変わらないようにします。
• テキストサイジング: ボーンは、表現するテキストの行の高さとおおよその幅に一致するものを使用します。

4. リズムとシマーのデザイン

スケルトンは「生きている」ように感じられるべきですが、気が散るものであってはなりません。

• ベースカラー: 低コントラストでニュートラルな色（例：ライトグレー）を使用します。
• シマー（パルス）: 左から右に移動する微妙なグラデーションアニメーションを適用します。
• 同期: 画面上に複数のスケルトンがある場合、視覚的な混乱を防ぐためにアニメーションを同期させます。
• モーション低減: @media (prefers-reduced-motion: reduce) クエリでシマーのキーフレームアニメーションをラップし、動きを無効にして静的なボーンまたはゆっくりと不透明度が変化するボーンにフォールバックします。

5. 「ハンドオフ」トランジションの定義

スケルトンの終了を計画します。

• タイミング: 実際のコンテンツには短いフェードイン（例：200ms）を使用し、急激な「スナップ」遷移を防ぎます。
• 段階的表示: リストの場合、アイテムを一度に表示するか、個別に読み込まれたら表示するかを決定します。

意思決定ルール

• 300msルール: 読み込みに300ms以上かかると予想される場合にのみスケルトンを表示します。
• ボーンの正確性: ボーンは特定のデータではなく、コンテナを表現する必要があります。例えば、テキストボーンは単純なバーであり、特定の文字を模したギザギザの線であってはなりません。
• 行数: 複数行のテキストの場合、さまざまな幅の2つまたは3つのボーン（例：最後の行は60%幅）を使用して、自然な段落の流れをシミュレートします。
• スピナー vs スケルトン:
  • ページレベルまたはセクションレベルの遷移にはスケルトンを使用します。
  • 小さなローカルなアクション（「保存中...」ボタンの状態など）にはスピナーを使用します。

制約事項

• アクセシビリティ: スケルトンには aria-hidden="true" を設定し、スクリーンリーダーが空のバーを「読み取ろう」としないようにします。親コンテナは読み込み中に aria-busy="true" を使用し、理想的には視覚的に隠された aria-live="polite" 領域を持ち、「読み込み中」とコンテンツがスケルトンを置き換えた後の完了状態をアナウンスするようにします。スケルトンのボーン自体に aria-live を使用しないでください。シマー効果については prefers-reduced-motion を尊重します。
• コントラスト: スケルトンの色は背景と区別できるが、アクティブなコンテンツのように見えるほど高コントラストであってはなりません。
• レスポンシブ: スケルトンのボーンは、最終的なコンテンツと同じグリッド/フレックスロジックを使用してスケーリングする必要があります。

よくある障害パターン

• 「CLSジャンプ」: 200pxの高さのスケルトンが300pxの高さのコンテンツに置き換えられ、ページが「ジャンプ」する。
• シマー過多: アニメーションが速すぎる、またはコントラストが高すぎて、乗り物酔いや注意散漫を引き起こす。
• コンテンツとボーンの不一致: 正方形の画像に円形のボーンを使用する、またはその逆。
• 過度な複雑さ: すべての小さなアイコンをボーンとして再現しようとし、結果として乱雑な「ゴースト」レイアウトになる。
• 「静的スケルトン」: アニメーションのないスケルトンは、壊れたページや空のページと間違われる可能性がある。

検証基準

• スケルトンの寸法が最終的な「読み込み済み」状態と正確に一致する（CLSゼロ）。
• 画像/動画のアスペクト比が固定コンテナを使用して予約されている。
• シマーアニメーションが微妙で左から右に移動する。
• テキストが多い領域では、自然な行の長さをシミュレートするボーンが使用されている。
• スケルトン要素に aria-hidden="true" が適用され、読み込みコンテナに aria-busy="true" が使用されている。
• シマーアニメーションが prefers-reduced-motion: reduce を尊重している。
• スケルトンからコンテンツへの遷移がスムーズなフェード（約200ms）である。
• 300msより速い読み込みに対してスケルトンが表示されない。