イメージマップとは

イメージマップは、1枚の画像に複数の「ホットスポット」と呼ばれるクリック可能領域を設定し、各領域をクリックするとそれぞれ異なるリンク先に移動できるWeb技術です。
サイト上でインタラクティブな操作を可能にし、例えば地図の特定の地点や、製品画像の一部をクリックすると詳細情報が表示される、といった機能を実現できます。

HTML Imagemap Generator（HTMLイメージマップジェネレーター）とは

上記のイメージマップを簡単に作るジェネレーターで、HTMLの<map>や<area>タグを使ったコードを自動生成してくれます。矩形（長方形）、円形、多角形などの形をドラッグやクリックで視覚的に指定できるので、コーディングの手間をかなり省けます。

主な機能・特徴

使い方

ソフトをインストールする必要も、ログイン・アカウント登録もありません。ブラウザさえあればすぐ使えます。

①画像をドラッグ＆ドロップでアップロード
ツール内の「ここに画像をドラッグしてください」という部分に画像ファイルをドラッグ

②形のモードを選択する
「矩形を描く」「円を描く」「多角形を描く」のいずれかをツールから選び領域を描きます

• 矩形／円形の場合は、画像上でドラッグして形を指定。
• 多角形の場合は、ツールを選択した後に画像上をクリックして頂点を置いていきます。2点目以降はマウス移動で形がプレビューでき、最後に頂点をつなげるか、「escape」キーで完了

③領域の修正
作った図形をクリックすると、その位置や大きさを動かして微調整ができます。
いらない図形を選択してから「delete」または「backspace」 キーで削除可能。

④コードの取得
領域を全部設定し終わったら、ツールが生成するHTMLイメージマップのコードをコピー。
コードには <img usemap="#…" src="…"> と<map>／<area>構造が含まれることが多いです。

⑤Webサイトへの組み込み
コピーしたコードを自分のHTMLファイルの中に貼ります。
imgタグに usemap="#mapname" を指定し、同じ name属性を持つ <map name="mapname">…</map>を用意。
貼る位置やalt 属性（代替テキスト）も入れるとアクセシビリティも良くなります。

活用例

• Webサイトで地図の中の市区町村や施設部分をクリック可能にしたいとき
• 写真の中の特定の商品をクリックするとその商品のページへ飛ぶようにしたいとき
• バナー画像を複数区画に分けて、それぞれ異なるリンクを設定する広告を作りたいとき
• インタラクティブな教材やプレゼン用スライドで画像の中でいくつか選べるようにしたいとき

注意点

※イメージマップは画像の幅と高さのピクセル位置で座標（x, y）を決めて作るので、画像を縮小・拡大表示したときにリンク範囲がずれることがあります。特にレスポンシブデザイン（画面幅が変わるスマホなど）では注意！場合によっては追加でスクリプトを使って座標を可変にする対策が必要です。

※小さいリンク領域はタップしにくく、ユーザーが誤操作しやすいので、特にモバイルユーザーを意識して、適度な大きさを意識しましょう。