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

name=””

マップ設定の名称

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

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

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

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

<map></map>

この<map>タグはhtml4.01、html5どちらのhtmlバージョンで制作されたホームページ（ウェブサイト）でも使用することができるため、CMS内で生成するコンテンツなどにおいても、ベースとなるWordPressテーマなどのhtmlバージョンに影響されず使用することができます。

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

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

area（エリア）

<area></area>

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

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

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

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

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

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

href

エイチレフ属性

href=””

リンク先の指定

shape

shape=””

rect　　四角

circle　　円

poly　　多角

coords

coords=””

複数のリンク領域が重なった場合には、先に指定したリンク領域が優先。

読み方　エリア

<area></area>

この<area>タグはhtml4.01、html5どちらのhtmlバージョンで制作されたホームページ（ウェブサイト）でも使用することができるため、CMS内で生成するコンテンツなどにおいても、ベースとなるWordPressテーマなどのhtmlバージョンに影響されず使用することができます。

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

ホームページ制作において、<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を活用したイメージマップの実装は非常に効果的です。

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

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

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

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

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