バナー画像の特定エリアをリンクにしたい、商品画像の各部分をクリックできるようにしたい——そんなとき、HTMLのmap要素（イメージマップ）を手書きするのはかなり面倒です。
CodeQuest.workでは、画像をアップロードして範囲を描くだけでイメージマップのコードを自動生成できるClickable Area Generator（クリッカブルエリアジェネレーター）を公開しました。この記事では、ツールの概要と使い方を紹介します。
▶ Clickable Area Generator を今すぐ使う
クリッカブルエリア（イメージマップ）とは
「クリッカブルエリア」とは、1枚の画像の中に複数のリンクエリアを設定する技術のことです。HTMLでは<map>タグと<area>タグを組み合わせた「イメージマップ」として実装します。
たとえば、フロアマップ画像の各部屋をクリックで詳細ページに飛ばす、製品の各パーツをクリックで説明に移動させる、といった使い方が可能です。
通常、イメージマップを実装するには座標値を手作業で調べてコードを書く必要があります。Clickable Area Generatorはその作業をGUIで置き換えます。
Clickable Area Generator でできること
- 画像をアップロードして、クリック可能なエリアをビジュアルで描画できる
- 矩形（rect）・円形（circle）でエリアを指定できる
- 描画したエリアに対してリンクURLを設定できる
- HTMLコード（
img usemap＋map要素）を自動生成・コピーできる - ブラウザのみで動作。登録・インストール不要で無料で利用できる
使い方：3ステップでコード生成
- 画像をアップロードする（PNG・JPG・SVGなどに対応）
- 矩形または円形でクリックエリアを描画し、リンクURLを設定する
- 生成されたHTMLコードをコピーしてWebページに貼り付ける
ステップ1：画像をアップロードする
ツールを開いたら、まず画像ファイルをドラッグ＆ドロップするか「ファイルを選択」ボタンからアップロードします。PNG・JPG・SVGなど一般的な画像形式に対応しています。アップロードした画像はブラウザ内でのみ処理され、サーバーには送信されません。
ステップ2：エリアを描画してURLを設定する
画像が表示されたら、リンクにしたい範囲を矩形（四角形）または円形で描画します。描画後、エリアに紐づけるリンク先URLを入力します。複数のエリアを設定することも可能です。
ステップ3：コードをコピーして貼り付ける
エリア設定が完了すると、HTMLコードが自動生成されます。コードをコピーして、WordPressのカスタムHTMLブロックや静的HTMLファイルに貼り付けるだけで実装完了です。
生成コードのサンプルは以下のような構造になっています。
<!-- ※以下はサンプルコードです -->
<img src="your-image.jpg" alt="説明" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="50,30,200,120" href="https://example.com/page1" alt="エリア1">
<area shape="circle" coords="300,150,60" href="https://example.com/page2" alt="エリア2">
</map>shape="rect"は矩形、shape="circle"は円形のエリアを表します。coordsには各エリアの座標値が自動で入力されるため、手作業で計算する必要はありません。
こんな用途に使える
- フロアマップ・館内図：各エリアをクリックして詳細ページへ誘導
- 製品・パーツ説明画像：各部品をクリックして説明文や仕様へリンク
- バナー・告知画像：1枚の画像に複数のリンクを設定
- 日本地図・世界地図：地域ごとのリンクナビゲーション
- 組織図・フローチャート：ノードをクリックして詳細へ移動
よくある質問
Q. 無料で使えますか？
はい、Clickable Area Generatorは無料でご利用いただけます。アカウント登録も不要です。
Q. 対応している画像形式は何ですか？
PNG・JPG・SVGなど、ブラウザで表示できる一般的な画像形式に対応しています。
Q. アップロードした画像はどこかに保存されますか？
いいえ、アップロードした画像はブラウザ内でのみ処理されます。外部サーバーには送信・保存されないため、機密性の高い画像でも安心して利用できます。
Q. スマートフォンでも使えますか？
基本的にはPCブラウザでの利用を推奨しています。エリアの描画操作はマウス操作を前提としているため、スマートフォンでは操作しにくい場合があります。
Q. WordPressに貼り付けるにはどうすればいいですか？
Gutenbergエディターで「カスタムHTML」ブロックを追加し、生成されたコードをそのまま貼り付けてください。画像ファイルはWordPressのメディアライブラリにアップロードして、コード内のsrcパスを書き換えてご利用ください。
まとめ
Clickable Area Generatorは、座標の計算やコーディングなしで画像マップを作成できるツールです。画像をアップロードしてエリアを描くだけの3ステップで、すぐに使えるHTMLコードが手に入ります。
Web制作の現場でイメージマップが必要になったときに、ぜひ活用してみてください。