スケルトンローダーのデザインパターン：体感速度を上げるローディングUI設計

ページやコンテンツの読み込み中に表示するローディングUIは、ユーザーの「待つ体験」を大きく左右します。スケルトンスクリーン（スケルトンローダー）は、コンテンツが入る場所の輪郭をグレーのプレースホルダーで先行表示する手法で、スピナー（ぐるぐる回るインジケーター）より体感速度が向上するとされています。本記事では、スケルトンローダーの設計と実装のベストプラクティスを解説します。

なぜスケルトンローダーが効果的か

期待の形成：

スケルトンは「ここにコンテンツが来る」という形を先に見せることで、ユーザーの期待感を形成します。何もない画面（または回転するスピナー）より、コンテンツの輪郭が見える方が「もうすぐ表示される」と感じやすくなります。

レイアウトシフトの防止：

スケルトンを使うとコンテンツが表示される前からレイアウトが確定しているため、コンテンツ読み込み後のレイアウトシフト（ガタつき）が最小限になります。Cumulative Layout Shift（CLS）のスコア改善にも貢献します。

知覚速度の向上：

実際の読み込み時間が変わらなくても、プログレスを示すUIがあることで「速い」と感じやすくなります。

スケルトンローダーの基本設計

形状の設計：

スケルトンはコンテンツの実際の形状を大まかに模します。テキスト行は横長の角丸矩形、画像は正方形や横長矩形、アバターは円形のプレースホルダーとします。

サイズ・配置のリアリティ：

スケルトンは実際のコンテンツと同程度のサイズに設定します。実際のタイトルが24pxの場合、スケルトンも同程度の高さにします。コンテンツが表示されたときにレイアウトがほぼ変わらないのが理想です。

色の設計：

スケルトンの色は背景より少し暗いグレー（#E0E0E0〜#EEEEEE程度）が一般的です。ダークモードでは逆に少し明るいグレーを使います。

アニメーションの設計

シマーアニメーション（推奨）：

左から右へ光が流れるような「シマー」アニメーションが最も一般的です。ローディングが進行中であることを動きで示します。

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #f0f0f0 50%,
    #e0e0e0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

パルスアニメーション：

全体が点滅（opacity: 1 → 0.5 → 1）するシンプルなアニメーション。シマーより実装が簡単ですが、細かい質感はシマーの方が優れています。

アニメーション速度：

1〜2秒の周期が自然に見えます。速すぎると目障りで、遅すぎると動きが感じられません。

スピナーとの使い分け

スケルトンが向いている場面：

• ページ全体・主要コンテンツエリアの読み込み
• リスト・グリッドのデータ取得
• プロフィール・商品詳細などの構造が決まったコンテンツ

スピナーが向いている場面：

• ボタン操作後の短い処理（1〜3秒未満）
• 画面遷移のオーバーレイ
• 小さなパーツの更新（コメント追加後のリフレッシュなど）

インラインローダーが向いている場面：

• フォーム送信ボタン内でのローディング
• 「もっと見る」ボタンのローディング

コンポーネント別の実装例

ニュースフィードカードのスケルトン：

• 左: 円形アバター（40×40px）
• 右上: テキスト行2本（幅 60%・40%）
• 下部: 長方形テキストブロック3行（幅 100%・100%・80%）
• 最下部: 幅100%の画像プレースホルダー（アスペクト比 16:9）

ECの商品カードスケルトン：

• 上部: 正方形または1:1の画像プレースホルダー
• 下部: タイトル2行・価格1行のテキストプレースホルダー

アクセシビリティ対応

`aria-busy` と `aria-live`：

コンテンツのコンテナに aria-busy="true" を設定し、読み込み完了時に aria-busy="false" に変更することでスクリーンリーダーに状態を伝えます。

`prefers-reduced-motion`：

アニメーションを好まないユーザーのために prefers-reduced-motion: reduce でシマーアニメーションを無効化します。

まとめ

スケルトンローダーは「待つ体験」の質を高める重要なUIパターンです。コンテンツの形状を模した適切な形状・シマーアニメーション・アクセシビリティ対応を組み合わせることで、ユーザーの体感速度と満足度を向上させます。UI ZUKANではスケルトンローダーの実装例を掲載しています。