実在する東京・墨田区の夜の街を、紙ひこうきがビルをよけながらずっと飛び続ける。それをただ眺めるためのブラウザアプリ「スカイツリー空中散策」を作りました。舞台の街並みは、国土交通省が公開している3D都市モデル「PLATEAU（プラトー）」の実データです。
国の3D都市モデルは、まだ「見て楽しむ」入口がほとんどない
PLATEAU は、日本の都市の建物や道路を立体のデータにして、誰でも使えるように公開しているプロジェクトです。墨田区についても2025年度のデータが公開されていて、建物一棟一棟の形と高さまで手に入ります。
ただ、これを一般の人が「見て楽しむ」場面は、ほとんどありません。地図の業界の方に話を聞いたところ、活用はまだ進んでおらず、国の取り組み頼みになっている現状もあるそうです。不動産の業界の方からは、ハザードマップのように、人に見てもらう資料として使えそうだという意見をもらいました。
どちらも真っ当な使い道です。一方で、せっかく実在の街がまるごと立体で手に入るのなら、もっと気軽に眺められる使い方があってもいいはずです。
実在の街の上を、紙ひこうきで遊覧する
そこで作ったのが、このアプリです。
タイトル画面でクリックすると、ビルの屋上にある発射台から紙ひこうきが飛び出します。あとは何もしなくても、紙ひこうきが自分でビルをよけながら、終わりなく飛び続けます。
飛び方は単調ではありません。道路の上すれすれを街灯のあいだを縫うように進んだかと思えば、屋上の少し上を巡航し、高く上がって街を見渡し、ときどきスカイツリーの展望台の高さまで上がって塔のまわりを回ってから、また街へ戻ってきます。
見る角度も、後ろから追いかける視点、少し離れた視点、まわりを回り込む視点、通り過ぎるのを定点で見送る視点、機内から前を見る視点の5種類があり、20〜30秒ごとに自動で切り替わります。音楽も流れるので、作業の合間につけておいて、ぼんやり眺めることができます。
ポイントは「実在の」街だということです。画面に映るのは架空の都市ではなく、実際の墨田区の建物の配置と高さです。見覚えのある通りや川沿いを、紙ひこうきの高さから眺めることになります。
インストール不要、ブラウザで開くだけ
3D都市モデルのデータは、そのままでは専門のソフトで扱う形式です。このアプリでは、それを変換して画面の部品と一緒にまとめ、ブラウザでページを開くだけで動くようにしました。アプリのインストールも、専用の環境もいりません。
見てもらいたい相手には、URLを送るだけで済みます。相手のパソコンのブラウザで、同じ街の同じ夜景がそのまま動きます。専用のソフトを入れてもらう手間がないので、説明会や打ち合わせの場で資料の代わりに開いて見せる、といった使い方も考えられます。
夜の空や雲、屋上のコンクリート、路面のアスファルトには、海外で無料公開されている写真素材を使っています。濡れた路面に街灯が映り込む表現なども加え、「データを表示した画面」ではなく「夜景」に見えるところまで仕上げました。
最初からこの形を目指していたわけではない
実はこのアプリ、最初は全く別のものでした。
始まりは「何か面白いゲームを作れないかな」という単純な思いつきです。動いているメーターをタイミングよく止める「目押し」の操作で、紙飛行機の角度や強さを決めて飛ばすゲームができました。これが思いのほか面白かったので、背景を付けて見た目を強化しました。
次に、オープンデータでもっと背景を良くできないかと調べ、海外の素材で空や月、ビルをリアルにしました。さらに欲張って、国土交通省の3D都市モデルを背景にできないか試したところ、実際にできてしまいました。
そうして遊んでいるうちに、紙飛行機がずっと飛んでいるのをぼーっと眺めていると、なんだか癒されることに気づきました。元のゲームは、やがて失速して落ち、飛距離と滞空時間が表示されて終わるものでした。そこで、落ちずにずっと飛び続けるアプリに作り替えました。最後に、知人から「音楽があった方がいい」と言われ、音楽生成AIの Suno で曲を作って組み込んだのが、現在の版です。
最初に完成形を決めて作ったのではなく、触れるものを作っては「こっちの方が面白い」と方向を変えてきた結果です。形にしてみて初めて分かることは多く、それを素直に次の改良につなげました。
眺めていて心地よくするための割り切り
眺めるためのアプリなので、正確さより見ていて気持ちいいことを優先した部分があります。
一つは飛び方です。本物の紙飛行機のように空気の力で計算すると、低空でビルの谷間を抜けたり、スカイツリーの高さまで上がったりすることはできません。そこで、物理の計算はあえて使わず、位置と速さだけで動かしています。現実にはありえない急上昇も許しています。高さや速さは設定ファイルにまとめてあり、数字を変えるだけで飛び方を調整できます。
lowAlt: 3.5, // 低空飛行（道路の上）の高さ
cruiseAlt: [25, 60], // 巡航の高さ（この範囲からランダム）
highAlt: [120, 220], // 高空散歩の高さ
towerAlt: [330, 470], // スカイツリー周回の高さ（展望台 350m・450m あたり）
// …（中略）…
maxClimb: 22, // 最大上昇速度（物理的にはありえない急上昇もあり）
もう一つは機内からの視点です。紙飛行機の傾きをそのまま画面に反映すると、見ている人が酔いやすくなります。そこで、傾きは6割だけ反映するようにしました。
データが「眺める夜景」に変わった
このアプリで変わったのは、3D都市モデルの見え方です。資料として確認するためのデータが、つけっぱなしにしてぼんやり眺める夜景になりました。
ハザードマップのような真面目な活用はもちろん大切です。そのうえで、こんな一風変わった使い方があっても面白いのではないかと考えています。公開データは、使い方を思いつけば、思った以上にいろいろな形にできます。
実際に飛ばしてみてください
ダウンロードでの配布はしていませんが、公開ページでその場で体験できます。
- 公開ページ：https://games.systemengineer-yousystem.jp/arcade/games/skytree/
- 推奨ブラウザ：Chrome / Edge（インストールは不要です）
- 始め方：タイトル画面でクリックすると発進します。あとは眺めるだけです
- ちょっとした操作：クリックで視点の切り替え、T キーでスカイツリーへ、M キーで音楽のオン・オフ
「こんなことができるんだ」「これができるなら、あれもできないかな」と思っていただけたら、それがこのアプリを作ったいちばんの甲斐です。公開データを使った見せ方や、少し変わった発想のアプリなど、こういうものも作れます。気になるアイデアがあれば、お気軽にご相談ください。
3D都市モデル：国土交通省 PLATEAU（墨田区 2025年度）を加工して作成（CC BY 4.0）
夜空・コンクリート・アスファルトの写真素材：Poly Haven（CC0）
BGM：「Terra Sancta」（Suno で制作）
使用技術: JavaScript, Three.js, WebGL, PLATEAU, 3D都市モデル, オープンデータ, Poly Haven, Python, Node.js, Suno