#111スコア 3.5/5運輸：鉄道

AI に運行情報案内を作らせてみた — toC で3回手組みされた「リストカード」が、ついに部品になった（やってみた #111）

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

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

解説記事

AI に運行情報案内を作らせてみた — toC で3回手組みされた「リストカード」が、ついに部品になった（やってみた #111）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。鉄道の利用者側（toC）3枚目——運行情報案内（路線別の運行状況・運転見合わせ・更新履歴）。電車が遅れた時に皆が見るやつ。

#109 特急券・#110 乗換案内に続く toC 3枚目。観測の核——結果カード/ステータス行が3回目の手組みになれば、その場で build する。

結果 — 3.5/5、そして toC 初の build（3-confirm 発火）

tsc/build 緑・375px mobile-first・0 console error。重大運行情報・路線別状況・路線詳細・更新履歴。cold AI（群青を一度も触っていない設定）のレポート：

(a) 路線別運行状況の行＝手組み。これが画面の主役で、kit には何も無い。 status-result-row / status-list-card primitive が無い——先頭の色スウォッチ・タイトル・ステータスピル・補足行・更新時刻・重大度アクセント・chevron を持つ tappable 行。「あらゆる消費者の『状態を持つ物の一覧』アプリで最も再利用される形。kit の最大の B2C ギャップ。単一最大の追加。」 (b) 重大な運行情報＝ActionQueue が完璧に嵌まった（kit が紛れもなく目的特化な唯一の場所・「これが kit を使い続ける理由」）。

3回連続——候補列車 #109・経路候補 #110・路線別運行状況 #111、別々の3人 cold AI が独立に同じ tappable リスト行を手組み。3回ルール発火。その場で build した。toC 初の結晶化。

build — ListCard（リストカード）

<ListCard
  leading={<span className="size-3 rounded-full bg-destructive" />}
  title="中央線快速" description="人身事故の影響"
  status={<Badge variant="destructive">運転見合わせ</Badge>}
  meta="7:42 更新" severity="critical"
  onSelect={() => openLine("chuo")}
/>
  • 先頭＋タイトル＋副次＋タグ＋ステータス＋meta＋chevron・左の重大度アクセントレール・選択状態。
  • onSelect でカード全体が ≥44px の本物のボタン（cold test が「タッチ標的が足りない」と指摘した点）・hover/focus/aria-pressed。
  • ステータスは色だけに依存しない（アイコン付き Badge＋severity アクセント）。既定で RSC 安全。
  • 検索結果カードにも運行状況行にも同じ部品＝B2C の『物の一覧』primitive。
  • #135 クローズ（PR#359・375px 実機でタッチ標的58-73px・選択がタップで移動・0 error 確認）。

索引も直した — status-row の誤誘導

#111 で索引が「ステータス行→PersonCell（人）」「路線情報→RouteStops（配送停）」に誤誘導していた。→ 表グループを「リスト・結果・表」に改名し ListCard を追加、PersonCell（人）でも RouteStops（配送停）でも DataTable（管理表）でもないと明記。#109/#110/#111 の誤誘導をまとめて是正。

今回 src build = ListCard（3-confirm）。ActionQueue が運行情報に4回連続再発掘（重大運行情報のトリアージ）。

学び — toC にも universal な床があった

toB で StatGroup（KPI）・AmountBreakdown（金額）・ActionQueue（worklist）という universal な床を 3-confirm で結晶化した。toC でも同じことが起きた——ListCard（物の一覧）は、検索結果・商品比較・ステータス一覧・注文行・端末一覧…あらゆる消費者アプリの背骨。toC に降りて3枚で、その背骨を埋めた。

そして discoverability の複利も続く——#100 で索引を作り、毎回「足す・不適を書く・誤誘導を直す」を積んできた。今回も status-row の誤誘導を直し、ListCard をそこへ向けた。部品が穴を埋め、索引がそれを指すが、toB と同じく toC でも回り始めた。残る toC のモード固有の床は SeatMap（#356・1/3）と TransitItinerary（#358・1/3）。

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

  • 鉄道 toC は3枚で一区切り。次は**航空 toC（フライト予約＝SeatMap 2回目）**か、バス/タクシー/トラックの toB/toC、あるいは鉄道 toC をもう少し（駅構内ナビ）。ListCard の越境発掘も観測。

試す

toC で3回手組みされた背骨が、その場で部品に。利用者側にも、universal な床はあった。

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

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

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

ActionItemActionQueueActionSeverityBadgeButtonListListItemMetadataListSeparatorSheetSheetContentSheetDescriptionSheetHeaderSheetTitleTextLinkTimelineTimelineDescriptionTimelineItemTimelineTimeTimelineTitle

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

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