Icon Morph (アイコンモーフ)
別名 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
ハンバーガーメニューなどのアイコンが、バーの回転と移動によって別のアイコン(X)に変わります。
使いどころ
メニューの開閉ボタン
バリエーション
- hamburger to X
- hamburger to arrow
- play to pause
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にアイコンモーフ(Icon Morph)を追加してください。ハンバーガーからX(hamburger to X)、メニューアイコンモーフ(menu icon morph)とも呼ばれます。
押すたびに上下のバーがまず中央に寄ってから回転してXになり、中央のバーはフェードアウトし、もう一度押すと元に戻るようにしてください。素早く切れのある動きにしてください。
実際のトグルボタンにしてアクセシブルなラベルと展開状態も一緒に切り替え、周りがずれないようにアイコンのサイズは固定してください。似ているモーション
Shape Morph (シェイプモーフ)
別名 Path Morphing, SVG Morph, MorphSVG, Shape Tweening
あるベクター図形が別の図形へ滑らかに変形します。
使いどころ
アイコンの状態切り替え、ヒーローグラフィック
[適用する場所]にシェイプモーフ(Shape Morph)を追加してください。パスモーフィング(path morphing)、SVGモーフ(SVG morph)とも呼ばれます。
五角形がくびれて星になるように、ある図形が別の図形へ滑らかに変わり、各点が均一で落ち着いたペースで所定の位置へ移動するようにしてください。
ちらつきのないきれいな変形になるよう両方の図形の点の数と対応をそろえ、ループではなく状態が変わるたびに一度だけ再生してください。クリックしてください
Copy-to-Clipboard Feedback (クリップボードコピーフィードバック)
別名 Copied state, Copy icon to checkmark
コピーアイコンがチェックマークに変わり、ラベルが一瞬「コピーしました」になります。
使いどころ
コードブロック、共有リンク
[適用する場所]にクリップボードコピーフィードバック(Copy-to-Clipboard Feedback)のアニメーションを追加してください。コピー済み表示(copied state)、コピーアイコンからチェックマーク(copy icon to checkmark)とも呼ばれます。
コピーボタンを押すと、コピーアイコンが素早く縮んで消え、代わりにチェックマークが描かれてラベルが「コピーしました」に変わり、少ししたらすべてなめらかに元に戻るようにしてください。
切り替え中もボタンのサイズを変えずに何もずれないようにし、コピー済みの状態をスクリーンリーダーに伝えてください。••••••ABCDEF
クリックしてください
Password Reveal Toggle (パスワード表示切り替え)
別名 Show/hide password, Eye icon toggle
パスワードの表示・非表示に合わせて、目のアイコンが開いた状態と斜線入りの状態で切り替わります。
使いどころ
ログイン・新規登録フォーム
[適用する場所]にパスワード表示切り替え(Password Reveal Toggle)を追加してください。表示/非表示パスワード(show/hide password)、目のアイコントグル(eye icon toggle)とも呼ばれます。
目を押すと斜線が素早く消え、伏せ字の点が実際の文字へクロスフェードし、もう一度押すと斜線が描き戻されて文字が隠れるようにしてください。なめらかで素早く、弾みは不要です。
文字がずれないよう入力欄の幅を一定に保ち、トグルはパスワードが表示中かどうかをラベルで伝える本物のボタンにしてください。SVG & Shapeのほかのモーション
Line Drawing (ラインドローイング)
別名 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
破線オフセットをアニメーションさせ、SVGの線がパスに沿って描かれていくように見せます。
使いどころ
アイコン、ロゴ、イラスト
[適用する場所]にラインドローイング(Line Drawing)アニメーションを追加してください。パスドローイング(path drawing)、セルフドローイングSVG(self-drawing SVG)とも呼ばれます。
各線がパスに沿って始点から終点まで滑らかに自分で描かれていくように見せ、チェックマークのような2本目の線は1本目のすぐ後に続けてください。
ループさせず画面に入ったときに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は描き終わった線を表示してください。Motion Path (モーションパス)
別名 Animate Along Path, Offset Path Animation
要素が独自の曲線パスに沿って移動し、パスに合わせて向きを変えることもできます。
使いどころ
ルート上を進む飛行機や点、装飾的な移動要素
[適用する場所]にモーションパス(Motion Path)アニメーションを追加してください。アニメイトアロングパス(animate along path)とも呼ばれます。
小さな要素が独自の曲線ルートに沿ってゆっくり一定のペースで進み、進行方向を向くように回転させてください。
ループが飛ばずに繰り返されるよう閉じたルートにし、ルートは固定サイズのままにせずコンテナに合わせて拡大縮小させてください。A
Orbiting Circles (オービティングサークル)
別名 Orbit Animation, Orbit, Orbiting icons
小さな円やアイコンが円軌道を描いて中心の周りを回ります。
使いどころ
連携サービスの図
[適用する場所]にオービティングサークル(Orbiting Circles)を追加してください。オービットアニメーション(orbit animation)、オービティングアイコン(orbiting icons)とも呼ばれます。
小さな円が中央の要素の周りを円形のリング上でゆっくり一定の速さで回り、外側のリングは逆向きにもっとゆっくり回るようにしてください。
ループは継ぎ目なく、回る項目は常に正立させ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。