Shape Morph (シェイプモーフ)
別名 Path Morphing, SVG Morph, MorphSVG, Shape Tweening
あるベクター図形が別の図形へ滑らかに変形します。
使いどころ
アイコンの状態切り替え、ヒーローグラフィック
バリエーション
- path d interpolation
- mismatched point morph
- multi-shape morph
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にシェイプモーフ(Shape Morph)を追加してください。パスモーフィング(path morphing)、SVGモーフ(SVG morph)とも呼ばれます。
五角形がくびれて星になるように、ある図形が別の図形へ滑らかに変わり、各点が均一で落ち着いたペースで所定の位置へ移動するようにしてください。
ちらつきのないきれいな変形になるよう両方の図形の点の数と対応をそろえ、ループではなく状態が変わるたびに一度だけ再生してください。似ているモーション
Blob Morph (ブロブモーフ)
別名 Morphing Blob, Animated Blob, Blob / Morphing Loader, Gooey loader, Morph loader
有機的なブロブが輪郭を絶えず変化させ続けます。
使いどころ
背景、アバター、ボタン
[適用する場所]にブロブモーフ(Blob Morph)のループアニメーションを追加してください。モーフィングブロブ(morphing blob)、アニメーテッドブロブ(animated blob)とも呼ばれます。
有機的なブロブがゆっくり回りながら輪郭を絶えず変化させ、角のない滑らかで柔らかな動きにしてください。
形が飛ばないようにループの継ぎ目をなくし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。クリックしてください
Icon Morph (アイコンモーフ)
別名 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
ハンバーガーメニューなどのアイコンが、バーの回転と移動によって別のアイコン(X)に変わります。
使いどころ
メニューの開閉ボタン
[適用する場所]にアイコンモーフ(Icon Morph)を追加してください。ハンバーガーからX(hamburger to X)、メニューアイコンモーフ(menu icon morph)とも呼ばれます。
押すたびに上下のバーがまず中央に寄ってから回転してXになり、中央のバーはフェードアウトし、もう一度押すと元に戻るようにしてください。素早く切れのある動きにしてください。
実際のトグルボタンにしてアクセシブルなラベルと展開状態も一緒に切り替え、周りがずれないようにアイコンのサイズは固定してください。ABCDEFGHI
Morphing Text (モーフィングテキスト)
別名 Text Morph
ひとつの単語がぼやけながら、同じ位置で次の単語へ溶け込むように変わります。
使いどころ
ヒーローエリアのキャッチコピー
[適用する場所]にモーフィングテキスト(Morphing Text)のエフェクトを追加してください。テキストモーフ(text morph)とも呼ばれます。
ひとつの単語が同じ位置でぼやけ、とろりと柔らかく混ざり合いながら次の単語へ溶け込み、次に切り替わる前に少し静止するようにしてください。
単語を途切れなく順に切り替え、スクリーンリーダーには通常のテキストとして読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は切り替えを止めてください。A
マウスを乗せてください
ホバーすると要素の角がなめらかに丸くなります。
使いどころ
ボタン、画像
[適用する場所]にラウンドコーナー(Round Corners)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素の角ばった角がなめらかに丸くなり、離れたら元の角に戻るようにしてください。やわらかく素早く。
要素のサイズは変えず、キーボードフォーカスでも同じ効果を出してください。SVG & Shapeのほかのモーション
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つのレイヤーをまったく同じサイズにし、キーボードフォーカスやタップでも同じ表示をしてください。