タイトル: map要素
SEOタイトル: HTML map要素 完全ガイド（イメージマップ / area要素 / usemap属性 / クリック可能領域の作り方）
| この記事の要点 |
|
map要素とは
は HTML のイメージマップを定義する要素です。1 枚の画像の任意の領域に対し、それぞれ別のリンク先を割り当てられます。たとえば「日本地図の画像で、北海道を押したら北海道のページへ、九州を押したら九州のページへ」といった作りが、JS なしで実現できます。
基本構文
属性
| 要素 | 属性 | 意味 |
|---|---|---|
name | マップ名（必須、 | |
usemap | 使用するマップ名を # 付きで指定 | |
shape | 領域の形（rect/circle/poly/default） | |
coords | 領域の座標（形に応じた値） | |
href | クリック時の遷移先 | |
alt | 代替テキスト（必須） | |
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 領域のメニュー画像
レスポンシブ対応の注意点
coords は画像のオリジナルサイズ基準の絶対ピクセルです。CSS で画像を縮小・拡大しても coords は追従しません。これがイメージマップ最大の弱点です。対策としては:
- 画像サイズを CSS で変えない（固定）
- JS で表示倍率に合わせて
coordsを再計算する - またはSVG に置き換える（ を持つパスを並べる）
代替手段との比較
| 手段 | 長所 | 短所 |
|---|---|---|
| JS 不要、HTML 標準 | レスポンシブ不可（座標固定） | |
| SVG + | 拡大縮小に強い、アニメ可 | SVG 作成の手間 |
| CSS で要素を重ねる | 柔軟、リッチ装飾可 | HTML/CSS 量が増える |
アクセシビリティ
alt属性は必須（スクリーンリーダーはaltでリンク内容を読み上げ）- 意味のある順序で
を並べる（タブ移動順になる） - 装飾的なクリック領域なら
alt=""を許容（空文字は意味のない領域） - キーボード操作で各領域へ Tab 移動できる —
tabindex不要、フォーカスリングは確実に見せる - モバイルではタップ領域が 44px 四方以上になるよう
coordsを設計
座標を取得する手間を減らすツール
イメージマップ作成最大の手間は coords の座標取り。手動でやるのは現実的でないので、次のような手段が使われます。
- オンラインのイメージマップエディタ（画像を読ませて領域をマウスで描く → HTML を出力）
- 画像編集ソフト（GIMP、Photoshop）の「Image Map」エクスポート機能
- HTML エディタ拡張（VS Code 拡張等）
運用としては、画像と一緒に座標情報を JSON で保存しておき、ビルド時に HTML へ展開すると、画像差し替え時の保守が楽になります。
SEO 上の扱い
検索エンジンは の href をリンクとしてクロール対象にします。alt 属性がアンカーテキスト相当として扱われるので、各領域の alt はそこへ移動する内容を表す具体的な語にするのが望ましいです（例: 「メニュー」より「ランチメニュー」）。
よくある落とし穴
usemap="japan"— # が必要。usemap="#japan"と書くnameとidの混同 —usemapが参照するのはname- 同じページに同名 map が複数 — ブラウザによって挙動不定
- CSS で
imgを縮小したのにcoords据え置き — クリック位置がズレる polyの座標が奇数個になっている — x,y のペアなので必ず偶数個areaにaltがない — HTML 仕様違反、検証ツールで弾かれる