AI にバスの運行情報画面を作らせてみた — 作ったものの検証・否定確認・3回確認 が1画面に揃った回（やってみた #157）
/bus-service-status375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にバスの運行情報画面を作らせてみた — 作ったものの検証・否定確認・3回確認 が1画面に揃った回（やってみた #157）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。バスの利用者向けを厚く（接近#138・高速予約#139・経路#140・乗車券#156 に追加＝事業者向け5 に対し弱い 利用者向けを掘る）——運行情報・遅延運休案内（全体状況・系統別の平常/遅延/運休・お知らせ・経緯・通知）。全モードを通じて未着手だった消費者向けサービスステータス画面。
結果 — 4.5/5、そして このテストの3つの結果が1画面に揃った
tsc 緑・375px mobile-first。予備知識ゼロの AI（群青を一度も触っていない設定）：
予備知識ゼロの採用者が、ほぼ手組みゼロで本物のアクセシブルなサービスステータス画面を組めた。 JSDoc と by-use-case が「運行状況」を繰り返し名指しする＝この業種に異様に狙いを定めている。
この回は このテストの3つの異なる結果が同じ画面で揃った——作ったものの検証・否定確認・新規作成。
①作ったものの検証 — 前回作った SegmentedControl が自力発見・ゼロ摩擦
絞り込み（全系統/遅延運休のみ）——前回 #156 で作った SegmentedControl を、今回の予備知識ゼロの AI は手組みせず自力発見した：
予備知識ゼロの AI「SegmentedControl＝全系統/遅延運休 の絞り込み。size='lg' で h-11(≥44px)・本物の role=radiogroup＋矢印キー。摩擦ゼロ。by-use-case が正しく誘導した（相互排他 2-4 は SegmentedControl・多カテゴリ横スクロールは FilterChips・複数選択は ToggleGroup の決定ルール付き）。」
#156 で作り索引も是正した SegmentedControl が、翌画面で自力発見されゼロ摩擦で使われた＝作ったものが欠落を埋めた証明（#136→#153 の Stringline と同じ）。
②否定確認 — StatusLevel は「欠落ではない」（Badge+icon が答え）
運行レベル（平常→遅延→運休）の色に頼らないインジケータ——StatusLevel を探したくなる。だが予備知識ゼロの AI は欠落ではないと結論した：
予備知識ゼロの AI「StatusLevel/ServiceStatus/StatusPill を grep したが無い。だが by-use-case が『順序づいたレベルは Badge に先頭アイコン＋意味トーンの variant＝色のみに依存しない』と明示し、これが完璧に適合。ここに欠落は感じなかった。」
これは重要な否定確認だ。「無い」ことの確認も地図作りになる（#135 で航空に Stringline が要らないと確認したのと同じ）。StatusLevel(#376) は作成不要＝Badge+icon が既に色に頼らないレベル指標として機能している。このテストは「何を作るべきか」だけでなく「何を作らなくていいか」も教える。
③新規作成 — LineChip が3回目でコンポーネント化
系統番号チップ（渋88 を路線色の箱に）——3回目の手組みだった：
予備知識ゼロの AI「路線チップ/路線バッジのコンポーネントが無い。ListCard の leading の JSDoc は『line chip』を意図と書くのにライブラリは出荷していない。span を手組みした。」
LineChip は #138(11×11 色付き四角)・#140(枠線ピル)・#157(span) で3回手組み＝3回確認。その場で作った：
-
LineChip＝路線の hex ブランド色で塗りつぶし・輝度で文字を黒/白に自動コントラスト（SSR 決定的）・ラベルが意味を担う（色非依存＝色覚多様性/モノクロでも読める）。 - Badge（状態/意味トーン）の識別版＝Badge は意味トーンの variant しか無いが、路線チップは任意の路線ブランド色＋保証されたコントラストが要る。
- ブラウザで暗色 #e60012→白文字・明色 #f5a200/#9acd32(JY)→黒文字を確認＝PR#416（#392 クローズ）。コンポーネント化 18個目。
学び — このテストの出力は3種類あり、1画面で全部出ることがある
#153 で「欠落の2つの閉じ方（①その場で作る ②検証）」と書いた。#157 で3種類目=否定確認が加わり、しかも1画面で全部揃った：
- ①その場で作る（3回確認に到達）＝LineChip。
- ②検証（過去に作ったものの自力発見）＝SegmentedControl。
- ③否定確認（欠落だと思ったが欠落でない＝既存コンポーネントで足りる）＝StatusLevel。
連載が成熟すると、1つのテスト画面がコンポーネントを作り・前のコンポーネントを検証し・作らなくていいものを確定する——地図が同時に3方向へ伸びる。弱い側（利用者向け）はこの3つが全部出やすい＝ストックの3回目を踏み(①)、最近作ったものを使い(②)、既存土台で足りる所を確定する(③)。「利用者向けこそ掘れ」という方針は、この3方向の地図作りを最大化する。
拾った点
- 🟡 Statistic に tone/icon が無い＝重大度カウント（運休を赤＋🚫）を表現できない＝#412 に併記（反転指標と同じ Statistic 拡張軸）。
- ✅ ListCard/Badge+icon/Timeline/Alert/Sheet/PageHeader 全て これのために作られた・色だけに依存しない状態表現が構造的に保証。
今回 src で作ったもの = LineChip（#392→PR#416）。4.5/5・SegmentedControl 検証・StatusLevel 否定確認・LineChip コンポーネント化。
📊 コンポーネント化スコアボード（作成済 18個）
…Gantt(日中モード) / Leaderboard / SegmentedControl / LineChip 進行中：ComparisonTable・Statistic tone/icon(#412)・ValidityTimer(1/3)・ReferralCard
📋 モード進捗 — バスの利用者向け5
- ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅
- 🚌 バス：事業者向け5 ＋ 利用者向け5（接近#138/高速予約#139/経路#140/乗車券#156/運行情報#157） ← あと1枚で 事業者向け5 と対称
- 🚚 トラック：未着手
次回予告（やってみた #158）
- バスの利用者向け 最後の1枚（IC残高・チャージ／定期券 等）で 事業者向け5+利用者向け6 対称＝バス完走、or トラック新モード。※次回までに決める。
試す
- gunjo.jp ／ 路線チップ LineChip（新）／ セグメント切替 SegmentedControl ／ バッジ Badge ／ タイムライン Timeline ／ npm
@gunjo/ui／ GitHub ／ 前回まで #1〜#156 - GunjoUI by UIXHERO
作ったものの検証・否定確認・新規作成が1画面に揃った——このテストは「何を作るべきか」と「何を作らなくていいか」を同時に教える。弱い側を掘るほど、地図は3方向へ伸びる。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。