SVG Mask Reveal (SVGマスクリビール)
別名 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
マスクの形がワイプしたりポインターを追ったりして、下にあるコンテンツを見せます。
使いどころ
画像やコンテンツの表示演出
バリエーション
- circle follows cursor
- clip-path inset wipe
- SVG clipPath animation
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にSVGマスクリビール(SVG Mask Reveal)のホバー効果を追加してください。クリップパスリビール(clip-path reveal)、スポットライトマスク(spotlight mask)とも呼ばれます。
ポインターを乗せている間は円形のマスクが中央から広がって下のコンテンツを見せ、ポインターが外れると再び閉じるようにしてください。滑らかで、やや素早く。
何もずれないよう2つのレイヤーをまったく同じサイズにし、キーボードフォーカスやタップでも同じ表示をしてください。似ているモーション
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
ポインターを動かしてください
Cursor Spotlight (カーソルスポットライト)
別名 Flashlight cursor, Spotlight effect
ポインターの周りの光の円がコンテンツを照らし出し、それ以外は暗いままです。
使いどころ
ヒーローセクション、リビール演出
[適用する場所]にカーソルスポットライト(Cursor Spotlight)の効果を追加してください。懐中電灯カーソル(flashlight cursor)、スポットライト効果(spotlight effect)とも呼ばれます。
やわらかな光の円がポインターを追いかけてその下のコンテンツを照らし出し、それ以外の部分は暗くしたままにしてください。
追いかけるポインターがないタッチデバイスでは、代わりにコンテンツ全体を明るく表示してください。ABCDEFGHIJKL
ポインターを動かしてください
Text Reveal Card (テキストリビールカード)
別名 Spotlight Text Reveal
カード上でポインターを動かすと、マスクの境界やスポットライトの下に隠れたテキストが現れます。
使いどころ
機能紹介カード
[適用する場所]にテキストリビールカード(Text Reveal Card)エフェクトを追加してください。スポットライトテキストリビール(spotlight text reveal)とも呼ばれます。
ポインターがカード上を動くと、縦の境界線がぴったり追従して片側に隠れたテキストを見せるようにしてください。遅れのない、なめらかで直接的な動きにしてください。
ポインターのないタッチデバイスではドラッグやタップで隠れたテキストが見えるようにし、隠れたテキストもスクリーンリーダーで読めるようにしてください。A
Clip Reveal (クリップリビール)
別名 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path やマスクが端や一点から広がり、画像やテキストが少しずつ現れます。
使いどころ
画像や見出しの表示
[適用する場所]にクリップリビール(Clip Reveal)の登場エフェクトを追加してください。マスクリビール(mask reveal)、ワイプリビール(wipe reveal)、イメージリビール(image reveal)とも呼ばれます。
切り抜きの境界が左から右へ移動し、コンテンツ自体は動かずに少しずつ見えてくるようにしてください。滑らかに、始まりと終わりは柔らかく。
何もずれないよう最初から要素の領域を確保し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は全体を表示した状態にしてください。中をスクロールしてください
Image Reveal Wipe (画像リビールワイプ)
別名 Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
覆いが縮む、またはマスクの縁が広がることで画像が現れます。
使いどころ
スクロールで現れる記事の画像
[適用する場所]に画像リビールワイプ(Image Reveal Wipe)を追加してください。マスクリビール(mask reveal)、クリップパスリビール(clip-path reveal)とも呼ばれます。
画像がスクロールで画面に入ってきたら、覆いが片側から拭き取られるように退き、スクロールに合わせてなめらかに画像を見せてください。画面から出るよりずっと前に完全に見えている状態にします。
レイアウトがずれないよう画像の領域をあらかじめ確保し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から画像をすべて見せてください。SVG & Shapeのほかのモーション
Blob Morph (ブロブモーフ)
別名 Morphing Blob, Animated Blob, Blob / Morphing Loader, Gooey loader, Morph loader
有機的なブロブが輪郭を絶えず変化させ続けます。
使いどころ
背景、アバター、ボタン
[適用する場所]にブロブモーフ(Blob Morph)のループアニメーションを追加してください。モーフィングブロブ(morphing blob)、アニメーテッドブロブ(animated blob)とも呼ばれます。
有機的なブロブがゆっくり回りながら輪郭を絶えず変化させ、角のない滑らかで柔らかな動きにしてください。
形が飛ばないようにループの継ぎ目をなくし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。マウスを乗せてください
Gooey Effect (グーイーエフェクト)
別名 Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
ぼかしとコントラストのフィルターで、近くの形同士が液体のしずくのように溶け合います。
使いどころ
メニュー、カーソル、ページネーション
[適用する場所]にグーイーエフェクト(Gooey Effect)を追加してください。グーエフェクト(goo effect)、メタボール(metaballs)とも呼ばれます。
ポインターを乗せると小さなしずくが本体から液体のように伸びてから離れ、ポインターが外れると流れるように戻って滑らかに溶け合うようにしてください。
ぼかしとコントラストのフィルターはページ全体ではなく小さな形のグループだけにかけ、キーボードフォーカスやタップでも同じ効果を出してください。クリックしてください
Icon Morph (アイコンモーフ)
別名 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
ハンバーガーメニューなどのアイコンが、バーの回転と移動によって別のアイコン(X)に変わります。
使いどころ
メニューの開閉ボタン
[適用する場所]にアイコンモーフ(Icon Morph)を追加してください。ハンバーガーからX(hamburger to X)、メニューアイコンモーフ(menu icon morph)とも呼ばれます。
押すたびに上下のバーがまず中央に寄ってから回転してXになり、中央のバーはフェードアウトし、もう一度押すと元に戻るようにしてください。素早く切れのある動きにしてください。
実際のトグルボタンにしてアクセシブルなラベルと展開状態も一緒に切り替え、周りがずれないようにアイコンのサイズは固定してください。