areaタグを使って画像マップのリンクを設定する方法をわかりやすく解説

areaタグの概要

areaタグの基本的な使い方

areaタグは、mapタグと組み合わせて画像マップを作成する際に使用します。

<img src="map-image.jpg" usemap="#sample-map" alt="サンプルマップ">

<map name="sample-map">
    <area shape="rect" coords="10,10,100,100" href="page1.html" alt="ページ1">
    <area shape="circle" coords="150,150,50" href="page2.html" alt="ページ2">
    <area shape="poly" coords="200,200,250,250,300,200" href="page3.html" alt="ページ3">
</map>

表示例：

上記の画像の指定した各エリアをクリックすると、それぞれ異なるページに移動します。

SEOとアクセシビリティへの影響

• SEO効果: alt属性を適切に設定することで、検索エンジンがエリアの内容を認識しやすくなり、SEOに貢献する。
• アクセシビリティ: 視覚障がい者向けのスクリーンリーダーがareaタグの情報を読み上げるため、alt属性を設定することが重要。

注意事項

• alt属性を必ず設定する: 画像マップのエリアごとにalt属性を設定し、視覚障がい者が内容を理解できるようにする。
• coordsの値は形状に合わせて正しく指定する: 誤った座標を指定すると、意図した範囲でクリックできなくなる。
• レスポンシブデザインでは使いにくい: 画像サイズが変更されると座標がずれるため、レスポンシブサイトでは代替手段（CSSやJavaScript）を検討する。
• 代替テキストリンクの提供を検討: 画像マップが機能しない環境向けに、通常のテキストリンクも併用するとよい。

よくある質問

Q: areaタグのshape属性にはどのような値を指定できますか？

A: rect（長方形）、circle（円形）、poly（多角形）、default（全体）の4種類があります。

Q: 画像マップをレスポンシブに対応させるには？

A: JavaScript（resizeイベントを利用）やCSS（背景画像を使用）を活用して対応します。

Q: areaタグは単独で使用できますか？

A: いいえ、必ずmapタグと組み合わせて使用する必要があります。

まとめ

• areaタグは、画像マップの特定領域をクリック可能なリンクにするためのタグ。
• mapタグと組み合わせて使用する。
• 形状（rect, circle, poly）と座標（coords）を正しく指定する必要がある。
• レスポンシブデザインでは座標のズレに注意。
• alt属性を適切に設定してアクセシビリティを向上させる。