AI に搭乗手続きを作らせてみた — 3画面で手組みされた「座席表」が、ついに部品になった（やってみた #114）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。航空 toC 深掘り（KeEem 指示：toC が弱いからもっと掘る）の1枚目——オンラインチェックイン／搭乗手続き（便確認・座席変更・手荷物・搭乗券）。

KeEem に「toC が弱いから深掘りして」と言われ、航空 toC を3枚（#114-116）並列で回した。これはその1枚目。観測の本命——座席表（SeatMap）が3回目の手組みになるか。

結果 — 3/5、そして SeatMap の 3-confirm 発火

tsc 緑・375px mobile-first・0 console error。4ステップ（確認→座席→手荷物→搭乗券）。cold AI（群青を一度も触っていない設定）：

座席表＝完全に手組み。これが頭の穴。 一番近い ScheduleGrid（staff×day の可用性）も通路の gap も per-seat の type/fee も持てない。「SeatMap primitive は、設定可能な通路位置・per-cell {id,state,type,fee}・controlled selected/onSelect・色非依存の状態・料金つき凡例・grid キーボードナビ が要る。kit にこの近所には何も無い」。

3回連続——鉄道座席 #109・機内座席 #112・チェックイン座席変更 #114、別々の3人 cold AI が独立に座席表を ~190行ずつ手組み。3回ルール発火。build した。

build — SeatMap（座席表）

const columns = ["A","B","C", null, "D","E","F"]   // null = 通路（3-3）
<SeatMap columns={columns} seats={seats}
  selectedIds={selected} maxSelectable={2} onToggle={toggle} />

• 通路 gap（null 列・3-3/2-4-2/2-2）・per-seat {state, type, position, fee}・controlled 複数選択＋capacity cap（上限到達で未選択席は操作不可）。
• grid a11y：role=grid・矢印キー roving focus・aria-selected/disabled・読み上げ名を合成（「12番A席、窓側、非常口座席、空席、¥1,500」）。状態は色だけに依存しない（選択✓・予約済✕・sr-only ラベル）。
• 横スクロールを内包＝3-3 のキャビンが375pxでページを壊さない。
• #356 クローズ（PR#361・実機375pxで36席・選択+上限cap で34席 disabled・型/料金/位置の合成名・0 error）。索引の「座席選択→HeatmapChart 誤誘導」も是正（HeatmapChart は読み取り専用と明記）。

起票

• 🟢 TicketStub/PassCard（搭乗券＝OD/時刻/ゲート強調＋ミシン目＋バーコード領域・SignedRecord は監査記録で travel pass でない）＝#363・1/3。
• 🟢 StatusScreen に success variant が無いのに索引が「確認/完了画面→StatusScreen」に誘導（error スタイルの「搭乗完了」が出かねない）＝#366。
• 🟢 44px タッチ標的（Button 既定36px・xl=44px は在るが発見されず）＝#362（#114/#115/#116 で3回）。

今回 src build = SeatMap（3-confirm）。AmountBreakdown が手荷物料金に越境。

学び — toC の「モード固有 primitive」も3回ルールで結晶化

SeatMap は toC のモード固有の床（座席選択）。鉄道→航空→チェックインで3回目に達し結晶化した。ListCard（universal）が業種をまたいで一気に効いたのと対照的に、SeatMap はモード/フローをまたいで証拠が貯まって build に至った。toC を深掘りすると、universal な床（ListCard）も モード固有の床（SeatMap）も、両方とも 3回ルールで埋まっていく。 弱い toC こそ、新しい床が出る場所。

次回予告

• 同じ航空 toC バッチの #115（運航状況案内）・#116（予約管理・マイレージ）に続く。

試す

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

3画面で手組みされた座席表が、その場で部品に。弱い toC こそ、床が埋まる。

---

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