クリッカブルエリアの作り方・使い方
Clickable Area Generator は、画像をアップロードして矩形・円形のエリアをドラッグで描くだけで、レスポンシブ対応の HTML/CSS コードを生成できる無料ツールです。HTML の知識がなくても、コピー&ペーストでクリッカブルな画像を実装できます。
クリッカブルエリア（イメージマップ）とは
クリッカブルエリアとは、1 枚の画像の中に複数のクリック可能なリンク領域を設定する仕組みです。バナーや地図、図解の一部分だけをリンクにしたいときに使います。従来は HTML の <map> / <area> 要素で実装しましたが、ピクセル座標が固定でレスポンシブに弱いため、現在は CSS でパーセント配置する方式が主流です。
使い方（5 ステップ）
- 1
画像をアップロード
PNG・JPG・SVG・WebP をドラッグ&ドロップ、またはファイル選択で読み込みます。
- 2
形状を選んでエリアを描画
ツールバーで矩形 / 円形を選び、画像上をドラッグしてリンク領域を作成します。
- 3
リンクを設定
各エリアにリンク先 URL と alt テキストを入力します。
- 4
位置を微調整
作成済みのエリアはドラッグで移動、ハンドルでリサイズできます。必要なら画像サイズも変更できます（アスペクト比は固定）。
- 5
コードをコピー
「CSS（レスポンシブ）」または「HTML Map」形式を選び、ワンクリックでコピーして貼り付けます。
矩形と円形の使い分け
エリアの形状は矩形（rect）と円形（circle）の 2 種類です。対象の形に合わせて選びます。
| 形状 | 向いている対象 | 例 |
|---|---|---|
| 矩形（rect） | ボタン・カード・テキスト帯など四角い領域 | バナー内の CTA ボタン |
| 円形（circle） | アイコン・丸い要素・人物の顔など | 地図上のピン、丸アイコン |
レスポンシブ対応の仕組み
従来の <map> / <area> はピクセル座標が固定のため、画像を縮小するとクリック位置がずれます。本ツールの「CSS（レスポンシブ）」出力は position: absolute とパーセント指定で領域を配置するため、画像がどんな幅に縮んでもクリック領域が追従します。スマホ対応サイトでは CSS 方式を選んでください。
| 方式 | レスポンシブ | 仕組み | 向いている用途 |
|---|---|---|---|
| CSS 方式 | ◯ 対応 | position: absolute + % | スマホ対応サイト（推奨） |
| HTML Map 方式 | △ 固定 | <map><area> ピクセル座標 | 固定幅・レガシー用途 |
よくある失敗と対処
- 画像を CSS で拡大縮小しているのに HTML Map 方式を使い、クリック位置がずれる → CSS 方式を選ぶ。
- エリアに URL を入れ忘れてリンクが効かない → 各エリアの URL 欄を確認する。
- 出力コードのラッパー要素の幅を固定してしまう → ラッパーは width: 100% + max-width で可変にする。
- alt を未設定にしてアクセシビリティが低下する → 各エリアに alt テキストを設定する。
よくある質問
クリッカブルエリアジェネレーターとは？
画像上にクリック可能な領域（リンクエリア）を視覚的に設定し、レスポンシブ対応の HTML コードを自動生成する無料 Web ツールです。
レスポンシブ対応のクリッカブルエリアはどう実装しますか？
従来の HTML map 要素はピクセル固定のためレスポンシブ非対応です。本ツールでは position: absolute とパーセント指定の CSS 方式でコードを出力するため、画像が縮小されてもクリック領域が追従します。
対応している画像形式は？
PNG、JPG、SVG、WebP など、ブラウザが表示可能なすべての画像形式に対応しています。
エリアの形状は何が使えますか？
矩形（rect）と円形（circle）の 2 種類に対応しています。ドラッグで描画し、作成後も移動・リサイズが可能です。
生成したコードはどこに貼ればいいですか？
HTML ファイルや WordPress のカスタム HTML ブロック、記事本文にそのまま貼り付けられます。CSS 方式は画像を囲むラッパーごとコピーしてください。
登録や費用は必要ですか？
登録不要・無料で、生成したコードは商用サイトでも利用できます。画像自体の著作権はご自身でご確認ください。