#157スコア 4.5/5運輸：バス

AI にバスの運行情報画面を作らせてみた — build 検証・否定確認・3-confirm が1画面に揃った回（やってみた #157）

ルート: /bus-service-status
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI にバスの運行情報画面を作らせてみた — build 検証・否定確認・3-confirm が1画面に揃った回（やってみた #157）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。バス toC を厚く（接近#138・高速予約#139・経路#140・乗車券#156 に追加＝toB5 に対し弱い toC を掘る）——運行情報・遅延運休案内（全体状況・系統別の平常/遅延/運休・お知らせ・経緯・通知）。全モードを通じて未着手だった消費者向けサービスステータス画面。

結果 — 4.5/5、そして cold-test の3つの結果が1画面に揃った

tsc 緑・375px mobile-first。cold AI（群青を一度も触っていない設定）：

文脈ゼロの adopter が、ほぼ手組みゼロで本物のアクセシブルなサービスステータス画面を組めた。 JSDoc と by-use-case が「運行状況」を繰り返し名指しする＝この業種に異様に狙いを定めている。

この回は cold-test の3つの異なる結果が同じ画面で揃った——build 検証・否定確認・新規 build。

①build 検証 — 前回 build した SegmentedControl が自力発見・ゼロ摩擦

絞り込み（全系統/遅延運休のみ）——前回 #156 で build した SegmentedControl を、今回の cold AI は手組みせず自力発見した：

cold AI「SegmentedControl＝全系統/遅延運休 の絞り込み。size='lg' で h-11(≥44px)・本物の role=radiogroup＋矢印キー。zero-friction。by-use-case が正しく誘導した（相互排他 2-4 は SegmentedControl・多カテゴリ横スクロールは FilterChips・複数選択は ToggleGroup の決定ルール付き）。」

#156 で build し索引も是正した SegmentedControl が、翌画面で自力発見されゼロ摩擦で使われた＝build がギャップを埋めた証明（#136→#153 の Stringline と同じ）。

②否定確認 — StatusLevel は「穴ではない」（Badge+icon が答え）

運行レベル（平常→遅延→運休）の色安全インジケータ——StatusLevel を探したくなる。だが cold AI は穴ではないと結論した：

cold AI「StatusLevel/ServiceStatus/StatusPill を grep したが無い。だが by-use-case が『順序づいたレベルは Badge に leading icon＋semantic variant＝色のみに依存しない』と明示し、これが完璧に適合。ここに穴は感じなかった。」

これは重要な否定確認だ。「無い」ことの確認も地図作りになる（#135 で航空に Stringline が要らないと確認したのと同じ）。StatusLevel(#376) は build 不要＝Badge+icon が既に色安全レベル指標として機能している。cold-test は「何を作るべきか」だけでなく「何を作らなくていいか」も教える。

③新規 build — LineChip が3回目で結晶化

系統番号チップ（渋88 を路線色の箱に）——3回目の手組みだった：

cold AI「line chip/route badge primitive が無い。ListCard の leading JSDoc は『line chip』を意図と書くのにキットは出荷していない。span を手組みした。」

LineChip は #138(11×11 色付き四角)・#140(枠線ピル)・#157(span) で3回手組み＝3-confirm。その場で build した：

  • LineChip＝路線の hex ブランド色で塗りつぶし・輝度で文字を黒/白に自動コントラスト（SSR 決定的）・ラベルが意味を担う（色非依存＝色覚多様性/モノクロでも読める）。
  • Badge（状態/意味トーン）の識別版＝Badge は semantic variant しか無いが、路線チップは任意の路線ブランド色＋保証されたコントラストが要る。
  • ブラウザで暗色 #e60012→白文字・明色 #f5a200/#9acd32(JY)→黒文字を確認＝PR#416（#392 クローズ）。結晶化 18個目。

学び — cold-test の出力は3種類あり、1画面で全部出ることがある

#153 で「穴の2つの閉じ方（①build ②検証）」と書いた。#157 で3種類目=否定確認が加わり、しかも1画面で全部揃った：

  1. ①build（3-confirm 到達）＝LineChip。
  2. ②検証（過去 build の自力発見）＝SegmentedControl。
  3. ③否定確認（穴だと思ったが穴でない＝既存部品で足りる）＝StatusLevel。

連載が成熟すると、1つの cold-test 画面が部品を作り・前の部品を検証し・作らなくていいものを確定する——地図が同時に3方向へ伸びる。弱い側（toC）はこの3つが全部出やすい＝在庫の3回目を踏み(①)、最近の build を使い(②)、既存床で足りる所を確定する(③)。KeEem の「toC こそ掘れ」は、この3方向の地図作りを最大化する。

拾った点

  • 🟡 Statistic に tone/icon が無い＝重大度カウント（運休を赤＋🚫）を表現できない＝#412 に併記（inverted-metric と同じ Statistic 拡張軸）。
  • ✅ ListCard/Badge+icon/Timeline/Alert/Sheet/PageHeader 全て built-for-this・色だけに依存しない状態表現が構造的に保証。

今回 src build = LineChip（#392→PR#416）。4.5/5・SegmentedControl 検証・StatusLevel 否定確認・LineChip 結晶化。

📊 結晶化スコアボード（build 済 18個）

…Gantt(intraday) / Leaderboard / SegmentedControl / LineChip 進行中：ComparisonTable・Statistic tone/icon(#412)・ValidityTimer(1/3)・ReferralCard

📋 モード進捗 — バス toC5

  • ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅
  • 🚌 バス：toB5 ＋ toC5（接近#138/高速予約#139/経路#140/乗車券#156/運行情報#157） ← あと1枚で toB5 と対称
  • 🚚 トラック：未着手

次回予告（やってみた #158）

  • バス toC 最後の1枚（IC残高・チャージ／定期券 等）で toB5+toC6 対称＝バス完走、or トラック新モード。※KeEem に確認。

試す

build 検証・否定確認・新規 build が1画面に揃った——cold-test は「何を作るべきか」と「何を作らなくていいか」を同時に教える。弱い側を掘るほど、地図は3方向へ伸びる。

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AlertAlertDescriptionAlertTitleBadgeButtonListCardPageHeaderSegmentedControlSeparatorSheetSheetContentSheetDescriptionSheetHeaderSheetTitleStatGroupSwitchTimelineTimelineDescriptionTimelineItemTimelineTimeTimelineTitle

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。