ピンチズームのキャンバス
2本指のピンチで拡大・縮小し、1本指でパンする地図風キャンバス。ダブルタップで 2 倍と等倍を往復、PC ではホイールで拡大・ドラッグで移動。倍率は 1〜4 倍に制限。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
デザインの要点
- 拡大の中心は画面中央ではなく指の間（PC はカーソル位置）。見ていた場所が指の下から逃げないことがズームの本質
- 倍率は上限と下限を決める。等倍より縮ませない・4 倍以上にしないと、迷子になる操作を最初から作らない
- ダブルタップは「2 倍⇄等倍」の往復に固定する。1 回の操作で確実に戻れる道を用意する
- キャンバスには touch-action: none を指定してブラウザのズームとスクロールを止め、指の動きを全部受け取る
コード（コピーして使えます）
<div class="pzc-wrap">
<div class="pzc-stage" id="pzc-stage" aria-label="地図（ピンチで拡大）">
<div class="pzc-canvas" id="pzc-canvas">
<svg viewBox="0 0 400 300" width="100%" height="100%" aria-hidden="true">
<defs><pattern id="pzc-grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M20 0H0V20" fill="none" stroke="#e3ddd0" stroke-width="1"/></pattern></defs>
<rect width="400" height="300" fill="#f7f3ea"/>
<rect width="400" height="300" fill="url(#pzc-grid)"/>
<path d="M0 120 C80 100 120 160 200 140 S320 90 400 110" fill="none" stroke="#bcd6ea" stroke-width="14" stroke-linecap="round"/>
<path d="M60 0 L90 300" stroke="#fff" stroke-width="10"/><path d="M60 0 L90 300" stroke="#e0d8c8" stroke-width="12" stroke-dasharray="0" opacity="0.4"/>
<path d="M0 220 H400" stroke="#fff" stroke-width="10"/>
<rect x="120" y="170" width="70" height="40" rx="4" fill="#dfe8d2"/>
<rect x="230" y="30" width="90" height="60" rx="4" fill="#e6e0f0"/>
<rect x="300" y="240" width="60" height="40" rx="4" fill="#f2dfd0"/>
<circle cx="200" cy="150" r="8" fill="#2b50c7"/><circle cx="200" cy="150" r="14" fill="none" stroke="#2b50c7" stroke-width="2" opacity="0.4"/>
<text x="212" y="146" font-size="12" font-weight="700" fill="#2c2823">ミナト工房</text>
<text x="126" y="195" font-size="9" fill="#5b6b4c">中央公園</text>
<text x="236" y="65" font-size="9" fill="#5b4c7a">市民ホール</text>
<text x="306" y="264" font-size="9" fill="#7a5a44">港南駅</text>
</svg>
</div>
<div class="pzc-hud">
<span class="pzc-scale" id="pzc-scale" aria-live="polite">1.0×</span>
<div class="pzc-btns">
<button class="pzc-btn" type="button" id="pzc-in" aria-label="拡大">＋</button>
<button class="pzc-btn" type="button" id="pzc-out" aria-label="縮小">−</button>
<button class="pzc-btn pzc-btn-text" type="button" id="pzc-reset">リセット</button>
</div>
</div>
</div>
<p class="pzc-hint">ピンチで拡大・ドラッグで移動・ダブルタップで 2×⇄1×（PC はホイール）</p>
</div>