Skeleton Loaderの作り方｜ローディング体験を改善するUIパターン

1.Skeleton Loaderとは

Webサイトやアプリでデータを読み込むとき、
何も表示されないとユーザーは「止まっているのでは？」と感じてしまいます。

そこでよく使われるのが Skeleton Loader です。

Skeleton Loaderは、

コンテンツの形だけを先に表示するローディングUI

です。

例えば記事ページなら、

• タイトル
• 画像
• テキスト

の レイアウトだけ灰色のブロックで表示 します。

その後、データが読み込まれると本物のコンテンツに置き換わります。

これにより

• 読み込みが早く感じる
• レイアウトが安定する
• ユーザーのストレスが減る

という効果があります。

ローディングUIの代表パターンには

• プログレスバー
• スピナー
• Skeleton Loader

などがあります。

詳しくは以下の記事でも解説しています。

→ #18 Progress Bar Animation

2.なぜSkeleton Loaderは体感速度を改善するのか

ポイントは 「待ち時間の見せ方」 です。

普通のローディング：

Loading...

これは 何が起こっているかわかりません。

一方 Skeleton Loader は

タイトル
画像
テキスト

の 完成イメージを先に見せます。

つまりユーザーは

「あ、今このページを読み込んでいるんだ」

と理解できます。

これが 体感速度の改善につながります。

3.CSSだけで作るSkeleton Loader

基本構造はとてもシンプルです。

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

CSSはこちら。

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

.skeleton-image{
  width:100%;
  height:140px;
  background:#e5e7eb;
  border-radius:6px;
  margin-bottom:12px;
}

.skeleton-text{
  height:14px;
  background:#e5e7eb;
  border-radius:4px;
  margin-bottom:8px;
}

.skeleton-text.short{
  width:60%;
}

この状態でもSkeleton Loaderとして機能しますが、
もう少しリアルにするには シマーアニメーション を追加します。

シマーアニメーションは
一定速度ではなく、少し自然な動きにすると
UIが滑らかに見えます。

→ #03 easing / cubic-bezier

4.シマーアニメーション（光の流れ）

多くのサービスでは
Skeleton Loaderに 光が流れるアニメーション を付けています。

.skeleton{
  position:relative;
  overflow:hidden;
}

.skeleton::after{
  content:"";
  position:absolute;
  top:0;
  left:-150px;
  height:100%;
  width:150px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.5),
    transparent
  );
  animation: shimmer 1.4s infinite;
}

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

この ゆっくり流れる光 によって

• 読み込み中であることがわかる
• UIが止まって見えない

というメリットがあります。

データ読み込みが終わった後、
数値カウントなどのアニメーションを
組み合わせることもできます。

→ #17 Number Animation

5.実験：Skeleton Loader Animation

読み込みUIとしてよく使われる
Skeleton Loaderの動きを観察できるデモです。

操作

• Toggle Loading を押す
• Skeleton表示 → コンテンツ表示 を切り替える

観察ポイント

• Skeletonがあるとページが「速く感じる」
• レイアウトが先に確定する
• ローディングが自然に見える

6.まとめ

Skeleton Loaderは

• 読み込み待ちのストレスを減らす
• レイアウトを先に提示できる
• 体感速度を改善できる

という UX改善の定番パターンです。

特に

• API通信
• 画像ロード
• 無限スクロール

などのUIでよく使われています。

シンプルなCSSだけでも実装できるので、
ぜひ自分のUIでも試してみてください。