こんにちは。UIデザイナーの梁川です。

普段アプリやWebサイトを見ていて、何もない画面で10秒待つだけでも、すごく長く感じることがあります。実際のロード時間が同じでも、見せ方次第でユーザーの体感は大きく変わります。その「体感時間」を縮めるためのUIが、今回紹介するスケルトンスクリーンです。

普段よく目にするUIですが、改めて「なぜこのUIが使われているのか」を自分の言葉で説明できないなと感じていました。今回はそのあたりを整理してみたいと思います。

スケルトンスクリーンとは

ページが読み込まれるまでの間、コンテンツの形だけを先に見せておくUIです。グレーの長方形や円が骨組み（スケルトン）のように並び、読み込みが完了すると本物のテキストや画像に差し替わります。

YouTube、Facebook、LinkedInなど、コンテンツ量の多い大手サービスで広く採用されています。

なぜ「体感時間」を縮められるのか

スケルトンスクリーンが効果的な理由は、「待ち時間の感じ方」にあります。

「進捗が見える」ことで不安が消える

スピナー（くるくる回るアイコン）は「処理中」であることを伝えますが、いつ終わるかは分かりません。終わりが見えない待ち時間は、ユーザーを不安にさせてしまいます。

一方スケルトンスクリーンは、レイアウトを先に見せることで「次にこういうコンテンツが来る」と予告します。この予告があるだけで、ユーザーの不安は大きく軽減されます。

段階的に情報を出すと、認知負荷が下がる

何もない白い画面に、いきなり大量の情報が表示されると、ユーザーは一度にすべてを処理しようとして疲れます。

スケルトン → 実コンテンツ、と段階を踏むことで脳が情報を受け取る準備ができ、結果として「速く読み込まれた」と感じます。

体感速度を縮める意味

そもそも読み込み速度は、UX全体に大きく影響します。

ただ、サーバー側の最適化や画像圧縮だけで実速度を縮めるには限界があります。だからこそ、見せ方で体感を縮めるスケルトンスクリーンのようなアプローチが意味を持ちます。

スピナーとの使い分け

とはいえ、なんでもスケルトンにすればいいというわけでもなく、スピナーが向く場面もあります。

判断基準はシンプルで、「読み込まれる中身のレイアウトが事前にわかるか」です。

カード一覧やプロフィール画面のように構造が固定されているならスケルトン、フォーム送信のように結果のレイアウトが存在しない処理ならスピナーが向いています。

なお、読み込みが1秒未満で終わるなら、どちらも表示しない方が良いとされています。一瞬チラつくだけで、かえってノイズになります。

実装

シンプルなカード型スケルトンの実装例をご紹介します。CSSだけで実装できます。

<div class="skeleton-card">
  <div class="skeleton skeleton-image"></div>
  <div class="skeleton skeleton-text"></div>
  <div class="skeleton skeleton-text short"></div>
</div>

.skeleton-card {
  width: 300px;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}

.skeleton {
  background: #e0e0e0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton-image { height: 180px; margin-bottom: 16px; }
.skeleton-text  { height: 16px; margin-bottom: 8px; }
.skeleton-text.short { width: 60%; }

/* shimmerアニメーション */
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

まとめ

今回は「待たせ方」をデザインするUI、スケルトンスクリーンをご紹介しました。

実時間を縮めるのが難しくても、見せ方を変えるだけで体感時間を縮めることはできます。小さな工夫ですがユーザーの離脱や不満に直結する部分なので、コンテンツ量の多いページや読み込みが避けられない画面では、ぜひ取り入れてみてもらえたらと思います。

参考

• Skeleton Screens — Nielsen Norman Group
• Skeleton Screens vs Loading Spinners — Onething Design
• The Psychology of Waiting — Skeletons — Medium