イメージマップ(イメージマップ)とは | 意味や読み方など丁寧でわかりやすい用語解説

イメージマップとは、Webページ上の画像の一部をクリックすることで、異なるURLへリンクさせることができる仕組みのことだ。画像全体が単一のリンクとなるのではなく、画像内の特定の領域ごとに異なるリンク先を設定できる点が特徴だ。

具体的には、一枚の地図画像において、各都道府県をクリックするとその都道府県の詳細情報ページに飛んだり、製品の画像において、それぞれの部品をクリックすると部品の詳細ページに飛んだりするような使い方が考えられる。視覚的に分かりやすく、ユーザーインターフェースを向上させるために利用されることが多い。

イメージマップを実現するためには、HTMLの<map>要素と<area>要素を用いる。<map>要素はイメージマップ全体を定義するコンテナのような役割を果たし、<area>要素はその中でクリック可能な領域とそのリンク先を定義する。

まず、<img>要素で画像を表示する際に、usemap属性を使って<map>要素と関連付ける。usemap属性の値は、<map>要素のname属性の値の先頭に#をつけたものになる。例えば、<map name="japan_map">という定義があれば、<img src="japan.jpg" usemap="#japan_map">のように記述する。

次に、<map>要素の中に<area>要素を記述する。<area>要素は、クリック可能な領域の形状、座標、リンク先などを指定する。<area>要素の主要な属性は以下の通りだ。

• shape: クリック可能な領域の形状を指定する。rect（長方形）、circle（円）、poly（多角形）、default（画像全体）のいずれかを指定する。
• coords: クリック可能な領域の座標を指定する。shape属性の値によって指定する座標の数が異なる。
  • rectの場合: x1,y1,x2,y2（左上のx座標、左上のy座標、右下のx座標、右下のy座標）
  • circleの場合: x,y,r（中心のx座標、中心のy座標、半径）
  • polyの場合: x1,y1,x2,y2,x3,y3,...（各頂点のx座標、y座標を順番に指定）
• href: リンク先のURLを指定する。
• alt: 画像が表示されない場合に表示される代替テキストを指定する。<area>要素においても、アクセシビリティの観点からalt属性は必須だ。

例えば、長方形の領域を定義する場合、<area shape="rect" coords="10,20,100,50" href="detail.html" alt="詳細ページ">のように記述する。この例では、画像上の(10, 20)から(100, 50)までの長方形の領域をクリックすると、detail.htmlにリンクする。

イメージマップには、クライアントサイドイメージマップとサーバーサイドイメージマップの2種類がある。クライアントサイドイメージマップは、Webブラウザ側で処理を行うため、サーバーへの負荷が少ない。一方、サーバーサイドイメージマップは、クリックされた座標をサーバーに送信し、サーバー側でリンク先を決定する。クライアントサイドイメージマップは、HTMLとJavaScriptのみで実装できるため、現在ではクライアントサイドイメージマップが主流となっている。

イメージマップを作成する際には、座標を正確に把握する必要がある。画像編集ソフトなどを用いて座標を確認したり、イメージマップ作成ツールを利用したりすると、効率的に作成できる。また、レスポンシブWebデザインに対応させるためには、画像のサイズ変更に合わせて<area>要素の座標も動的に調整する必要がある。JavaScriptを用いることで、画像のサイズ変更イベントを検知し、座標を再計算することが可能だ。

イメージマップは、視覚的に訴える効果が高く、Webサイトのユーザビリティ向上に貢献する。しかし、過度な使用はWebページの読み込み速度を遅くしたり、アクセシビリティを損なったりする可能性があるため、適切な場面で効果的に活用することが重要だ。また、スマートフォンなどのタッチデバイスでは、クリック領域が小さすぎると操作しづらくなるため、領域のサイズや配置にも配慮する必要がある。