メディア・画像
写真や画像を、見たくなる形で見せる。
写真・動画・音を見せる部品のカテゴリ。カルーセル、拡大鏡ルーペ、サムネ連動ギャラリー、比較グリッド、Ken Burns、自作 UI のビデオプレーヤーとオーディオプレーヤーがある。原則はアフォーダンスとシグニファイア。メディアの操作は再生ボタン・矢印・ハンドルといった見慣れた記号で「触れる」と分かることが前提で、記号を隠した瞬間に操作できなくなる。プレーヤーの見本は再生・シーク・時間表示・ミュートまで揃えているので、独自 UI に置き換えるときの部品の過不足を確かめる場面で引く。
使い分け複数枚を順に見せるなら carousel、1枚を選んで大きく見るなら thumbnail-gallery / image-compare-grid、細部は image-magnifier。動画は video-player、音は audio-player。ken-burns はヒーロー専用で、本文の写真には使わない。
まず見る3件
- ドラッグ
カルーセル解説あり
Carousel
横並びスライドを矢印・ドット・スワイプで切り替える。scroll-snap で滑らかに止まり、Pointer Events でタッチスワイプにも対応。
- 位置の正本はネイティブの scroll 位置。矢印もドットも scrollTo を呼ぶだけにし、指のスワイプと同じ経路に乗せる
- タッチではポインタを捕まえず、ブラウザの慣性スクロールと snap に任せる。捕まえると指に付いてこなくなる
- ドットは 7px の見た目のまま 24px の当たり判定にする。見た目を大きくすると写真の上で主張しすぎる
- JS
- クリック
サムネ連動ギャラリー
Thumbnail Gallery
下段のサムネをタップ/クリックするとメイン表示が切り替わる。選択中サムネをハイライトし、切替時にフェードイン。
- 切替のフェードは animation を none にしてから 2 フレーム後に付け直す。同じ値の再代入では再生されない
- 選択中は枠色＋3px の外光＋1.06 倍の3つで示す。色だけだと写真の色に紛れ、拡大だけだとホバーと区別できない
- サムネは 48px 角で 8px 間隔。指で隣を押し間違えない最小の寸法
- JS
- クリック
ビデオプレーヤー
Video Player
グラデーションのポスター上に自作の動画プレーヤーUIを重ねる。中央の再生ボタン、クリックでシークできる進捗バー、経過/総時間、ミュート・全画面のアイコンが揃う。
- 再生中は中央ボタンを消し、ホバーで戻す。映像の上に大きな UI が居座ると見る邪魔になる
- シークバーは 5px の見た目に上下 8px の padding で 21px の当たり判定を作る。細い線そのものは指で掴めない
- 時間表示は tabular-nums で桁幅を固定する。0:09→0:10 で文字幅が変わると横の要素が毎秒揺れる
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| カルーセル Carousel | ドラッグ | JS | 商品写真・キービジュアルの切替・限られた枠で複数のお知らせを見せる | default / hover / focus / disabled |
| 拡大鏡ルーペ Image Magnifier (Loupe) | ドラッグ | JS | 商品・生地・印刷物の細部確認・地図・図版の部分拡大 | default / focus |
| サムネ連動ギャラリー Thumbnail Gallery | クリック | JS | 商品詳細の複数写真の切替・作品・部屋の写真を1枚ずつ見せる | default / hover / focus / active |
| 比較グリッド Expanding Image Grid | クリック | JS | 3案の比較でどれかに注目させる・施工例・カラーバリエーションの見比べ | default / focus / active |
| Ken Burns Ken Burns Effect | 自動再生 | CSSのみ | ヒーローの写真を印象的に見せる・旅行・不動産・料理など写真主役の LP | default |
| ビデオプレーヤー Video Player | クリック | JS | 自社デザインに合わせた動画プレーヤー・ポスター上に再生 UI を重ねるヒーロー | default / hover / focus / active |
| オーディオプレーヤー Audio Player | クリック | JS | 音楽・ポッドキャストの再生カード・曲名・ジャケットと一緒に見せる再生 UI | default / hover / focus / active |
すべての見本（7件）
- ドラッグ
カルーセル解説あり
Carousel
横並びスライドを矢印・ドット・スワイプで切り替える。scroll-snap で滑らかに止まり、Pointer Events でタッチスワイプにも対応。
- JS
- ドラッグ
拡大鏡ルーペ
Image Magnifier (Loupe)
画像にホバーまたはタッチした位置を丸いルーペで拡大表示する。PCはマウス追従、スマホはタッチ移動に対応。
- JS
- クリック
サムネ連動ギャラリー
Thumbnail Gallery
下段のサムネをタップ/クリックするとメイン表示が切り替わる。選択中サムネをハイライトし、切替時にフェードイン。
- JS
- クリック
比較グリッド
Expanding Image Grid
タイル表示された画像をタップすると1枚だけ拡大され他が縮小する。再タップで元の均等グリッドに戻る。
- JS
- 自動再生
Ken Burns
Ken Burns Effect
画像がゆっくりズームしながらパンし続ける、映画的なヒーロー演出。ヒーロー用途のため常時アニメーションする。
- CSSのみ
- クリック
ビデオプレーヤー
Video Player
グラデーションのポスター上に自作の動画プレーヤーUIを重ねる。中央の再生ボタン、クリックでシークできる進捗バー、経過/総時間、ミュート・全画面のアイコンが揃う。
- JS
- クリック
オーディオプレーヤー
Audio Player
音楽プレーヤーカード。グラデーションのジャケット、曲名/アーティスト、再生・前後スキップ、ドラッグできる進捗バーと時間表示、再生中に揺れるイコライザーバーを備える。
- JS