どの街にも、ゲームが隠れている。
地下鉄路線図の視覚言語を、増え続ける短い街ゲームのコレクションへ変える方法。アイデンティティ、言葉、色、書体、ものづくりをまとめた、更新され続けるガイドです。
ひとつのゲームではなく、コレクション。
このアイデンティティは地下鉄路線図と同じ緊張感から始まります。厳密な構造、瞬時の認識、そして複雑な街を親しみやすくするのに十分な色です。
色も路線のように振る舞う。
6色の鮮やかなインクが、固定されたひとつのエディトリアル・スペクトラムを作ります。実在する交通路線の公式色を置き換えることなく、路線図のようにコレクションを整理します。
ネットワーク・ブルー
Explorer とナビゲーション
#0065BDシグナル・ブルー
Signal Hunt と探索
#00ADD0ステーション・マゼンタ
Name the Station
#DA39AFコネクション・オレンジ
Last Connection と緊迫感
#FF6319プログレス・イエロー
Network Cascade と進行
#F0AB00プレイ・グリーン
Drop と配置
#00AF3F
色はプロダクトのどこにいるかを伝え、インクは何をすべきかを伝えます。実在する路線を表すとき、交通事業者の公式色は決して変えません。
ひとつの声、いくつもの速度。
ひとつのグロテスク書体が、エディトリアルな見出しと実用的な画面テキストの両方を担います。等幅書体は、値が本当にデータであるときだけ現れます。
Aa 東京
路線をたどる。終電をつかまえる。
08:42
メカニクスごとに、ひとつの路線。
マスターブランドは変えず、それぞれのゲームにひとつのエディトリアルカラーと固有の動詞を与えます。色が認識を、メカニクスが個性を作ります。
Explorer
すべてのゲームの背景にある本当の地図を読みます。
Name the Station
周りの路線網から、隠された駅を見つけます。
Drop
駅名と乗り入れ路線だけを頼りに、駅を地図へ置きます。
Last Connection
終電が出る前に、成立するルートをたどります。
Signal Hunt
わずかな信号をたどり、正しい駅へ近づきます。
Network Cascade
ひとつの乱れが路線網へ波及する様子を追います。
ひとつの地図。いくつものゲーム。
画面は、長いルートの終着点です。公式データから変更不可の都市世界を作り、その世界が複数のゲームメカニクスを支え、それぞれのメカニクスが同じ路線網の別の読み方を見せます。
実在の路線網を集める
情報源とライセンスを記録した、交通事業者や行政の公式データから始めます。
都市世界を固定する
バージョン化された変更不可の世界が、すべてのゲームを公平で再現可能、かつ出典明記されたものにします。
メカニクスを設計する
それぞれのゲームが、同じ駅・路線・乗換にまったく違う問いを投げかけます。
街へ戻る
地図、都市ページ、駅の物語が、すべての答えを実在する場所へ戻します。
ひとつにつながったシステム
型安全な技術スタックにより、ソースデータから画面までのルートを明確に保ちます。テクノロジーは静かに、街とメカニクスが主役です。
- TanStack Start
- SSR、ルーティング、React のプロダクト画面。
- PostgreSQL + Drizzle
- バージョン化された都市世界と永続的なゲーム状態。
- oRPC + TanStack Query
- サーバー処理から画面まで、ひとつの型付き契約。
- MapLibre GL
- 実在の路線網をレスポンシブでインタラクティブな地図に描画。
さあ、路線網を走ってみよう。
ガイドは、実際のプロダクトにその感触があってこそ意味を持ちます。路線をたどり、街を読み、この仕組みが動くところを見てください。