Ken Burns Effect (ケンバーンズエフェクト)
別名 Slow pan and zoom, Ken Burns, Kenburns
静止画が枠の中でゆっくりズームしながら移動します。
使いどころ
ヒーローのスライドショー、背景
バリエーション
- zoom in
- zoom out
- pan left/right
- top
- bottom
- left
- right
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にケンバーンズエフェクト(Ken Burns Effect)を追加してください。スローパン&ズーム(slow pan and zoom)とも呼ばれます。
各画像は表示中にごくゆっくりと一方向だけにズームしながら流れ、次の画像へクロスフェードし、次の画像は別の方向へ動くようにしてください。穏やかに、途切れなく。
どの瞬間も画像が枠全体を覆って端が見えないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は画像を静止させてください。似ているモーション
マウスを乗せてください
Hover Zoom (ホバーズーム)
別名 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
ホバーすると画像が枠の中で拡大し、ポインターに合わせて動くこともあります。
使いどころ
製品カード、サムネイル
[適用する場所]にホバーズーム(Hover Zoom)エフェクトを追加してください。イメージズームオンホバー(image zoom on hover)、ズームパン(zoom-pan)とも呼ばれます。
ポインターが画像に乗っている間は、枠の大きさはそのままで画像が枠の中でゆっくりなめらかに拡大し、離れたらなめらかに戻るようにしてください。
画像は枠で切り抜いてレイアウトからはみ出さないようにし、キーボードフォーカスでも同じズームを出してください。A
中をスクロールしてください
Zoom on Scroll (スクロールズーム)
別名 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
スクロールに合わせて、要素やシーンが拡大・縮小します。
使いどころ
ヒーローのイントロ、画像の拡大表示
[適用する場所]にスクロールズーム(Zoom on Scroll)の効果を追加してください。scroll zoom、スケールオンスクロール(scale on scroll)とも呼ばれます。
セクションが画面に留まっている間、要素が小さなカードからスクロールに合わせてなめらかに大きくなって画面全体を埋め、上へ戻すと再び縮むようにしてください。
周りのレイアウトを押し動かさずに拡大し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はズームせず最終サイズで表示してください。A
B
C
D
中をスクロールしてください
Parallax (パララックス)
別名 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
スクロールに合わせてレイヤーが異なる速さで動き、奥行きを感じさせます。
使いどころ
ヒーローの背景、ランディングページ
[適用する場所]にパララックス(Parallax)のスクロール効果を追加してください。パララックススクロール(parallax scrolling)、パララックスレイヤー(parallax layers)とも呼ばれます。
ページをスクロールすると背景レイヤーがコンテンツよりゆっくり動き、遠いレイヤーほど動きを小さくして、控えめな奥行きを出してください。
遅れなくスクロール位置に連動させ、テキストは通常速度のレイヤーに置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は効果をオフにしてください。Image & Mediaのほかのモーション
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)とも呼ばれます。
丸いレンズが遅れなくポインターの真下に位置し、その下にある画像の部分を拡大して見せるようにしてください。
拡大表示はポインター直下の正確な位置とずれないようにし、タッチ端末では指で画像を押さえている間レンズを表示してください。A
B
ドラッグしてください
Before-After Slider (ビフォーアフタースライダー)
別名 Image comparison slider, Compare slider
ドラッグできる仕切りの左右で、それぞれ別の画像が見えます。
使いどころ
写真のレタッチ、製品比較
[適用する場所]にビフォーアフタースライダー(Before-After Slider)を追加してください。画像比較スライダー(image comparison slider)、コンペアスライダー(compare slider)とも呼ばれます。
2枚の画像を重ね、縦の仕切りをドラッグすると一方が多く、もう一方が少なく見えるようにしてください。仕切りは遅れなくポインターにそのままついてきます。
仕切りは中央から始め、タッチと矢印キーでも動かせるようにしてください。