プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にシマーテキスト(Shimmer Text)のエフェクトを追加してください。アニメーテッドシャイニーテキスト(animated shiny text)、メタリックシマーテキスト(metallic shimmer text)とも呼ばれます。
光の帯が文字の上を左から右へなめらかに横切り、少し間をおいて繰り返すようにしてください。
ハイライトの下でも文字が読めるようにし、ユーザーがモーションを減らす設定(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)にしている場合は再生しないでください。ABCDEF
Animated Gradient Text (グラデーションテキストアニメーション)
別名 Aurora Text, Rainbow Text Sweep, Gradient Text Color Wave
グラデーションで塗られたテキストの色が、絶えず移り変わったり流れたりします。
使いどころ
ブランドの見出し
[適用する場所]にグラデーションテキストアニメーション(Animated Gradient Text)の効果を追加してください。オーロラテキスト(aurora text)、レインボーテキストスイープ(rainbow text sweep)とも呼ばれます。
文字をグラデーションで塗り、その色がテキスト上をゆっくりなめらかに流れ、つなぎ目なく無限にループするようにしてください。
背景に対してどの瞬間も文字が読みやすいようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は色を止めてください。Skeleton Shimmer (スケルトンシマー)
別名 Skeleton wave, Shimmer effect, placeholder-wave
グレーのプレースホルダーの上を、明るいハイライトが横切ります。
使いどころ
コンテンツ読み込み中のプレースホルダー
[適用する場所]にスケルトンシマー(Skeleton Shimmer)を追加してください。スケルトンウェーブ(skeleton wave)、シマーエフェクト(shimmer effect)とも呼ばれます。
やわらかな光の帯がグレーのプレースホルダーの上を左から右へ横切り、次の通過まで少し間を置くようにしてください。なめらかで、ゆったりと。
プレースホルダーの形は実際のレイアウトに合わせてコンテンツ読み込み時にずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止したプレースホルダーを表示してください。ABCDEF
マウスを乗せてください
Holographic Text (ホログラフィックテキスト)
別名 Holographic Foil Text
テキストに虹色のホログラム箔のような反射が現れ、ポインターや時間に合わせて移ろいます。
使いどころ
プレミアム感のあるカード
[適用する場所]にホログラフィックテキスト(Holographic Text)のホバー効果を追加してください。ホログラフィックフォイルテキスト(holographic foil text)とも呼ばれます。
ポインターが文字に乗っている間、箔のような色の帯が文字の上をゆっくりなめらかに行き来し、ポインターが離れたら元のシンプルな見た目に戻るようにしてください。
きらめきのどの瞬間も文字が読めるようにし、キーボードフォーカス時にも同じ効果を出してください。Textのほかのモーション
ABCABCABC
中をスクロールしてください
Sliced Text (スライステキスト)
別名 On-Scroll Sliced Text
見出しが横方向のスライスに切り分けられ、スクロールに合わせて互いに左右へずれていきます。
使いどころ
エディトリアルなヒーロー
[適用する場所]にスライステキスト(Sliced Text)のエフェクトを追加してください。オンスクロールスライステキスト(on-scroll sliced text)とも呼ばれます。
大きな見出しを横方向のスライスに切り分け、スクロールに合わせて互いに左右へずれるようにし、最初はひとつの単語としてそろった状態にしてください。
ずれはスクロール位置に直接連動させて戻すと逆に動くようにし、スクリーンリーダーには見出しをひとつの読めるテキストとして渡してください。ABCDEFGHIJKLMNOP
Spinning Text (スピニングテキスト)
別名 Circular Text, Text on Circle
円に沿って配置したテキストが、途切れなく回転し続けます。
使いどころ
回転するバッジ、スタンプ
[適用する場所]にスピニングテキスト(Spinning Text)を追加してください。サーキュラーテキスト(circular text)、テキストオンサークル(text on circle)とも呼ばれます。
文字を円周上に均等に並べ、円がゆっくり一定の速さで回り、ループの切り替わりで跳ばないようにしてください。
スクリーンリーダーにはテキストを一度だけ通常のテキストとして渡し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。ABCDEF
Split Text Stagger (スプリットテキストスタッガー)
別名 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
見出しを文字・単語・行に分割し、少しずつ時間をずらして順番にアニメーションさせます。
使いどころ
見出し、セクションタイトル
[適用する場所]にスプリットテキストスタッガー(Split Text Stagger)の登場エフェクトを追加してください。レタースタッガー(letter stagger)、スタッガードテキストリビール(staggered text reveal)とも呼ばれます。
見出しを1文字ずつに分割し、少しずつ時間をずらして順番に浮き上がりながらフェードインさせ、素早くなめらかに、弾まないようにしてください。
見出しが画面に入ったときに一度だけ再生し、スクリーンリーダーにはひとつの単語として読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。