不動産サイトの対応エリアを地図にする — 市区町村を塗って、エリア別の物件一覧へ送る

地図から作り始めると、たいてい一度作り直すことになります。先に固めておくのは、物件の一覧をどの単位でページにしているか。市ごとなのか、区ごとなのか、沿線や学区でまとめているのか。ここが曖昧なまま市区町村を塗ると、色だけ完成して行き先が決まらない、という妙な状態になります。

WordPressで不動産サイトの対応エリア(取扱エリア)を地図にする手順を、決める・塗る・送るの順に書きます。使うのは市区町村単位のクリック地図。県単位で塗ると「県内全域を扱っている」ように読めてしまい、不動産の商圏とは噛み合いません。業種ごとにどちらの型を使うかという横並びの比較ではなく、物件一覧ページの粒度から塗る単位を決めることと、貼ったURLを後から貼り替える運用が要ること。この2つが軸です。

目次

塗る単位は、物件一覧ページの単位で決まる

地図の1クリックには、行き先のページが1枚要ります。当たり前に聞こえますが、不動産はここが厄介で、一覧ページの作りが会社ごとにばらばらです。エリア用のタクソノミー投稿を分類する仕組みの総称。カテゴリーとタグが標準で、プラグインやテーマが「エリア」「業種」のような独自の分類を追加することもある。を作って /area/kawasaki-nakahara/ のようなアーカイブを持っている会社もあれば、固定ページを市ごとに手で作っている会社、検索結果のURLをそのままエリア別ページとして使っている会社もあります。

どの作りでも地図から送れます。ただし塗った市区町村の数だけ行き先が要るので、一覧が市単位までしか無いのに区で塗り分けると、区ごとのクリックが全部同じ市の一覧に着地する。間違いではないものの、読者からは「区を選ばせておいて絞り込まれない」動きに見えます。

順番としては、一覧ページの粒度を確かめてから地図の編集画面を開く。粒度を細かくする予定があるなら、ページ側を先に作ってから塗ったほうが手戻りが出ません。なお、複数県に支店があって「まず県から選ばせたい」規模なら、都道府県マップを軸にする型もあります。業種ごとの型の違いは業種別に見る対応エリア・拠点の見せ方で整理しました。

営業できる範囲と、物件を載せられる範囲は違う

取扱エリアを決める段で迷うのは、たいてい「行けるけれど物件は少ない」地域の扱いです。営業としては隣接市まで対応したい。けれど常時掲載できる物件があるのは中心の数市だけ、という状態はふつうに起こります。ここを同じ色でひとまとめにすると、期待して押した先が0件の一覧になる。

色は3つまでに抑えると収まりがいいです。掲載あり/お問い合わせで対応/対象外。この粒度なら凡例も短く済みます。色分けと凡例そのものの考え方は対応エリアを地図で色分けして見せる方法に書いたので、ここでは不動産側の判断だけ。

リンクを設定していない市区町村は押せません。 カーソルも変わらないため、押せないことが触った瞬間に伝わります。物件一覧を用意していない「お問い合わせで対応」の地域は、色だけ与えてリンク欄を空にしておく(後で触れるエリアグループ側にもURLを入れなければ、押せないままです)。見せるが押させない、が素直に作れます。

政令市の区まで塗るか、市でまとめるか

市町村マップの選択タブで神奈川県を開いた状態。横浜市の各区がコード付きで行に並んでいる。
政令市を市でまとめる場合と区で塗る場合の、範囲の伝わり方を比べた図

塗る単位は市区町村ですが、政令指定都市だけは市ではなく区が単位になります。件数やコード体系のほうは市区町村単位のクリックできる地図を作るに書きました。ここは不動産で区をどう使うか、それだけ。

「横浜市対応」と書けば18区すべてを扱っているように読めます。けれど市の北部だけ、沿線沿いだけ、という切り方は不動産では普通にある。区で塗れば、断り書きを添えなくても範囲がそのまま出ます。

ただし区で塗るかどうかは、最初の節と同じで一覧ページ側から決まります。区別の一覧を持っていないなら、区を選んで色は分けたうえで、リンクは市の一覧に揃えてしまってかまいません。色は実態、リンクは手持ちのページ。この2つは別々に決められます。

ラベルを出すなら、政令市の区はフル名で表示できます。ただし都市部で区を並べると全部は入りきりません。収まらないラベルは自動的に省かれる作りなので、潰れて読めなくなるわけではないものの、区名がまばらに出る見た目にはなります。都市圏が中心の地図なら、ラベルを切って凡例に語らせるほうが静かです。

