Component Gallery

Glossary

スケルトンとスピナーの違い

Skeleton vs Spinner

30秒でわかる要点

スケルトンは読み込み後の形を先に示すプレースホルダー、スピナーは処理中であることだけを示すローディング表示です。

使い分けのポイント

  • ・スケルトンはレイアウト予測に向く
  • ・スピナーは短い処理や全体待機に向く
  • ・長い待機では進捗や説明を補う

関連コンポーネント

スケルトン（Skeleton）スケルトン（Skeleton）は、コンテンツ読み込み中にレイアウトの骨格をアニメーション表示するプレースホルダーコンポーネント。スピナーより体感速度が速く感じられる。スピナー（Spinner）スピナー（Spinner）は、非同期処理や読み込み中であることをアニメーションで示すコンポーネント。ローディング・インジケーター・プログレスとも呼ばれる。プログレスバー（Progress Bar）プログレスバー（Progress Bar）は、処理の進捗状況を視覚的に示すコンポーネント。確定値（0〜100%）を示す確定型と、進行中を示す不確定型がある。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

一覧画面ではスケルトンとスピナーのどちらがよいですか？

一覧の形が予測できるならスケルトンが向いています。処理内容が不明な短い待機ではスピナーでも十分です。

スケルトンとスピナーの違いはどう使い分けますか？

スケルトンは読み込み後の形を先に示すプレースホルダー、スピナーは処理中であることだけを示すローディング表示です。 実装時は、ユーザーが何を判断・入力・移動したいのかを基準に選びます。

スケルトンとスピナーの違いでよくある誤解は何ですか？

スケルトンはレイアウト予測に向く