「都道府県を押したら、その県のページに飛ぶ」。そういう日本地図をWordPressで置きたい、という相談はよくあります。画像やイメージマップで自作するより、都道府県や市区町村ごとに色とリンクを設定できる地図生成プラグインを使うのが現実的です。管理画面で表示する範囲を選び、色を塗り、リンクを貼って、ショートコードかブロックで設置する。慣れれば30分かからずに1枚作れます。
ここでは地図作成プラグイン Japan Clickable Map を例に、作る流れと、最初に戸惑いやすいところを順番に書きます。
画像で作った日本地図は、最初の1枚で終わらない
やり方として真っ先に思いつくのは、日本地図の画像を用意して、県ごとにリンク領域（イメージマップの <area>）を座標で指定する方法です。一度きりの図なら、それでも形にはなります。
ただ運用に入ると、これが地味につらい。スマホで表示するとクリック領域の座標がずれますし、画面幅に合わせて縮むと、押せる範囲と見た目の県境が合わなくなります。対応エリアが増えて色を変えたくなるたびに、画像編集ソフトを開くか外注することになります。画像ベースは、変更が一度でも発生する地図には向きません。
何が「クリックできる地図」を成立させているか
この種のプラグインは、地図を画像ではなくSVGとして持っています。SVG：拡大しても輪郭がぼけないベクター形式です。都道府県や市区町村ごとに図形（パス）が分かれていて、リンクを設定した領域だけがクリックできる仕組みです。
最初に知っておくと楽な点があります。リンクを設定していない県はクリックできず、カーソルも変わりません。 初めて触ると全部の県を押せると思いがちですが、これは誤クリックを誘発しないための仕様です。押せる県だけが押せる、と考えると分かりやすくなります。
色も同じ発想で、「地図全体の規定色」を決めてから、必要な県だけ色を上書きする二段構えになっています。47都道府県を1つずつ塗る必要はありません。
実際の作成の流れ
操作自体は素直で、大きく4ステップです。
- マップを新規作成する。 管理画面の「クリッカブル地図 > 都道府県マップ（または市町村マップ）> 新規追加」で1枚作ります。このとき、全国47都道府県を出すか、選んだ県だけを出すか（表示モード）を決めます。
- 表示する範囲を選ぶ。 一部の県だけ見せたいなら、表示したい県にチェックを入れるだけ。選んだ範囲に合わせて地図が自動でズームします。市区町村まで細かく見せたい場合は、県タブを切り替えながら検索ボックスで市区町村を選びます（県をまたいだ選択もできます）。
- 色とリンクを設定する。 規定色を決め、必要な県や市区町村だけ色とリンク（URL）を上書きします。設定は編集画面のプレビューにその場で反映されるので、塗りながら確認できます。
- ページに設置する。 固定ページや投稿に、次の1行を貼るだけです。
たとえばJapan Clickable Mapでは、マップを保存するとそのマップに固有のIDが振られるので、設置はこの形になります。
[jcm_map id="マップID"]id には自分が作ったマップのIDを入れます。ショートコードが苦手なら、ブロックエディタで「クリッカブル地図」ブロックを追加し、一覧から表示するマップを選ぶだけでも置けます。都道府県マップと市区町村マップは同じショートコードとブロックで扱えるので、「どっちを貼るんだっけ」と迷うことはありません。
全国を全部作り込まなくていい
作り始めると「47都道府県すべてにリンクを用意しなきゃ」と力みがちですが、必要な範囲だけで十分です。むしろ県別に全部リンクを張ると、リンク先が多すぎて読み手が迷いやすくなります。
そういうときは、地方単位でまとめると落ち着きます。標準の8地方区分（北海道〜九州）でまとめてもいいですし、「東海（愛知/岐阜/三重）」のように複数県を独自エリアとして自分で定義することもできます。地方をクリックしたときに、説明文と複数の行き先を載せた小窓（ポップアップ）を開く見せ方もできるので、「関東エリアの店舗3つ」をまとめて提示するような導線も作れます。
このポップアップの中のリンクは、URLを直接書くほかに、サイト内の固定ページや投稿、カテゴリーを検索して選べます。選んだ場合はIDで参照するので、後からパーマリンクを変えてもリンク切れになりません。表示名も「尾張西店」のように自由に付けられるので、県名に縛られない見せ方ができます。
市区町村マップも同じで、全市区町村を登録する必要はありません。配達や施工のように対応エリアが決まっているなら、関わる市区町村だけを選べば完成します。
公開前に、ひとつだけ忘れやすいこと
地図がきれいに出ると満足してしまいますが、公開前に出典表記を入れる必要があります。
同梱されている地図は、国土交通省「国土数値情報（行政区域データ）」を加工したものです。利用規約（政府標準利用規約準拠、CC BY 4.0互換）により、出典を明示すれば商用利用も問題なくできます。ただし出典の表記はプラグインが自動で出してくれるわけではなく、サイト運営者が自分で書く必要があります。地図を載せたページのフッターなど、確認できる場所に次のように添えておきます。
「国土数値情報（行政区域データ）」（国土交通省）を加工して作成
「無料素材として完全に自由」というより、「出典を書けば自由に使える」というのが正確なところです。ここは商用サイトほど大事になります。
スマホと表示速度は、あまり身構えなくていい
作る前に心配されがちなのがスマホ表示ですが、ここはほとんど自動で吸収されます。地図はレスポンシブなSVGなので画面幅に合わせて縮みますし、地方のポップアップはスマホではタップで開いて、画面が狭ければ下から出るシート表示に切り替わります。
その場で生成されるSVGなので、画像の読み込みも発生しません。jQueryのようなライブラリも要らず、JavaScriptを読み込むのはポップアップを使うマップだけです。凝った地図にしても、表示が重くて困る場面はほとんどありません。
まず1枚、県別導線か対応エリアから
最初の1枚なら、「県をクリックすると県別ページへ飛ぶ導線」か、「自社の対応エリアを色分けして見せる地図」のどちらかが作りやすいです。47都道府県をベース色のままにして、リンクを張るのは数県だけ、という地図でもまったく問題ありません。むしろそこから始めて、反応を見ながらエリアやリンクを足していく方がうまくいきます。
市区町村単位での対応エリアの見せ方や、商用利用と出典表記のルールは、それぞれ単独で踏み込む価値があるので別の記事で詳しく扱います。コードを書かずに管理画面だけで日本地図の導線を作りたいなら、Japan Clickable Map のようなノーコードの地図作成プラグインが、いちばん回り道の少ない方法です。
