どの街にも、ゲームが隠れている。
地下鉄路線図の視覚言語を、増え続ける短い街ゲームのコレクションへ変える方法。アイデンティティ、言葉、色、書体、ものづくりをまとめた、更新され続けるガイドです。
アイデンティティ
カラー
タイポグラフィ
ゲームの世界
つくりかた
AI との仕事
ひとつのゲームではなく、コレクション。
このアイデンティティは地下鉄路線図と同じ緊張感から始まります。厳密な構造、瞬時の認識、そして複雑な街を親しみやすくするのに十分な色です。
色も路線のように振る舞う。
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
ひとつの乱れが路線網へ波及する様子を追います。
ひとつの地図。いくつものゲーム。
画面は、長いルートの終着点です。公式データから変更不可の都市世界を作り、その世界が複数のゲームメカニクスを支え、それぞれのメカニクスが同じ路線網の別の読み方を見せます。
- 01
実在の路線網を集める
情報源とライセンスを記録した、交通事業者や行政の公式データから始めます。
- 02
都市世界を固定する
バージョン化された変更不可の世界が、すべてのゲームを公平で再現可能、かつ出典明記されたものにします。
- 03
メカニクスを設計する
それぞれのゲームが、同じ駅・路線・乗換にまったく違う問いを投げかけます。
- 04
街へ戻る
地図、都市ページ、駅の物語が、すべての答えを実在する場所へ戻します。
ひとつにつながったシステム
型安全な技術スタックにより、ソースデータから画面までのルートを明確に保ちます。テクノロジーは静かに、街とメカニクスが主役です。
- TanStack Start
- SSR、ルーティング、React のプロダクト画面。
- PostgreSQL + Drizzle
- バージョン化された都市世界と永続的なゲーム状態。
- oRPC + TanStack Query
- サーバー処理から画面まで、ひとつの型付き契約。
- MapLibre GL
- 実在の路線網をレスポンシブでインタラクティブな地図に描画。
AI でコードを書く。雰囲気では書かない。
AI は同じ工房にいる道具です。下書きをつくり、整え、見落としを拾います。それでも仕事はエンジニアリングのまま。まず意図を書き、型で契約を結び、マージ前に人がすべての行を読みます。
- 01
指示より先に意図
機能はまず意図を書くことから始まります。データの出典、状態、例外まで書いてから、最初のプロンプトへ。
- 02
型が審判
厳格な TypeScript、境界ごとの Zod、サーバー処理から画面までひとつの型付き契約。間違った推測はコンパイルを通りません。
- 03
差分はすべて読む
人によるレビュー、チェック一式、通るビルド、受け入れテスト。四つの関門に例外はありません。
- 04
街は生成しない
モデルが手伝うのは道具づくりまで。駅、路線、時刻表は交通事業者の公式データから取り、出典とライセンスを記録します。
画面が良さそうに見えるまで指示を繰り返す。
意図を書いてから、それに沿って指示する。
誰も読んでいないコードを出す。
マージ前に差分をすべて読む。
足りないデータをモデルに埋めさせる。
すべての値を公式の出典に結びつける。
エラーが静かになるまで対症療法を重ねる。
原因を直し、見つけてくれたチェックを残す。
- 01
問題を定義する
人が問題を調べ、関係者と話し、PRD を書きます。成果、制約、リスク、完了の定義を明確にします。
- 02
解決策を設計する
人が PRD をプロダクトと UX の判断、受け入れ基準、データの契約、そしてコードを書く前に検討できるアーキテクチャへと落とし込みます。
- 03
AI を道具として使う
Claude Code と Codex はコードベースの探索、限定したタスクの実装、リファクタリングや選択肢の提案、チェックの洗い出しを助けます。出力は作業ブランチ上の提案のままです。
- 04
検証して決める
人が差分をレビューし、チェックを実行し、プロダクトとしての判断をもって体験をテストし、PRD と照合してリリースを決めます。
Claude Code と Codex は実装のための道具であり、プロダクトの作者ではありません。調査、方向づけ、データの編集、プロダクトと UX の判断、トレードオフの評価、体験のテスト、プレイヤーに届けられるかの決定を行うのは人です。
AI が上げるのは速度で、当て推量への寛容さではありません。モデルが自信ありげだったから、という理由でプレイヤーに届くものはありません。
さあ、路線網を走ってみよう。
ガイドは、実際のプロダクトにその感触があってこそ意味を持ちます。路線をたどり、街を読み、この仕組みが動くところを見てください。