はじめに
CLIの黒や白の画面が怖い私が、Web版Claudeとの対話だけでこちらを作りました。
なぜ、可視化したいのか
小学生の頃の私は、発足当時の東京メトロのスタンプラリーを一日乗車券片手に友人と全駅を制覇するような「鉄道少年」でした（年齢がばれる！）。
また、当時観た『踊る大捜査線』シリーズのスピンオフ『交渉人 真下正義』。そこで目にした「地下鉄の総合指令所の巨大モニター」に心を奪われたのを覚えています。
大人になるにつれ、世間の目が気になったのもあって鉄道趣味とは少し距離ができていたのですが（それでも路線図はずっと好きでした）、最近になってNETFLIX版『新幹線大爆破』を観て、あの頃の記憶がふと蘇りました。
「今ならデータもあるし、AIもある。あのモニターを自分の手元で再現できるんじゃないか？」
そう気づいた休日、AIくんとの長い長い対話が始まったのです。
（ちなみに後日、完成したものを会社の朝会ネタで話したら、メンバーに「TID（運行情報表示装置）という名前である」ことを教えてもらいました。知らなかった！）
なぜ、対話開発なのか
世間ではClaude Codeなど、コマンドライン（CLI）で動くAIが流行っていますよね（たぶん）。
でも、私は「コマンドラインの黒い画面（もしくは白い）」が怖くて使えません。
間違えてrm -rf /みたいなコマンドを打ってしまったら…？ 文字情報だけで、自分のPCのディレクトリの中で色々操作できてしまうのも不安です（個人の感想です）。
そんなわけで「Webブラウザ版のClaude」を選びました。
これならただのAIチャットです。いちいち出力されるhtmlを保存してぇ…開いてぇ…という手間はありますが、ディレクトリの中でカサカサされないという絶対的な安心感はあります。
それに、私がやりたかったのは最初から綿密な仕様書を作って…ではなく「頭の中にあるぼんやりとしたものの具現化」でした。
「もっと90年代っぽいデザインに」「ここの線の幅を少し太く」「文字を1px下げて」
こういう指示を出して、返ってきた画面を見て、「もうちょっと変えたいです」と返す（AIの反乱に備えて常に敬語で媚を売っておく）。この「対話のキャッチボール（ドッジボール？）」をするには、CLIよりも使い慣れたチャット画面の方がAIくんと話せる気がしたのです。
（ちなみに、食わず嫌いも良くないと思って、後から「Claude Code」も試してみました。確かに、いちいちhtmlを保存せずに開発環境で見られるのは楽！……ですが、スクショを貼って相談したり、画像を見ながらチャットする、というのはWeb版が優れていて、自分の性分に合っているかなあと思いました。）
どうやって対話したか
ここからは、実際にAIくんとどう対話のキャッチボール（ドッジボール）をしたかということをお見せします。150回近くやったのですが、さすがに全部お見せすると大変な量になってしまうので、ダイジェストでお送りします。
↑Web版AIによる対話開発の弊害。v35が89まである…🥺
ROUND 1：最初が肝心
さっそく作ろう！と思い立って、東京メトロのオープンデータを調べてみると、列車時刻表が公開されていたのでこれを使います。
東京メトロ - 公共交通オープンデータセンター
実際の指示がこちら。
この指示を受けて、さっそくAIくんが一晩…じゃなくて一瞬でやってくれました。
なんかそれっぽい！AIくんすごい！
ここから何回かの対話を重ね、区間ごとに分けてみたり…
ドットで表現したりしてみました。15年ぐらい前、ニコニコ動画で稚拙なコメントアスキーアートを作ってたのを思い出す
ROUND 2：快速の追い抜きを再現せよ！
何十回かの対話を重ね、見た目的にはだいぶいい感じになったのですが、ある問題が発生していることに気づきました。
通勤通学で10年以上使っていた愛憎のある東西線（当時は全国一位の混雑率で、通学中によく気分が悪くなって必死で耐えていた思い出）。地下鉄でありながら半分近くが地上区間で、快速運転を実施しているという珍しい路線です。
その快速は主に「葛西」という駅で停車中の各駅停車を追い抜きますが、うまく再現できてないことがあるのです。
本来ならば葛西駅にて待避中で、快速通過後に発車する各駅停車が…
（ゆっくり走っているのが各駅で、左から迫るのが快速）
くお〜！！ ぶつかる〜！！
ということが起きてしまっているのです。
原因は、元の列車時刻データにありました。
葛西駅の発車時刻のみ存在し、到着時刻のデータが存在しなかったのです。発車時刻をもとに計算してしまうと、各駅停車が葛西駅にたどり着くまでゆっくりと移動するため、手前で快速が追いついてぶつかって（すり抜けて）しまうわけです。
そこで、AIくんに「駅間距離からあらかじめ仮の到着時刻を算出（とにかく先に葛西駅へ到着するように）し、発車時刻まで発車させないという形を取らせるのはどうか？」と頼んで調整してもらいました。
無事、快速が通過した後に各駅停車が発車するようになりました。
ROUND 3：もっと見やすく！
快速と各駅の色分けをするなどの細かいデザインを調整して、さらに動画をキャプチャしてXやThreadsに投稿して承認欲求を満たしてみたり。
ありがたいことに、「もっと動画を見たい！」というコメントも頂きました。
そこで、YouTubeチャンネルを作成してYouTuberデビューし、美少女アバターになって画面の右下でゆらゆら揺れるやつでもやろうかと思ったところ、あることに気がつきました。
字が小さすぎて読めなぁぁぁい！（←古い）
PC画面では気づかなかったのですが、YouTubeの画面、さらにはスマホの画面で観ることを考えると文字をかなり大きくする必要があります。
こうしてデザインの調整を行い、さらにYouTubeに投稿しました！
チャンネル登録と高評価ボタンをお願いします
完全公開！これがコードの中身だ
動画だけで終わらせるのはもったいないので、ウェブ公開することにしました。
↑下のボタンで再生速度を変えたり、特定の時間にジャンプすることも可能！
ちなみに、こちらの操作パネルも実はこだわりポイントです。最近のWebのようなフラットデザインではなく、あえて「物理的なスイッチ」や「業務用システム」のようなデザインにしました。業務用システムではこういった90〜00年代っぽいデザインが残っているようで…一周回って最先端なのかもしれませんね！
また、コードを見ればわかるのですが、ほぼhtmlファイル１つに詰め込んでいます！
（当初、時刻データを直接読みに行っていたのですが、APIキーを公開するわけにはいかないのと、頻繁に変わるものではないのでAIくんに頼んでローカルに落としたJSONファイルを読み込む形式に変えました。こういうセキュリティへの配慮も、相談すればちゃんと答えてくれるのが頼もしいですね。）
htmlファイルにcssやらjsやら様々なものが入っているわけですが、１つにパッケージ化されているところが長所であり短所でもあります。
エンジニアの方々からすれば、なんだこの汚いコードは！と思われるかもしれません。ただ、デザイナーの自分にとっては、コードの美しさよりも「いかに指令所の画面っぽく再現できるか」という一点に全集中したかったです。
もちろんクライアントワークなら全く別ですが、個人の趣味のレベルとしては、自分は十二分に満足しています。
ツールなんて、何でもいい（趣味レベルなら）
コードエディタ、環境構築、開発環境…自分は今でも黒い画面は苦手で、滅多に触ることはありません。
これらの複雑な環境を用意せずとも、作りたいという強い思いと執着さえあれば、自分のような知識のない人間でも作ることができる時代になりました。
特にデザイナーやコードの知識がないみなさん、ぜひWeb版AIと対話開発してみるのはいかがでしょうか？
そして気に入れば、CLIなどを使うのもいいかもしれませんね！
出典・謝辞
使った技術
- 公共交通オープンデータセンター（ODPT） 東京メトロ 列車時刻表
- HTML/CSS/Javascript（単一ファイル）
- Cloudflare Pages（ホスティング）
- Claude（Web版）での対話開発