やってみよう「再読み込み」を押すと、読み込み中の表示を何度でも見られます
読み込み・待機メジャー（よく見る）
スケルトンスクリーン
Skeleton Screen
読み込み中、これから写真や文字が出る場所に灰色のブロックが並び、光がスーッと流れる。
別名スケルトンローダーシマーShimmerプレースホルダーゴーストローディング
どこで使われている？
- よく見かける場所
- YouTube、Facebook、ニュースサイト、ネット通販の商品一覧
- 使うとよい場面
- 写真や文章が並ぶ画面で、読み込みに1〜3秒かかるとき
- 避けたい場面
- 一瞬で読み込める画面、形が毎回大きく変わる画面
似ているものとの違い
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「スケルトンスクリーン（Skeleton Screen）」を実装してください。 動き：データ取得中は、実際のレイアウト（画像・見出し・本文の行）と同じ位置・大きさの灰色ブロックを表示し、左から右へ光が流れるシマーアニメーションをかける。読み込みが終わったら本物の内容に差し替える。 使う部品：Skeleton（CSS の linear-gradient + animation でシマー）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Skeleton（CSS の linear-gradient + animation でシマー） |
|---|---|
| iPhoneアプリなら | .redacted(reason: .placeholder) |
| Androidアプリなら | Skeleton / Shimmer（標準部品なし。Modifier で自作 or ライブラリ） |
| Flutterなら | Skeletonizer パッケージ / shimmer パッケージ |
| React Nativeなら | Skeleton（react-native-reanimated で自作 or ライブラリ） |