―HTML

画像にリンクを追加できるHTMLの mapタグの使い方と実践的な活用例

2024.11.22

HTML

mapタグとは？
基本的な使い方
実装例
メリットと注意点
まとめ
参考文献

mapタグとは？

mapタグは、HTMLで画像の特定の領域にリンクやアクションを設定できる「イメージマップ」を作成する際に使用されます。イメージマップを活用すれば、画像全体ではなく一部分をクリック可能にすることが可能です。

基本的な使い方

mapタグは、imgタグの画像に対するクリック可能な領域を設定する際に使用されます。
以下は、基本的な設定手順です。

1. imgタグのusemap属性で、関連付けたい<map>タグの名前を指定します。
2. mapタグに名前を付け、name属性で識別します。
3. areaタグを用いて、クリック可能な領域を定義します。

<img src="example.jpg" alt="Example" usemap="#example-map">
<map name="example-map">
  <area shape="rect" coords="34,44,270,350" href="link1.html" alt="Link 1">
  <area shape="circle" coords="500,300,75" href="link2.html" alt="Link 2">
</map>

areaタグの使い方

areaタグはmapタグの中でのみ使用することができ、shape属性でリンクの形を指定し、coords属性でリンクの座標を指定することができます。
※座標はピクセル値で設定します。

<!-- circleは円形のエリアを指定する場合に使用し、coords属性でx座標,y座標,半径を指定します。 -->
<area shape="circle" coords="100,100,50" href="test.html" alt="test">

<!-- rectは矩形のエリアを指定する場合に使用し、coords属性でx1, y1, x2,y2で座標を指定し短形のエリアを作成します。 -->
<area shape="rect" coords="50, 50, 200, 150" href="test.html" alt="test">

<!-- polyは多角形のエリアを指定する場合に使用し、coords属性でx1, y1, x2, y2, ...の様に頂点の座標をペアのリストとして指定します。 -->
<!-- 下記は三角形の例です。 -->
<area shape="poly" coords="50,50, 200,50, 150,150" href="test.html" alt="test">

実装例

KV内のCVボタン

LP（ランディングページ）などのキービジュアル（KV）に配置されたCV（コンバージョン）ボタンも、<map>タグを活用することでデザイナーの意図を尊重したリンク設定が可能です。画像全体ではなく、ボタンの部分だけをクリック可能にすることで、視覚的に魅力的で直感的なユーザー体験を提供できます。なので下記の様な画像内にボタンがあるデザインにもリンクを設定することができます。

メリットと注意点

メリット

直感的な操作
mapタグを使えば、画像内の特定領域をクリック可能にでき、ユーザーにとって直感的な操作性を提供します。これにより、ユーザー体験が向上します。

見た目の自由度
通常のボタンやリンクテキストでは難しいデザインも、画像とmapタグを組み合わせることで実現可能です。自由度の高いビジュアル表現が可能になります。

HTMLのみで実現可能
JavaScriptやCSSに頼らず、HTMLだけでリンク可能な領域を設定できるため、軽量かつシンプルな実装が可能です。これにより、ページの読み込み速度向上やコードの保守性向上も期待できます。

SEOへの利点
画像とリンクを適切に関連付けることで、視覚的な魅力だけでなく、クローラーがリンク構造を理解しやすくなり、SEOの向上にもつながります。

注意点

レスポンシブ対応の課題
mapタグで指定する座標値は固定されるため、画像サイズが変更されるレスポンシブデザインでは、リンク領域がずれてしまうことがありますのでCSSで画像サイズを調整するとともに、JavaScriptを使用して座標を動的に再計算し、画面サイズに応じた対応を行う必要があります

アクセシビリティの考慮
mapタグやareaタグに適切なalt属性や説明的なラベルを設定しないと、スクリーンリーダーでの認識が難しくなります。視覚に頼らず操作するユーザーにも配慮した実装が必要です。

古い技術としての扱い
mapタグは比較的古い技術のため、近年のWebサイトではSVGやJavaScriptによる代替が推奨されることが多いです。

まとめ

mapタグは、画像内の特定の領域をリンクとして設定できる便利なHTML要素です。特に、簡単にイメージマップを作成したい場合に役立ちます。ただし、レスポンシブデザインへの対応やアクセシビリティの配慮が必要です。近年では、より柔軟でモダンな実装を求め、SVGやJavaScriptを代替技術として利用するケースが増えていますが、用途に応じてmapタグを活用するのも効果的な選択肢です。