この記事の要点

area 要素はイメージマップ内で、画像の中の特定領域をリンクとして定義する HTML 要素 必ず <map> 要素の内側に置き、<img usemap="#name"> と紐付ける shape 属性で rect / circle / poly / default の形を選び、coords で座標を指定する 画像内クリック領域なのでアクセシビリティ上 alt 属性は必須 現在はクリック領域だけのために使う機会が減り、SVG リンクや CSS の :hover オーバーレイで代替されることも多い

area 要素とは

area 要素は HTML のイメージマップ（画像の上に複数のクリック可能領域を作る仕組み）で、個々のクリック領域を定義する要素です。地図画像をクリックして地域別ページへ飛ぶ、図面の各パーツに説明を割り当てるといった用途で使われます。

基本構文

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

<map name="japan-map">
  <area shape="rect"
        coords="100,50,250,150"
        href="/hokkaido"
        alt="北海道">
  <area shape="circle"
        coords="400,200,40"
        href="/kanto"
        alt="関東">
  <area shape="poly"
        coords="80,250,160,260,140,320,60,310"
        href="/kyushu"
        alt="九州">
</map>

使用に必要な 3 つの要素

要素	役割
img 要素	クリック対象になる画像。usemap="#名前" 属性で map を参照
map 要素	イメージマップの定義コンテナ。name="名前" で識別
area 要素	map の中に置く、個別のクリック領域定義

主な属性

属性	意味
shape	領域の形状。rect / circle / poly / default
coords	領域の座標（カンマ区切り）。shape により書式が変わる
href	リンク先 URL。省略するとリンクではない単なる説明領域になる
alt	代替テキスト（href がある場合は必須）
target	リンクを開くフレーム。_blank / _self 等
rel	リンクの関係。noopener / nofollow 等
download	クリック時にダウンロードさせる

shape ごとの coords 書式

shape	coords の意味	例
rect	左上の x, y, 右下の x, y	coords="10,10,200,150"
circle	中心 x, y, 半径	coords="100,100,50"
poly	頂点 x, y を順番に列挙	coords="0,0,50,30,100,0,80,80"
default	画像全体（残り領域）。coords 不要	shape="default"

座標の単位はピクセルで、画像の左上 (0, 0) が原点です。

実例: 三角形ロゴをクリック領域に

<img src="logo.png" alt="" width="300" height="200" usemap="#logo-map">

<map name="logo-map">
  <!-- ロゴ部分（三角形） -->
  <area shape="poly"
        coords="150,20,30,180,270,180"
        href="/about"
        alt="会社概要を見る">
  <!-- それ以外の余白部分 -->
  <area shape="default"
        href="/"
        alt="ホームへ">
</map>

レスポンシブ対応の難しさ

area 要素の座標は固定ピクセルです。画像を width: 100% で伸縮させると、クリック領域だけは元のピクセル座標のまま残り、ずれが発生します。

対応策には以下があります。

方法	説明
JS ライブラリ	image-map-resizer 等で画像サイズに応じ coords を再計算
SVG に置き換える	SVG 内で <a> 要素を使うと拡大縮小に追従する
CSS オーバーレイ	position: absolute で透明な <a> を画像上に重ねる

アクセシビリティ

• alt 属性は必ず付ける（リンクとして扱われるためスクリーンリーダが読み上げる）
• クリック領域のサイズは指タップしやすい 44×44 px 以上を確保する
• 視覚的なヒント（hover で半透明オーバーレイ等）を追加するとマウスユーザに優しい

SVG <a> との比較

項目	area + map	SVG + <a>
拡大縮小対応	苦手	得意（自動追従）
形状の自由度	rect / circle / poly のみ	任意のベクタ形状
装飾	不可（クリック領域だけ）	CSS でホバー色変更可
ファイルサイズ	画像 + 数行の HTML	SVG なのでテキスト

最近の案件では area よりも SVG をそのままインライン展開して <a> でリンクさせるパターンが増えています。

FAQ

Q: area 要素は終了タグが必要？
A: 不要です（void 要素）。<area /> でも <area> でも HTML5 では問題ありません。

Q: 重なった area はどちらが優先？
A: HTML 内で先に書いた areaが優先されます。複雑な形状は順序に注意。

関連

• 画像 — 親カテゴリ
• img要素 — usemap の参照元
• map要素 — area のコンテナ
• HTML — 上位カテゴリ