WebGIS / Made with AI
東京3Dマップ
いつもの街を、ちがう角度から。
建物を立体で眺め、気になる場所の情報を調べるWebアプリです。
登録・インストール不要 · 初回の地図読み込みには時間がかかる場合があります。
高さが見えると、
街の見え方が変わる。
東京駅や新宿のビル群、渋谷の街並み、南大沢の建物。平面の地図では分かりにくい建物の形や高さを、回転させながら見比べられます。
街を立体で眺める
ドラッグで移動し、角度を変えて街並みを探索。東京駅・新宿・渋谷・南大沢へはボタンで移動できます。
住所から探す
住所や場所の名前を入力して検索。候補を選ぶと、その地点へ移動して一時的なピンを表示します。
建物を選んで知る
建物をクリックすると、高さ・階数・用途などの収録情報を確認できます。データのない項目は「未収録」と表示します。
Quick start
まずは、東京駅から。
- 地図を開く。 東京駅・丸の内から始まります。建物の読み込みをお待ちください。
- 街を動かす。 ドラッグで移動、マウスホイールで拡大・縮小。右ドラッグで回転・傾きを変えられます。
- 建物を選ぶ。 気になる建物をクリックして、情報パネルを開きます。
- 別の街へ。 エリアボタンを選ぶか、住所・場所を入力して検索候補を選びます。
スマートフォンでは「住所・エリアを探す」から検索や設定を開きます。指1本で移動、指2本で拡大・縮小や回転ができます。
表示が重いとき
「軽量表示」をオンにし、少し待ってみてください。「3D建物」をオフにすると、背景地図を見られます。迷ったら家のボタンで東京駅に戻り、「N」で北向き、「2D」で真上からの表示に切り替えられます。
Making diary / 02 · 2026.09.19
東京。0円。すぐに。
地図より先に、条件がそろった。
立体の東京を見たい。住所でも探したい。
短い希望から始まった相談は、消える目印をビルの上に救出するところまで続きました。
9月19日｜まず決めるのは、何ですか？
最初は、ArcGISをベースに、PLATEAUのデータを表示するマップアプリを作りたい、という相談でした。用途は一般公開の3D地図閲覧。AIは要件定義書を整理しましたが、対象地域も予算も、まだ空欄です。
わたし：私が決定しないといけないことはなんですか？
AI：まず決めていただきたいのは、対象地域・予算・公開時期です。技術方式は、これらに合わせてこちらで比較・提案できます。
そこで返した条件は、なかなか歯切れのよいものでした。
わたし：
１．東京
２．0円
３．すぐに
４．住所検索は必要、計測は不要
５．PCとスマートフォン
６．データ更新などはしない。
ArcGIS Onlineからフリーで使えるデータだけを使って。
東京、0円、すぐに。三拍子そろっています。広い街を見たい気持ちと、予算・時間は小さくしたい気持ちが、同じ依頼文にきれいに同居しました。
AIは要件書を改訂。住所検索は必須、計測は対象外に。自分でデータを変換して配信したり、定期更新したりする案は外し、すでに公開されたデータを参照する方向へ絞りました。最初の文書にあった5〜10週間の工程例も、そのままは採用しません。「すぐに」が、ちゃんと設計に効いています。
東京全部、とはいかなかった。
見つかった公開データは、東京23区と八王子市南大沢の3D都市モデル。「東京」と一言で頼んでも、データのある場所には境界があります。東京都全域を表示できる顔をするのはやめて、対象範囲を画面に書くことにしました。
住所を検索して移動できても、その場所の3D建物が収録されているとは限りません。地図の上で目的地に着くことと、立体の建物が待っていることは、別の約束でした。
更新作業をしない構成も、手間が消えて終わりではありません。データは外部サービスから読み込むため、提供元の変更や停止には影響を受けます。自分で抱えない分、公開元に頼る。ここもセットです。
0円の条件は、検索欄の裏側まで。
建物データが見つかっただけで、全部解決ではありません。背景地図、標高、住所検索、公開先はそれぞれ確認が必要でした。特に住所検索は、「試したら返事が来た」と「これからも同じ条件で使える」を分けて扱っています。
実装では検索を手動で実行し、結果はその場だけに表示。履歴を保存する仕組みは作らず、入力内容がEsriへ送られることを検索欄の近くに示しました。「住所を探したい」という希望に、保存庫まで付いてくる必要はありません。
「0円」は当時の制作条件です。外部サービスの現在・将来の料金や利用条件を保証する表現ではありません。
そして、街が立ち上がる。……その前に、組み合わせの調整。
わたし：じゃあ、これでWebアプリを作成して。
AI：要件書に沿って、東京の3D建物表示・住所検索・建物情報の確認ができるWebアプリを作成します。
画面はHTML・CSS・JavaScript。地図を描く仕事はArcGISに任せ、日本語の検索や建物情報をひとつの画面にまとめていきました。ただし、実装は一発で決まったわけではありません。記録には、SDK 5.1と既存の画面部品の組み合わせで互換性の問題が起き、動作確認できた4.34へ固定した経緯が残っています。
「新しい番号なら、すんなり動く」とは限らない。今回は、この組み合わせで落ち着く版を選びました。SDK全般の良し悪しを決めた話ではなく、このアプリの道具合わせの話です。
住所は合っている。目印だけが、いない。
街が表示され、住所検索も動くようになって、次の問題が見つかります。検索した場所の目印が、高い建物に隠れてしまいました。東京のビル群、案内役にまで容赦がありません。
AI：公開URLでも住所検索と地図表示を確認できました。検索した場所の目印が高い建物に隠れないように調整し、最後の修正を反映しています。
位置が間違っていたのではなく、高さの基準の問題でした。変更履歴では、地面を基準にしていた目印を、建物を含むシーンを基準に置くように修正しています。平面の地図なら気にならない「その上にビルがある」が、3Dではしっかり効いてきます。
同じ修正では、起動中に行った検索結果が消えないよう、初期位置へ動く処理も整理されました。こちらは会話の台詞ではなく、コードの変更記録から分かる調整です。
「未収録」は、知らないことを知っている表示。
建物を選ぶと、高さや名称などを見られます。でも、すべての建物にすべての情報があるわけではありません。値がないものは「未収録」と表示し、数値の0とは区別しました。分からない階数を、見た目から元気よく答えないためのひと工夫です。
当時の記録では、東京の住所10件、建物選択、表示切替などを確認し、5件の単体テストも通過。スマートフォン幅の確認も行っていますが、実機での快適さや、すべての受入項目を確認し終えたわけではありません。できたことと宿題を分けて、初回公開をひと区切りにしました。
9月21日｜今度は、occam.jpで見てもらう。
その後、アプリ本体をoccam.jpに配置し、住所検索・建物情報・エリア移動を確認しました。記事内の「試す」リンクは、今このサイトで公開している版です。初期の制作記録に登場する公開先とは異なります。
人間が決めたのは、何を見たいか、何を省くか。AIが具体化したのは、データの探し方、画面、動かす仕組み。実際に触ると、そこへ「目印が隠れる」のような想定外が加わってきます。要件書の東京が、ようやく触れる東京になりました。
これでひと安心。……と思ったところで、次は地図の外、紹介画像のビルに異変が見つかります。後日談は、この下に続きます。
この日記の記録について
Occam_contentの東京3Dマップ記事、9月19日の制作相談、要件定義書0.1・0.2版、実装確認記録、Git履歴c7bcd90・cea81d7をもとに編集しました。会話は実際の発言の抜粋です。9月21日のoccam.jpへの公開はこのサイト側の記録を補っています。比喩は読み物として加えていますが、未記録の会話や不具合は創作していません。
Making diary / 2026.09.21–22
東京を立体にしたら、紹介画像のビルまで自由になった。
地図を公開して、ひと安心。と思ったら、入口のイラストで建物が合体していました。今回は、アプリの外側で起きた小さな修正日記です。
9月21日｜作った地図を、みんなに触ってもらいたい。
このサイトでやりたかったのは、ChatGPTと作ったアプリを、作り方も含めて見てもらうこと。オセロに続く作品として、東京3Dマップを解説付きでoccam.jpに公開しました。建物を立体で眺めたり、住所で探したり。「動くもの」があると、紹介する側もちょっと楽しくなります。
入口の画像は、サイトの温かい雰囲気に合わせて、淡い緑と土色の街並みに。立体の建物が並んでいれば、3Dマップだと伝わりそう。そんな役目を持たせたイラストでした。
9月22日｜おや、そこは隣のビルの中では？
紹介画像をよく見ると、中央の小さな建物が、大きなビルに食い込んで見えます。窓の線も妙につながっていて、街並みというより、建物どうしが満員電車で肩を寄せ合っているような状態に。
地図の中の建物を調べる前に、紹介画像の建物を救出することになりました。なお、今回おかしかったのは紹介用のイラスト。実際の3D地図の建物データとは別の話です。
「建物が重なったりして変なので修正して」
画像を添えて、AIにこう伝えました。
この東京３Dマップの導入画像が建物が重なったりして変なので修正して
修正では、建物を4棟に整理し、それぞれの輪郭の間に余白を取ることに。窓の線も、それぞれの建物の面の中に収めました。淡い緑と土色は残しながら、「仲良く並ぶのはいいけれど、合体はしない」街並みを目指します。
ひとまず、建物にも適切な距離感を。
修正版を確認して、ホーム、作品一覧、制作ノート一覧、マップの解説ページの4か所を差し替えました。色の雰囲気はそのままでも、間隔が整うと、ずいぶん見やすくなります。
今回の発見は、AIに「変だから直して」と伝える入口は短くても、その先でどこが変か、何を残したいかを具体的にすると、修正の方向がはっきりすること。「建物は離す。窓は面の中に。色はそのまま。」という具合です。
作って、眺めて、おかしいところを見つけて、また頼む。AIと一緒に作る時間には、こういう地味で、ちょっと笑える往復もあります。完成画像だけでは消えてしまうので、失敗した街並みもここに残しておきます。
この日記は実際の公開・画像修正のやり取りをもとにしています。引用した依頼文は原文です。比較画像はいずれも紹介用のイメージで、実際の地図画面ではありません。
Behind the scenes
AIと一緒に、公開データを「触れる地図」に。
ChatGPTと制作したこのアプリでは、建物の3DデータそのものをAIで生成しているわけではありません。公開されている都市モデルを読み込み、検索・移動・建物情報の表示をひとつの画面にまとめています。
3つの役割でできています
- 街のデータ：国土交通省のProject PLATEAUをもとに、ESRIジャパンが公開した3D都市モデル。
- 表示と操作：ArcGIS Maps SDK for JavaScript。地図の描画、視点移動、建物の選択を担当します。
- アプリの画面：HTML・CSS・JavaScriptで、日本語の検索や設定、情報パネルを構成しています。
制作では、必要な機能を要件として整理し、住所の入力・検索結果の扱い・属性の欠損表示を確認しました。SDKは動作確認した4.34に固定しています。アプリ本体はoccam.jpから配信し、SDK・背景地図・地形・建物データは外部の公開サービスから読み込みます。
これから試すなら
まずは同じ仕組みで見たい地域の公開データを探し、対象範囲、出典、利用条件、建物の属性を確かめるところから。データが変われば、画面に載せられる情報も変わります。
データと利用環境について
- 対象：東京23区・八王子市南大沢の公開データ収録範囲。東京都全域や、すべての建物を網羅するものではありません。
- 整備時点：公開アイテムの説明には2020年度の記載があります。現在の街並みと異なる場合があり、建物の高さや属性は測量精度を保証しません。
- 検索：入力内容は検索実行時にEsriへ送信します。アプリは検索履歴や検索結果を永続保存しません。検索位置は住所等の候補点で、特定の3D建物を識別した結果とは限りません。
- 環境：インターネット接続とWebGL2に対応したブラウザーが必要です。描画の速さは端末と回線に左右されます。
外部サービスの変更・停止により一部の機能が使えなくなる場合があります。このアプリにログイン・課金設定・計測機能はありません。個人が制作した閲覧用アプリで、国土交通省やESRIジャパンの公式アプリではありません。
出典
原典：国土交通省都市局都市政策課／加工・公開：ESRIジャパン株式会社。背景地図・地形の提供元は、アプリ内のクレジットをご確認ください。