つくるフェーズ
地域データ検索システム 大量データを、速く・探しやすく・SEOに活かす
大量の地域データを、より速く表示し、様々な方法で探せる回遊導線を持ち、SEOに活かしやすい構造の検索サイトとするためのWebシステムです。
全国39,424件の学校データを使って、都道府県・市区町村・駅・路線・地図・詳細ページを組み合わせた検索サイトをデモと合わせ、ご紹介いたします。
学校データはデモ用の素材です。実際には、不動産物件、店舗、営業所、医療機関、士業事務所、求人拠点、公共施設など、緯度経度を持つさまざまなデータに応用できます。
大量データをWebサイトに載せるとき、こんな課題はありませんか？
大量のデータをWebサイトに掲載しようとすると、次のような課題が出てきます。
- 件数が多く、検索や地図表示が重くなる
- 都道府県ページや市区町村ページを作っても、更新や管理が大変
- 駅や路線から探せる導線を作りたいが、実装が複雑になる
- 検索結果ページがパラメータURLばかりになり、SEOに活かしにくい
- 地図、パンくず、タイトル、canonical、noindexなどを検索条件に連動させるのが難しい
- 管理画面や外部サービスのデータを、Webサイト上で高速に表示したい
この検索システムは、こうした課題を解決するための仕組みを、実際に動くデモとして構築したものです。
このデモでできること
このデモでは、全国39,424件の学校データをもとに、次のような検索ページを表示できます。
- 全国の学校一覧
- 都道府県ごとの学校一覧
- 都道府県＋市区町村ごとの学校一覧
- 駅周辺の学校一覧
- 路線沿線の学校一覧
- 学校種別ごとの一覧
- 学校詳細ページ
- 地図と連動した検索結果表示
- 近くの駅、近くの市区町村、関連する路線への導線
単に一覧を表示するだけではなく、ユーザーが次に見たくなるページへ自然に移動できるよう、回遊導線も重視しています。
また、エリア規模は、全国だけでなく、一部エリアや路線などに絞った検索サイトとして活用することも可能です。
地域・駅・路線ページをSEOに活用しやすい構造に
検索結果ページは、できるだけパラメータではなく、URLのパスで表現しています。
- /search
- /search/tokyo
- /search/tokyo/chiyoda-ku
- /search/station/2801011/nishi-waseda
- /search/line/tokyo/28004
- /search/high-school/tokyo
- /search/high-school/tokyo/bunkyo-ku
- /search/high-school/station/2801011/nishi-waseda
このように、都道府県・市区町村・駅・路線・カテゴリをURLに含めることで、検索結果ページをSEO向けのランディングページとして活用しやすくなります。
また、検索条件に応じて、ページタイトルやパンくずナビも自動で設定しています。
- 学校一覧
- 東京都の学校一覧
- 東京都千代田区の学校一覧
- 西早稲田駅の大学・短期大学一覧
- 東京都の京王線の高等学校一覧
一方で、フリーワード検索や細かな条件検索は、SEO上の主要ページではなく補助的な絞り込みとして扱い、必要に応じてクエリパラメータで管理する想定です。
大量データでも高速に表示する仕組み
このデモでは、表側の検索表示に必要なデータを、あらかじめJSONファイルとして生成しています。
そのため、検索ページを表示するたびにデータベースへ問い合わせるのではなく、事前生成された検索用データを読み込んで表示しているため、高速に表示することが可能です。
特に、都道府県・市区町村・駅・路線など、SEO上重要になる基本ページは、あらかじめ検索結果をキャッシュ化することで、表示速度を高めます。
※駅ページのみ、通常のスピードの体感用に、個別キャッシュ化はしておりません。
データの更新頻度が高くない施設検索・物件検索・店舗検索では、この方式と相性が良いと考えています。
※1時間に一回程度の更新でも十分対応可能です。
地図表示にも対応
検索結果は、一覧とともに地図上にも表示しています。
データ件数が多い場合は、すべての施設を一度に表示せず、都道府県や市区町村単位で件数をまとめた集約マーカーとして表示します。
データ件数が少ない場合には、集約マーカーを使わず、各施設ごとにマーカーを表示することも可能です。
これにより、全国規模のデータでも、地域単位のデータでも、見やすい地図表示を実現できます。
また、表示速度は、地図上に表示するマーカーの数により変わってきます。地図を掲載しない場合には、さらに安定したスピードで表示することが可能となります。
駅・路線から探せる導線
駅データ・路線データを組み合わせることで、施設ページに駅・路線の導線を追加できます。
元データに「最寄り駅」が入っていない場合でも、緯度経度情報から近くの駅を自動判定し、駅ページ・路線ページへの導線を作ることができます。
例えば、次のようなページを作成できます。
- 特定の駅周辺にある施設一覧
- 特定の路線沿線にある施設一覧
- 施設詳細ページから近くの駅へ移動
- 駅ページから同じ駅周辺の施設へ移動
- 路線ページから駅ごとの施設数を確認
不動産サイト、店舗検索、学校検索、医療機関検索など、駅や路線が重要な検索軸になるサイトで活用できます。
近接駅の自動判定
一覧に表示している駅情報は、施設の緯度経度と駅データの緯度経度から距離を計算し、近い順に近隣駅として自動設定しています。
このデモでは、近くの駅として、直線距離で10km以内・最大3駅を表示しています。距離や最大表示数は、案件に応じて変更できます。
元データに最寄り駅情報が含まれていなくても、位置情報から駅ページ・路線ページへの導線を作ることができます。
ただし、一定距離以内に駅がない地域では、駅・路線による絞り込みは表示されません。
この考え方は、不動産物件、店舗、医療機関、営業所などにも応用できます。
路線ページについて
不動産サイトなどでは、路線検索が一般的に存在します。
最初は一定のエリアだけだった取り扱い物件も、少しずつエリアが広がっていく場合に、路線をどのように扱うかが難しくなっていきます。
このデモでは、都道府県を選択したうえで路線検索を行う構成にしています。
つまり、都道府県をまたぐ路線でも、選択中の都道府県内に絞って表示することで、検索導線として扱いやすくしています。
路線ページでは、マップ上に対象路線の駅を表示し、駅ごとの施設数を確認できます。
駅ごとの件数は、その駅が施設の近隣駅一覧に含まれる件数です。駅に直接登録された件数ではなく、施設の緯度経度から判定された近隣駅ベースの件数です。
現在のデモでは、各施設が最大3つの近接駅を持つため、路線ページ上の駅ごとの件数は、実際の施設数より多く見える場合があります。
路線形状データは使っていないため、地図上では駅マーカーによって簡易的に路線の流れを見せています。
近くの市区町村データについて
このデモでは、学校データをもとに「近くの市区町村」を事前に作成しています。
学校データは全国に約4万件あり、緯度経度を持つ地点データとして件数が多いため、市区町村同士の近接関係を推定するためのサンプルとして使いやすいデータです。
そのため、不動産、店舗、施設検索など、個別の物件数が少ないデータでも、この学校ベースの近接市区町村データを共通利用できる想定です。
近接市区町村の判定方法
各市区町村に含まれる学校の緯度経度を使い、周辺の市区町村との距離関係を計算しています。
単純に市区町村の中心点同士で距離を見るのではなく、実際に存在する学校地点を使うことで、地形や市街地のつながりに近い関係を拾いやすくしています。
方角の判定
方角は、基準となる市区町村と近接市区町村の位置関係から算出しています。
基準市区町村の代表地点と、近接市区町村の代表地点を比較し、方位角を求め、8方向に分類しています。
注意点
この近接市区町村は、行政上の隣接関係ではありません。あくまで、緯度経度を持つ地点データから算出した「生活圏・検索導線として近そうな市区町村」です。
- 詳細ページから周辺エリアへ回遊させる
- 検索結果が少ない場合に近隣エリアを提案する
- 市区町村ページ同士を内部リンクでつなぐ
- SEO上、関連エリアページへの導線を作る
回遊しやすいページ構成
検索ページでは、ただ一覧結果を表示するだけでなく、次のページへ移動するための各種情報を設置しています。
例えば、施設の詳細ページでは、次のような情報を表示できます。
- 近くの施設
- 近くの駅
- 近接市区町村
- 関連する路線
- 同じ市区町村の施設一覧
また、駅ページでは、駅に紐づく路線や、周辺に施設がある駅を表示できます。
検索結果から詳細へ、詳細から駅へ、駅から路線へ、路線から別の駅へと、ユーザーが自然にサイト内を回遊できる構造を実現しています。
sitemap.xmlの自動生成
今回のデモサイトは、学校数だけでも約4万件あります。
さらに、都道府県・市区町村・駅・路線ページを含めると、非常に多くのURLが生成され、これらを手動で管理するのは現実的ではありません。
※デモサイトでは、約10万件URLが生成されています。
このデモでは、検索データをもとにサイトマップXMLを静的ファイルとして、自動生成する仕組みも実装しています。
実案件では、施設情報を更新したタイミングで検索用JSONとサイトマップXMLを再生成することで、公開ページを抜け漏れなく管理できます。
※デモサイトはクロールさせない前提のため、通常の sitemap.xml ではなく sitemap-demo.xml というファイル名にしています。
canonical・noindex・構造化データにも対応
このデモでは、検索結果ページに対して以下のようなSEO設定も組み込んでいます。
- canonical URL
- 2ページ目以降の noindex
- パンくずの構造化データ
- 検索条件に応じたタイトル生成
- 検索条件に応じたパンくず生成
構造化データは、表示する施設や情報によって内容が変わります。
実案件では、施設情報、店舗情報、物件情報、求人情報など、対象データに合わせた構造化データを設定できます。
フリーワード検索とスペック検索
都道府県で絞り込まれた状態で、フリーワード検索も利用できるようにしています。
学校データでは、東京都が約3,000件と最も件数が多いため、この3,000件前後をひとつの目安としてフリーワード検索を実装しています。
実際のサイトでは、データ件数や検索項目の量に応じて、どのタイミングからフリーワード検索やスペック検索を表示するかを検討します。
- 都道府県を選択した後にフリーワード検索を表示
- 市区町村を選択した後に詳細条件を表示
- 物件種別を選択した後にスペック検索を表示
例えば、不動産検索ポータルサイトである「suumo」では、エリアを選択し、物件種別を選択して初めてフリーワード検索が行えたり、スペック検索については、都道府県の選択後に行えるようになっています。
検索条件を増やしすぎると表示速度やURL設計に影響するため、SEOページとして持つべき条件と、補助的な絞り込み条件を分けて設計します。
DBに依存しない高速表示
このデモでは、表側の検索表示に必要なデータをJSONファイルとして生成することで、検索ページ表示時のDB問い合わせを抑えています。
管理画面や外部システムでデータが更新されたタイミングで検索用JSONを再生成する構造にすれば、フロント側の表示速度を保ちながら、データ更新にも対応できます。
- 管理画面で施設情報を更新
- SalesforceなどAPIからデータを取得
- 更新後に検索用JSONを再生成
- フロントの検索ページではJSONを読み込んで高速表示
現在のデモでは、全国約4万件の施設データを対象にしています。検索用データの生成には一定の時間がかかりますが、更新頻度が数分単位でない場合には、現実的な構成です。
デモページの構成
この検索デモでは、検索条件ごとに以下のページを生成しています。
検索トップ
全国のデータを対象にした検索入口です。デモでは件数が多いため、地図上では都道府県単位の代表地点に集約して表示しています。
当デモでは、表示数が200件以上ある場合には、集約マーカーで表示するように設定してあります。
※「大学・短期大学」では、都道府県の「東京都」のみ200件を超えているため、集約マーカーでマップが表示されます。
都道府県ページ
都道府県ごとの一覧ページです。学校種別はいつでも変更でき、変更すると、上部検索フォーム内の件数も条件に応じて変わります。施設件数を考慮し、都道府県が確定した時点でフリーワード検索や路線検索が利用できるようになっています。
市区町村ページ
市区町村単位の一覧ページです。地図上には対象エリア内の施設を表示し、近くの市区町村への導線も用意できます。
路線ページ
特定の路線に対して、沿線上の駅と施設件数を表示します。駅ごとの件数を確認しながら、駅ページへ移動できます。地図上では、2件以上ある駅を青色、1件のみの駅を赤色、0件の駅をグレーで表示しています。
駅ページ
特定の駅を基準に、近接する施設を表示します。対象の駅は黄色いマーカーで表示されます。
このデモでは、駅ページのみ通常の速度の体感用に、あえて個別のJSONファイルを作成していません。駅用のJSONファイルを作成すれば、さらに表示速度を上げることも可能です。
詳細ページ
個別施設の詳細ページです。対象の施設は、大きめのマーカーで表示されます。
「近くの学校」「近くの駅」の各項目にマウスを乗せると、地図上の対応マーカーが動きます。
デモではIDベースのURLを使っていますが、実案件では施設名や物件名にローマ字スラッグを持たせ、よりSEOを意識したURLにすることも可能です。
さまざまなデータに応用可能
このデモでは学校データを使っていますが、仕組み自体はさまざまなデータに応用できます。例えば、次のような検索システムに展開できます。
- 不動産物件検索
- 店舗検索
- 営業所検索
- 医療機関検索
- 士業事務所検索
- 求人拠点検索
- 学校・施設検索
- 公共施設検索
- 観光スポット検索
緯度経度、住所、カテゴリ、駅・路線との関係を持つデータであれば、検索ページ・地図ページ・詳細ページ・地域ページを組み合わせたサイト構築が可能です。
実案件で追加できる機能
実際のサイト構築では、以下のような機能も追加できます。
- エリアを絞った検索
- 路線を絞った検索
- 集約マーカーを使わない地図表示
- 管理画面からのデータ更新
- SalesforceなどAPIサービスとの連携
- 物件スペック検索
- 設備条件検索
- タグ検索
- 複数カテゴリ検索
- 地図範囲内検索
- お気に入り機能
- 問い合わせ導線
- 構造化データの拡張
- 大量データ向けのキャッシュ分割
この検索システムが向いているケース
次のようなサイトに向いています。
- 掲載件数が多い
- 限定的な地域や駅で探される
- 一覧ページをSEOに活かしたい
- 地図と検索結果を連動させたい
- 詳細ページだけでなく、地域ページや駅ページも作りたい
- DB検索が重く、表示速度を改善したい
- 管理画面や外部データをWebサイトに展開したい
- 全国対応、複数地域対応の検索サイトを作りたい
デモで利用しているデータ
このデモでは、以下のデータを参考にしています。
学校データ
国土交通省 国土数値情報の学校データを参考にしています。
駅・路線データ
駅データ.jpの駅・路線データを利用しています。
住所・地方データ
デジタル庁のアドレス・ベース・レジストリを参考にしています。
まとめ
この検索システムは、大量の地域データを、速く、探しやすく、SEOに活用しやすい検索ページとして公開するためのデモです。
単なる検索フォームではなく、都道府県・市区町村・駅・路線・地図・詳細ページを組み合わせ、ユーザーが回遊しやすい検索サイトを構築できます。
不動産、店舗、施設、学校、医療機関、営業所など、地域性のあるデータをWeb集客に活かしたい場合に応用できます。