都道府県や地域ごとに色分け（塗り分け）した日本地図をWordPressに置きたい、というとき。47都道府県を1つずつ塗っていくのではなく、「地図全体の規定色を決めてから、必要な単位だけ色を上書きする」という二段構えで考えると、作業も管理もずっと軽くなります。 これを知らないと、色を変えたいたびに全県を触り直すことになりがちです。
ここでは色の設計を中心に、塗り分けの考え方と、最初に勘違いしやすいところを書きます。例として地図作成プラグイン Japan Clickable Map の挙動を使いますが、考え方自体はどの作り方でも共通します。
まず規定色、それから必要な分だけ上書き
色分けというと、県を1つ選んで色を指定、また1つ選んで色を指定……と47回繰り返す姿を想像しがちです。実際にやると分かりますが、これは途中で必ず嫌になります。しかも「やっぱりベースの色を変えたい」となった瞬間、全部やり直しです。
そうではなく、最初に地図全体の規定色（デフォルト色）を1つ決めてしまうのが起点になります。これで47都道府県が一括で同じ色に塗られます。そのうえで、目立たせたい県や、意味を持たせたい地域だけを個別に上書きしていく。色のつけ方には粒度があって、都道府県マップなら県単位や地方単位、自分で作った独自エリア単位でまとめて色を与えられます。市区町村マップなら、複数の市区町村を1つにまとめたエリア単位で色を指定します。
優先順位もはっきりしています。個別の上書き > 地方／エリアの色 > 規定色、の順で強い指定が勝ちます。たとえば「関東地方は青、ただし東京都だけは赤」としたいなら、関東に青を、東京に赤を入れれば、東京の赤が勝ちます。地方でざっくり塗ってから例外を足す、という作り方が自然にできるわけです。
地方・エリアでまとめ、プリセット色で統一感を出す
一段上の色をうまく使うと、塗る手数はかなり減ります。標準の8地方区分（北海道／東北／関東／中部／近畿／中国／四国／九州）でまとめて塗れば、47回ではなく8回で全国を塗り分けられます。「東海（愛知/岐阜/三重）」や「関西」のように、標準にない区切りで見せたいときは、自分で独自エリアを定義してそこに色を与えます。
色の統一感で地味に効くのがプリセット色です。よく使う色を最大24色（初期は8色）まで登録しておけて、カラーピッカーの横から選べます。最初は気にしなくても作れますが、地図を何枚か作っていくと「このサイトのブランドカラーの青」を毎回コードで打ち込むのが面倒になってきます。先にプリセットへ登録しておくと、複数の地図でブレない色が使えて後から楽です。
色を塗っただけでは、押せない
ここが一番つまずきやすいところなので、設計の早い段階で押さえておくのがおすすめです。色とリンクは別物です。色を塗っただけの県や市区町村はクリックできません。
クリックできるのはリンク（URL）を設定した領域だけで、リンクのない領域はカーソルも変わりません。きれいに塗り分けた地図を見て「全部の県が押せるはず」と思い込みやすいのですが、塗りはあくまで見た目で、押せるかどうかはリンク設定で決まります。逆に言えば、リンクを張った県だけがちゃんと押せて、ただ色で意味を示したいだけの県は押せないままにできる、ということでもあります。誤クリックを誘発しないので、これはこれで都合のいい仕様です。
実務では「色は意味づけ、リンクは導線」と分けて考えると整理しやすいです。対応エリアを色で示しつつ、詳細ページがある県にだけリンクを張る、という使い分けが普通にできます。
数値から自動で塗る「統計地図」ではない
線を引いておきます。これは人口や売上などの数値データを読み込んで、値に応じて自動で濃淡をつける統計ヒートマップではありません。 CSVを渡せば勝手に塗り分けてくれる、という類いのものではなく、色は手動で設定します。「人口の多い県ほど濃く」のような自動の階調表現をしたい場合は、用途が合いません。
逆に、対応エリアや配送エリア、施工エリアのように「どこが該当して、どこが該当しないか」を自分の意図で色分けして見せたい用途には素直に向いています。色の数も多くならないので、手動でも十分まわります。
そして塗り分けの意味を読み手に伝えたいなら、凡例を使うのが効きます。市区町村マップでは、色の意味を説明する凡例を地図の下に表示できます。たとえば「緑＝対応エリア／灰＝対象外」と添えておくと、ただ色がついているだけの状態より誤解が減ります。色だけだと「この色は何を意味しているのか」が伝わらないことが意外と多いので、意味のある色分けをするほど凡例の有無が効いてきます。
設計の順番をひとつだけ決めておく
まとめると、塗り分けは「規定色を決める → 地方・エリアでまとめて塗る → 例外の県だけ個別に上書きする → リンクを張る領域を決める → 意味があるなら凡例をつける」という順で考えると迷いません。最初から全県を1色ずつ塗る発想を捨てるだけで、作業も後の修正もかなり軽くなります。
コードを書かずに管理画面だけで日本地図の色分けを作りたいなら、この二段構えの色設計と凡例まで備えた Japan Clickable Map が回り道の少ない選択肢です。詳しくは 製品ページで確認できます。
