htmlタグ｜map（マップ）・area（エリア）

ホームページ（ウェブサイト）制作において、画像を用いて直感的なナビゲーションを提供することは、ユーザーを目的のページへスムーズに誘導するために非常に重要です。通常、1つの画像に対して設定できるリンクは1つだけですが、1枚の画像の中の「複数の異なる領域」ごとに別々のリンク先を設定したい場面があります。例えば、日本地図の画像において「京都」の部分をクリックすると京都の事業所一覧ページへ、「東京」をクリックすると東京のページへ移動するような仕組みです。このように、画像内の特定の座標領域をリンク化する技術（イメージマップ）を実装するために使用されるのが、HTMLの「map」タグと「area」タグです。

「map」タグは、画像上に設定するリンク領域のまとまり（マップ本体）を定義します。そして、その「map」タグの中に複数の「area」タグを配置し、それぞれのリンク領域の形状（四角形、円形、多角形）や具体的な座標位置、リンク先のURLを指定していきます。そして、対象となる画像（imgタグ）に「usemap」属性を付与し、作成した「map」タグと紐付けることで機能します。

一見すると便利な機能ですが、現在の事業用ホームページ（ウェブサイト）でイメージマップを使用する際には、スマートフォンなどのモバイル端末における表示（レスポンシブWebデザイン）への対応が大きな課題となります。固定サイズの画像であれば座標指定も機能しますが、画面サイズに合わせて画像が拡大縮小する現代の環境では、「area」タグで指定した絶対座標がズレてしまい、意図した場所がクリックできなくなる問題が発生します。そのため、JavaScriptを用いて画像の縮尺に合わせて座標を動的に再計算させたり、SVG（Scalable Vector Graphics）形式を用いてリンクを構築したりするなど、より専門的には現代の閲覧環境に適応した実装手法を採用することが求められます。

また、SEO（検索エンジン最適化）やWebアクセシビリティの観点からも慎重な設計が必要です。検索エンジンのクローラーや音声読み上げソフト（スクリーンリーダー）は、画像内のどこがクリック可能なのかを視覚的に判断できません。そのため、各「area」タグには必ず「alt」属性（代替テキスト）を設定し、そのリンク先がどのような内容のページなのかをテキストとして正確に伝える必要があります。

本ページでは、「map」タグと「area」タグを用いた座標指定の基本的な仕組みから、スマートフォン表示に対応させるための実践的な技術、そして検索エンジンにサイト構造を正しく伝えるための適切なマークアップ手法について詳しく解説します。集客効果が高く、すべてのユーザーにとって使いやすいホームページ（ウェブサイト）を構築するための知識としてお役立てください。

map（マップ）

<map></map>

ホームページ制作（ウェブサイト制作）の際に使用する<map>タグについてのご説明です。

ホームページ制作において<map>（マップ）タグを使用することで、ホームページ（ウェブサイト）の中で、イメージマップを設定することができるため、一つの画像の中に複数のリンクを設定することができます。

<map> イメージマップ設定、
一つの画像に複数のリンクを設定

<map>タグは、イメージマップ設定、一つの画像に複数のリンクを設定する際に使用します。

ホームページ制作において、地図画像の中にリンクを組み込む場合などに使用します。

name属性

mapタグにはname属性の指定が必要です。このname属性の値は、対象となるimgタグ（画像）に記述するusemap属性の値（#から始まる文字列）と一致させる必要があります。これにより、どの画像に対してこのマップ設定を適用するのかをブラウザが正確に認識します。

id属性との併用について

古いHTML仕様の名残や、より専門的にはJavaScriptでの高度な制御を考慮して、name属性と共にid属性を指定する場合があります。現代のHTML仕様では、mapタグにid属性とname属性の両方を指定する場合、両者には全く同じ値を設定しなければいけません。異なる値を指定するとHTMLの仕様違反として扱われます。

name属性とid属性の厳密な仕様

現在、HTMLの標準仕様HTML Living Standardにおいてイメージマップを機能させるためには、imgタグのusemap属性で指定する値と、mapタグのname属性の値を一致させる必要があります。古い規格ではname属性のみが重視されていましたが、現在の仕様において、mapタグにid属性を付与する場合は、必ずname属性と全く同じ値を指定しなければならないという厳密なルールが存在します。これを怠ると、ブラウザによってはリンクが正しく機能しない原因となります。

areaタグにおける廃止された属性の排除

