Yamanote 3D Diorama

運営者情報・お問い合わせ

プロジェクト概要

「山手線 3Dジオラマ」は、ブラウザだけでリアルな鉄道模型の運転体験を楽しめる無料のWebシミュレーターです。国土交通省が公開する3D都市モデル「PLATEAU」や、オープンソースの地図ライブラリ「MapLibre GL JS」を活用し、東京の街並みを立体的に再現しています。

インストール不要で、PC・スマートフォンのブラウザからアクセスするだけで遊べます。鉄道ファンやNゲージ愛好家はもちろん、Web技術に興味がある方にも楽しんでいただけるよう開発を続けています。

コンセプトは「デスクの上に広がる等身大のNゲージ」。写実的なリアルさではなく、あえて鉄道模型特有の「作り物っぽさ」や「ミニチュア感」を大切に、色味やライティング、スケール感を調整しています。シミュレーターはブラウザ完結で、サーバー側にデータを一切送りません。つまりどれだけ遊んでも個人情報が外部に記録されることはありません。

開発にかける想い

このプロジェクトは、もともと「自分が欲しかったものを作る」という動機から始まりました。

子どもの頃、実家でNゲージのレイアウトを組み立てて夢中になっていた時期があり、大人になってから「あの頃の感覚をもう一度、それも場所を取らずに楽しめないか？」と考えたのがきっかけです。市販のシミュレーターは素晴らしいものが多い一方、専用ソフトのインストールが必要だったり、PCスペックが高くないと動かなかったりで、気軽に遊ぶにはハードルが高い。「ブラウザを開くだけで、スマホからでもすぐ電車を走らせられる」。そんなゆるい体験を目指しました。

また、開発者目線としては、近年ブラウザで表現できる3D技術のレベルが飛躍的に上がっており、それを活用したプロダクトを作ってみたい、という技術的な好奇心も大きな動機でした。この開発の過程で得た知見は、技術ブログとして順次公開しています。

開発ヒストリー

本シミュレーターがどのような流れで今の形に辿り着いたか、主な出来事を時系列でまとめました。

  • 2025.09 プロトタイプ着手。当初は Mapbox GL JS + deck.gl で検証。
  • 2025.10 地図ライブラリを MapLibre GL JS に切り替え。ライセンス的な自由度と WebGL カスタムレイヤーの扱いやすさを優先。
  • 2025.11 PLATEAU LOD2 モデルで描画実験 → ブラウザがクラッシュ。軽量化の長い旅が始まる。
  • 2025.12 独自の線路データ（LUT：Look Up Table）方式を考案。走行アニメーションの滑らかさが劇的に向上。
  • 2026.01 山手線 E235 系モデル完成。S3 + CloudFront で一般公開。
  • 2026.02 スマホ向けマスコン UI を全面リニューアル。フィードバックを反映。
  • 2026.03 カメラ追従（おいかけモード）実装。音声エンジンの刷新。
  • 2026.04 技術ブログ連載開始。開発ノウハウの外部公開を本格化。

運営者プロフィール

ハンドルネーム：Tanukinmugi（たぬきんむぎ）

バックグラウンド：Web エンジニア歴 10 年以上。普段は業務系 Web アプリケーションの開発に従事しており、フロントエンド（TypeScript / React）とバックエンド（Node.js / Go）の両方を扱います。地理空間情報（GIS）と 3D グラフィックスは趣味の領域として長年触り続けています。

得意分野：WebGL、地図ライブラリ（MapLibre / Mapbox GL JS）、Three.js、パフォーマンスチューニング、AWS インフラ（S3 / CloudFront / Lambda）。

鉄道歴：小学校低学年から鉄道模型（Nゲージ）を触り始める。実車の運転は未経験ですが、運転シミュレーターと時刻表を眺める時間がライフワーク。好きな路線は山手線と中央線快速。

このサイトのスタンス：個人開発の趣味プロジェクトです。収益目的ではなく、「作って公開して、似た興味を持つ誰かの役に立てば嬉しい」くらいの気持ちで運営しています。実装の詳細は惜しみなく技術ブログで公開しています。

編集方針・コンテンツ作成プロセス

本サイトの技術ブログは、実際のシミュレーター開発で発生した課題・解決・失敗の一次情報を中心に構成しています。記事は外部記事の要約や情報集約ではなく、自身が手を動かして検証した結果に基づいて執筆しており、再現可能なコードスニペットや具体的な数値（処理時間・ファイルサイズ・FPSなど）を可能な限り掲載することを心がけています。

記事の作成にあたっては、以下の手順を踏んでいます。

  1. 実装・検証：シミュレーター本体に組み込むか、ローカルの最小再現コードで挙動を確認します。
  2. 計測：ベンチマークが必要な場合は、Chrome DevTools の Performance タブや lighthouse などで具体的な数値を取得します。
  3. 下書き：得られた知見を時系列・因果関係に沿って整理し、つまずいた点・回避策・トレードオフを明示します。
  4. 事実確認：公式ドキュメント、GitHub Issue、信頼できるソース（MDN、各種仕様書など）と突き合わせ、解釈に誤りがないかを確認します。
  5. 推敲・公開：見出し構造・コード例の整形・引用元の明記を行い、公開します。

