はじめに

引越し先を検討するとき、最初に知りたいのは「どの街に住みたいか」だけではありませんでした。

むしろその前に、関東全体を見渡して「どのあたりが高くて、どのあたりが安いのか」をざっくり把握したいと思いました。

通常の家探しでは、駅名や市区町村名を入れてから物件一覧を見ることが多いです。ただ、その方法だと最初から候補エリアをある程度決めておく必要があります。

今回は逆に、先に相場感を地図で見てから、気になるエリアを探せるようにしたいと考えました。
関東、特に都内23区近郊エリアは家賃が高く、住みたい場所を探すと家賃が高いということもあります。

そこで、関東の家賃相場を地図上にヒートマップとして表示するプロトタイプを作りました。

作ったもの

関東7都県の市区郡別家賃相場を、地図上に色で表示するWebページです。

関東の家賃相場ヒートマップページ

リポジトリはこちらです。

主な特徴は以下です。

関東7都県を地図上に表示
市区郡ベースの家賃相場をヒートマップ化
低い地域から高い地域までを7段階のグラデーションで表示
間取りを切り替えられる
築年・建物種別は簡易補正として切り替えられる
地図をドラッグで移動できる
ズームイン・ズームアウトできる
計測点をクリックすると地域別の家賃を確認できる

最終的な計測点は、関東本土の市区郡266地点になりました。

なぜヒートマップにしたのか

家賃相場は表でも確認できます。

ただ、引越し先を検討する初期段階では、細かい数値よりも「このあたりは高そう」「このあたりは比較的安そう」という全体像を先に見たい場面があります。

ヒートマップにすると、地域差を直感的に把握できます。

たとえば、東京都心部は高く、郊外や北関東側は比較的低い、といった傾向が視覚的に見えます。

物件検索の前段階として、候補エリアを広げたり、逆に絞ったりするための地図として使うイメージです。

情報の収集

家賃相場の基礎データには、SUUMOの市区郡別家賃相場ページを使用しました。

今回確認した対象は以下の7都県です。

東京都
神奈川県
埼玉県
千葉県
茨城県
栃木県
群馬県

SUUMOの市区郡別ページには、以下の間取り別の相場が掲載されていました。

ワンルーム
1K/1DK
1LDK/2K/2DK
2LDK/3K/3DK
3LDK/4K～

調査時点では、2026年7月10日更新のデータとして掲載されていました。

取得できた行数は以下です。

都県	全地点	5間取りすべて取得可	欠損あり
東京都	63	50	13
神奈川県	50	49	1
埼玉県	57	54	3
千葉県	48	46	2
茨城県	39	33	6
栃木県	19	17	2
群馬県	19	17	2
合計	295	266	29

地図に反映したのは、5間取りすべての値が取れた266地点です。

座標は、Geoloniaの日本住所データを使用しました。

市区町村については、町丁目単位の緯度経度を平均して代表点を作成しました。郡単位のデータについては、郡内の町村の代表点を平均して扱っています。

表示条件

当初は、間取り、築年数、建物種別などを細かく指定して表示したいと考えていました。

ただし、実際に調査してみると、市区郡単位で安定して取得できる条件には限界がありました。

詳細に条件を設定しすぎると、同じ条件で相場を収集できない地域が増えることが想定されます。

そこで今回は、以下のように割り切りました。

間取り

SUUMO上で市区郡別に取得できるため、実データとして切り替え対象にしました。

ワンルーム
1K/1DK
1LDK/2K/2DK
2LDK/3K/3DK
3LDK/4K～

築年

市区郡別の相場データでは、築年条件を完全に固定することが難しかったため、簡易補正として扱いました。

新築
5年以内
10年以内
20年以内
30年以内
30年超

建物種別

こちらも、相場データの取得条件として完全に統一するには制約があるため、プロトタイプ上では簡易補正として扱いました。

マンション
アパート
一戸建て・その他

このため、今回の地図は「成約賃料を精密に比較するもの」ではなく、「地域ごとの相対的な家賃感をつかむための可視化」として位置づけています。

進行の工程

実装は、ChatGPTとCodexを使って段階的に進めました。

1. まずは小さなプロトタイプを作る

