#138スコア 4/5運輸：バス

AI にバスの接近案内を作らせてみた — モバイル消費者床が3モード目でも丸ごと効いた（やってみた #138）

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

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

解説記事

AI にバスの接近案内を作らせてみた — モバイル消費者床が3モード目でも丸ごと効いた（やってみた #138）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。バス toC（運行管理・配車に続くバス消費者側）——接近案内・乗車（渋谷駅前・あと○分・系統選択・運賃・IC）。

結果 — 4/5、モバイル消費者床が3モード目でも丸ごと効いた

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

back-office から後付けでなく、最初から消費者モバイル向けに設計されている。 6つの床が全部このために作られたフィット：PageHeader(app-bar)・ListCard(接近案内の行=kit 最良部品・1:1)・FilterChips(系統/方面)・LoyaltySummaryCard(IC残高 hero)・TicketStub(一日乗車券 QR)・AmountBreakdown(運賃)。ListCard の severity レール＋selected リングで『まもなく到着』を CSS 無しで目立たせられた。

鉄道 toC・航空 toC で結晶化したモバイル消費者床が、バスという3モード目の消費者でもほぼ手組みゼロ。toC 越境の地力テスト、3モード目も合格。

観測の核1 — #380 で直した PageHeader バグが、効いていた

#129 で見つけ #380 で直した「PageHeader の leading と onBack 両渡しで戻るボタンが黙って消える」footgun——それが #138 で：

cold AI「PageHeader の doc は直った footgun を明記している＝onBack と leading 両方渡すと以前はハンドラを落としたが、今は両方描画する。 誤解を招く prop には一つも当たらなかった。」

修正が src だけでなく docstring にも残り、9回後の cold AI がそれを『直っている』と確認した。 バグ修正は、コードと文書の両方に痕跡を残してこそ「越境して効く」。

観測の核2 — StatusLevel 2回目＝もう2/3

車内混雑（空いています／やや混雑／混雑）を、cold AI がまた手組みした（CrowdingBadge ~25行・Badge＋人数アイコン）。#127（ラウンジ混雑）に続き2回目（2/3）。 同じ仕様・同じ #1 評価：

「定性ステータス/レベル/severity ピルの primitive が無い。Badge で包んだが——混雑/在庫/鮮度/信号レベル が要る adopter は全員この同じラッパーを作り直す。StatusLevel/QualitativeStatus（順序づいたレベル→トーン+アイコン+色安全ラベル）が追加すべき唯一最大のもの。」

しかも索引バグも発見：

「❌ 混雑→HeatmapChart。間違い＝あれは読み取り専用の強度グリッドで、項目ごとの3段階ピルじゃない。索引に従う文脈ゼロ開発者は間違ったものを作る。」

→ #376 に2回目追記（2/3）＋索引是正 #389（混雑/レベルは Badge+icon+tone・HeatmapChart はグリッドで別）。仕様は2回の独立手組みで安定：levels[](順序2-4)→トーン+アイコン+色安全ラベル・value で現レベル選択。あと1回（在庫/鮮度/信号 等）で 3-confirm → build。

拾った点（軽微）

  • 🟡 系統/路線チップ：ListCard の leading に系統番号(渋66)を出す route/line chip が無く 11×11 色付き四角を手組み。
  • 🟡 次発の時刻リスト：「1系統の次4便」は ScheduleGrid(行列)でなくフラットなチップ列が正直。

今回 src build なし（4/5・モバイル toC床3モード目越境＋StatusLevel 2/3）。

学び — 「toC 床は、もう新しいモードの消費者でも揺るがない」

#130/#131 で toB床が新業種で揺るがないと確認し、#137 で crew床が3モード目でも効いた。そして #138 で——toC のモバイル消費者床も、バスという3モード目の消費者で6部品が丸ごと越境。toB（業務）も toC（消費者）も、床はモード非依存に成熟した。残る穴は StatusLevel（混雑ピル）のような横断的な小部品だけ＝もう「業種/モード」では穴が開かず、「データの形」（#132 board）「軸」（#137 期限）「定性レベル」（#138 混雑）のような直交する型でしか開かない。穴の地図が、業種軸からプリミティブ軸へと完全に移行した。

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

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub / Stringline 進行中：StatusLevel 2/3・ExpiryBadge 2/3・StatusBoard 2/3・Gantt-intraday(near)

📋 モード進捗

  • ✈️ 航空：toB 5 + toC 6 ✅／🚆 鉄道：toB 5 + toC 6 ✅
  • 🚌 バス：toB 2 + toC 1（接近案内） ／ 残り toC（経路検索/予約）or タクシー/トラックへ

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

  • バス toC 続き（高速バス座席予約＝SeatMap/RadioCard 越境）or 新モード タクシー（配車toB／呼出toC）。3モード固めた床が4モード目でどう効くか。

試す

モバイル消費者床が3モード目でも6部品丸ごと越境——toB も toC も床はモード非依存に成熟し、穴はもう業種でなく「型」でしか開かない。

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

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

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

AmountBreakdownBadgeButtonCardCardContentEmptyStateFilterChipsListCardLoyaltySummaryCardMetadataListPageHeaderRouteStopsSeparatorSheetSheetContentSheetDescriptionSheetHeaderSheetTitleTabsTabsContentTabsListTabsTriggerTagTicketStub

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

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