スケルトンスクリーンはローディングデータやページが表示されるまでの間に、代わりに表示される仮状態のUI要素です。 ローディングスピードを高め、ユーザーに安心感を与えるための技術として必須となっています。
この記事ではスケルトンスクリーンの主要パーツを一覧で紹介し、使い方とポイントも合わせて解説します。
テキストブロック
テキストの代わりに表示されるグレーボックの要素。
特徴
- 長方形や短縮した矩形
- 色は白、灰、あるいは変化するグラデーション
- アニメーションで移動することも
使用例
- SNSのポストタイトル表示前
- ニュース記事のヘッダー表示の誤差防止
イメージプレースホルダー
画像やサムネイルの場所を示すためのスケルトン要素。
特徴
- 四角いブロックや円形
- わずかなデフォルトアイコンの表示
使用例
- ECサイトの商品カルセル
- SNSのプロフィール画像
カードスケルトン
カード型UIにおける完成前の代理表示。
特徴
- 箇条形のブロックの組み合わせ
- ホバーディングやシャドウ表現
使用例
- ECサイトの商品リスト
- ニュースサイトの記事カード
フォームスケルトン
フォーム入力や検索フォームのロード中に使われる。
特徴
- 細長い矩形
- プレースホルダと同時に使うことも
使用例
- ログインフォーム
- 検索バーの表示
リストアイテムスケルトン
リスト内の個々のアイテムを表示する代理要素。
特徴
- 連続する小さなブロック
- こまめなアニメーション
使用例
- リスト型ページ
- コメント表示
データテーブルスケルトン
表紙やデータテーブル内で使用される。
特徴
- セル単位で表示
- 行ごとに累累表示
使用例
- CMSの管理テーブル
- BIツールのデータ管理
スケルトンスクリーン済みコンポーネント
スケルトンスクリーンを済ませるために使用されるコンポーネントの一覧も紹介します。
- Loading bar: スクリーン上部で表示される縦バー
- Shimmer animation: 光が流れるようなアニメーション
- Pulse animation: 繰り返すパルス表現
まとめ
スケルトンスクリーンは「待つ」というネガティブな体験を「動き」に変えるために必要な技術です。 ユーザーの煩わしさを削り体感的なローディングタイムを減らします。
このパーツ一覧を参考にプロダクトに最適なスケルトンデザインを選んでみてください。
他にもクリエイターの収入アップ方法も紹介しているので、自分の給与に違和感がある方は覗いていってみてください。
