Magnifier Lens (ルーペ)
別名 Lens, Loupe, Lens (Magnifier), Hover zoom lens
円形のレンズがポインターを追い、画像の一部を拡大して見せます。
使いどころ
製品詳細の画像
バリエーション
- Lens
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にルーペ(Magnifier Lens)を追加してください。レンズ(lens)、ルーペ(loupe)とも呼ばれます。
丸いレンズが遅れなくポインターの真下に位置し、その下にある画像の部分を拡大して見せるようにしてください。
拡大表示はポインター直下の正確な位置とずれないようにし、タッチ端末では指で画像を押さえている間レンズを表示してください。似ているモーション
マウスを乗せてください
Hover Zoom (ホバーズーム)
別名 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
ホバーすると画像が枠の中で拡大し、ポインターに合わせて動くこともあります。
使いどころ
製品カード、サムネイル
[適用する場所]にホバーズーム(Hover Zoom)エフェクトを追加してください。イメージズームオンホバー(image zoom on hover)、ズームパン(zoom-pan)とも呼ばれます。
ポインターが画像に乗っている間は、枠の大きさはそのままで画像が枠の中でゆっくりなめらかに拡大し、離れたらなめらかに戻るようにしてください。
画像は枠で切り抜いてレイアウトからはみ出さないようにし、キーボードフォーカスでも同じズームを出してください。- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
ポインターを動かしてください
Cursor Spotlight (カーソルスポットライト)
別名 Flashlight cursor, Spotlight effect
ポインターの周りの光の円がコンテンツを照らし出し、それ以外は暗いままです。
使いどころ
ヒーローセクション、リビール演出
[適用する場所]にカーソルスポットライト(Cursor Spotlight)の効果を追加してください。懐中電灯カーソル(flashlight cursor)、スポットライト効果(spotlight effect)とも呼ばれます。
やわらかな光の円がポインターを追いかけてその下のコンテンツを照らし出し、それ以外の部分は暗くしたままにしてください。
追いかけるポインターがないタッチデバイスでは、代わりにコンテンツ全体を明るく表示してください。- A
- B
- C
- D
ABCD
ポインターを動かしてください
Cursor Image Hover (カーソル画像ホバー)
別名 Hover image follow, Image preview on hover
テキストのリスト項目にホバーしている間、プレビュー画像がポインターを追いかけます。
使いどころ
プロジェクト一覧、メニュー
[適用する場所]にカーソル画像ホバー(Cursor Image Hover)の効果を追加してください。ホバー画像フォロー(hover image follow)、ホバー時の画像プレビュー(image preview on hover)とも呼ばれます。
ポインターがテキストのリスト項目の上にある間、その項目の小さなプレビュー画像がポインターの横に浮かび、少しなめらかに遅れて追従し、別の項目へ移ると次の画像へスライドして切り替わるようにしてください。
プレビューがリストのクリックを妨げないようにし、タッチやキーボードではプレビューなしでもリストを完全に使えるようにしてください。Image & Mediaのほかのモーション
A
B
ドラッグしてください
Before-After Slider (ビフォーアフタースライダー)
別名 Image comparison slider, Compare slider
ドラッグできる仕切りの左右で、それぞれ別の画像が見えます。
使いどころ
写真のレタッチ、製品比較
[適用する場所]にビフォーアフタースライダー(Before-After Slider)を追加してください。画像比較スライダー(image comparison slider)、コンペアスライダー(compare slider)とも呼ばれます。
2枚の画像を重ね、縦の仕切りをドラッグすると一方が多く、もう一方が少なく見えるようにしてください。仕切りは遅れなくポインターにそのままついてきます。
仕切りは中央から始め、タッチと矢印キーでも動かせるようにしてください。中をスクロールしてください
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)にしている場合は最初から画像をすべて見せてください。