概要
https://qiita.com/chizutodesign/items/c56126400f205348d0da
詳細内容
## CLIが怖いデザイナーが、AIとの対話だけで「東京メトロの指令所っぽいモニタ」を作った話
https://qiita.com/chizutodesign/items/c56126400f205348d0da
CLIを苦手とするデザイナーが、Web版Claudeとの対話開発のみで複雑な「東京メトロの指令所風モニタ」を完成させ、従来の開発環境なしにAIが視覚的・インタラクティブなWeb開発を可能にする可能性を示しています。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:4/5 | Depth:3/5 | Unique:4/5 | Practical:4/5 | Anti-Hype:4/5
**Main Journal**: 76/100 | **Annex Potential**: 76/100 | **Overall**: 76/100
**Topics**: [[AIチャット開発, Web版Claude, 対話型開発, UI/UXデザイン, デザイナー向けツール]]
CLIを苦手とするデザイナーの著者が、Web版Claudeとの対話開発のみで「東京メトロの指令所風モニタ」を構築した経緯を詳述しています。幼少期の鉄道への情熱と映画『交渉人 真下正義』に登場する巨大モニターへの憧れが原動力となり、AIとオープンデータを用いてこれを具現化することを決意しました。
著者は、`rm -rf /`のようなコマンドへの恐怖からCLI環境を避け、Webブラウザ版Claudeを開発ツールとして選択しました。この選択の理由は、ディレクトリ操作に対する不安がなく、何より頭の中にある漠然としたイメージをAIとの対話を通じて具体化していく「キャッチボール」に適していたからです。「もっと90年代風に」「線の幅を太く」「文字を1px下げて」といった指示を繰り返すことで、綿密な仕様書なしに直感的なデザイン調整が可能でした。
開発は東京メトロのオープンデータ（列車時刻表）から開始。AIに初期のプロトタイプを生成させた後、視覚的な課題に直面します。特に、東西線における快速の追い抜きを正確に再現する際、元のデータに到着時刻がなかったため、各駅停車が葛西駅に到着する前に快速と衝突する（すり抜ける）現象が発生しました。これに対し、著者はAIに「駅間距離から仮の到着時刻を算出し、発車時刻まで待機させる」という解決策を提案し、AIはこれを実装して課題を克服しました。
デザイン面では、快速と各駅のカラーリング調整に加え、YouTube投稿時に文字が小さすぎることに気づき、視認性を高めるための調整を行いました。完成した操作パネルは、あえて最近のフラットデザインではなく、物理的なスイッチや業務用システムのような90年代〜00年代風のデザインを採用し、レトロと実用性を両立させています。また、当初API経由で読み込んでいた時刻データを、セキュリティ上の懸念からAIに相談してローカルJSONファイル読み込み形式に変更するなど、セキュリティへの配慮も実践しました。
著者は、コードの美しさよりも「指令所の画面らしさ」を追求した結果、単一HTMLファイルにCSSやJSを詰め込む形になったと正直に述べています。そして、この経験から「ツールなんて何でもいい」と結論づけ、複雑な開発環境がなくても、強い思いとAIがあればデザイナーやコーディング知識のない人でも「作りたいもの」を具現化できる時代になったと、他のクリエイターにWeb版AIとの対話開発を推奨しています。