もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

Webサイトの読み込み速度は、サイト全体の印象を左右する重要な要素です。サーバーの応答速度を上げたり、画像を最適化したりしても、どうしても数秒かかってしまうことがあります。

実は、完全に速くするのではなく、「待ち時間を感じさせない」という視点で考えると、解決策が見えてきます。同じ3秒の待ち時間でも、ただのスピナーだけの場合と、工夫したローディング演出を入れた場合では、ユーザーの体感速度が大きく変わります。

構造だけでも先に見せておくことで、ユーザーは「読み込みが始まっている」と感じやすくなり、体感的なスピードが上がります。スピナーなどよりも「進んでいる感」が伝わるため、結果的にストレスを感じにくい体験につながります。

同じ3秒の待ち時間でも、スピナーだけの場合と、スケルトンUIの場合では、ユーザーの体感速度が大きく違うという結果が出ました。特にスマートフォンでの効果が大きく、モバイルユーザーの滞在時間が、10秒以上伸びたという結果も出ています。

ローディングスピナーとの違い

HTML

<div class="card">
  <div class="avatar skeleton"></div>
  <div class="content">
    <div class="line skeleton"></div>
    <div class="line short skeleton"></div>
  </div>
</div>

CSS

:root {
  --skeleton-base: #e5e7eb;
  --skeleton-highlight: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --skeleton-base: #2a2a2a;
    --skeleton-highlight: #3a3a3a;
  }
}

.skeleton {
  background: var(--skeleton-base);
}

.skeleton::after {
  background: linear-gradient(
    90deg,
    transparent,
    var(--skeleton-highlight),
    transparent
  );
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

Javascriptで実データと差し替える

<div id="card-container"></div>

const container = document.getElementById("card-container");

// スケルトン挿入
container.innerHTML = `
  <div class="card">
    <div class="avatar skeleton"></div>
    <div class="content">
      <div class="line skeleton"></div>
      <div class="line short skeleton"></div>
    </div>
  </div>
`;

fetch("/api/user")
  .then(res => res.json())
  .then(data => {
    container.innerHTML = `
      <div class="card">
        <img src="${data.avatar}" class="avatar" />
        <div class="content">
          <h3>${data.name}</h3>
          <p>${data.bio}</p>
        </div>
      </div>
    `;
  });