この記事の要点

<map> は画像にクリック可能な複数領域（イメージマップ）を定義する要素 中に <area> 要素を並べ、それぞれが領域とリンク先を持つ 画像側は <img usemap="#name">、map 側は <map name="name"> で対応付け 領域の形は shape 属性で rect / circle / poly / default から選ぶ モダンな実装では SVG や CSS の方が一般的だが、静的な地図・図解には今も有効

map要素とは

<map> は HTML のイメージマップを定義する要素です。1 枚の画像の任意の領域に対し、それぞれ別のリンク先を割り当てられます。たとえば「日本地図の画像で、北海道を押したら北海道のページへ、九州を押したら九州のページへ」といった作りが、JS なしで実現できます。

基本構文

<img src="/img/japan.png" alt="日本地図" usemap="#japan-map" width="600" height="400">

<map name="japan-map">
  <area shape="rect"   coords="350,30,500,120"
        href="/area/hokkaido" alt="北海道">
  <area shape="circle" coords="280,250,40"
        href="/area/kansai" alt="関西">
  <area shape="poly"   coords="100,300,180,280,200,360,120,380"
        href="/area/kyushu" alt="九州">
</map>

属性

要素	属性	意味
<map>	name	マップ名（必須、<img usemap> から参照）
<img>	usemap	使用するマップ名を # 付きで指定
<area>	shape	領域の形（rect/circle/poly/default）
<area>	coords	領域の座標（形に応じた値）
<area>	href	クリック時の遷移先
<area>	alt	代替テキスト（必須）
<area>	target	遷移先のフレーム / タブ

shape と coords の書き方

shape	意味	coords の形式	例
rect	長方形	左上x, 左上y, 右下x, 右下y	50,30,200,150
circle	円	中心x, 中心y, 半径	100,100,40
poly	多角形	x1,y1, x2,y2, x3,y3, ...	10,10, 50,30, 30,80
default	残りの領域すべて	不要	—

サンプル：4 領域のメニュー画像

<img src="/img/banner.png" alt="メニュー" usemap="#menu" width="800" height="200">

<map name="menu">
  <area shape="rect" coords="0,0,200,200"
        href="/menu/coffee" alt="コーヒー">
  <area shape="rect" coords="200,0,400,200"
        href="/menu/tea" alt="紅茶">
  <area shape="rect" coords="400,0,600,200"
        href="/menu/cake" alt="ケーキ">
  <area shape="rect" coords="600,0,800,200"
        href="/menu/news" alt="お知らせ">
</map>

レスポンシブ対応の注意点

coords は画像のオリジナルサイズ基準の絶対ピクセルです。CSS で画像を縮小・拡大しても coords は追従しません。これがイメージマップ最大の弱点です。対策としては:

• 画像サイズを CSS で変えない（固定）
• JS で表示倍率に合わせて coords を再計算する
• またはSVG に置き換える（<a xlink:href> を持つパスを並べる）

代替手段との比較

手段	長所	短所
<map> + <area>	JS 不要、HTML 標準	レスポンシブ不可（座標固定）
SVG + <a>	拡大縮小に強い、アニメ可	SVG 作成の手間
CSS で要素を重ねる	柔軟、リッチ装飾可	HTML/CSS 量が増える

アクセシビリティ

• alt 属性は必須（スクリーンリーダーは alt でリンク内容を読み上げ）
• 意味のある順序で <area> を並べる（タブ移動順になる）
• 装飾的なクリック領域なら alt="" を許容（空文字は意味のない領域）
• キーボード操作で各領域へ Tab 移動できる — tabindex 不要、フォーカスリングは確実に見せる
• モバイルではタップ領域が 44px 四方以上になるよう coords を設計

座標を取得する手間を減らすツール

イメージマップ作成最大の手間は coords の座標取り。手動でやるのは現実的でないので、次のような手段が使われます。

• オンラインのイメージマップエディタ（画像を読ませて領域をマウスで描く → HTML を出力）
• 画像編集ソフト（GIMP、Photoshop）の「Image Map」エクスポート機能
• HTML エディタ拡張（VS Code 拡張等）

運用としては、画像と一緒に座標情報を JSON で保存しておき、ビルド時に HTML へ展開すると、画像差し替え時の保守が楽になります。

SEO 上の扱い

検索エンジンは <area> の href をリンクとしてクロール対象にします。alt 属性がアンカーテキスト相当として扱われるので、各領域の alt はそこへ移動する内容を表す具体的な語にするのが望ましいです（例: 「メニュー」より「ランチメニュー」）。

よくある落とし穴

• usemap="japan" — # が必要。usemap="#japan" と書く
• name と id の混同 — usemap が参照するのは name
• 同じページに同名 map が複数 — ブラウザによって挙動不定
• CSS で img を縮小したのに coords 据え置き — クリック位置がズレる
• poly の座標が奇数個になっている — x,y のペアなので必ず偶数個
• area に alt がない — HTML 仕様違反、検証ツールで弾かれる

関連

• 画像 — 親カテゴリ
• img要素
• area要素
• figure要素
• SVG / <a xlink:href>