【フロントエンド入門27】スケルトンスクリーンとローディングインジケータ｜UXを向上させる実践法

現代のWebアプリケーションでは、データの読み込みが完了するまでの待ち時間をいかに快適に感じさせるかが、ユーザーエクスペリエンス（UX）において重要です。そのために使われる技術の一つが「スケルトンスクリーン」と「ローディングインジケータ」です。本記事では、これらの技術の基本と実装方法を初心者向けに詳しく解説します。

スケルトンスクリーンとローディングインジケータの違い
スケルトンスクリーンの実装方法
1. 1. 基本的なHTMLとCSSの構成
2. 解説
ローディングインジケータの実装方法
実際のアプリケーションへの適用
1. 1. データ取得時にスケルトンスクリーンを表示
2. 解説
結論

スケルトンスクリーンとローディングインジケータの違い

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

スケルトンスクリーンは、ページが完全に読み込まれる前に、コンテンツの配置や構造を示すダミー要素を表示する技術です。ユーザーは視覚的にどのような情報が表示されるかを予測でき、待ち時間が短く感じられます。

ローディングインジケータとは？

ローディングインジケータは、アニメーションやプログレスバーなどを使って、データが読み込まれていることを示す要素です。例として、スピナー（回転する円）やプログレスバーがよく使われます。

主な違い

スケルトンスクリーン：コンテンツの見た目を仮表示することで、より自然な読み込みを演出します。
ローディングインジケータ：単純に処理中であることを示し、進捗状況をユーザーに伝えます。

スケルトンスクリーンの実装方法

1. 基本的なHTMLとCSSの構成

スケルトンスクリーンは通常、読み込み中のダミー要素に灰色や淡い色の背景を使って表示します。

HTML

<div class="skeleton-container">
  <div class="skeleton skeleton-title"></div>
  <div class="skeleton skeleton-text"></div>
  <div class="skeleton skeleton-text"></div>
</div>

CSS

.skeleton-container {
  padding: 20px;
}

.skeleton {
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 10px;
}

.skeleton-title {
  width: 60%;
  height: 20px;
}

.skeleton-text {
  width: 100%;
  height: 15px;
}

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

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

解説

.skeletonクラス：各スケルトン要素の基本スタイル。
.skeleton-titleと.skeleton-text：異なる幅と高さのスケルトン要素。
@keyframes shimmer：スケルトン要素に動きを与え、視覚的に読み込み中であることを表現します。

ローディングインジケータの実装方法

1. スピナーの実装

スピナーは、ページの読み込み中に回転するアニメーションでユーザーに待ち時間を伝えます。

HTML

<div class="spinner"></div>

CSS

.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

解説

border：スピナーの外枠と回転する部分の色を設定します。
@keyframes spin：スピナーが回転するアニメーションを実現します。

2. プログレスバーの実装

プログレスバーは、読み込みの進捗を視覚的に示す方法です。

HTML

<div class="progress-container">
  <div class="progress-bar"></div>
</div>

CSS

.progress-container {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 4px;
}

.progress-bar {
  width: 0;
  height: 10px;
  background-color: #3498db;
  border-radius: 4px;
  animation: load 3s ease-in-out forwards;
}

@keyframes load {
  0% { width: 0; }
  100% { width: 100%; }
}

解説

.progress-container：プログレスバー全体の背景部分。
.progress-bar：読み込みに応じて幅が変わるバー。
@keyframes load：プログレスバーが左から右に伸びるアニメーション。

実際のアプリケーションへの適用

1. データ取得時にスケルトンスクリーンを表示

スケルトンスクリーンを使って、APIからデータを取得するまでの間にダミー要素を表示する実装例です。

HTML

<div id="content">
  <div id="skeleton" class="skeleton-container">
    <div class="skeleton skeleton-title"></div>
    <div class="skeleton skeleton-text"></div>
    <div class="skeleton skeleton-text"></div>
  </div>
</div>

JavaScript

function fetchData() {
  // スケルトンを表示
  document.getElementById('skeleton').style.display = 'block';

  setTimeout(() => {
    // ダミーデータを取得した後にスケルトンを非表示にし、コンテンツを表示
    document.getElementById('skeleton').style.display = 'none';
    document.getElementById('content').innerHTML = `
      <h1>データの取得が完了しました</h1>
      <p>これは取得したデータです。</p>
    `;
  }, 2000); // 2秒後にデータを表示（模擬的な遅延）
}

// データを取得
fetchData();