イメージマップは、1つの画像の中に複数の異なるリンク先を設定できるHTMLの仕組みです。
通常の画像リンクでは画像全体が1つのボタンとして機能しますが、イメージマップを使えば画像内の特定の部位ごとに異なるページへ誘導することが可能になります。
例えば、日本地図の画像において各都道府県をクリック可能にしたり、オフィスビルのフロアマップで各部屋の詳細情報を表示させたりといった用途で活用されてきました。
現在はWebデザインのトレンドやマルチデバイス対応の影響で利用機会は変化していますが、特定の情報を直感的に伝える手段としては依然として有効な技術です。
イメージマップ（mapタグ）の基本概念
イメージマップとは、HTMLのmapタグとareaタグを組み合わせて作成されるクリッカブルマップのことを指します。
画像の上に透明なボタンを配置するようなイメージで、特定の座標を指定してリンク領域を定義するのが特徴です。
画像の一部をクリックした際に特定のURLへ遷移させたり、JavaScriptのイベントを発生させたりすることができます。
この技術が登場した初期のWeb制作では、複雑なメニューボタンを1枚の画像で構成するために多用されていました。
現在でも、製品紹介ページで製品の各パーツに説明リンクを貼る場合や、施設案内図などで効果的に利用されています。
イメージマップには、サーバー側で処理を行う方式とクライアント側（ブラウザ）で処理を行う方式の2種類が存在します。
現代のWeb制作で一般的に「イメージマップ」と呼ぶ場合は、ブラウザが直接処理を行うクライアントサイド・イメージマップを指します。
イメージマップを作成するためのHTMLタグ構成
イメージマップを構成するためには、主に3つの要素が連携して機能する必要があります。
それらはimg要素、map要素、そしてarea要素です。
img要素とusemap属性の関係
まずベースとなる画像を表示するためにimgタグを使用します。
この際、通常の画像表示と異なるのは、usemap属性を記述する点です。
usemap属性には、後述するmapタグに付ける名前を指定し、先頭に「#」を記述します。
これにより、画像とクリック範囲を定義するマップ情報を紐付けることができます。
map要素とname属性の役割
mapタグは、クリックできる領域の定義をまとめるためのコンテナとして機能します。
このタグ自体が画面上に表示されることはありません。
map要素には必ずname属性を設定し、前述したimgタグのusemap属性と一致させる必要があります。
この名前によって、ブラウザはどの画像に対してどのマップ設定を適用すべきかを判断します。
area要素でクリック範囲を定義する
実際のクリックできる形状や範囲を定義するのがareaタグです。
このタグはmap要素の内側に記述され、複数の領域を作成する場合はその数だけareaタグを並べます。
areaタグには、リンク先のURLを指定するhref属性、形状を指定するshape属性、座標を指定するcoords属性などが必要です。
また、アクセシビリティの観点からalt属性の設定も必須と言えます。
形状ごとの座標指定方法
areaタグのshape属性には、3種類の基本的な形状を指定できます。
それぞれの形状に応じて、coords属性で記述する数値の意味が異なります。
| 形状（shape） | 座標（coords）の指定内容 | 用途の例 |
|---|---|---|
rect（長方形） | 左上のX,Y座標、右下のX,Y座標 | ボタンやバナー状の領域 |
circle（円形） | 中心のX,Y座標、半径の長さ | 丸いアイコンやスポット |
poly（多角形） | 各頂点のX,Y座標を順に記述 | 地図や複雑な形状の物体 |
長方形（rect）
最も頻繁に使われるのが長方形です。
左上の角の座標と、右下の角の座標という計4つの数値を指定するだけで定義できます。
画像編集ソフトなどで範囲を選択した際、座標情報が取得しやすいため作成が非常に簡単です。
円形（circle）
中心点となる座標（XとY）を決め、そこからどれくらいの半径で円を描くかをピクセル単位で指定します。
計3つの数値が必要になります。
正確な円形範囲を作りたい場合に適しています。
多角形（poly）
複雑な形をトレースしたい場合に使用します。
頂点の数だけ座標を指定し続けるため、頂点が多いほど数値の羅列は長くなります。
最初の頂点と最後の頂点はブラウザによって自動的に結ばれ、閉じられた領域が形成されます。
イメージマップの具体的なコード例
ここでは、実際にイメージマップを実装するための標準的なコードを記述します。
<!-- 画像の定義 -->
<img src="sample-map.jpg" alt="サンプルマップ" usemap="#example-map" width="800" height="400">
<!-- マップの定義 -->
<map name="example-map">
<!-- 長方形の領域 -->
<area shape="rect" coords="50,50,200,150" href="https://example.com/page1" alt="ページ1へ">
<!-- 円形の領域 -->
<area shape="circle" coords="400,200,50" href="https://example.com/page2" alt="ページ2へ">
<!-- 多角形の領域 -->
<area shape="poly" coords="600,50,750,100,700,200,600,150" href="https://example.com/page3" alt="ページ3へ">
</map>このコードを記述すると、画像上の指定された範囲がリンクとして機能するようになります。
リンク領域にマウスホバーすると、通常のリンクと同様にカーソルの形が変わります。
レスポンシブWebデザインへの対応課題
近年のWeb制作において、イメージマップの使用が減少した最大の理由はレスポンシブ対応の難しさにあります。
従来のイメージマップには、現代の環境に適応しにくい構造的な問題が含まれています。
座標が固定される問題
HTMLのareaタグで指定するcoords属性は、画像本来のサイズに対する絶対的なピクセル値で指定されます。
そのため、CSSでwidth: 100%;のように画像サイズを伸縮させると、画像自体の表示サイズは変わりますが、定義した座標は元の数値のまま動きません。
結果として、画像の見た目とクリックできる範囲がズレてしまい、リンクが全く機能しなくなるという致命的な問題が発生します。
JavaScriptライブラリによる解決策
この問題を解消するために、広く使われてきたのが「rwdImageMaps」などのJavaScriptライブラリです。
これらのライブラリは、ウィンドウサイズが変わるたびに画像の拡大率を計算し、coordsの数値を動的に再計算して書き換えてくれます。
この方法を使えば、従来のmapタグのままレスポンシブ対応を維持することが可能です。
しかし、スクリプトへの依存や読み込み負荷、動作のわずかな遅延といったデメリットも考慮する必要があります。
イメージマップの代わりとなる最新手法
レスポンシブ対応が標準となった現代では、イメージマップの代わりにより柔軟な手法が採用されることが増えています。
特にメンテナンス性やアクセシビリティに優れた代替手段を検討することが推奨されます。
SVG（Scalable Vector Graphics）の活用
最も有力な代替手段は、SVG要素を使用することです。
SVGは数式によって描画されるベクター形式の画像データであり、画像そのものの中にリンク（aタグ）を埋め込むことができます。
SVGで描かれた図形は画面サイズに合わせて自動的にスケーリングされるため、リンク範囲がズレる心配が一切ありません。
また、CSSでマウスホバー時の色を変えるなどのスタイル調整も容易に行えます。
CSSによる絶対配置
クリック領域が単純な四角形であれば、背景画像の上に透明なaタグをposition: absolute;で重ねる手法も一般的です。
この場合、位置をパーセント（%）で指定することで、画像サイズの変化に追従させることができます。
HTML構造がシンプルに保たれ、SEO効果も高いのがメリットです。
イメージマップ運用の注意点とSEO
イメージマップを使用する際には、検索エンジンや補助技術への配慮を忘れてはなりません。
検索エンジンは画像内のテキストを読み取ることができないため、適切な情報提供が必要です。
まず、各area要素には必ず代替テキスト（alt属性）を設定してください。
これがないと、スクリーンリーダーを利用しているユーザーがそのリンクが何を指しているのか理解できなくなります。
検索エンジンのクローラーも、このalt属性の情報を手がかりにリンク先のコンテンツを理解します。
また、イメージマップはキーボード操作がしにくい場合があるため、tabindexなどを利用して操作性を確保する配慮も重要です。
まとめ
イメージマップは、1つの画像に複数のリンクを定義できる非常にユニークなHTMLの機能です。
歴史のある技術であり、複雑な形状のクリック範囲を作成できるという点は今なお魅力的です。
一方で、レスポンシブ対応には標準機能だけでは対応できないという明確な弱点もあります。
現在のWeb制作においては、単純な領域であればCSSの絶対配置を、複雑な形状であればSVGを活用するのが主流です。
用途に応じて、従来のmapタグを使うのか、よりモダンな代替手段を選ぶのかを適切に判断しましょう。
技術の特性を正しく理解し、ユーザーにとって最も使いやすいインターフェースを構築することが大切です。
