Ripple Rings (リップルリング)
別名 Background ripple, Concentric ripples
同心円が中心点から外側へ広がり、消えていきます。
使いどころ
ヒーローの中心要素、音声やペアリングのビジュアル
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にリップルリング(Ripple Rings)のエフェクトを追加してください。バックグラウンドリップル(background ripple)、同心円リップル(concentric ripples)とも呼ばれます。
リングが中心点から外側へ次々と広がり、大きくなるにつれて消えていくようにしてください。等間隔で一つずつ、ゆっくり一定のリズムで。
中心の要素は動かさずその場に置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波紋を止めてください。似ているモーション
A
Ping (ピング)
別名 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
要素のコピーがレーダーの波紋のように、拡大しながら消えていく動きを繰り返します。
使いどころ
通知ドット、ライブステータス
[適用する場所]にピング(Ping)効果を追加してください。レーダーピング(radar ping)、パルスリング(pulse ring)とも呼ばれます。
要素のコピーが外側へ広がりながら消えていく動きを、一定のペースで何度も繰り返してください。要素そのものは動かしません。
リングは別レイヤーに描いてレイアウトに影響しないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はループを止めてください。クリックしてください
Ripple (リップル)
別名 Material ripple, Touch ripple, Ripple Button, Ink ripple
クリックやタップした位置から円形の波が広がり、フェードアウトします。
使いどころ
ボタン、リスト項目
[適用する場所]にリップル(Ripple)の効果を追加してください。マテリアルリップル(material ripple)、インクリップル(ink ripple)とも呼ばれます。
クリックやタップのたびに、押した位置からやわらかい円形の波が要素全体を覆うまで広がり、広がりながら薄れていくようにしてください。素早く軽やかに。
波は要素の形で切り抜き、素早く連続して押したときはそれぞれ別の波を出し、キーボードで押したときは中心から広げてください。A
マウスを乗せてください
ホバーすると、同心円状の枠線のリングが要素から外側へ広がったり、内側へ縮んだりします。
使いどころ
ボタン
[適用する場所]にボーダーリップル(Border Ripple)のホバーエフェクトを追加してください。
ポインターが入ったら、枠線のリングがいくつか順番に要素から外側へ広がって消えていくようにしてください。波紋のように素早く軽やかに。
ループさせずホバーごとに一度だけ再生し、リングで周りのレイアウトがずれないようにしてください。Background & Ambientのほかのモーション
ABC
Sparkles (スパークル)
別名 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
小さく明るいきらめきが、テキストやセクションの周りで現れては消えます。
使いどころ
見出し、プレミアム感のあるアクセント
[適用する場所]にスパークル(Sparkles)のエフェクトを追加してください。グリッター(glitter)、トゥインクルパーティクル(twinkle particles)とも呼ばれます。
小さな星形のきらめきが、テキストの周りのばらばらな位置にランダムなタイミングでぱっと現れ、瞬いて消えるようにしてください。軽やかに素早く。
きらめきは装飾扱いにしてスクリーンリーダーから隠し、テキスト自体は決して覆わず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。Spotlight (スポットライト)
別名 Spotlight sweep, Light cone
柔らかな光の円錐や光だまりがすっと入ってきて、背景の一部を照らします。
使いどころ
ヒーロー見出し
[適用する場所]にスポットライト(Spotlight)のエフェクトを追加してください。スポットライトスイープ(spotlight sweep)、ライトコーン(light cone)とも呼ばれます。
ページが読み込まれたら、柔らかな光の円錐が角から斜めに差し込み、見出しの上で止まって、届くにつれて明るくなるようにしてください。ゆっくりなめらかに。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から光が当たった状態で表示してください。Starfield (スターフィールド)
別名 Stars background, Twinkling stars
宇宙のような暗い背景の上で、小さな星がまたたいたり漂ったりします。
使いどころ
宇宙や夜がテーマのヒーロー
[適用する場所]にスターフィールド(Starfield)の背景を追加してください。星空背景(stars background)、またたく星(twinkling stars)とも呼ばれます。
大きさの異なる小さな星がそれぞれのペースで柔らかくまたたき、星空全体はとてもゆっくり漂うようにしてください。静かで穏やかに。
軽く動くよう星の数は控えめにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はまたたきと漂う動きを止めてください。