基本
管理画面スターターキット
24万円
税込 26.4万円
管理画面・認証・権限管理など、各機能を載せるための初期基盤です。一度導入すれば、追加機能ごとに重複して発生しません。
39,424件
全国学校データ
01 OVERVIEW / PROBLEM
大量データを Web に載せる、
共通の課題を解く。
大量の地域データを Web サイトに掲載しようとすると、次のような課題が繰り返し発生します。この検索システムは、これらを実際に動くデモとして解決する仕組みを備えています。
- 件数が多く、検索や地図表示が重くなる
- 都道府県ページ・市区町村ページを作っても、更新や管理が大変
- 駅や路線から探せる導線を作りたいが、実装が複雑になる
- 検索結果ページがパラメータ URL ばかりで、SEO に活かしにくい
- 地図・パンくず・タイトル・canonical・noindex を検索条件と連動させるのが難しい
- 管理画面や外部サービスのデータを Web サイト上で高速に表示したい
demo.flying-h.site/search
TOP
02 APPLICABLE DATA
学校データはあくまで素材。
緯度経度を持つ、あらゆる地点データに応用可能。
今回のデモは学校データですが、仕組み自体は「緯度経度・住所・カテゴリ・駅路線との関係」を持つデータであれば同じ設計で構築できます。
S学校DEMO
R不動産REAL ESTATE
S店舗SHOP
O営業所OFFICE
M医療機関MEDICAL
L士業LEGAL
J求人拠点JOB
P公共施設PUBLIC
T観光TOURISM
03 WHAT THIS DEMO DOES
このデモでできること
全国 39,424 件の学校データをもとに、次のような検索ページを生成しています。単なる一覧表示ではなく、次のページへ移動する回遊導線までを含めて設計しています。
- 01全国の学校一覧
- 02都道府県ごとの学校一覧
- 03都道府県 + 市区町村ごとの学校一覧
- 04駅周辺の学校一覧
- 05路線沿線の学校一覧
- 06学校種別ごとの一覧
- 07学校詳細ページ
- 08地図と連動した検索結果表示
- 09近くの駅・市区町村・関連路線への導線
また、エリア規模は全国だけでなく、一部エリアや路線などに絞った検索サイトとして活用することも可能です。
04 URL DESIGN FOR SEO
地域・駅・路線ページを、
SEO ランディングとして活かす構造に。
検索結果ページは、できるだけパラメータではなく URL パスで表現しています。都道府県・市区町村・駅・路線・カテゴリを URL に含めることで、検索結果ページを SEO 向けのランディングとして活用できます。
/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 — カテゴリ + 駅
検索条件に応じて、ページタイトルやパンくずナビも自動で設定しています。
- →学校一覧
- →東京都の学校一覧
- →東京都千代田区の学校一覧
- →西早稲田駅の大学・短期大学一覧
- →東京都の京王線の高等学校一覧
一方で、フリーワード検索や細かな条件検索は、SEO 上の主要ページではなく補助的な絞り込みとして扱い、必要に応じてクエリパラメータで管理する想定です。
05 ARCHITECTURE / SPEED
大量データでも、DB に依存せず高速に表示する仕組み。
表側の検索表示に必要なデータを、あらかじめ JSON ファイルとして生成しています。DB 問い合わせをフロント表示から切り離すことで、大量データでも安定した表示速度を実現します。
FIG · 01 · DATA PIPELINEJSON-PREGEN
MANAGER-KIT / API / DB → JSON PRE-GENERATION → FRONTEND
検索ページを表示するたびに DB へ問い合わせるのではなく、事前生成された検索用データを読み込んで表示するため、大量データでも高速に表示できます。
特に、都道府県・市区町村・駅・路線など SEO 上重要になる基本ページは、あらかじめ検索結果をキャッシュ化することで表示速度を高めています。
相性の良いユースケース — データの更新頻度が高くない施設検索・物件検索・店舗検索。1 時間に 1 回程度の更新頻度でも十分対応可能です。
※駅ページのみ、通常速度の体感用にあえて個別キャッシュ化していません。
StaticJSON
FRONT PAYLOAD
≥ 200件で集約
MAP CLUSTERING THRESHOLD
1h更新
DATA REFRESH CYCLE
API連携可
SALESFORCE / MANAGER-KIT
06 MAP DISPLAY
地図表示にも対応。
検索結果は、一覧とともに地図上にも表示します。データ件数の多寡に応じて、集約マーカー / 個別マーカーを自動で切り替えることで、全国規模から地域単位まで見やすい地図を実現します。
件数が多い場合：都道府県や市区町村単位で件数をまとめた集約マーカーとして表示します。
件数が少ない場合：集約マーカーを使わず、各施設ごとにマーカーを表示することも可能です。
表示速度は、地図上に表示するマーカー数に比例して変化します。地図を掲載しない場合はさらに安定した速度で表示可能です。
demo.flying-h.site/search/tokyo
PREF
07 STATION & LINE ROUTES
駅・路線から探せる、回遊導線を追加。
駅データ・路線データを組み合わせることで、施設ページに駅・路線の導線を追加できます。元データに「最寄り駅」が入っていなくても、緯度経度から自動判定します。
- 特定の駅周辺にある施設一覧
- 特定の路線沿線にある施設一覧
- 施設詳細ページから近くの駅へ移動
- 駅ページから同じ駅周辺の施設へ移動
- 路線ページから駅ごとの施設数を確認
不動産サイト、店舗検索、学校検索、医療機関検索など、駅や路線が重要な検索軸になるサイトで活用できます。
demo.flying-h.site/search/station/2801011/nishi-waseda
STATION
08 NEAREST STATION DETECTION
近接駅の自動判定(10km / 最大3駅)
一覧に表示している駅情報は、施設の緯度経度と駅データの緯度経度から距離を計算し、近い順に近隣駅として自動設定しています。距離しきい値・最大表示数は案件に応じて変更可能です。
FIG · 02 · NEAREST STATIONSR=10KM · N=3
10KM 圏内 · 直線距離 · 最大 3 駅を採用
このデモでは、近くの駅として 直線距離で 10km 以内・最大 3 駅を表示しています。距離や最大表示数は案件に応じて変更できます。
元データに最寄り駅情報が含まれていなくても、位置情報から駅ページ・路線ページへの導線を作成できます。
注 — 一定距離以内に駅がない地域では、駅・路線による絞り込みは表示されません。
この考え方は、不動産物件・店舗・医療機関・営業所などにも応用できます。
09 LINE PAGE DESIGN
路線ページの設計思想
不動産サイトなどでは路線検索が一般的です。取り扱いエリアが少しずつ広がっていく場合に、路線の扱いが難しくなります。このデモでは、都道府県を選択したうえで路線検索を行う構成にしています。
都道府県を先に選ばせることで、都道府県をまたぐ路線でも、選択中の都道府県内に絞って表示。検索導線として扱いやすくなります。
路線ページでは、マップ上に対象路線の駅を表示し、駅ごとの施設数を確認できます。
- 2 件以上ある駅は青色で表示
- 1 件のみの駅は赤色で表示
- 0 件の駅はグレーで表示
駅ごとの件数は、その駅が施設の近隣駅一覧に含まれる件数です。駅に直接登録された件数ではなく、緯度経度判定に基づく近隣駅ベースの件数です。
このデモでは各施設が最大 3 駅を持つため、路線上の駅ごとの合計は実施設数より多く見える場合があります。
このデモでは各施設が最大 3 駅を持つため、路線上の駅ごとの合計は実施設数より多く見える場合があります。
路線形状データは使わず、地図上では駅マーカーによって簡易的に路線の流れを見せています。
demo.flying-h.site/search/line/tokyo/28004
LINE
数字で見るより、まず触ってみるのが早いです。
都道府県・市区町村・駅・路線と、実際にリンクを辿って回遊してみてください。表示速度・URL・地図の集約表示の挙動が体感できます。
10 NEAREST-CITY DETECTION
近くの市区町村を、地点データから推定する。
このデモでは、学校データをもとに「近くの市区町村」を事前に作成しています。学校は全国約 4 万件あり、緯度経度を持つ地点データとして件数が多いため、市区町村同士の近接関係を推定するサンプルとして扱いやすいデータです。
FIG · 03 · 8-DIRECTION COMPASSCITY-ADJ
基準市 → 8 方位に分類された近接市区町村
判定方法 — 各市区町村に含まれる学校の緯度経度を使い、周辺の市区町村との距離関係を計算しています。市区町村の中心点同士ではなく、実際に存在する地点データを使うことで、地形や市街地のつながりに近い関係を拾いやすくしています。
方角の判定 — 基準市区町村の代表地点と近接市区町村の代表地点から方位角を算出し、8 方向に分類しています。
注意 — この近接市区町村は行政上の隣接関係ではなく、あくまで地点データから算出した「生活圏・検索導線として近そうな市区町村」です。
学校ベースの近接市区町村データは、不動産・店舗・施設検索など、個別の物件数が少ないデータでも共通利用できる想定です。
学校ベースの近接市区町村データは、不動産・店舗・施設検索など、個別の物件数が少ないデータでも共通利用できる想定です。
これにより、次のような回遊が可能になります:
- 詳細ページから周辺エリアへ回遊させる
- 検索結果が少ない場合に近隣エリアを提案する
- 市区町村ページ同士を内部リンクでつなぐ
- SEO 上、関連エリアページへの導線を作る
11 INTERNAL NAVIGATION
回遊しやすい、ページ構成。
検索ページでは、一覧結果だけでなく次のページへ移動するための情報を各所に設置しています。検索 → 詳細 → 駅 → 路線 → 別の駅…と自然に回遊できる構造を目指しています。
施設の詳細ページでは、次のような周辺情報を表示できます:
- 近くの施設
- 近くの駅
- 近接市区町村
- 関連する路線
- 同じ市区町村の施設一覧
また、駅ページでは駅に紐づく路線や、周辺に施設がある駅を表示できます。検索結果から詳細へ、詳細から駅へ、駅から路線へ、路線から別の駅へ ── 自然に回遊できる導線設計です。
demo.flying-h.site/search/detail/sc25471
DETAIL
12 SITEMAP.XML AUTO-GEN
sitemap.xml の自動生成(約 10 万 URL)
今回のデモサイトは学校数だけでも約 4 万件、都道府県・市区町村・駅・路線ページを含めると、約 10 万 URL が生成されます。これらを手動で管理するのは現実的ではないため、検索データをもとにサイトマップ XML を静的ファイルとして自動生成する仕組みを実装しています。
実案件では、施設情報を更新したタイミングで検索用 JSON とサイトマップ XML を再生成することで、公開ページを抜け漏れなく管理できます。
※デモサイトはクロールさせない前提のため、通常の
sitemap.xml ではなく sitemap-demo.xml というファイル名にしています。13 CANONICAL · NOINDEX · SCHEMA
canonical・noindex・構造化データにも対応。
検索結果ページに対して、以下のような SEO 設定を組み込んでいます。表示する施設や情報によって内容が変わるため、案件ごとにチューニング可能です。
- 01canonical URL
- 022 ページ目以降の noindex
- 03パンくずの構造化データ
- 04検索条件に応じたタイトル生成
- 05検索条件に応じたパンくず生成
- 06施設・店舗・物件・求人など対象別構造化
14 FREEWORD & SPEC SEARCH
フリーワードとスペック検索の
出しどころを、設計する。
都道府県で絞り込まれた状態で、フリーワード検索を利用できるようにしています。学校データは東京都が約 3,000 件と最も件数が多く、この 3,000 件前後を目安にフリーワード検索を実装しています。
実際のサイトでは、データ件数や検索項目の量に応じて、どのタイミングからフリーワード検索やスペック検索を表示するかを検討します。
- 都道府県を選択した後にフリーワード検索を表示
- 市区町村を選択した後に詳細条件を表示
- 物件種別を選択した後にスペック検索を表示
例えば SUUMO では、エリア + 物件種別を選択して初めてフリーワード検索が使えるようになる設計です。スペック検索も都道府県選択後に段階的に表示されます。
検索条件を増やしすぎると表示速度や URL 設計に影響するため、SEO ページとして持つべき条件と、補助的な絞り込み条件を分けて設計します。
検索条件を増やしすぎると表示速度や URL 設計に影響するため、SEO ページとして持つべき条件と、補助的な絞り込み条件を分けて設計します。
15 DEMO PAGE CATALOG
デモサイトの、6 種類のページ。
検索デモでは、条件ごとに以下のページを生成しています。それぞれ実際にご覧いただけます。
PAGE / TOP
検索トップ
全国のデータを対象にした検索入口。200 件以上あるカテゴリは集約マーカーで表示。
↗ /search
PAGE / PREFECTURE
都道府県ページ
都道府県ごとの一覧。学校種別の変更や、フリーワード検索・路線検索が可能に。
↗ /search/tokyo
PAGE / CITY
市区町村ページ
市区町村単位の一覧。地図にはエリア内施設と、近くの市区町村への導線。
↗ /search/tokyo/shinjuku-ku
PAGE / LINE
路線ページ
沿線上の駅と施設件数を色分け(青=2件以上 / 赤=1件 / 灰=0件)。
↗ /search/line/tokyo/11313
PAGE / STATION
駅ページ
特定の駅を基準に、近接する施設を表示。対象駅は黄色いマーカーで表示。
↗ /search/station/2800404/waseda
PAGE / DETAIL
詳細ページ
個別施設の詳細。近くの学校・駅にマウスを乗せると、地図上のマーカーが動きます。
↗ /search/detail/sc25471
デモでは ID ベースの URL を使っていますが、実案件では施設名・物件名にローマ字スラッグを持たせて、より SEO を意識した URL 構成にすることも可能です。
16 APPLICATIONS
さまざまなデータに、応用可能。
緯度経度・住所・カテゴリ・駅路線との関係を持つデータであれば、検索・地図・詳細・地域ページを組み合わせたサイト構築が可能です。
01不動産物件検索
02店舗検索
03営業所検索
04医療機関検索
05士業事務所検索
06求人拠点検索
07学校・施設検索
08公共施設検索
09観光スポット検索
17 ADDITIONAL FEATURES
実案件で、追加できる機能。
実際のサイト構築では、以下のような機能も追加できます。要件に合わせて必要なものを組み合わせていきます。
- エリアを絞った検索
- 路線を絞った検索
- 集約マーカーを使わない地図表示
- 管理画面からのデータ更新
- Salesforce など API サービスとの連携
- 物件スペック検索
- 設備条件検索
- タグ検索
- 複数カテゴリ検索
- 地図範囲内検索
- お気に入り機能
- 問い合わせ導線
- 構造化データの拡張
- 大量データ向けのキャッシュ分割
18 BEST FIT
この検索システムが、向いているケース。
次のようなサイトで特に効果を発揮します。
- 掲載件数が多い
- 限定的な地域や駅で探される
- 一覧ページを SEO に活かしたい
- 地図と検索結果を連動させたい
- 詳細ページだけでなく、地域ページや駅ページも作りたい
- DB 検索が重く、表示速度を改善したい
- 管理画面や外部データを Web サイトに展開したい
- 全国対応・複数地域対応の検索サイトを作りたい
