HTML イメージマップの作り方と代替手段 - クリッカブルマップの実装ガイド

HTML イメージマップの基本 - map 要素と area 要素の構造

HTML イメージマップは、1 枚の画像内に複数のクリック可能な領域を定義する技術です。<map> 要素と <area> 要素を組み合わせ、画像の特定座標にリンクやアクションを割り当てます。地図、フロアプラン、解剖図、組織図など、画像の部分ごとに異なる情報を提供したい場面で使用されてきました。

基本構造:

<img src="office-map.png" usemap="#officemap" alt="オフィスフロアマップ">
<map name="officemap">
<area shape="rect" coords="0,0,200,150" href="/meeting-room-a" alt="会議室 A">
<area shape="circle" coords="300,100,50" href="/lounge" alt="ラウンジ">
<area shape="poly" coords="400,0,500,50,450,150" href="/reception" alt="受付">
</map>

shape 属性の種類:

• rect: 矩形。coords="x1,y1,x2,y2" で左上と右下の座標を指定
• circle: 円形。coords="cx,cy,r" で中心座標と半径を指定
• poly: 多角形。coords="x1,y1,x2,y2,..." で各頂点の座標を列挙
• default: 画像全体。他の area に該当しない領域のフォールバック

usemap 属性の値は # に続けて <map> の name 属性値を指定します。座標はすべてピクセル単位で、画像の左上を原点 (0,0) とします。

イメージマップの座標設計 - ツールを使った効率的な領域定義

イメージマップの座標を手動で計算するのは非効率です。専用ツールを使えば、画像上でクリックするだけで正確な座標を生成できます。

オンラインツール:

• image-map.net: ブラウザ上で画像をアップロードし、矩形・円・多角形の領域をマウスで描画。HTML コードを自動生成
• Maperative: 複雑な多角形領域の作成に特化。頂点の追加・削除・移動が直感的
• GIMP: 画像エディタのフィルター機能にイメージマップ作成ツールが内蔵されている

座標設計のベストプラクティス:

• クリック領域は最低 44x44 ピクセル以上を確保する (WCAG タッチターゲットサイズ基準)
• 隣接する領域間に 2-4 ピクセルのギャップを設け、誤クリックを防止する
• 多角形の頂点数は必要最小限に抑える。複雑すぎる形状はパフォーマンスに影響する
• 座標値は整数で指定する。小数点は一部ブラウザで予期しない動作を引き起こす

デバッグ方法: 開発中は CSS で area 要素の領域を可視化できませんが、JavaScript で area 要素の coords を読み取り、Canvas にオーバーレイ描画することで視覚的に確認できます。また、ブラウザの開発者ツールで area 要素にホバーすると、対応する領域がハイライトされます。

レスポンシブ対応の課題 - イメージマップの最大の弱点

HTML イメージマップの最大の問題は、座標がピクセル単位の絶対値であるため、画像サイズが変わると領域がずれることです。レスポンシブデザインが標準となった現代の Web では、この制約は致命的です。

問題の具体例: 元画像が 800 × 600 ピクセルで、coords="200,150,400,300" と定義した矩形領域があるとします。画面幅に応じて画像が 400 × 300 ピクセルに縮小表示された場合、座標はそのまま 200,150,400,300 のため、クリック領域が画像の右下にはみ出してしまいます。

JavaScript による動的座標変換:

function resizeImageMap() {
const img = document.querySelector('img[usemap]');
const naturalWidth = img.naturalWidth;
const displayWidth = img.clientWidth;
const scale = displayWidth / naturalWidth;
const areas = document.querySelectorAll('area');
areas.forEach(area => {
const original = area.dataset.originalCoords.split(',');
const scaled = original.map(c => Math.round(c * scale));
area.coords = scaled.join(',');
});
}

この方法では、元の座標を data-original-coords 属性に保存し、画像のリサイズ時にスケール比率を計算して座標を再設定します。ResizeObserver で画像サイズの変化を監視し、変化があるたびに再計算を実行します。

ライブラリの活用: image-map-resizer (jQuery プラグイン) や RWD-Image-Maps が座標の自動リサイズを提供しますが、いずれもメンテナンスが停滞しています。新規プロジェクトでは後述の SVG ベースの代替手段を推奨します。

SVG によるモダンな代替実装 - レスポンシブかつインタラクティブ

SVG (Scalable Vector Graphics) を使えば、イメージマップの機能をレスポンシブかつアクセシブルに実現できます。SVG はベクターベースのため、どのサイズでも座標が正確に維持されます。

