日本地図の都道府県をクリックできるようにしたい。そう思って調べると、まず出てくるのが「イメージマップ」です。画像を1枚用意して、県ごとにクリック領域を座標で囲む、HTMLの <map> と <area> を使う古典的な手法ですね。一度作ってみたものの、スマホで見たら押せる場所がずれていた、という経験で検索している人も多いと思います。
イメージマップは「画像＋固定座標」という仕組みそのものに限界があり、レスポンシブな日本地図には根本的に向きません。 崩れるのは作り方が悪いからではなく、構造的にそうなるものです。きれいに動かしたいなら、図形そのものがクリック領域になるSVGに切り替えるのが正攻法になります。
イメージマップで日本地図を作ると、どこで詰まるか
<area> は「この画像のこの座標範囲をクリックしたら、このリンクへ」という指定です。日本地図なら、画像の上で青森県の形に沿って座標点をいくつも打ち、coords="..." に書き並べていきます。これを47都道府県分やる、と考えた時点でだいたい想像がつくと思います。
実際に手を動かすと、詰まりどころは3つに集約されます。
ひとつめはスマホでの座標ずれ。<area> の座標は画像の原寸を前提にした絶対値です。レスポンシブで画像が画面幅に合わせて縮むと、座標だけは縮まないので、押せる範囲が見た目の県境とずれていきます。「岐阜を押したつもりが長野に飛ぶ」が普通に起きます。JavaScriptで座標を再計算するライブラリもありますが、それを入れた時点で「手軽な静的HTML」という当初の利点は消えます。
ふたつめは画像を差し替えるたびに座標を引き直すこと。色を変えたい、デザインを新しくしたい、となるたびに元画像が変わり、座標も全部取り直しになりがちです。地図の見た目とクリック領域が別管理になっているので、片方を変えるともう片方が追従しません。
みっつめが47都道府県分の座標管理そのものです。県境は直線ではないので、それっぽく囲うには1県あたり何十点も打つことになります。市区町村まで踏み込めば、その数は一気に1,000を超えます。一度作って終わりならまだしも、運用で触る地図でこれを維持するのは、正直かなりしんどい作業です。
なぜ崩れるのかは、仕組みを見ると一言で済む
これらは設定ミスではなく、イメージマップの設計そのものから来ています。画像はただのピクセルの集まりで、どこが「青森県」かを画像自身は知りません。 だからクリック領域を外側から座標で後付けするしかなく、画像と座標が別々に存在することになります。
別々である以上、画像が縮めば座標とのずれが生まれ、画像を差し替えれば座標は無効になります。レスポンシブ（画面幅で伸び縮みする）という今の前提と、固定座標という仕組みは、そもそも相性が悪い。ここが崩れる本当の理由です。
SVGは「図形そのもの」がクリック領域になる
SVGは画像ではなくベクター形式で、地図を「青森県という名前のついたパス（図形）」の集まりとして持ちます。ここがイメージマップとの決定的な違いです。座標で領域を囲む必要がなく、県の形をした図形そのものをそのままリンクにできます。
結果として、イメージマップで詰まった3点がそのまま解消します。図形は画面幅に合わせて拡大・縮小しても形が保たれるので、座標ずれが起きません。ベクターなので拡大してもボケず、輪郭がガタガタにならない。そして色を変えるのは図形の塗りを変えるだけで、クリック領域の引き直しは発生しません。見た目とクリック領域が最初から同じものなので、片方だけずれることがない、というのが効いてきます。
技術的に補足すると、SVGの各都道府県を <a> でラップすればクリック可能になります。逆に言えば、<a> で囲んでいない図形はただの塗りで、クリックもできない。この「囲んだものだけが押せる」という素直さが、座標管理の地獄から解放してくれる部分です。
WordPressでの現実解は、SVGをその場で生成するプラグイン
とはいえ、47都道府県分のSVGパスを自分で用意し、リンクごとに <a> を手書きするのも、現実的とは言えません。WordPressなら、この部分を肩代わりするプラグインに任せるのが素直です。
たとえば地図生成プラグイン Japan Clickable Map は、ページ表示時にインラインでSVGをその場で生成し、リンクを設定した県や市区町村だけを <a> でラップします。設定していない領域はクリックできず、カーソルも変わらないので、誤クリックを誘発しません。色もリンクも管理画面から設定でき、座標を1点も打たずに済みます。設置はショートコードかブロックで、都道府県マップなら次の1行を貼るだけです。
[jcm_map id="マップID"]id には管理画面で保存したマップのIDを入れます。市区町村単位の対応エリアを見せたい場合も同じショートコードで扱えます。
イメージマップから乗り換えるときの考え方はシンプルで、「画像＋座標」を「図形＋リンク」に置き換える、と捉えると分かりやすいです。元の画像と座標表は捨てて、地図のデータ側にリンクを持たせる発想に切り替える。座標を保守する作業がまるごと消えるので、運用で地図を触る頻度が高いサイトほど効果が大きくなります。
崩れないクリックできる日本地図を、座標管理なしで作りたいなら、製品ページで詳しく紹介しています。