記事公開後に内容の誤り・不正確な記述に気づいた場合は、本文末尾に「追記」「訂正」の形で明記の上、内容を更新します。重要な訂正がある場合は お知らせページ でも告知します。

情報の正確性について

本サイトに掲載している情報は、執筆時点の動作環境・ライブラリバージョンに基づくものです。Web 技術はバージョン更新が早いため、記事公開から時間が経過した内容については、最新の公式ドキュメント等もあわせてご確認ください。

また、本サイトは個人開発者による技術情報の共有を目的とした非商用プロジェクトです。記事内のコードや設定値は、可能な限り検証した上で掲載していますが、ご自身の環境への適用にあたっては、必ず内容をご確認の上、自己責任にてご利用ください。記事の内容を利用したことによって発生した損害について、運営者は一切の責任を負いかねます。

事実関係に誤りがある場合や、より良い実装方法のご提案がありましたら、contact@mini-trains.com までお気軽にご連絡ください。建設的なご指摘は、記事の改善に積極的に反映いたします。

運営者情報

サイト名 山手線 3Dジオラマ（Yamanote 3D Diorama）
URL https://mini-trains.com
運営者 Tanukinmugi（個人開発）
開設日 2026年1月
コンテンツ 3D鉄道模型シミュレーター、開発技術ブログ

使用技術

本サイトは以下のオープンソース技術およびデータを活用して構築されています。

  • MapLibre GL JS
  • Three.js
  • Turf.js
  • WebGL
  • PLATEAU（国土交通省 3D都市モデル）
  • Amazon S3
  • Amazon CloudFront

クレジット・データ出典

※ 本サイトはJR東日本とは一切関係のない個人開発プロジェクトです。車両デザイン等は実車を参考にした創作物です。

よくあるご質問（FAQ）

Q. プレイに料金はかかりますか？

A. 完全無料でお楽しみいただけます。会員登録なども必要ありません。通信料のみお客様のご負担となります。3D モデル・テクスチャを読み込む初回アクセス時に数 MB 程度の通信が発生します。Wi-Fi 環境でのプレイを推奨します。

Q. 動作が重いのですが、どうすればいいですか？

A. お使いの端末・ブラウザによっては描画負荷が高くなることがあります。まずはタブを再読み込みし、他のタブを閉じてからお試しください。古いスマートフォンや統合型 GPU の PC では、ズームレベルを下げて都市モデルの描画範囲を狭くすると改善することがあります。詳細は技術ブログ「スマホで CPU が 100% になった話」にも記載しています。

Q. 対応ブラウザを教えてください。

A. 最新版の Google Chrome / Microsoft Edge / Safari / Firefox での動作を想定しています。WebGL 2.0 に対応していないブラウザや、旧バージョンでは正常に動作しないことがあります。iOS Safari は 15 以降、Android Chrome は 110 以降を推奨します。

Q. 画面上の車両や路線は実在のものと同じですか？

A. 山手線の路線形状は OpenStreetMap のデータをベースにしていますが、駅位置や線形は一部簡略化しています。車両デザインは実車（E235 系）を参考にした創作物で、ロゴやマーキング等は使用しておりません。本サイトは JR 東日本および鉄道事業者とは一切関係のない、個人開発の二次的創作プロジェクトです。

Q. コードはオープンソースで公開されていますか？

A. 現時点では全コードの公開はしていませんが、実装上のポイントは技術ブログで可能な限り詳しく解説しています。部分的なコード断片の再利用や、記事の引用は許諾なくご自由にどうぞ（出典リンクを貼っていただけると嬉しいです）。

Q. 不具合を見つけたらどうすればいいですか？

A. お問い合わせフォーム（下記メールアドレス）までご連絡ください。報告いただける際は「お使いの端末」「ブラウザとバージョン」「発生した現象」「再現手順」をご記載いただけると、調査がスムーズに進みます。

Q. 新路線や新機能の追加予定はありますか？

A. 現時点では山手線のみですが、今後は中央線快速、京浜東北線など、並走する路線の追加を検討しています。また、ダイヤ機能や時間帯演出（夜景モード）なども構想段階にあります。開発状況はお知らせページで随時ご報告します。

お問い合わせ

本サイトに関するお問い合わせ、不具合報告、ご意見・ご要望は、以下のメールアドレスまでお気軽にご連絡ください。取材、コラボレーションのご相談なども歓迎します。

メール: contact@mini-trains.com

※ 返信までにお時間をいただく場合がございます。個人運営のため、ご了承ください。
※ 営業・勧誘目的のご連絡にはご返信いたしかねます。

公式X: @wota_gimu — 開発状況・アップデート・新機能告知などを発信しています。フォローしていただけると励みになります。