AI に運行情報案内を作らせてみた — 利用者向けで3回手組みされた「リストカード」が、ついにコンポーネントになった（やってみた #111）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠鉄道の利用者側3枚目⁠——⁠運行情報案内⁠（路線別の運行状況・運転見合わせ・更新履歴）。電車が遅れた時に皆が見るやつ。

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

結果 — 3.5/5、そして利用者向け初のコンポーネント化（3回目が発火）

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

⁠(a) 路線別運行状況の行＝手組み。これが画面の主役で、ライブラリには何も無い。⁠ ステータスの結果行 / ステータスのリストカード のコンポーネントが無い——先頭の色見本・タイトル・ステータスピル・補足行・更新時刻・深刻度アクセント・chevron を持つ、タップできる行。「⁠あらゆる消費者の『状態を持つ物の一覧』アプリで最も再利用される形。ライブラリの最大の利用者向けの欠落。単一で最大の追加。⁠」 ⁠(b) 重大な運行情報＝ActionQueue が完璧に嵌まった⁠（ライブラリが紛れもなく目的特化な唯一の場所・「これがライブラリを使い続ける理由」）。

⁠3回連続⁠——候補列車 #109・経路候補 #110・路線別運行状況 #111、⁠別々の3人の予備知識ゼロの AI が独立に同じ、タップできるリスト行を手組み⁠。3回ルール発火。⁠その場で作った。利用者向け初のコンポーネント化。⁠

作る — 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 の本物のボタン⁠（テストで「タッチ標的が足りない」と指摘した点）・hover/focus/aria-pressed。
• ⁠ステータスは色だけに依存しない⁠（アイコン付き Badge＋深刻度アクセント）。⁠既定でサーバー描画でも安全⁠。
• 検索結果カードにも運行状況行にも同じコンポーネント＝⁠利用者向けの『物の一覧』コンポーネント⁠。
• #135 をクローズ（PR#359・375px 実機でタッチ標的58-73px・選択がタップで移動・0 error 確認）。

索引も直した — ステータス行の誤誘導

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

⁠今回 src で作ったもの = ListCard⁠（3回目）。⁠ActionQueue が運行情報に4回連続で再発掘⁠（重大な運行情報の選別）。

学び — 利用者向けにも全業種共通の土台があった

事業者向けで StatGroup（KPI）・AmountBreakdown（金額）・ActionQueue（対応待ちリスト）という全業種共通の土台を3回ルールで固めた。⁠利用者向けでも同じことが起きた⁠——ListCard（物の一覧）は、検索結果・商品比較・ステータス一覧・注文行・端末一覧…⁠あらゆる消費者アプリの背骨⁠。利用者向けに降りて3枚で、その背骨を埋めた。

そして発見可能性の複利も続く——#100 で索引を作り、毎回「足す・不適を書く・誤誘導を直す」を積んできた。今回も ステータス行の誤誘導を直し、ListCard をそこへ向けた。⁠コンポーネントが欠落を埋め、索引がそれを指す⁠が、事業者向けと同じく利用者向けでも回り始めた。残る利用者向けのモード固有の土台は SeatMap（#356・1/3）と TransitItinerary（#358・1/3）。

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

• 鉄道の利用者向けは3枚で一区切り。次は⁠航空の利用者向け（フライト予約＝SeatMap 2回目）⁠か、バス/タクシー/トラックの事業者向け/利用者向け、あるいは鉄道の利用者向けをもう少し（駅構内ナビ）。ListCard の別業界での自力発見も観測。

試す

• ⁠gunjo.jp⁠ ／ ⁠リストカード ListCard⁠ ／ ⁠対応キュー ActionQueue⁠ ／ 逆引き索引 ⁠/docs/by-use-case⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#110
• ⁠GunjoUI by UIXHERO⁠

利用者向けで3回手組みされた背骨が、その場でコンポーネントに。利用者側にも、全業種共通の土台はあった。