SVGからImageMap（イメージマップ）に変換ツール

使い方

Illustratorで作成したImageMap用のSVGファイルをドラッグ&ドロップするだけで、HTMLコード（<map> / <area>）とCSSが自動生成されます。生成されたコードはクリップボードに自動コピーされます。

💡 Illustratorでの準備

• 下絵レイヤー： ベース画像のレイヤー名を「imgmap-basis」に設定
• クリック領域： 各領域のレイヤー名を「imgmap-area1」「imgmap-area2」…と連番で命名
• 形状： ポリゴン（多角形）で作成を推奨。矩形ツールの場合はペンツールで4点以上の閉じたパスとして描画
• SVG書き出し設定： オブジェクトID→レイヤー名、スタイル→プレゼンテーション属性、レスポンシブのチェック→外す

🎯 生成されるコード

• CSS： ホバーエフェクト付きのスタイルを自動生成（<script>タグでhead内に挿入）
• HTML： <map> / <area>タグによるクリッカブルマップ構造
• 画像パス： images/{レイヤー名}.png、images/imgmap-area1.svg 〜 の形式で出力（レイヤー名がそのままファイル名に）

⚠️ うまくいかない場合

• エリアが出力されない： レイヤー名が「imgmap-area」で始まっているか確認
• 座標がおかしい： すべての形状をポリゴン（閉じたパス）として作成し直す
• 座標とホバー位置がずれる： アートボードを800px前後の中程度のサイズに設定し直す