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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠航空の利用者向け 深掘りバッチの2枚目⁠——⁠フライト運航状況案内⁠（出発/到着便一覧・遅延/欠航・搭乗口）。電車の運行情報の、空港版。

結果 — 4/5（利用者向けバッチで最高）

tsc 緑・375px mobile-first・0 console error。予備知識ゼロの AI（群青を一度も触っていない設定）：

⁠事務方専用だと思っていたライブラリにしては本当に強い。2つのコンポーネント（ListCard・RouteStops）はこの画面のために設計されたとしか思えない。⁠ ⁠ListCard⁠ — 便一覧の行。leading=時刻・title=便名+航空会社・description=区間・status=状態Badge・meta=ゲート・⁠severity=左のボーダーで遅延/欠航が一目で飛び出す⁠。onSelect+selected でタップして掘り下げ＋選択状態がタダ。⁠ライブラリ全体で最も合った。⁠ ⁠RouteStops⁠ — 出発→到着の区間。delayed 状態＋予実＋遅延分・statusLabels で 配送中→搭乗中 に。配送/交通の見立てがフライトの区間にゼロ摩擦で転用できた。

⁠#111 で作った ListCard が、航空の利用者向けでまた即発掘⁠——全業種共通の土台の別業界での自力発見がここでも。逆引き索引も「リスト・結果 → ListCard」「状態＋予実＋遅延 → RouteStops」で一発命中・誤誘導ゼロ。

課題に記録

• 🟢 ⁠SegmentedControl⁠（出発便/到着便の切替・ToggleGroup の既定が「薄くて選択中に見えない」ので手で data-[state=on]:bg-foreground を盛った・「あらゆる交通/予約/状態 の画面にある切替が手スタイルを要する」）＝#365（ToggleGroup の segmented variant で安く済む）。
• 🟢 ⁠BadgeVariantKey が、まとめて呼び出す入口（@gunjo/ui）から未 export⁠（status→variant のマップの型付けに ComponentProps の回避が要る・実バグ）＝#330 追記。
• 🟢 ⁠Banner が単一行で切り詰め⁠（複数行のお知らせは Alert へ・#324 追記）・Sheet bottom の角丸/高さの手当て。

⁠今回 src の新規コンポーネントなし⁠（4/5・ListCard/RouteStops が完璧に合ったのが成果）。

学び — 利用者向けでも「一覧性」は強い、温かみは弱い

予備知識ゼロの AI 曰く「⁠一覧性は抜群⁠——ListCard の深刻度の左ボーダー＋状態 Badge で遅延/欠航が即飛び出す、それがこの画面の仕事そのもの」。一方「⁠見た目の温かみが弱点⁠——有能で中立なシステムで、ブランドの表現ではない」。利用者向けバッチ共通の所見＝⁠事務方のライブラリは『機能と一覧性』は出せるが『手触り・ブランド』は別のレイヤー⁠（#367 に集約）。#115 はその中で、ListCard+RouteStops が利用者向けの機能面を担い切れることを示した最高スコア回。

次回予告

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

試す

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

ListCard と RouteStops が「これのために作られた」——利用者向けでも、機能の土台は効く。