東京ドーム○個分？「東京ドームなんこ？くん」をつくってみた

— “どこでも大屋根リング”に触発されて、サイズ感を本当に「見える化」する話

Demo:https://mamenari.com/dome/
元ネタ: どこでも大屋根リング https://grandring.hirokiwa.com/

「東京ドーム◯個分」と言われても正直ピンと来ない——。
そこで、実物の“形”のまま地図上に複製・配置して「ほんとのサイズ感」を体感できる小さなツールを作りました。発想の出発点は どこでも大屋根リング。リング（形）を場所に合わせて並べると、言葉より早く“分かる”。この体験を借りつつ、東京ドームの実輪郭（GeoJSON）をベースに、ChatGPT と対話しながら実装を進めました。

何を作ったか

東京ドームの実輪郭を任意の個数だけ複製
グリッド／スパイラル（黄金角）で整然と敷き詰め
赤いピン＝1個目の基準点をドラッグして、場所ごとにサイズ感を比較

スマホ最適化、共有リンク、X（Twitter）投稿にも対応。

使い方

ページを開くと、東京ドームの輪郭と赤ピン（基準点）が表示されます。
スライダーで 「東京ドーム × N」 を変更。
グリッド／スパイラル、間隔、不透明度を好みで調整。
基準点（赤ピン）をドラッグ、または「ベース＝地図中心へ」ボタンで移動。
Xに投稿ボタンで、「東京ドームN個分！」の文言とURLをそのまま共有。

共有URLには ドーム数・配置・カメラ位置に加えて基準点（赤ピンの座標）も保存。開いた相手側でまったく同じ状態が再現されます。

画面のポイント

赤ピン（1個目の基準点）
ドラッグすると群れ全体がスライド。基準点の位置も共有URLに保存されます。

東京ドーム × N（中央バッジ）
画面下中央に大きく表示。スマホでは横幅80%に自動調整して見やすく。

設定パネル
モバイルでは初回2秒後に自動でスライドアウト。左上の「パネルを開く」ボタンで再表示、右下の閉じるで再度隠せます。

実装の話

1. まずは「地図」と「形（東京ドーム）」を用意する

地図は「キャンバス」みたいなものです。
MapLibre という無料ツールに、OpenStreetMap の地図画像を貼って使っています。
東京ドームの形は、紙の設計図みたいなデータ（GeoJSON）として保存しておきます。
この「形の設計図」を地図に置く＝東京ドーム1個を置く、というイメージです。

たとえ：白い紙（地図）に「東京ドームのスタンプ（形）」をポンと押す感じ。

2. 「たくさん並べる」はスタンプをずらして押すだけ

グリッド：タイルの床みたいに、右へ・下へ等間隔でズラす。
スパイラル：ひまわりの種みたいに、137.5°（黄金角）ずつ角度を変えながら、少しずつ外へ広げていく。
こうすると同じ形が重なりにくく、きれいに均等に並びます。

たとえ：スタンプを1回押すごとに、ちょっと回して、ちょっと外側に置く。すると渦巻き状にキレイに広がる。

3. 「赤ピン」は“最初の1個”の置き場所

画面の赤いピンが「最初の1個（1つ目の東京ドーム）」の中心です。
ピンを動かすと、他の全部も一緒にズズッと移動します。
「この街のこの場所で、東京ドーム×Nを置いたらどれくらい？」がすぐ分かります。

たとえ：最初に押すスタンプの場所を決めると、他のスタンプもその位置から計算して並ぶ。

仕上げ：みんなに同じ状態で見てもらう（共有リンク）

スライダーの数（N）、並べ方（グリッド/スパイラル）、赤ピンの場所、地図のズームなどを、URLの最後（#の後ろ）にメモとして付けています。
そのURLを送るだけで、相手の画面でも同じ状態が再現されます。

…/dome/# n=120 & layout=grid & spacing=120 & …
             └─個数      └─並べ方       └─間隔
… & lng=… & lat=… & z=…      ← 見ている場所と拡大率
… & ax=… & ay=…              ← 赤ピン（基準点）の位置

たとえ：お手紙の最後に「何個・どこに・どう並べたか」をメモしておくと、受け取った人も同じ配置で見られる。

つまずきポイントはこう解決

「円を作る関数がない」問題
用意された丸がなかったので、方角を少しずつ変えながら同じ距離に点を打って、ぐるっとつないで自分で円を作りました。
「一部の環境で地図が真っ白」問題
① 読み込み順を整える、② もしライブラリが読めなければ予備の場所（CDN）から読み込む、③ それでもダメならエラーメッセージを出す、という3段構えで安定させました。
「スクショで不安定」問題
画像保存は機能を分けると安定するので、まずは共有リンクに特化。必要なら書き出し専用ページを別で用意します。

使っている道具（名前だけ知っていればOK）

MapLibre GL JS：地図を表示するためのツール
Turf.js：地図の上で「距離を測る」「ちょっと動かす」など計算するための道具
OpenStreetMap：みんなで作っている無料の地図（クレジット表記は必須）

X（Twitter）投稿の仕様

文面：「東京ドームN個分！ #東京ドームなんこくん #まめなり @kk_mamenari」
URL：現在の状態を含む共有リンク（基準点・カメラも復元）

そのまま X の投稿作成画面が開きます。N はスライダーの値に連動。

ライセンス／運用メモ

地図データは OpenStreetMap。ページ内に帰属表記を表示（必須）。
タイルは公共のリソース。アクセスが増える場合は MapTiler 等への移行を検討。
外部ライブラリはバージョン固定＋ローカル同梱で安定運用（CDNはフォールバック扱い）。

おわりに

比喩をほんとうに可視化してみると、「あ、そういうサイズね」が一瞬で伝わる。
建物、イベント敷地、避難計画、観光案内……応用範囲は広そうです。
よければぜひ遊んでみてください。フィードバック歓迎！

Demo: https://mamenari.com/dome/
元ネタ: どこでも大屋根リング https://grandring.hirokiwa.com