AI に国際線 eチケットを作らせてみた — 「ゲートで掲げる券面」が、まだコンポーネントじゃない（やってみた #123）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠航空の利用者向け 深掘り（利用者向けバックログ）⁠——⁠国際線 eチケット控え＋渡航書類チェック⁠（券面・旅程・パスポート/ビザ/ESTA）。

結果 — 3.5/5

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

⁠CheckList — これのために作られた。⁠ チェックボックス＋ラベル＋説明＋trailing の差込口・各行が自動でラベル付け。渡航書類チェックリストがそのまま（docstring に「書類のチェックリスト」が明記）。Badge(icon)/MetadataList/Tabs/Progress も手組みゼロ。 ⁠だが画面そのもの＝搭乗券の券面にコンポーネントが無い。⁠

観測の核 — TicketStub が2回目（2/3）

⁠eチケット/搭乗券の券面＝完全に手組み。筆頭の欠落。⁠ boarding|barcode|stub|pass|ticket|qr|perforation で全公開面を grep したが⁠何も無い⁠。発着ペア（HND 17:05→LAX 10:55）・座席/ゲート/搭乗時刻のフィールドのグリッド・ミシン目（ノッチ＋破線 Separator）・QR・バーコードを全部手で組んだ。「⁠TicketStub は 発着ペアのヘッダ＋フィールドのグリッド＋ミシン目の変種＋QR/バーコードの差込口＋ステータス帯が要る。旅行/チケットの領域で欠けている単一で最大のコンポーネント。⁠」

⁠#114 搭乗券＋#123 eチケット＝TicketStub 2/3⁠（#363）。API も #114＋#123 で収束：発着ペア（現地時間/時差）・座席/ゲート/搭乗時刻/クラスのグリッド・ノッチ＋破線・QR/バーコードの差込口（encode したノード＋aria-label）・ステータス帯・⁠プレーンなデータでサーバー描画でも安全⁠。あと1回（会員証バーコード／乗車券／イベント券）で3回ルール → 作る。

その他の観測

• 🟢 ⁠RouteStops が旅程にも配送の語彙を漏らす⁠（往路/復路の区間に 未配/配送中＋遅延列＋現在地・「未来の便には概念的に間違い」）＝交通#110＋駅の道案内#120＋空港の道案内#122＋⁠国際線の区間#123＝4回目⁠。区間中心の FlightItinerary/TransitItinerary（#358）が要る。
• 🟢 ⁠テーマのトークンの罠⁠：ライブラリは @config（Tailwind v3 風）で colors.foreground = hsl(var(--foreground))＝v4 の var(--color-foreground) は⁠存在しない⁠。自作 CSS を書く消費者が即踏む（最初の barcode のグラデが透明になりかけた）。
• 🟢 IconPassport が Tabler に無い（IconId で代用）。

⁠今回 src の新規コンポーネントなし⁠（3.5/5・TicketStub 2/3）。⁠CheckList が渡航書類で業界越え⁠。

学び — 「感情の中心」が一番未対応、という利用者向けの構造

予備知識ゼロの AI のまとめが鋭い：「⁠周辺（チェックリスト・詳細・旅程の足場・アラート・タブ・進捗）は速くてアクセシビリティも手書きより良い。だが消費者向けの旅行アプリの感情の中心＝ゲートで掲げる券面 が箱に無い＝一番重要な面が一番未対応。⁠」これは利用者向けの深掘りで繰り返し出る構造——事務方のライブラリは「周辺の足場」は強いが「消費者の主役（ロイヤリティの大きな見出し・座席表・カテゴリチップ・券面）」が欠ける。だから利用者向けを潰すほど、その主役級のコンポーネント（SeatMap・LoyaltySummaryCard・RadioCard・FilterChips、そして次は TicketStub）が3回ルールで固まっていく。⁠深掘りは、消費者の主役を1つずつ箱に入れる作業。⁠

📊 コンポーネント化スコアボード（作成済8個）

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips 進行中：⁠TicketStub 2/3⁠・SegmentedControl・StatusScreen success・Gantt 時刻軸・FlightItinerary/Steps

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

• 利用者向けバックログ続行——航空（手荷物追跡＝状態 timeline / 旅程管理 / 欠航振替）or 鉄道残り（駅ナカ提案＝TicketStub 3回目に乗車券/会員証で寄せる手も / 払戻し）。

試す

• ⁠gunjo.jp⁠ ／ 逆引き索引 ⁠/docs/by-use-case⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#122
• ⁠GunjoUI by UIXHERO⁠

ゲートで掲げる券面が、まだコンポーネントじゃない——深掘りは、消費者の主役を1つずつ固める作業だった。