【ツール紹介】Dreamweaverナシでもクリッカブルマップを作成可能！「Image Map Generator」

2020年1月21日

最近は少なくなりましたが、まだまだゾンビのように残っているのが、画像中の特定の場所をクリックして別ページなどにリンクするための仕組み「クリッカブルマップ」

このクリッカブルマップ、以前はAdobeのDreamweaverを使用して作成することが一般的でしたが、最近ではWebサイトのコーディング自体に、動作が重いなどの理由でDreamweaverを使用していない方も多いと思います。

そんな方でもDreamweaverナシでクリッカブルマップのソースコードが作成できるサービス「Image Map Generator」をご紹介します。

まずは画像をアップロード

サイトにアクセスすると、画像をアップロードするためのボタンがあらわれますので、「Select Image from My PC」をクリックし、対象となる画像を選んでください。

図形を設定

画像をアップロードすると、プレビューが表示されます。

そのプレビューの中で、クリッカブルマップとしたい部分を指定します。

クリッカブルマップの形は画像下の「Shape」部分から選択できます。

• Rect（四角形）
• Poly（多角形）
• Circle（円）

複数のクリッカブルマップを設定する場合は、1つ設定した後に右下部分の「＋Add New Area」のボタンをクリックすると、新しい領域を設定することができます。

「Rect（四角形）」を設定するためには、画像上で指定したい四角形の左上の頂点となる部分をクリック後、次に右下の頂点となる部分をクリックすると、プレビュー画面上に四角形が表示されます。

その四角形に対して、リンク先の設定やタイトルの設定ができます。さらに、ウィンドウの開き方（target属性）も指定できます。

「Poly（多角形）」の場合は、画像上で頂点となる部分を連続でクリックしていくことにより、多角形を設定することができます。

「Circle（円）」の場合は、1回目のクリックが円の中心の設定、2回目のクリックが設定したい円周上の点となります。

慣れるまでは、色々と試してみると勝手がわかると思います。

最後にコードを発行

図形の設定が完了したら、最後に下部の「Show Me The Code!」をクリックすると、htmlファイルに貼り付けるためのソースコードが表示されるので、こちらをコピーして貼り付ければ完成です！

まとめ

最初にも書きましたが、JavaScriptが発展した現在でも、クリッカブルマップが必要になってくることはまだあります。

そんなときに「Dreamweaverを持っていないので設定できない」と断るのではなく、このようなオンラインツールを使用することで乗り切ることができます。

Dreamweaverを持ってなくてクリッカブルマップをあきらめていたという方は、ぜひ一度、試してみてください。