areaタグには、リンク領域の形状を指定するshape属性と、その座標を指定するcoords属性を指定します。過去の規格では、これに加えてnohref属性（リンク先を持たない領域の指定）が使用されることがありましたが、現在のHTML Living Standardでは廃止されています。リンクを持たない領域を作成する場合は、単にhref属性を省略するだけでブラウザは正しく解釈します。古い記述を引きずらず、最新の仕様に則ったシンプルなマークアップを行うことが現代のホームページ制作における基本ルールです。

ホームページに地図リンクを作成する

ホームページ制作において、<map>タグと<area>タグを利用することで、ホームページに地図リンクを作成することができます。

例えば日本地図の中の各都道府県該当箇所にリンクを設置したりすることで、ユーザーに視覚的にページを選択してもらいたい時などに使用します。

こうした地図リンクの仕組みは、観光情報や不動産情報などでよく利用されますが、地図以外にもこだわったメニューボタンなどを作りたいときにも利用されることがあります。リンクリストなどのテキストリンクではなく視覚的に直感的にページ移動を促したいときには積極的に利用したいHTMLタグです。

<map></map>

ホームページ制作・SEOの1ポイント

ホームページ制作でリンクを設置するときは、基本的にはアンカータグを使いますが、例えば日本地図の中で該当都道府県をクリックすると、リンク先にジャンプする機能を実装する際はこのマップ機能を利用します。画像の中の任意の指定場所にリンクが設置できるため、自由度の高いナビゲーションを作ることができます。

area（エリア）

<area></area>

ホームページ制作（ウェブサイト制作）の際に使用する<area>タグについてのご説明です。

<area>（エリア）タグは、ホームページ内でリンクエリア、イメージマップの領域を設定します。

<area> リンクエリア、イメージマップの領域を設定

<area>タグは、ホームページ制作時のクライアントサイドイメージマップ(単一画像に複数リンク)で使用します。

ウェブサイト・ホームページを構成するHTML文書内に、<img>でマップを適用する画像、使用するマップ名を指定します。

そして<map>(マップ)内に<area>でリンク領域、リンク先を指定します。

href（エイチレフ）属性

リンク先の指定を行います。href=”” の中に遷移先のURLを記述します。aタグと同様に、絶対URLや相対URLを用いてホームページ（ウェブサイト）内の別ページや外部サイトへのリンク経路を構築します。

shape（シェイプ）属性

リンク領域の形状を指定します。shape=”” の中に規定の値を入力して設定します。

rect

四角形（長方形）の領域を指定します。

circle

円形の領域を指定します。

poly

多角形の領域を指定します。

coords（コーズ）属性

shape属性で指定した形状に合わせて、具体的な座標を指定します。coords=”” の中に、画像の左上を起点（0,0）としたピクセル値をカンマ区切りで入力します。四角形の場合は左上と右下の座標、円形の場合は中心の座標と半径、多角形の場合は各頂点の座標を順番に記述します。

リンク領域の重なりと現代の代替手法

細かな画像マップを作成する際、指定したリンク領域が近接し、重なってしまう場合があります。また、現代の事業用ホームページ（ウェブサイト）制作においては、閲覧環境の変化に合わせた実装手法を選択することも重要です。

複数のリンク領域が重なった場合の優先順位

ご認識の通り、複数のリンク領域が重なった場合には、HTMLコード上で先に指定した（記述順が早い）リンク領域が優先して処理されます。意図した通りにリンクを機能させるためには、重なり合う部分の面積を考慮し、領域の記述順序を適切に管理することが重要です。

読み方　エリア

<area></area>

areaタグに対するalt属性の必須化

mapタグ内のそれぞれのareaタグには、リンク先の情報を説明するalt属性（代替テキスト）を必ず記述しなければなりません。画像そのもの（imgタグ）のalt属性には全体像の説明を記述し、各areaタグのalt属性にはリンク先のページ名や具体的な目的を記述します。これにより、音声読み上げソフトは各リンク領域を独立したメニュー項目として認識し、ユーザーへ正確に読み上げることが可能になります。

キーボードナビゲーションへの配慮

正しく記述されたareaタグは、Tabキーによるキーボード操作でフォーカスを移動させることができます。しかし、リンク領域の形状によっては、フォーカスが当たった際の枠線（アウトライン）が見づらくなることがあります。CSSを用いてフォーカス時の視認性を高めたり、画像の下にテキストリンクのリストを併設したりすることで、マウスを使用できないユーザーに対しても、迷うことなく目的の情報へたどり着けるホームページ（ウェブサイト）を構築します。

