MIO webデザインでは高品質なWEBサイトをご提供いたします。ホームページ・ランディングページ(LP)制作、サイトリニューアルなど、WEB制作のことならお任せください。

WEBコーディングHTML Imagemap Generatorを使って簡単にイメージマップを作成する方法

2020
1/25

HTML Imagemap Generatorを使って簡単にイメージマップを作成する方法

約3分で読めます

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

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

イメージマップとは?

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

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

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

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

1枚の画像の中にリンクが3種類存在します

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

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

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

HTML Imagemap Generatorとは?

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

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

HTML Imagemap Generatorの画面

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

HTML Imagemap Generatorの使い方

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

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

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

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

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

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

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

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

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

終わりに

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

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

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

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

関連記事

コメントを書く

メールアドレスが公開されることはありません。* の項目は必須項目となります。

ユーザーに求められるWEBサイトを創造します

MIO webデザインでは、見栄えがいいだけではなく、売上・CV率向上に繋がるWEBサイトを制作いたします。モバイルフレンドリー対策・SEO対策・各種ブラウザ対応など幅広く対応。CMS(WordPress)を導入することで、簡単にサイトを運営・管理することができます。

また、新規制作だけではなく、既存サイトのカスタマイズもMIO webデザインでは承ります。CSSによるカスタマイズが可能であれば、アメブロをはじめとした無料ブログサービスのカスタマイズも可能です。