【UX爆上がり】「読み込み中...」はもう古い？React × Tailwind CSSで作る、滑らかなスケルトンスクリーンの実装ガイド

関野泰宏

2026年1月12日 09:36

56日目は「エラーと空の状態」を学びました。本日57日目は、ユーザーが「待たされている」と感じるストレスを劇的に軽減するテクニック、「スケルトンスクリーン（Skeleton Screen）」 の実装を学習します。

はじめに：なぜ「ぐるぐる（Spinner）」より「骨組み」なのか？

データの読み込み中、画面中央でスピナーが回っているだけだと、ユーザーは「あとどれくらい待てばいいのか？」「どんな画面が出るのか？」が分からず不安になります。

スケルトンスクリーンは、実際のコンテンツの配置に似た「薄いグレーの枠」を先に表示する手法です。これにより、ユーザーは「次に何が表示されるか」を予測でき、体感的な待ち時間が短縮されます。

💡 1. Tailwind CSS でスケルトンを作る

Tailwindには animate-pulse という、要素をふわふわと点滅させる便利なクラスがあらかじめ用意されています。

💻 実装例：カード型のスケルトン

export const SkeletonCard = () => (
  <div className="border border-gray-200 rounded-lg p-4 max-w-sm w-full mx-auto">
    <div className="animate-pulse flex space-x-4">
      <div className="rounded-full bg-gray-200 h-10 w-10"></div>
      <div className="flex-1 space-y-6 py-1">
        <div className="h-2 bg-gray-200 rounded"></div>
        <div className="space-y-3">
          <div className="grid grid-cols-3 gap-4">
            <div className="h-2 bg-gray-200 rounded col-span-2"></div>
            <div className="h-2 bg-gray-200 rounded col-span-1"></div>
          </div>
          <div className="h-2 bg-gray-200 rounded"></div>
        </div>
      </div>
    </div>
  </div>
);

💡 2. React Query と組み合わせて表示を切り替える1

コンポーネント側で isLoading のときにこのスケルトンを表示させます。2

const { data: users, isLoading } = useUsers();

if (isLoading) {
  // 💡 データの数に合わせて、例えば5個くらい並べて表示する
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {[...Array(6)].map((_, i) => <SkeletonCard key={i} />)}
    </div>
  );
}

💡 3. 実装のポイント：形を合わせる

スケルトンをプロっぽく見せるコツは、「実際のコンテンツの高さや形に極限まで近づけること」 です。

アバター（アイコン）: rounded-full で丸く。
見出し: 少し太めのグレーバー。
本文: 何行かの細いグレーバー。

📝 57日目のまとめと課題

✅ 本日の習得ポイント

スケルトンスクリーン: 体感的な速度（Perceived Performance）を向上させる手法。
animate-pulse: Tailwind CSSだけで簡単にアニメーションが実装可能。
配置の工夫: 実際のレイアウトと同じ構造のプレースホルダーを用意する。

📝 57日目の課題

自分のアプリの「詳細ページ」または「一覧ページ」で、どんな形のスケルトンが必要かスケッチしてみてください。
YouTubeやFacebookなどの有名サイトを開き、リロードして「どんなスケルトンが表示されているか」を観察してみましょう。

もっとReactを学びたい人はここから！

#エンジニアと繋がりたい #プログラミング学習 #React #100DaysOfCode #今日の積み上げ #TailwindCSS #フロントエンド