Animated Beam (ビームアニメーション)
別名 Connecting beam
2つの要素を結ぶ線に沿って、光るパルスが移動します。
使いどころ
連携図、データフロー図
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にビームアニメーション(Animated Beam)の効果を追加してください。コネクティングビーム(connecting beam)とも呼ばれます。
2つの要素を結ぶ線に沿って短く光るパルスが一定の速さで端から端へ進み、また最初から繰り返すようにしてください。なめらかで落ち着いた動きで。
つなぐ線そのものは常に表示し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はパルスを止めてください。似ているモーション
Background Beams (背景ビーム)
別名 Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
細く光る線が経路に沿って進み、ときには面にぶつかって弾けます。
使いどころ
ヒーローの背景
[適用する場所]に背景ビーム(Background Beams)の効果を追加してください。ライトビーム(light beams)、背景ライン(background lines)とも呼ばれます。
薄い曲線の経路を背景に置き、その上を短く光る筋が一つずつ、落ち着いた一定のペースで進むようにしてください。
ビームはタイミングをずらして同時に動かないようにし、コンテンツの背後に置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。A
Border Beam (ボーダービーム)
別名 Shine border, Animated border, Glowing effect, Moving Border
明るいハイライトがカードの枠線に沿って周回します。
使いどころ
注目カード、CTA
[適用する場所]にボーダービーム(Border Beam)のエフェクトを追加してください。シャインボーダー(shine border)、ムービングボーダー(moving border)とも呼ばれます。
短く明るいハイライトがカードの枠線に沿って一定のゆったりした速さで周回し、つなぎ目が見えないようにループさせてください。
エフェクトでカードの内容やサイズが変わらないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はビームを止めてください。Animated Map Arcs (マップアークアニメーション)
別名 World Map Animated Lines, Globe Arcs
地図や地球儀の上で、地点と地点の間を線や点が動きます。
使いどころ
グローバル展開を示すビジュアル
[適用する場所]にマップアークアニメーション(Animated Map Arcs)を追加してください。グローブアーク(globe arcs)とも呼ばれます。
ドットの地図上で地点と地点の間に曲線が一本ずつ描かれ、その後目的地へ向かって縮み、目的地では柔らかなリングが脈打つようにしてください。落ち着いて一定のリズムで。
アークが同時に動かないようタイミングをずらし、ループは継ぎ目なくし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は一時停止してください。Motion Path (モーションパス)
別名 Animate Along Path, Offset Path Animation
要素が独自の曲線パスに沿って移動し、パスに合わせて向きを変えることもできます。
使いどころ
ルート上を進む飛行機や点、装飾的な移動要素
[適用する場所]にモーションパス(Motion Path)アニメーションを追加してください。アニメイトアロングパス(animate along path)とも呼ばれます。
小さな要素が独自の曲線ルートに沿ってゆっくり一定のペースで進み、進行方向を向くように回転させてください。
ループが飛ばずに繰り返されるよう閉じたルートにし、ルートは固定サイズのままにせずコンテナに合わせて拡大縮小させてください。Background & Ambientのほかのモーション
Animated Gradient (グラデーションアニメーション)
別名 Gradient animation, Moving gradient, Background gradient animation
グラデーション背景の色がゆっくり移り変わったり、流れたり、回転したりします。
使いどころ
ヒーローの背景、ボタン
[適用する場所]にグラデーションアニメーション(Animated Gradient)の背景を追加してください。ムービンググラデーション(moving gradient)、gradient animation とも呼ばれます。
グラデーションの色がエリア全体をゆっくり流れるように、やわらかく途切れず漂わせ、ループが戻るときに跳ねが見えないようにしてください。
上に載るテキストはどの色の上でも読めるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。Animated Grid Pattern (グリッドパターンアニメーション)
別名 Flickering grid, Grid background
線や正方形のグリッドで、セルがフェードしたり明滅したりします。
使いどころ
テック系・SaaS のヒーロー
[適用する場所]にグリッドパターンアニメーション(Animated Grid Pattern)の背景を追加してください。フリッカリンググリッド(flickering grid)、グリッド背景(grid background)とも呼ばれます。
薄い線のグリッドは動かさず、散らばったいくつかのセルがそれぞれ違うタイミングでゆっくりフェードイン・アウトするようにしてください。静かで控えめに、一斉には光らせないでください。
コンテンツの背後に置いてクリックを受け取らないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は明滅を止めてください。Aurora Background (オーロラ背景)
別名 Northern lights gradient
ぼかしたやわらかな色の帯が、オーロラのようにコンテンツの背後を漂います。
使いどころ
ヒーローセクション
[適用する場所]にオーロラ背景(Aurora Background)を追加してください。ノーザンライツグラデーション(northern lights gradient)とも呼ばれます。
ぼかしたやわらかな色の帯がコンテンツの背後でゆっくり漂い揺れ、重なり溶け合ってオーロラのように見えるようにしてください。とてもゆっくり、夢のように。
上のテキストは読みやすく保ち、なめらかさを保つために帯のぼかしを毎フレームかけ直さないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は漂う動きを止めてください。