WEBのこと

クリッカブルマップを簡単に作れる無料サービス【レスポンシブ対応】

イメージマップジェネレーター

以前サイト制作をした時に、クリッカブルマップを利用する機会がありました。

使ったサイトは「商店会のサイト」で、商店会マップに載っている商店にリンクをつけて欲しいという依頼でした。

正直座標指定していくのめんどくさいし、何か簡単な方法ないかなーと探していたら、クリッカブルマップを作れる無料のジェネレーターがありまました!

そこで、本記事では《クリッカブルマップを簡単に作れる無料サービス【レスポンシブ対応】》について書いていきます。

クリッカブルマップとは?

クリッカブルマップは、イラストや写真などのイメージ上の特定の場所を円や多角形エリアとして設定して、クリック時に設定したURLにジャンプさせる手法を指す。 クリッカブルマップでは、好きな場所にリンクを設定できるので、細かい位置設定が必要な地図やイメージを多用しデザインに凝ったサイトでよく用いられる。

引用 : weblio辞書

 

簡単に言うと、クリッカブルマップはWEBサイトでイラストや地図にURLをリンクさせる手法です。

通常だと、positionを使って1つ1つのイラストや地図を囲んでいくのだが、それだと手間がすごくかかります。

これから紹介をするプラグイン【HTML Imagemap Generator】を使うと、難しいことは全くなく直感的にリンクをつけていけるのでめちゃくちゃ便利ですよ。

HTML Imagemap Generatorの使い方

クリッカブルマップを作るのに超絶便利なサービスが、「HTML Imagemap Generator」です。

もちろん、Wordpressでサイトを作成していても使えます。固定ページで使用できますよ。

イメージマップ

HTML Imagemap Generator を開いたらクリッカブルマップを作りたい画像をそのまま画面上にドラッグ。

今回はサンプルとして日本地図の画像を入れていく。

イメージマップ

画像をドラッグすると右上に「短形を描く」や「円を描く」などの表記が出てくるので、リンクを作りたい画像の形に合わせた項目をクリック。

今回は「千葉」にリンクをつけたいので、「短形を描く」を選択し、千葉のエリアをドラッグしている。サイズや位置の調整も出来るぞ。

シェイプを作成したら右側の項目に座標などのコードが追加されていく。全てのシェイプを作り終えたら右側のコードをコピペして使うだけ!簡単ですねー!ほんとに便利すぎる。

さらに、jqueryを使うことで<レスポンシブ>もできちゃう!

レスポンシブ対応なのは本当に嬉しい。

広告

HTML Imagemap Generatorをレスポンシブ対応させる方法

下記からJSファイルをダウンロードしてこよう。

https://github.com/stowball/jQuery-rwdImageMaps

 

上記ソースを入れればレスポンシブも簡単に対応完了!

PC、モバイル共にリンクが機能しているか確かめましょう。

クリッカブルマップを簡単に作れるジェネレーターまとめ

本記事では、《クリッカブルマップを簡単に作れる無料サービス【レスポンシブ対応】》について書いてきました。

このクリッカブルマップを作るジェネレーターを使うことで簡単に効率よく作業を行えました。

今までの苦労とは・・・!

地図やイラストにリンクを入れたいけど難しそう・・・と悩んでいる人はぜひ使ってみて下さいね。