TOKYO SOUBA MAP 中古マンション 相場マップ
- JavaScript (vanilla)
- Leaflet
- PHP
- MariaDB
- PDO
- GIS / 地理空間データ
- GitHub Actions
OVERVIEW
プロジェクト概要
課題
不動産の「相場」は、物件を1件ずつ見ても掴めない。 国土交通省は実際に成約した取引価格を公開しているが、 市区町村と四半期を指定して一覧を眺める形でしか使えず、 地域ごとの水準を比べるのに向いていなかった。
目的
取引事例を地図上に集計し、㎡単価の中央値を色と数値で比較できるツールを作る。 フレームワークを使わず vanilla JS + Leaflet で、 約10万件を1画面で扱えるところまで作り込む。 データの取得・正規化・投入はPHPのバッチ、検索はDB側で完結させる。
PROCESS
制作プロセス
-
DESIGN
Figma で3ペイン（検索条件／地図／結果一覧）を設計し、そのまま実装に落とし込み。
-
DATA
国土数値情報の鉄道データから東京都内784駅、位置参照情報から町丁目6,518件のマスタを生成。
-
PIPELINE
取引価格APIの取得・正規化・投入バッチをPHPで実装。テスト16件で検証。
-
OPTIMIZE
10万件の描画を実測しながら設計。ピンと集計円の出し分けで上限を作る。
-
DEPLOY
GitHub Actions で public/ を Pages へ自動デプロイ。push するだけで公開が更新される。
GALLERY
成果物ギャラリー
RETROSPECTIVE
振り返り・工夫した点
MEASURE, DON'T GUESS
「10万件は重いだろう」と考えずに、まず全部測った。結果、 検索は2〜3ms、全件ソートは34msで、重かったのは描画だけだった。 マーカーのポップアップHTMLを遅延生成にするだけで 1件6.48KB → 1.17KB。推測で設計していたら、 間違ったところを最適化していた。
ZOOM CAPS THE COST
該当が10万件でも、画面に入る数はズームで頭打ちになる （zoom16=1,316 / 15=4,252 / 14=14,920 件）。 そこでピンは画面内だけ描き、それ以上広い範囲では 市区町村・駅ごとの集計円に切り替える。 検索結果の件数と描画コストを切り離した。
FIXED COLOR SCALE
集計円の色は都全体で固定した区切りで塗る。 画面内の値で自動スケールすると、地図を動かすたびに同じ町の色が変わり、 相場マップとして比較できなくなる。「動かしても意味が変わらない」ことを優先した。
HONEST ABOUT THE DATA
扱っているのは過去の成約事例で、売出し中の在庫ではない。 そのため「物件検索」とは名乗らず、看板を相場マップにした。 実データで埋まる項目と埋まらない項目をセクションで分け、 後者には「デモ」バッジを付けている。
DOCUMENTED DECISIONS
開発ログに選ばなかった選択肢とその理由まで残した。 「なぜズーム14なのか」「なぜ集計円なのか」を数字で説明できる状態にしてある。 仕様書・ロードマップ・API設計案と合わせて2,500行超。
LIVE
公開デモ
ログイン不要で実際に触れます。左の「まずは例から」を押すと即座に検索が走ります。 現在は架空のデモデータで動作しています（画面にも明記）。 国土交通省への API 利用申請が承認され次第、実データに差し替えます。 取得・正規化・投入のパイプラインは実装済みです。