SVG オーバーレイ方式:

<div class="map-container" style="position: relative;">
<img src="floor-plan.jpg" alt="フロアプラン">
<svg viewBox="0 0 800 600" style="position: absolute; inset: 0; width: 100%; height: 100%;">
<a href="/room-a">
<rect x="50" y="30" width="200" height="150" fill="transparent" class="hotspot">
<title>会議室 A</title>
</rect>
</a>
<a href="/lounge">
<circle cx="500" cy="300" r="60" fill="transparent" class="hotspot">
<title>ラウンジ</title>
</circle>
</a>
</svg>
</div>

SVG 方式の利点:

• viewBox により座標系が画像サイズに自動追従し、レスポンシブ対応が不要
• CSS でホバーエフェクト (fill, opacity, stroke) を自由に適用可能
• CSS トランジションやアニメーションで滑らかなインタラクションを実現
• <title> 要素でアクセシビリティ情報を直接埋め込める
• JavaScript なしでも完全に動作する

ホバーエフェクトの CSS:

.hotspot { transition: fill 0.2s, opacity 0.2s; cursor: pointer; }
.hotspot:hover { fill: rgba(59, 130, 246, 0.3); }
.hotspot:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }

CSS Grid と Flexbox による代替 - 画像を分割する手法

画像を物理的に分割し、CSS Grid や Flexbox でタイル状に配置する方法も、イメージマップの代替として有効です。特に矩形領域のみで構成される場合に適しています。

CSS Grid による実装:

<div class="image-grid">
<a href="/section-1" class="grid-cell" style="grid-area: 1/1/2/3;">
<span class="sr-only">セクション 1</span>
</a>
<a href="/section-2" class="grid-cell" style="grid-area: 1/3/3/4;">
<span class="sr-only">セクション 2</span>
</a>
</div>

.image-grid に背景画像を設定し、グリッドセルを透明なリンク要素として配置します。各セルの grid-area で領域を定義するため、レスポンシブ対応は CSS Grid が自動的に処理します。

画像スライス方式: 画像を複数のタイルに分割し、それぞれを個別の <img> または <a> 要素として配置する方法です。Photoshop のスライス機能や Sharp の extract() メソッドで画像を分割できます。この方式は HTTP/2 環境では複数リクエストのオーバーヘッドが小さいため実用的です。

CSS clip-path による不規則形状: 矩形以外の形状が必要な場合、clip-path: polygon() で各リンク要素の表示領域を不規則な形に切り抜けます。パーセンテージ指定が可能なため、レスポンシブ対応も容易です。ただし、隣接する領域の境界が正確に一致するよう座標を慎重に設計する必要があります。

HTML/CSS の実践書籍は Amazon で探せます

アクセシビリティとユースケース別の最適解 - 技術選定の判断基準

イメージマップの実装方法を選択する際は、アクセシビリティ要件とユースケースに基づいて判断します。どの技術にも長所と短所があり、万能な解決策はありません。

アクセシビリティ要件:

• すべてのクリック領域に代替テキスト (alt または aria-label) を必ず設定する
• キーボードナビゲーション (Tab キー) で全領域にアクセスできることを確認する
• フォーカスインジケーターを明確に表示する (SVG 方式では :focus-visible で制御)
• スクリーンリーダーで領域の目的と現在位置が伝わることをテストする
• タッチデバイスでのタップ領域が十分な大きさ (44x44 CSS ピクセル以上) であることを確認する

ユースケース別の推奨技術:

• シンプルな矩形リンク: CSS Grid + 透明リンク要素。最もシンプルで保守性が高い
• 不規則形状のホットスポット: SVG オーバーレイ。レスポンシブ対応とインタラクションの自由度が最高
• レガシーシステムの保守: 既存の HTML イメージマップ + JavaScript リサイズ。最小限の変更で対応
• インタラクティブな地図: Leaflet.js や Mapbox GL JS。ズーム・パン・レイヤー制御が必要な場合
• データビジュアライゼーション: D3.js + SVG。動的データに基づく領域生成が必要な場合

パフォーマンス比較: HTML イメージマップは DOM 要素数が少なく最も軽量です。SVG オーバーレイは中程度。CSS Grid 方式は領域数が多い場合に DOM ノードが増加しますが、通常の使用範囲 (50 領域以下) ではパフォーマンス差は無視できます。