【HTML】map・area 要素の使い方｜画像の一部をクリック領域（イメージマップ）にする

1枚の画像の中で「ここをクリックしたら A のページ、あちらをクリックしたら B のページ」というように、場所ごとに別々のリンクを割り当てたいことがあります。地図や案内図、キャラクター紹介のイラストなどでよく見かける仕組みです。これを HTML だけで実現するのが「イメージマップ」で、<img> の usemap 属性、<map> 要素、<area> 要素の3点セットで作ります。この記事では、イメージマップの基本的な書き方から <area> の属性（shape や coords）の意味、長方形と円を組み合わせた実践的なコード、そしてレスポンシブ対応やアクセシビリティの注意点までを順に解説します。

イメージマップとは何か

イメージマップとは、1枚の画像の中に複数のクリック可能な領域（エリア）を作り、それぞれを別々のリンク先に結びつける仕組みのことです。画像全体を <a> で囲むと1つのリンクにしかできませんが、イメージマップを使うと「画像の左半分」「中央の丸い部分」といった任意の形の領域ごとにリンクを分けられます。

実現には次の3つの要素を組み合わせます。<img> にはどのマップを使うかを示す usemap 属性を付け、<map> 要素でクリック領域のまとまりに名前を付け、その中に置いた <area> 要素で個々の領域の形・位置・リンク先を指定します。この3つがそろって初めてイメージマップとして機能します。

基本の書き方（usemap と name をひも付ける）

まずは最小限のコードで全体の形を確認します。<img> の usemap 属性に指定した値と、<map> の name 属性の値をひも付けることで、画像とクリック領域が結びつきます。

index.html

<img src="banner.png" alt="サービス案内" usemap="#service-map" width="600" height="300">

<map name="service-map">
  <area shape="rect" coords="0,0,300,300" href="/plan" alt="料金プラン">
  <area shape="rect" coords="300,0,600,300" href="/support" alt="サポート">
</map>

ここで最も重要なのが、usemap="#service-map" の先頭に付く # です。usemap の値は「# ＋マップの名前」という形で書き、この名前が <map> の name 属性（この例では service-map）と一致していなければなりません。# はページ内リンクと同じくアンカーを指す記号で、これを付け忘れたり名前がずれていたりすると、どのマップとも結びつかずクリック領域がまったく反応しなくなります。

上の例では画像を左右2つの長方形に分け、それぞれ別のページへリンクしています。<area> は <map> の中に必要な数だけ並べられ、1つの領域が1つのリンクに対応します。

area 要素の属性を理解する

クリック領域の形や位置、リンク先は、すべて <area> の属性で決まります。主な属性は次のとおりです。

属性	役割
`shape`	領域の形。`rect`（長方形）・`circle`（円）・`poly`（多角形）・`default`（画像全体）のいずれか。
`coords`	領域の座標。`shape` の種類によって意味が変わる（下の表を参照）。単位はピクセル。
`href`	クリックしたときのリンク先 URL。`<a>` と同じように指定する。
`alt`	その領域の代替テキスト。`href` を持つ `<area>` では必須。
`target`	リンクを開く場所。`_blank` で別タブなど、`<a>` の `target` と同じ。

coords はカンマ区切りの数値の並びですが、その数値が何を表すかは shape ごとに異なります。混乱しやすいところなので、形ごとに整理しておきます。

shape	coords の書き方	意味
`rect`	`x1,y1,x2,y2`	左上の座標（x1, y1）と右下の座標（x2, y2）で長方形を指定する。
`circle`	`x,y,radius`	中心の座標（x, y）と半径（radius）で円を指定する。
`poly`	`x1,y1,x2,y2,...`	各頂点の座標を順に並べて多角形を指定する。頂点の数だけ座標の組が続く。
`default`	（指定しない）	画像全体を領域にする。ほかの `<area>` に当てはまらない部分のクリック先として使う。

座標の原点は画像の左上で、右方向が x のプラス、下方向が y のプラスになります。すべてピクセル単位で、画像の実際のサイズを基準に指定する点を押さえておきましょう。

