拡大鏡ルーペ
画像にホバーまたはタッチした位置を丸いルーペで拡大表示する。PCはマウス追従、スマホはタッチ移動に対応。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- 商品・生地・印刷物の細部確認
- 地図・図版の部分拡大
- 1枚の大きな写真を差し替えずに拡大したい
- 避ける場面
- 小さすぎる画像（拡大しても粗い）
- 文字を読ませる用途（拡大テキストを別に出す）
- ページスクロール中に触る領域（touch-action none）
- 構成要素
- 元画像
- ルーペ
- 操作ヒント
- 持っている状態
- 通常
- フォーカス
- キーボード
Tab で画像に到達するとルーペが中央に出る。矢印キーで 10px（Shift で 40px）ずつ動かし、Esc で消す。ホバー／タッチも同じ
- 支援技術
画像は role=img と aria-label を持ち tabindex=0 で到達できる。ルーペは aria-hidden の装飾。拡大で見える細部は alt でも言語化する。reduce でフェード停止
- 動き
ルーペはポインタに即時追従（表示切替 150ms フェード）。倍率 2.5・半径 40px で位置ズレなく拡大。reduce では即時
デザインの要点
- ルーペの背景は同じ画像を「元の寸法×倍率」で敷き、位置を −(x×倍率 − 半径) にする。倍率を変えてもズレない式
- ポインタが画像の外に出た瞬間に hidden にする。境界で残ると拡大先が無い空のルーペが浮く
- touch-action: none は画像だけに付ける。周りの本文まで付けると、その領域でページが縦にスクロールできない
- 拡大は目で見る人だけの体験なので、細部は alt にも書き、キーボードでは矢印でルーペを動かせるようにする
コード（コピーして使えます）
<div class="mg-wrap" id="mgWrap">
<!-- <img id="mgImg" src="..." alt="..."> に置き換えて使う -->
<!-- ここでは background グラデで代用 -->
<div class="mg-img" id="mgImg" role="img" tabindex="0" aria-label="サンプル画像（矢印キーでルーペを動かす）"></div>
<div class="mg-lens" id="mgLens" aria-hidden="true" hidden></div>
<p class="mg-hint">ホバー / タッチ / 矢印キーで拡大</p>
</div>