Orbiting Circles (オービティングサークル)
別名 Orbit Animation, Orbit, Orbiting icons
小さな円やアイコンが円軌道を描いて中心の周りを回ります。
使いどころ
連携サービスの図
バリエーション
- single ring
- multiple rings
- reverse direction
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にオービティングサークル(Orbiting Circles)を追加してください。オービットアニメーション(orbit animation)、オービティングアイコン(orbiting icons)とも呼ばれます。
小さな円が中央の要素の周りを円形のリング上でゆっくり一定の速さで回り、外側のリングは逆向きにもっとゆっくり回るようにしてください。
ループは継ぎ目なく、回る項目は常に正立させ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。似ているモーション
Motion Path (モーションパス)
別名 Animate Along Path, Offset Path Animation
要素が独自の曲線パスに沿って移動し、パスに合わせて向きを変えることもできます。
使いどころ
ルート上を進む飛行機や点、装飾的な移動要素
[適用する場所]にモーションパス(Motion Path)アニメーションを追加してください。アニメイトアロングパス(animate along path)とも呼ばれます。
小さな要素が独自の曲線ルートに沿ってゆっくり一定のペースで進み、進行方向を向くように回転させてください。
ループが飛ばずに繰り返されるよう閉じたルートにし、ルートは固定サイズのままにせずコンテナに合わせて拡大縮小させてください。ABCDEFGHIJKLMNOP
Spinning Text (スピニングテキスト)
別名 Circular Text, Text on Circle
円に沿って配置したテキストが、途切れなく回転し続けます。
使いどころ
回転するバッジ、スタンプ
[適用する場所]にスピニングテキスト(Spinning Text)を追加してください。サーキュラーテキスト(circular text)、テキストオンサークル(text on circle)とも呼ばれます。
文字を円周上に均等に並べ、円がゆっくり一定の速さで回り、ループの切り替わりで跳ばないようにしてください。
スクリーンリーダーにはテキストを一度だけ通常のテキストとして渡し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。Vortex (ボルテックス)
別名 Swirling particles
粒子が渦潮のように中心の周りをらせん状に回ります。
使いどころ
ドラマチックなヒーロー背景
[適用する場所]にボルテックス(Vortex)の背景を追加してください。スワーリングパーティクル(swirling particles)とも呼ばれます。
小さな粒子が渦潮のように中心点の周りをらせん状に内側へ回り込み、外縁でフェードインして中心に近づくとフェードアウトする、なめらかで途切れない渦にしてください。
粒子の数は控えめにし、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は渦を止めてください。3D Globe (3Dグローブ)
別名 Interactive globe
マーカーや弧を載せた3Dの地球が、レイアウトの中で回転します。
使いどころ
グローバル展開を示すビジュアル
[適用する場所]に3Dグローブ(3D Globe)を追加してください。インタラクティブグローブ(interactive globe)とも呼ばれます。
表面にいくつかのマーカーを置いた地球儀が、マーカーごと軸を中心にゆっくり一定の速さで回るようにしてください。穏やかに、途切れなく。
装飾として扱い、示している情報にはテキストの代替を用意し、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。SVG & Shapeのほかのモーション
Shape Morph (シェイプモーフ)
別名 Path Morphing, SVG Morph, MorphSVG, Shape Tweening
あるベクター図形が別の図形へ滑らかに変形します。
使いどころ
アイコンの状態切り替え、ヒーローグラフィック
[適用する場所]にシェイプモーフ(Shape Morph)を追加してください。パスモーフィング(path morphing)、SVGモーフ(SVG morph)とも呼ばれます。
五角形がくびれて星になるように、ある図形が別の図形へ滑らかに変わり、各点が均一で落ち着いたペースで所定の位置へ移動するようにしてください。
ちらつきのないきれいな変形になるよう両方の図形の点の数と対応をそろえ、ループではなく状態が変わるたびに一度だけ再生してください。ABC
ABC
マウスを乗せてください
SVG Displacement Distortion (SVGディスプレイスメントディストーション)
別名 feTurbulence Distortion, Displacement Map Effect
SVGフィルターがアニメーションするノイズでテキストや図形を歪ませます。
使いどころ
液体や波紋のホバー効果
[適用する場所]にSVGディスプレイスメントディストーション(SVG Displacement Distortion)のホバー効果を追加してください。ディスプレイスメントマップエフェクト(displacement map effect)とも呼ばれます。
ポインターを乗せている間、テキストや図形が揺れる水越しに見るように波打ってゆらめき、効果はふわっと現れ、ポインターが外れるとくっきりした状態に戻るようにしてください。
静止時に負荷がかからないよう歪みフィルターは効果が有効な間だけ適用し、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
SVG Mask Reveal (SVGマスクリビール)
別名 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
マスクの形がワイプしたりポインターを追ったりして、下にあるコンテンツを見せます。
使いどころ
画像やコンテンツの表示演出
[適用する場所]にSVGマスクリビール(SVG Mask Reveal)のホバー効果を追加してください。クリップパスリビール(clip-path reveal)、スポットライトマスク(spotlight mask)とも呼ばれます。
ポインターを乗せている間は円形のマスクが中央から広がって下のコンテンツを見せ、ポインターが外れると再び閉じるようにしてください。滑らかで、やや素早く。
何もずれないよう2つのレイヤーをまったく同じサイズにし、キーボードフォーカスやタップでも同じ表示をしてください。