最初は、関東の代表的な地点を40地点程度用意して、地図上に色付きの点を表示しました。

この段階では、まだヒートマップというより「地点ごとの色分け」に近い状態でした。

2. 地図として操作できるようにする

次に、Googleマップのようにドラッグ移動と拡大縮小ができるようにしました。

ここで気をつけたのは、ズームしたときにマーカー自体が大きくなりすぎないことです。

地図は拡大される一方で、マーカーやラベルは見やすいサイズを保つようにしました。

3. 都道府県の塗りつぶしをやめる

初期の表現では、色が都道府県単位で塗られているように見えてしまいました。

これでは「細かいエリアの違い」が見えません。

そこで、都道府県の面を家賃色で塗るのではなく、計測点から補間したヒートレイヤーを重ねる方式に変更しました。

4. 計測点を増やす

42地点では、どうしても点が少なく、ヒートマップとしての説得力が弱くなります。

そこで、SUUMOの市区郡別データを調査し、関東7都県で同じ間取り列を持つデータを収集しました。

最終的に、欠損のない266地点を地図に反映しました。

5. 色の表現を調整する

最初は赤と青を中心にしたグラデーションでした。

しかし、8万円と11万円が同じ赤色に見えるなど、高額帯の違いが分かりにくい問題がありました。

そこで、色を以下のような7段階の連続グラデーションに変更しました。

緑
ティール
シアン
青
紫
オレンジ
赤

これにより、家賃帯ごとの細かい差が見えやすくなりました。

ChatGPT/Codexの使い方

今回の進め方で便利だったのは、ChatGPTとCodexを役割分担して使えたことです。

使用したモデル

使用ツール: ChatGPT / Codex
使用モデル: GPT-5.5

ChatGPTでやったこと

主に、要件の整理や判断に使いました。

どんな地図にしたいかを言語化する
「相場」とは何かを確認する
表示条件をどこまで細かくするか考える
データソースの候補を比較する
Qiita記事の構成を整理する

特に、最初から仕様が固まっていない状態で「こう見たい」「これは違う」と対話しながら方向を決められたのが便利でした。

Codexでやったこと

主に、実装と検証に使いました。

HTML/CSS/JavaScriptの実装
D3.jsによる地図描画
GeoJSONを使った関東地図の表示
家賃データのCSV化
市区郡データと座標データの照合
ヒートマップの補間処理
ブラウザでの動作確認
GitHubリポジトリへのpush

実装して終わりではなく、ブラウザで実際に表示確認しながら修正できたのが大きかったです。

「点が少なくてヒートマップに見えない」「8万円と11万円が同じ赤に見える」といった見た目の違和感を、会話しながら修正していけました。

作ってみて分かったこと

地図上のヒートマップは、見た目だけなら比較的すぐ作れます。

一方で、家賃相場のようなデータを扱う場合、本当に難しいのは表示よりもデータ条件を揃えることでした。

間取り、築年、駅徒歩、管理費込みかどうか、専有面積、建物種別などを完全に揃えようとすると、取得できる地点数が一気に減る可能性があります。

今回は、まず広域の相場感を見たいという目的を優先して、市区郡別の間取りデータを中心に使い、築年や建物種別は簡易補正にしました。

プロトタイプとしては、この割り切りで十分に使えるものになったと思います。

あと、中央線沿線は比較的高いということがわかりました。

今後やりたいこと

今後改善するとしたら、以下をやりたいです。

駅単位の家賃相場に対応する
駅徒歩や築年条件をより正確に揃える
町丁目単位やメッシュ単位の表示にする
管理費込みの総支払額で比較する
データ更新の仕組みを作る
色スケールをユーザーが切り替えられるようにする

まとめ

引越し先を探す前に、まず関東全体の家賃感を地図で見たいと思い、家賃相場ヒートマップを作りました。

ChatGPTで目的や条件を整理し、Codexで実装と検証を進めることで、アイデアからGitHubへの公開まで一気通貫で進められました。

今回のように「まだ仕様が固まっていないけれど、見ながら考えたい」ものを作るとき、ChatGPT/Codexの組み合わせはかなり相性が良いと感じました。