PERSONAL / 街・駅情報サイト

tokyo-where

通勤時間と家賃で住む街の候補を絞り、駅の周りにどんな建物が並ぶかを3Dで確かめられる街探しサイト。

通勤条件から住む街を探す

東京と周辺の街・駅情報をまとめた個人制作のWebサイトです。勤務地、家賃、通勤時間、間取り、乗換回数を指定し、住む街の候補を探せます。企画、情報設計、UI検討、AI支援を使った実装、コンテンツ整備、公開後の改善を担当しています。

勤務地が渋谷なら、駅を表す点の色で渋谷までの通勤時間を見比べられます。地図の横で家賃上限や乗換回数を調整すると、条件に合う街が下の一覧に並びます。利用する路線や住みたい街がすでに決まっている人には、路線・街の一覧から入る道も用意しました。

街の詳細ページでは、家賃や通勤経路とあわせて駅周辺の街並みを確認できます。中野駅の例では、駅の近くに高い建物が集まり、その外側に低い建物が広がる様子が見えます。国土交通省のPLATEAUの建物データを使い、一棟ごとの輪郭と高さを立体で表しました。

「3Dを動かして見る」を押すと、ドラッグで模型を回転し、気になる一角を拡大できます。建物を一棟選ぶと、その建物の高さと駅の代表点からの距離が現れます。最初は静止画を表示し、操作を始めたときにThree.jsと建物データを読み込みます。取得したデータは画面内で再利用しています。

「街のかたち実験室」では、建物の色を高さ別から用途別に切り替えられます。同じ中野駅周辺でも、住宅や店舗併用住宅がどのあたりに集まるかに注目して見ることができます。別の駅に切り替えれば、同じ範囲で街の違いを比べられます。

家賃、間取り、通勤時間、乗換回数などの条件をURLに持たせ、街の詳細や比較画面に移っても引き継げるようにしています。条件の読み取りと検証を共通化し、画面ごとに絞り込みの扱いが変わらない構成にしています。

家賃は間取り別の目安、通勤時間は駅間の代表経路として表示しています。「データの見方と出典」へのリンクも設け、検索条件と数値の前提を確認できるようにしています。

Next.js / React / TypeScript / Three.js