Skeleton Shimmer (スケルトンシマー)
別名 Skeleton wave, Shimmer effect, placeholder-wave
グレーのプレースホルダーの上を、明るいハイライトが横切ります。
使いどころ
コンテンツ読み込み中のプレースホルダー
バリエーション
- wave / shimmer
- text lines
- avatar + card
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスケルトンシマー(Skeleton Shimmer)を追加してください。スケルトンウェーブ(skeleton wave)、シマーエフェクト(shimmer effect)とも呼ばれます。
やわらかな光の帯がグレーのプレースホルダーの上を左から右へ横切り、次の通過まで少し間を置くようにしてください。なめらかで、ゆったりと。
プレースホルダーの形は実際のレイアウトに合わせてコンテンツ読み込み時にずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止したプレースホルダーを表示してください。似ているモーション
Pulse Placeholder (パルスプレースホルダー)
別名 Skeleton pulse, placeholder-glow
グレーのプレースホルダーブロックがゆっくり明滅し、読み込み中であることを示します。
使いどころ
スケルトンスクリーン
[適用する場所]にパルスプレースホルダー(Pulse Placeholder)を追加してください。スケルトンパルス(skeleton pulse)とも呼ばれます。
これから表示されるコンテンツの形をしたグレーのブロックが、そろってゆっくり明るくなっては戻るようにしてください。穏やかで一定のリズムで。
プレースホルダーは実際のレイアウトに合わせてコンテンツが届いたときにずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。A
マウスを乗せてください
Shine Sweep (シャインスイープ)
別名 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
ホバーすると、斜めの光の帯が要素の端から端へ横切ります。
使いどころ
ボタン、カード、バッジ
[適用する場所]にシャインスイープ(Shine Sweep)のホバーエフェクトを追加してください。sheen、シャイニーボタン(shiny button)、シャインオンホバー(shine on hover)、グリント(glint)、シマー(shimmer)、シマーボタン(shimmer button)とも呼ばれます。
ポインターが乗っている間、やわらかな斜めの光の帯が要素を左から右へ横切り、短い間を置いて繰り返すようにしてください。
光の帯は要素の内側で切り取り、ポインターが離れたら止め、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は再生しないでください。ABC DEFGH
Shimmer Text (シマーテキスト)
別名 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
明るいハイライトが文字の上を繰り返し横切ります。
使いどころ
バッジ、お知らせ用のピル
[適用する場所]にシマーテキスト(Shimmer Text)のエフェクトを追加してください。アニメーテッドシャイニーテキスト(animated shiny text)、メタリックシマーテキスト(metallic shimmer text)とも呼ばれます。
光の帯が文字の上を左から右へなめらかに横切り、少し間をおいて繰り返すようにしてください。
ハイライトの下でも文字が読めるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。Indeterminate Linear Progress (不確定プログレスバー)
別名 Indeterminate progress bar, Buffer bar
所要時間がわからないとき、バーの一部がトラックの上を繰り返し流れます。
使いどころ
ページ上部やカードの読み込み
[適用する場所]に不確定プログレスバー(Indeterminate Linear Progress)を追加してください。インデターミネイトプログレスバー(indeterminate progress bar)とも呼ばれます。
タスクの長さがわからない間、短いバーがトラックの端から端へ素早くなめらかに何度も流れるようにしてください。
バーはトラックに完全に入ってから完全に出ていくようにしてループのつなぎ目を見せず、スクリーンリーダー向けに処理中のプログレスバーとしてマークしてください。Loading & Progressのほかのモーション
Top Loading Bar (トップローディングバー)
別名 Page progress bar, NProgress
ページ遷移中、画面上端の細いバーが少しずつ進み、読み込みが終わると端まで到達します。
使いどころ
SPA のルート読み込み
[適用する場所]にトップローディングバー(Top Loading Bar)を追加してください。ページプログレスバー(page progress bar)とも呼ばれます。
上端の細いバーが、ページの読み込み中は最初に素早く進み、その後だんだんゆっくり進むようにし、読み込みが終わったら一気に端まで走ってフェードアウトさせてください。
読み込みが本当に終わるまでは端に届かないようにし、ページのコンテンツを覆ったりずらしたりしないようにしてください。Typing Indicator (タイピングインジケーター)
別名 Typing dots, Chat is typing
吹き出しの中の3つのドットが順に脈打つか浮き上がり、相手や AI が入力中であることを示します。
使いどころ
チャット、AI アシスタント
[適用する場所]にタイピングインジケーター(Typing Indicator)を追加してください。タイピングドット(typing dots)とも呼ばれます。
相手が入力している間、小さなチャットの吹き出しの中のドットが一つずつ浮き上がって明るくなるようにしてください。やわらかく穏やかなリズムで。
ループはつなぎ目なく続け、メッセージが届いたらすぐに吹き出しを消し、スクリーンリーダーにはドットの代わりに短いステータステキストを伝えてください。Bar Loader (Equalizer) (バーローダー)
別名 Bars loader, Audio bars
縦のバーがタイミングをずらして伸び縮みし、オーディオのイコライザーのように見えます。
使いどころ
読み込み中や再生中の表示
[適用する場所]にバーローダー(Bar Loader (Equalizer))の読み込みアニメーションを追加してください。bars loader、オーディオバー(audio bars)とも呼ばれます。
数本の縦バーが、オーディオのイコライザーのように互いにタイミングをずらして伸び縮みするようにしてください。軽快で、でも一定のテンポで。
ループはつなぎ目なく続け、スクリーンリーダー向けに状態を示すラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。