AI にフライト運航状況案内を作らせてみた — ListCard と RouteStops が「これのために作られた」（やってみた #115）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。航空 toC 深掘りバッチの2枚目——フライト運航状況案内（出発/到着便一覧・遅延/欠航・搭乗口）。電車の運行情報の、空港版。

結果 — 4/5（toC バッチで最高）

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

back-office 専用だと思っていた kit にしては本当に強い。2つの部品（ListCard・RouteStops）はこの画面のために設計されたとしか思えない。 ListCard — 便一覧の行。leading=時刻・title=便名+航空会社・description=区間・status=状態Badge・meta=ゲート・severity=左ボーダーで遅延/欠航が一目で飛び出す。onSelect+selected で tap ドリル＋選択状態が無料。kit 全体で最良のフィット。 RouteStops — 出発→到着の leg。delayed 状態＋予実＋遅延分・statusLabels で 配送中→搭乗中 に。配送/transit のメタファがフライト leg にゼロ摩擦で転用できた。

#111 で build した ListCard が、航空 toC でまた即発掘——universal な床の越境発掘がここでも。逆引き索引も「Lists & Results → ListCard」「状態＋予実＋遅延 → RouteStops」で一発命中・誤誘導ゼロ。

起票

• 🟢 SegmentedControl（出発便/到着便の切替・ToggleGroup の既定が「薄くて選択中に見えない」ので手で data-[state=on]:bg-foreground を盛った・「あらゆる transport/booking/status 画面にある切替が手スタイル要」）＝#365（ToggleGroup の segmented variant が安い）。
• 🟢 BadgeVariantKey が barrel から未export（status→variant マップの型付けに ComponentProps 回避が要る・実バグ）＝#330 追記。
• 🟢 Banner が単一行 truncate（複数行のお知らせは Alert へ・#324 追記）・Sheet bottom の角丸/高さ手当て。

今回 src build なし（4/5・ListCard/RouteStops の完璧フィットが成果）。

学び — toC でも「スキャン性」は強い、温かみは弱い

cold AI 曰く「スキャン性は excellent——ListCard の severity 左ボーダー＋状態 Badge で遅延/欠航が即飛び出す、それがこの画面の仕事そのもの」。一方「視覚的な温かみが弱点——有能な中立システムで brand 表現ではない」。toC バッチ共通の所見＝back-office kit は『機能とスキャン性』は出せるが『手触り・ブランド』は別レイヤー（#367 に集約）。#115 はその中で、ListCard+RouteStops が toC の機能面を担い切れることを示した最高スコア回。

次回予告

• 同バッチの #116（予約管理・マイレージ）に続く。

試す

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

ListCard と RouteStops が「これのために作られた」——toC でも、機能の床は効く。

---

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