県をまたいだ選択もできるため、「東京都下と川崎市・横浜市の一部」といった商圏を1枚に収められます。

エリアグループは、凡例の単位であって、行き先の縛りではない

市区町村マップにはエリアグループがあって、複数の市区町村を1つの塊として扱えます。「掲載あり」「お問い合わせで対応」のようにまとめる単位で、凡例に並ぶのもこの単位。色とリンクを、その塊にまとめて与えられます。

リンクの効き方だけ先に押さえておくと迷いません。グループに入れたURLは、その市区町村にリンクを入れていないときの既定として使われます。 3市を「掲載あり」でまとめてグループ側にURLを1つ置けば3市とも同じ一覧へ飛びますが、市ごとに一覧ページがあるなら、その市の行にURLを入れればそちらが勝ちます。エリア一括のページ1枚で受けるつもりなら、グループのURLだけで足りる。

色も同じ重ね順で、個別に入れた色のほうがグループの色より強い。個別の上書き > グループ > 規定、が色にもリンクにも共通します。つまりグループで面と凡例を作りながら、リンクだけは市ごとに散らす、という組み方ができる。主力の1市だけ色を濃くして一覧も専用ページへ送る、も同じ理屈です。

地図に入れるのは、一覧ページのURLそのもの

一覧の粒度を確かめてから市区町村を塗り、URLを入れてページに貼る4手順の図

市区町村のリンク欄に入るのは、URLの文字列だけです。サイト内の投稿や固定ページを検索してIDで選べるのは都道府県マップのポップアップの項目に限られていて、市区町村マップにはポップアップ自体がありません。市区町村の行は、選択画面に1,898件がそのまま並びます。1行ずつに検索つきの選択欄を置けば、その1,898行ぶんのDOMを丸ごと抱えることになる。そこを避けて、リンクはURLの直接入力だけに絞りました。開発した側の割り切りです。貼るURLは自分で決めて、自分で管理することになる。

ここで効くのが、どのURLを渡すか。タームのアーカイブのように構造が単純なURLは、検索条件が増えても形が変わりません。対して検索結果のURLは、後から絞り込み条件を足したり並び順の初期値を変えたりすると、貼った当時の形と今の仕様がずれていきます。地図の行き先には、なるべく動かないURLを選ぶ。

そして一覧ページのスラッグURLの末尾に使う、投稿やカテゴリーごとの英数字の名前。このサイトなら plugear.net/wordpress-japan-map/ の「wordpress-japan-map」の部分。やパーマリンク投稿や固定ページごとの固定URL。WordPressでは「設定 > パーマリンク」でURLの形式を決め、個々の末尾(スラッグ)は編集画面で変える。構造を変えたときは、地図側のURLも直すことになります。塗った市区町村の数だけ直す作業になるので、ページ構造を固めてから塗る順番が安全です。

設置は、保存したときに振られるマップIDを固定ページに1行貼るだけ。

[plg_jcm_map id="マップID"]

id に入れるのは、いま作った市区町村マップの投稿IDです。ブロックエディタで書いているなら、「クリッカブル地図」ブロックから同じマップを選んでも置けます。

取扱エリアは動く。触る前提で作っておく

不動産の取扱エリアは、支店の開設や担当者の増減で動きます。画像で作った地図だと、1市足すたびに画像編集ソフトへ戻ることになる。管理画面に色とリンクを持たせた地図なら、市区町村を1件選んで色を決め、URLを入れて更新すれば済みます。

扱いをやめた地域は、色を規定色に戻してリンクを外せば押せない状態に戻ります。地図から消す必要はありません。むしろ「対象外」として灰色で残したほうが、商圏の輪郭は伝わる。

注意が要るのは逆向きで、物件一覧ページを整理して消したときです。地図に書いたURLは自動では消えないので、押した先が404になります。エリア別ページを削除する作業と地図の見直しは、同じ日にやるものとして扱っておくと事故りません。

最後にひとつ。この地図データは国土交通省「国土数値情報(行政区域データ)」を加工したもので、商用サイトでも使える代わりに、地図を載せたページに出典表記が要ります。プラグインが自動で出す部分ではないので、フッターなどへ自分で添えてください。

取扱エリアの地図を管理画面だけで作り、エリア別の物件一覧まで繋ぐところは、クリッカブル日本地図の市区町村マップで完結します。

目次