Starfield (スターフィールド)
別名 Stars background, Twinkling stars
宇宙のような暗い背景の上で、小さな星がまたたいたり漂ったりします。
使いどころ
宇宙や夜がテーマのヒーロー
バリエーション
- twinkling
- warp / fly-through
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスターフィールド(Starfield)の背景を追加してください。星空背景(stars background)、またたく星(twinkling stars)とも呼ばれます。
大きさの異なる小さな星がそれぞれのペースで柔らかくまたたき、星空全体はとてもゆっくり漂うようにしてください。静かで穏やかに。
軽く動くよう星の数は控えめにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はまたたきと漂う動きを止めてください。似ているモーション
ABC
Sparkles (スパークル)
別名 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
小さく明るいきらめきが、テキストやセクションの周りで現れては消えます。
使いどころ
見出し、プレミアム感のあるアクセント
[適用する場所]にスパークル(Sparkles)のエフェクトを追加してください。グリッター(glitter)、トゥインクルパーティクル(twinkle particles)とも呼ばれます。
小さな星形のきらめきが、テキストの周りのばらばらな位置にランダムなタイミングでぱっと現れ、瞬いて消えるようにしてください。軽やかに素早く。
きらめきは装飾扱いにしてスクリーンリーダーから隠し、テキスト自体は決して覆わず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。Particles (パーティクル)
別名 Floating particles, Particle field
たくさんの小さな点が背景を漂い、つながったりポインターに反応したりします。
使いどころ
ヒーローやセクションの背景
[適用する場所]にパーティクル(Particles)の背景を追加してください。フローティングパーティクル(floating particles)、パーティクルフィールド(particle field)とも呼ばれます。
大きさの異なる小さな点が、それぞれのペースでゆるやかにさまよう軌道を描いてゆっくり漂うようにしてください。穏やかで軽やかに。
遅いデバイスでも軽く動くよう点の数は控えめにし、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。Meteors (メテオ)
別名 Meteor shower, Shooting Stars
光る尾を引く斜めの筋が、カードやセクションを横切って流れ落ちます。
使いどころ
カードやヒーローのアクセント
[適用する場所]にメテオ(Meteors)のエフェクトを追加してください。流星群(meteor shower)、流れ星(shooting stars)とも呼ばれます。
消えていく尾を引く小さな筋をいくつか、ランダムなタイミングでエリアを斜めに横切らせてください。一つひとつは素早く流れてすぐ消えます。
アクセントにとどまるよう数は少なめにし、エリアの端で切り取り、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。Noise / Grain Texture (ノイズ/グレインテクスチャ)
別名 Film grain, Noise background
細かな粒状のテクスチャがページに重なり、ときにフィルムグレインのようにちらつきます。
使いどころ
グラデーションに手触りのある奥行きを加える
[適用する場所]にノイズ/グレインテクスチャ(Noise / Grain Texture)のオーバーレイを追加してください。フィルムグレイン(film grain)、ノイズ背景(noise background)とも呼ばれます。
細かく薄い粒状のテクスチャを表面に重ね、フィルムグレインのように小刻みにちらつかせてください。控えめに、コンテンツを濁らせるほど強くしないでください。
クリックはオーバーレイを通り抜けるようにし、テクスチャは毎フレームではなく一度だけ生成し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。Background & Ambientのほかのモーション
Vortex (ボルテックス)
別名 Swirling particles
粒子が渦潮のように中心の周りをらせん状に回ります。
使いどころ
ドラマチックなヒーロー背景
[適用する場所]にボルテックス(Vortex)の背景を追加してください。スワーリングパーティクル(swirling particles)とも呼ばれます。
小さな粒子が渦潮のように中心点の周りをらせん状に内側へ回り込み、外縁でフェードインして中心に近づくとフェードアウトする、なめらかで途切れない渦にしてください。
粒子の数は控えめにし、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は渦を止めてください。Wave Background (ウェーブ背景)
別名 Wavy background, Animated waves
重なり合う波線や波形が横方向にうねるように動きます。
使いどころ
セクションの区切り、ヒーローの下端
[適用する場所]にウェーブ背景(Wave Background)を追加してください。ウェービー背景(wavy background)、アニメーテッドウェーブ(animated waves)とも呼ばれます。
重なった数本の波形が少しずつ違う速さで横へ流れ、水のように重なり合いながら移ろうようにしてください。ゆっくり、なめらかに。
各波はつなぎ目が見えないように途切れなくループさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波を止めてください。A
B
Animated Beam (ビームアニメーション)
別名 Connecting beam
2つの要素を結ぶ線に沿って、光るパルスが移動します。
使いどころ
連携図、データフロー図
[適用する場所]にビームアニメーション(Animated Beam)の効果を追加してください。コネクティングビーム(connecting beam)とも呼ばれます。
2つの要素を結ぶ線に沿って短く光るパルスが一定の速さで端から端へ進み、また最初から繰り返すようにしてください。なめらかで落ち着いた動きで。
つなぐ線そのものは常に表示し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はパルスを止めてください。