長方形と円を組み合わせた実践例

ここでは、幅600px・高さ400pxの案内画像を例に、長方形のエリアと円のエリアを両方持つイメージマップを作ってみます。左側の長方形を「メニュー」へのリンク、右下の円を「お問い合わせ」ボタンへのリンクにする想定です。

index.html

<img
  src="guide.png"
  alt="施設案内図"
  usemap="#guide-map"
  width="600"
  height="400"
>

<map name="guide-map">
  <!-- 左半分の長方形：左上(0,0)〜右下(300,400) -->
  <area
    shape="rect"
    coords="0,0,300,400"
    href="/menu"
    alt="メニューを見る"
  >

  <!-- 右下の円：中心(450,300)、半径80px -->
  <area
    shape="circle"
    coords="450,300,80"
    href="/contact"
    alt="お問い合わせ"
    target="_blank"
  >

  <!-- 上記以外の部分：画像全体をトップページへ -->
  <area
    shape="default"
    href="/"
    alt="トップページ"
  >
</map>

長方形は coords="0,0,300,400" で左上と右下の2点を、円は coords="450,300,80" で中心と半径を指定しています。最後の shape="default" の <area> は、長方形にも円にも当てはまらない残りの部分すべてを受け持ちます。領域が重なる場合は、先に書いた <area> が優先されるため、default は必ず最後に置くようにします。

画像を拡大縮小するとクリック位置がずれる

イメージマップで最も注意したいのが、レスポンシブ対応との相性の悪さです。coords の座標はピクセルで固定されているため、CSS で width: 100% のように画像を伸縮させても、クリック領域の座標は元の画像サイズのまま変わりません。その結果、表示上のボタンの位置と実際に反応する領域がずれてしまいます。

たとえば width="600" の画像を CSS で画面幅いっぱいの300pxに縮小して表示すると、見た目は半分の大きさになりますが、coords は600px基準のままです。ユーザーが縮小後の画像の右端をクリックしても、座標系では中央あたりを押したことになり、意図しないリンクに飛んだり、どこにも反応しなかったりします。

確実な回避策は、画像を width / height の実寸で表示し、CSS で拡大縮小しないことです。ただし、それではレスポンシブなレイアウトに馴染みません。可変サイズで場所ごとのリンクを実現したい場合は、イメージマップにこだわらず、<svg> の中に <a> を配置して図形ごとにリンクを張る方法や、画像の上に position: absolute で <a> を重ねて配置する方法など、CSS で伸縮に追従できる代替手段を検討するとよいでしょう。座標を割合で扱える分、こうした方法のほうが現代的なレイアウトには向いています。

領域には必ず alt を付ける

アクセシビリティの観点から、href を持つ <area> には必ず alt 属性を指定してください。イメージマップの各領域はスクリーンリーダーではリンクとして読み上げられますが、その際に読み上げられるのが alt の内容です。alt が空だったり無かったりすると、リンク先が分からないまま読み上げられ、キーボードやスクリーンリーダーの利用者が目的の領域を選べなくなります。

alt には「メニューを見る」「お問い合わせ」のように、そのリンクをたどると何ができるかが分かる具体的な言葉を入れます。画像そのものの説明ではなく、あくまでそのクリック領域の行き先を表す文言にするのがポイントです。

まとめ

イメージマップは、1枚の画像の中に複数のクリック領域を作り、それぞれを別のリンクにする仕組みです。<img> の usemap、<map> の name、その中の <area> という3点セットで構成し、usemap の # 付きの値と name を一致させることが動作の前提になります。各領域の形は shape で rect・circle・poly・default から選び、coords にその形に応じた座標を指定します。coords はピクセル固定なので CSS で画像を伸縮させると位置がずれる点に注意し、可変レイアウトでは SVG や重ね置きの <a> といった代替も検討しましょう。そして各領域には行き先が分かる alt を必ず付け、誰にとっても使いやすいイメージマップに仕上げてください。