対応エリアを「地図で色分け」してWordPressで見せる方法

配達や施工、出張対応など、サービスを提供できる範囲が決まっている事業者向けの話です。対応エリアをサイトに載せるとき、多くの人はまず市区町村名をテキストで並べます。でもこれ、見ている側にはけっこう不親切です。「○○市、△△市、□□区、…」と続く一覧から、訪問者が自分の住む地域を探し当てて、対応の可否を判断しないといけません。結局「うちは対応してますか?」という問い合わせが来てしまう、というのはよくある話です。

ここで効くのが、市区町村を色分けした地図です。「この色は即日対応、この色は要相談、白いところは対象外」と一目で示せれば、訪問者は自分の地域の色を見るだけで済みます。WordPressなら、地図作成プラグイン Japan Clickable Map の「エリア」機能と凡例を使って、コードを書かずに作れます。

目次

テキスト一覧が伝わらないのは、読み手に探させているから

対応エリアの一覧表記がうまく機能しないのは、情報が足りないからではありません。むしろ全市区町村を律儀に書くほど、読む側の負担が増えます。自分の地域名を一覧から探す、という作業を訪問者に丸投げしているわけです。

地図にすると、この探す作業が消えます。人は地理的な位置でなら自分の地域を直感的に見つけられるので、「だいたいこのあたり」を見て、そこが何色かを確認するだけ。テキストの精読より圧倒的に速いし、対応の濃淡(即日か要相談か)も色で同時に伝わります。

「エリア」と凡例で、対応の濃淡を色で見せる

市区町村マップには、複数の市区町村を1つの塊として同じ色と同じリンクでまとめる「エリア」という機能があります。これを使うと、たとえば次のような見せ方ができます。

  • 緑 = 即日対応エリア
  • 黄 = 要相談・別途見積エリア
  • 灰 = 対象外(参考表示)

エリアには名前と色、リンクを設定でき、地図の下に「色のスウォッチ+名前」の凡例が自動で並びます。凡例はSVGの画像内に焼き込まれるのではなく、地図の下にHTMLのリストとして出るので、テキストとして読めますし、見た目もCSSで整えられます。

仕組みとしては、流れで捉えると分かりやすいです。まず「エリア」タブで色分けの種類(名前と色、リンク)を定義します。次に「市町村の選択 / 上書き」タブで対応する市区町村を選び、各行のドロップダウンからどのエリアに属するかを割り当てます。最後に「凡例を表示する」をオンにすれば、実際に使ったエリアが地図の下に表示される、という順番です。エリアの定義と市区町村への割り当てがタブとして分かれている点だけ、最初は少し戸惑うかもしれません。

色の決まり方には優先順位があって、個別の上書き > エリアの色 > 規定色 の順です。基本はエリアの色で塗りつつ、「この市だけ特別扱いしたい」というときは個別に上書きできる、という二段構えになっています。政令指定都市は区単位で扱えるので、「横浜市は鶴見区と港北区だけ対応」のような細かい指定もできますし、県をまたいで市区町村を自由に組み合わせることもできます。

全市区町村を登録しなくていい、という気楽さ

作り始めると「全国の市区町村を網羅しないと」と身構えがちですが、その必要はありません。関わる市区町村だけを選べば、地図はそれで完成します。 配達や施工の対応範囲は決まっているはずなので、その分だけ登録すれば十分です。

凡例についても同じ発想で、実際に使われているエリアだけが並びます。エリアを5種類定義しても、地図上で使ったのが3種類なら、凡例に出るのはその3種類だけ。空のエリアが並んで混乱する、ということが起きません。

経験的には、最初はエリアを2〜3色に絞った方が整理しやすいです。「対応 / 要相談 / 対象外」くらいから始めて、運用しながら細分化していく方が、見る側にも作る側にも優しい。色を増やすほど凡例も長くなり、結局どの色が何だったか分かりにくくなりがちなので、欲張らない方がうまくいきます。

細かい調整も効きます。市区町村名のラベルを表示するかどうか、ラベルの大きさ、区切り線(境界線)の太さは、表示オプションで変えられます。市の数が多くてラベルが重なるなら小さめにする、隣接する市の境界をはっきり見せたいなら境界線を太めにする、といった微調整ができるので、エリアが密集する都市部でも見やすく保てます。

設置は、マップを保存すると固有のIDが振られるので、固定ページや投稿に次の1行を貼るだけです。

[jcm_map id="マップID"]

id には自分が作った市区町村マップのIDを入れます。都道府県マップと同じショートコードなので、種類を意識せずに貼れます。ブロックエディタなら「クリッカブル地図」ブロックから一覧で選んでも置けます。

これは「見せる」地図で、自動判定はしないことだけ正直に

ひとつはっきりさせておきたいのは、これは対応エリアを見せるための地図だということです。訪問者が住所や郵便番号を入力すると「あなたの地域は対応エリアです」と自動で判定してくれる、という仕組みではありません。色分けはこちらが手動で設定したものを表示しているだけで、入力値とのマッチングは行いません。

なので、申し込みフォームで郵便番号から対応可否を自動チェックしたい、料金を地域別に自動計算したい、といった「判定」まで求めるなら、別の仕組みが必要になります。逆に言えば、多くの事業者にとって本当に必要なのは「うちの地域、対応してる?」に一目で答えることであって、そこは地図で十分にカバーできます。まず色分けした地図で対応範囲を明示し、細かい可否は問い合わせや見積もりで詰める、という運用が現実的です。

公開時にひとつだけ。この地図データは国土交通省の公式データ(国土数値情報)を加工したもので、商用でも問題なく使えますが、出典の一文だけはプラグインが自動で出しません。地図を載せたページのフッターなどに自分で添える必要があります(書き方や条件は商用利用の記事で詳しく扱います)。

対応エリアを色分けして見せる地図を、管理画面だけで作れます。テキスト一覧で問い合わせが増えていると感じるなら、一度試してみる価値はあります。詳しい機能や料金は Japan Clickable Map の製品ページで確認できます。

目次