別名 Image comparison slider, Compare slider
ドラッグできる仕切りの左右で、それぞれ別の画像が見えます。
使いどころ
写真のレタッチ、製品比較
[適用する場所]にビフォーアフタースライダー(Before-After Slider)を追加してください。画像比較スライダー(image comparison slider)、コンペアスライダー(compare slider)とも呼ばれます。
2枚の画像を重ね、縦の仕切りをドラッグすると一方が多く、もう一方が少なく見えるようにしてください。仕切りは遅れなくポインターにそのままついてきます。
仕切りは中央から始め、タッチと矢印キーでも動かせるようにしてください。別名 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
ホバーすると画像が枠の中で拡大し、ポインターに合わせて動くこともあります。
使いどころ
製品カード、サムネイル
[適用する場所]にホバーズーム(Hover Zoom)エフェクトを追加してください。イメージズームオンホバー(image zoom on hover)、ズームパン(zoom-pan)とも呼ばれます。
ポインターが画像に乗っている間は、枠の大きさはそのままで画像が枠の中でゆっくりなめらかに拡大し、離れたらなめらかに戻るようにしてください。
画像は枠で切り抜いてレイアウトからはみ出さないようにし、キーボードフォーカスでも同じズームを出してください。別名 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)にしている場合は最初から画像をすべて見せてください。別名 Slow pan and zoom, Ken Burns, Kenburns
静止画が枠の中でゆっくりズームしながら移動します。
使いどころ
ヒーローのスライドショー、背景
[適用する場所]にケンバーンズエフェクト(Ken Burns Effect)を追加してください。スローパン&ズーム(slow pan and zoom)とも呼ばれます。
各画像は表示中にごくゆっくりと一方向だけにズームしながら流れ、次の画像へクロスフェードし、次の画像は別の方向へ動くようにしてください。穏やかに、途切れなく。
どの瞬間も画像が枠全体を覆って端が見えないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は画像を静止させてください。別名 Image zoom overlay, Medium-style zoom
サムネイルがその場所から拡大し、暗くした背景の上に大きく中央表示されます。
使いどころ
画像ギャラリー、記事
[適用する場所]にライトボックスズーム(Lightbox Zoom)を追加してください。イメージズームオーバーレイ(image zoom overlay)、Medium風ズーム(Medium-style zoom)とも呼ばれます。
サムネイルをクリックすると、その場所からなめらかに拡大して中央の大きな表示になり、背後のページは暗く引っ込むようにしてください。閉じると同じ場所へ縮んで戻ります。
Escキーまたは背景のクリックで閉じられるようにし、開いている間はフォーカスを拡大表示の中に移し、閉じたらサムネイルへ戻してください。別名 Lens, Loupe, Lens (Magnifier), Hover zoom lens
円形のレンズがポインターを追い、画像の一部を拡大して見せます。
使いどころ
製品詳細の画像
[適用する場所]にルーペ(Magnifier Lens)を追加してください。レンズ(lens)、ルーペ(loupe)とも呼ばれます。
丸いレンズが遅れなくポインターの真下に位置し、その下にある画像の部分を拡大して見せるようにしてください。
拡大表示はポインター直下の正確な位置とずれないようにし、タッチ端末では指で画像を押さえている間レンズを表示してください。