Image Reveal Wipe (画像リビールワイプ)
別名 Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
覆いが縮む、またはマスクの縁が広がることで画像が現れます。
使いどころ
スクロールで現れる記事の画像
バリエーション
- directional wipe
- circle mask
- curtain cover
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]に画像リビールワイプ(Image Reveal Wipe)を追加してください。マスクリビール(mask reveal)、クリップパスリビール(clip-path reveal)とも呼ばれます。
画像がスクロールで画面に入ってきたら、覆いが片側から拭き取られるように退き、スクロールに合わせてなめらかに画像を見せてください。画面から出るよりずっと前に完全に見えている状態にします。
レイアウトがずれないよう画像の領域をあらかじめ確保し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から画像をすべて見せてください。似ているモーション
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)にしている場合は全体を表示した状態にしてください。A
マウスを乗せてください
SVG Mask Reveal (SVGマスクリビール)
別名 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
マスクの形がワイプしたりポインターを追ったりして、下にあるコンテンツを見せます。
使いどころ
画像やコンテンツの表示演出
[適用する場所]にSVGマスクリビール(SVG Mask Reveal)のホバー効果を追加してください。クリップパスリビール(clip-path reveal)、スポットライトマスク(spotlight mask)とも呼ばれます。
ポインターを乗せている間は円形のマスクが中央から広がって下のコンテンツを見せ、ポインターが外れると再び閉じるようにしてください。滑らかで、やや素早く。
何もずれないよう2つのレイヤーをまったく同じサイズにし、キーボードフォーカスやタップでも同じ表示をしてください。A
B
ドラッグしてください
Before-After Slider (ビフォーアフタースライダー)
別名 Image comparison slider, Compare slider
ドラッグできる仕切りの左右で、それぞれ別の画像が見えます。
使いどころ
写真のレタッチ、製品比較
[適用する場所]にビフォーアフタースライダー(Before-After Slider)を追加してください。画像比較スライダー(image comparison slider)、コンペアスライダー(compare slider)とも呼ばれます。
2枚の画像を重ね、縦の仕切りをドラッグすると一方が多く、もう一方が少なく見えるようにしてください。仕切りは遅れなくポインターにそのままついてきます。
仕切りは中央から始め、タッチと矢印キーでも動かせるようにしてください。A
B
クリックしてください
Curtain / Panel Wipe (カーテン/パネルワイプ)
別名 Page wipe, Curtain reveal, Stripe transition, Staggered panels
塗りつぶしのパネルが画面を横切って古いページを覆い、引いていくと新しいページが現れます。
使いどころ
ポートフォリオサイトや制作会社サイトのページ移動
[適用する場所]にカーテン/パネルワイプ(Curtain / Panel Wipe)のページトランジションを追加してください。ページワイプ(page wipe)、スタッガードパネル(staggered panels)とも呼ばれます。
塗りつぶしのパネルが1枚ずつ順に画面を横切って古いページを覆い、完全に覆われている間にページを切り替え、パネルはそのまま画面外へ抜けて新しいページを見せるようにしてください。大胆でなめらかに。
パネルが古いページを覆う前に新しいページを見せないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードにしてください。Image & Mediaのほかのモーション
Ken Burns Effect (ケンバーンズエフェクト)
別名 Slow pan and zoom, Ken Burns, Kenburns
静止画が枠の中でゆっくりズームしながら移動します。
使いどころ
ヒーローのスライドショー、背景
[適用する場所]にケンバーンズエフェクト(Ken Burns Effect)を追加してください。スローパン&ズーム(slow pan and zoom)とも呼ばれます。
各画像は表示中にごくゆっくりと一方向だけにズームしながら流れ、次の画像へクロスフェードし、次の画像は別の方向へ動くようにしてください。穏やかに、途切れなく。
どの瞬間も画像が枠全体を覆って端が見えないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は画像を静止させてください。A
B
C
クリックしてください
Lightbox Zoom (ライトボックスズーム)
別名 Image zoom overlay, Medium-style zoom
サムネイルがその場所から拡大し、暗くした背景の上に大きく中央表示されます。
使いどころ
画像ギャラリー、記事
[適用する場所]にライトボックスズーム(Lightbox Zoom)を追加してください。イメージズームオーバーレイ(image zoom overlay)、Medium風ズーム(Medium-style zoom)とも呼ばれます。
サムネイルをクリックすると、その場所からなめらかに拡大して中央の大きな表示になり、背後のページは暗く引っ込むようにしてください。閉じると同じ場所へ縮んで戻ります。
Escキーまたは背景のクリックで閉じられるようにし、開いている間はフォーカスを拡大表示の中に移し、閉じたらサムネイルへ戻してください。ABCDEFGH
ABCDEFGH
ポインターを動かしてください
Magnifier Lens (ルーペ)
別名 Lens, Loupe, Lens (Magnifier), Hover zoom lens
円形のレンズがポインターを追い、画像の一部を拡大して見せます。
使いどころ
製品詳細の画像
[適用する場所]にルーペ(Magnifier Lens)を追加してください。レンズ(lens)、ルーペ(loupe)とも呼ばれます。
丸いレンズが遅れなくポインターの真下に位置し、その下にある画像の部分を拡大して見せるようにしてください。
拡大表示はポインター直下の正確な位置とずれないようにし、タッチ端末では指で画像を押さえている間レンズを表示してください。