スケルトンスクリーン
Skeleton Screen
別名: スケルトンローダー / Skeleton Loader別名: シマースクリーン / Shimmer Screen
ライブデモ
説明
一言で説明
コンテンツが読み込まれるまでの間、コンテンツの輪郭をグレーのプレースホルダーで表示するUI。
いつ使う？
ローディング中に真っ白なページやスピナーだけを見せたくないとき。FacebookやYouTubeの読み込み時に使われている。
💡 日常の言い方
「読み込み中にグレーの四角がチカチカしてるやつ」
似ている用語との違い
スケルトンスクリーン vs ローディングスピナー
スピナーは「読み込み中です」のみを伝える。スケルトンスクリーンは表示されるコンテンツのレイアウトを予告する。
スケルトンスクリーン vs プレースホルダー
プレースホルダーは入力フィールドのヒントテキスト。スケルトンスクリーンは読み込み中の視覚的な仮表示。
AIへの指示例
記事一覧の読み込み中にスケルトンスクリーンを表示して。タイトル部分は横長のグレーのバー、サムネイルは正方形のグレーのボックスで。シマーアニメーションを入れて。