こんにちは、MIO webデザインです。

今回の記事ではイメージマップの簡単な作り方について解説していきます。

イメージマップとは？

そもそもイメージマップとは何なのでしょうか？

イメージマップとは、1枚の画像の中に複数個のリンクを設置する技術の事です。

大元の画像を１枚定義して、その画像に埋め込むリンクを、座標を指定する事で配置します。この技術を応用すると、１枚の画像の中に複数のリンクを設置できるのです。

簡単に言うと下図のようなイメージですね。

イメージマップはCSS・JavaScriptを必要とせず、HTMLだけで実装することが可能です。

しかし、リンクを配置しようと思ったら座標を調べて設定しなければならないため、実装しようと思ったらまあまあ面倒臭いんですよね（笑）

そこで私はイメージマップを作るときは『HTML Imagemap Generator』さんにお世話になっております！

HTML Imagemap Generatorとは？

ズバリ、イメージマップを簡単に実装できる超便利ツールです。

簡単な操作を行うだけでイメージマップのコードを自動生成してくれるので、わざわざ自分でリンクの座標を調べたり、微調整する必要はありません。

ではその使い方を見ていきましょう！

HTML Imagemap Generatorの使い方

１・イメージマップに使用したい画像のアップロード

２・アップロードした画像にリンクを配置していく

イメージマップに使用したい画像をアップロードすると、編集画面に移動します。
左側が編集エリア、右側がコードを生成してくれるエリアですね。

右上にツールバーがありますが、これを使って画像に直接リンクとなるエリアを描画していきます！

今回、リンクとなるボタンは円形にしたいので、右上のツールから『円を描く』を選択します。

図形ツールを使ってリンクとなる図形を描画したら、コードが自動生成されます！

３・生成されたコードをコピー

生成されたコードをコピーしたら、あとは貼り付けるだけです。

リンク先だけ＃になっているので、設定のし忘れには注意してください。

終わりに

たったこれだけの作業でイメージマップを生成することができます。

直感的な操作でリンクを配置できるので、IllustratorやPhotoshopの操作のような感覚で作れるのが嬉しいところです！

かなり便利なので使ってみてくださいね！

2020年1月25日・追記
ここで作ったイメージマップをレスポンシブ対応させる記事を追加しました。
詳しくはこちら