AI にバスの接近案内を作らせてみた — モバイル消費者土台が3モード目でも丸ごと効いた（やってみた #138）
/bus-approach375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にバスの接近案内を作らせてみた — モバイル消費者土台が3モード目でも丸ごと効いた（やってみた #138）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。バスの利用者向け（運行管理・配車に続くバス消費者側）——接近案内・乗車（渋谷駅前・あと○分・系統選択・運賃・IC）。
結果 — 4/5、モバイル消費者土台が3モード目でも丸ごと効いた
tsc 緑・375px mobile-first。予備知識ゼロの AI（群青を一度も触っていない設定）：
事務方からの後付けでなく、最初から消費者向けモバイルのために設計されている。 6つの土台が全部このために作られたようにぴったり：
PageHeader(アプリバー)・ListCard(接近案内の行=ライブラリで最良のコンポーネント・1:1)・FilterChips(系統/方面)・LoyaltySummaryCard(IC残高の大きな見出し)・TicketStub(一日乗車券 QR)・AmountBreakdown(運賃)。ListCard の深刻度の帯＋選択リングで『まもなく到着』を CSS 無しで目立たせられた。
鉄道の利用者向け・航空の利用者向けで固めたモバイル消費者の土台が、バスという3モード目の消費者でもほぼ手組みゼロ。利用者向けの業界を越える地力テスト、3モード目も合格。
観測の核1 — #380 で直した PageHeader のバグが、効いていた
#129 で見つけ #380 で直した「PageHeader の leading と onBack を両方渡すと、戻るボタンが黙って消える」ハマりどころ——それが #138 で：
予備知識ゼロの AI「PageHeader の doc は、直したハマりどころを明記している＝onBack と leading を両方渡すと以前はハンドラを落としたが、今は両方描画する。 誤解を招く prop には一つも当たらなかった。」
修正が src だけでなく docstring にも残り、9回後の予備知識ゼロの AI がそれを『直っている』と確認した。 バグ修正は、コードと文書の両方に痕跡を残してこそ「業界を越えて効く」。
観測の核2 — StatusLevel 2回目＝もう2/3
車内混雑（空いています／やや混雑／混雑）を、予備知識ゼロの AI がまた手組みした（CrowdingBadge ~25行・Badge＋人数アイコン）。#127（ラウンジ混雑）に続き2回目（2/3）。 同じ仕様・同じ筆頭評価：
「段階的なステータス/レベル/深刻度のピルのコンポーネントが無い。Badge で包んだが——混雑/在庫/鮮度/信号のレベル が要る採用者は全員、この同じ囲みを作り直す。
StatusLevel/QualitativeStatus（順序づいたレベル→トーン+アイコン+色に安全なラベル）が、追加すべき唯一で最大のもの。」
しかも索引のバグも発見：
「❌ 混雑→
HeatmapChart。間違い＝あれは読み取り専用の強度のグリッドで、項目ごとの3段階のピルじゃない。索引に従う予備知識ゼロの開発者は、間違ったものを作る。」
→ #376 に2回目を追記（2/3）＋索引の是正 #389（混雑/レベルは Badge+icon+tone・HeatmapChart はグリッドで別）。仕様は2回の独立した手組みで安定：levels[](順序2-4)→トーン+アイコン+色に安全なラベル・value で現レベル選択。あと1回（在庫/鮮度/信号 等）で3回ルール → 作る。
拾った点（軽微）
- 🟡 系統/路線のチップ：ListCard の leading に系統番号(渋66)を出す 路線のチップ が無く、11×11 の色付き四角を手組み。
- 🟡 次発の時刻リスト：「1系統の次4便」は ScheduleGrid(行列)でなく、フラットなチップの列が素直。
今回 src の新規コンポーネントなし（4/5・モバイルの利用者向けの土台が3モード目で業界越え＋StatusLevel 2/3）。
学び — 「利用者向けの土台は、もう新しいモードの消費者でも揺るがない」
#130/#131 で事業者向けの土台が新業種で揺るがないと確認し、#137 で乗務員の土台が3モード目でも効いた。そして #138 で——利用者向けのモバイル消費者の土台も、バスという3モード目の消費者で6つのコンポーネントが丸ごと業界越え。事業者向け（業務）も利用者向け（消費者）も、土台はモードに依存せず成熟した。残る欠落は StatusLevel（混雑ピル）のような横断的な小さいコンポーネントだけ＝もう「業種/モード」では欠落が開かず、「データの形」（#132 ボード）「軸」（#137 期限）「段階的なレベル」（#138 混雑）のような直交する型でしか開かない。欠落の地図が、業種の軸からコンポーネントの軸へと完全に移行した。
📊 コンポーネント化スコアボード（作成済 12個）
AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub / Stringline 進行中：StatusLevel 2/3・ExpiryBadge 2/3・StatusBoard 2/3・Gantt 日中モード(一歩手前)
📋 モード進捗
- ✈️ 航空：事業者向け5 + 利用者向け6 ✅／🚆 鉄道：事業者向け5 + 利用者向け6 ✅
- 🚌 バス：事業者向け2 + 利用者向け1（接近案内） ／ 残り 利用者向け（経路検索/予約）or タクシー/トラックへ
次回予告（やってみた #139）
- バスの利用者向け 続き（高速バス座席予約＝SeatMap/RadioCard 業界越え）or 新モード タクシー（配車=事業者向け／呼出=利用者向け）。3モード固めた土台が4モード目でどう効くか。
試す
- gunjo.jp ／ リストカード ListCard ／ フィルタチップ FilterChips ／ ロイヤリティ LoyaltySummaryCard ／ npm
@gunjo/ui／ GitHub ／ 前回まで #1〜#137 - GunjoUI by UIXHERO
モバイル消費者の土台が3モード目でも6つのコンポーネント丸ごと業界越え——事業者向けも利用者向けも土台はモードに依存せず成熟し、欠落はもう業種でなく「型」でしか開かない。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。