ホームページ制作では地図画像にリンクを設置する時に使用

ホームページ制作において、<area>タグと<map>タグを利用することで、地図画像にリンクを設置することができます。

例えば日本地図の中の各都道府県に対してリンクを設置することで、ユーザーに視覚的にページを選択してもらいたい時などに使用します。

観光情報や不動産情報などでよく利用されますが、地図以外にもこだわったメニューボタンなどを作りたいときにも利用されることがあります。

テキストベースではなく視覚的に直感的にページ移動を促したいときには積極的に利用したいHTMLタグです。

ホームページ制作・SEOの1ポイント

この<area>タグは地図などの画像上で、該当箇所をクリックするとリンク先に移動することのできる機能です。リンクは原則的にはテキストリンクか画像リンクですが、通常の画像リンクは画像全体にリンクを設置します。

<area>タグを使用すると、画像の中の任意の場所にそれぞれリンクを設置することができるため、地図画像などを利用してリンク設置する場合に適しています。

イメージマップのレスポンシブ対応と注意点

現在のスマートフォンを中心とした閲覧環境において、イメージマップをレスポンシブデザインに対応させることは非常に重要です。かつてのパソコン向けにサイズが固定されたホームページ（ウェブサイト）とは異なり、現代の環境では画面幅に合わせて画像が動的に拡大縮小します。この際、画像サイズはCSSで柔軟に変化させることができますが、HTMLの「area」タグで指定された絶対座標は自動的には追従しません。その結果、ユーザーがタップした位置と実際のリンク領域に大きなズレが生じ、目的のページへ遷移できないという重大なユーザビリティの低下を招きます。ここでは、画像サイズの変動に合わせてリンク領域を正しく機能させるための具体的な手法と注意点について解説します。

CSSによる画像のレスポンシブ化の基本

大前提として、イメージマップのベースとなる画像（imgタグ）自体を、画面サイズに合わせて適切に拡大縮小させる必要があります。これはCSSを用いて以下のように記述します。

img {
max-width: 100%;
height: auto;
}

この記述により、画像は親要素の幅を上限として適切に縮小され、縦横比も維持されます。しかし、前述の通り、このCSSの指定だけでは「map」タグ内の座標までは変化しません。画像が縮小されると、あらかじめ設定されていたリンク領域は元の大きな画像の座標のまま残ってしまうため、クリックできる場所が完全にずれてしまいます。これを解決するためには、HTMLとCSS以外の技術を組み合わせる必要があります。

JavaScriptを活用した座標の動的再計算

この座標のズレを解消し、画像を完全にレスポンシブ対応させるためには、JavaScriptを用いた動的な処理が必要です。画像が読み込まれたタイミングや、ユーザーがスマートフォンの画面を回転させてブラウザの幅が変わったタイミング（リサイズイベント）を検知し、画像の縮尺比率に合わせて「area」タグの座標値をリアルタイムに書き換える仕組みです。

現在では、「imageMapResizer.js」のような専用のJavaScriptライブラリを導入することが一般的です。これにより、複雑な計算式を自作しなくても、簡単な記述でイメージマップの座標を画像サイズに自動追従させることが可能です。より専門的には、こうしたライブラリを活用しつつ、ページの表示速度（ページスピード）を落とさないよう、スクリプトの読み込み順序や非同期処理を適切に設計することが、SEO評価を高く保つ上で重要です。

SVGを用いたモダンなリンク領域の構築

より高度で現代的なアプローチとして、従来の「map」と「area」タグを使用せず、SVG（Scalable Vector Graphics）を用いて画像を構築する手法もあります。SVGは、画像そのものがHTMLのようなタグの集合体で構成されているため、画像内の特定の図形（パス）に対して直接リンクを設定することができます。

SVGはベクターデータであるため、どれだけ拡大縮小しても画質が劣化せず、リンク領域も画像の変形に合わせて完全に連動します。また、CSSを用いてリンク領域の色を変えたり、カーソルを合わせた際にアニメーションをつけたりといったリッチな視覚表現も容易に実装できます。事業用のホームページ（ウェブサイト）において、ユーザーに直感的で快適な操作性を提供し、コンバージョン率を高めるための選択肢として、このSVGを活用したイメージマップの実装は非常に効果的です。

ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法