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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠航空の利用者向け 深掘り（利用者向けの画面が弱いから、もっと掘ると決めた）の1枚目⁠——⁠オンラインチェックイン／搭乗手続き⁠（便確認・座席変更・手荷物・搭乗券）。

利用者向けの画面が弱い。だから航空の利用者向けを3枚（#114-116）並列で回すことにした。これはその1枚目。観測の本命——⁠座席表（SeatMap）が3回目の手組みになるか。⁠

結果 — 3/5、そして SeatMap の3回目が発火

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

⁠座席表＝完全に手組み。これが筆頭の欠落。⁠ 一番近い ScheduleGrid（社員×日の空き）も通路の隙間も 座席ごとの 種別/料金 も持てない。「⁠SeatMap コンポーネントは、設定できる通路の位置・セルごとの {id,状態,種別,料金}・controlled な selected/onSelect・色に頼らない状態・料金つき凡例・grid のキーボード移動 が要る。ライブラリにこの近辺には何も無い⁠」。

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

作る — SeatMap（座席表）

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

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

課題に記録

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

⁠今回 src で作ったもの = SeatMap⁠（3回目）。⁠AmountBreakdown が手荷物料金に業界越え⁠。

学び — 利用者向けの「モード固有のコンポーネント」も3回ルールで固まる

SeatMap は利用者向けのモード固有の土台（座席選択）。鉄道→航空→チェックインで3回目に達し、固まった。ListCard（全業種共通）が業種をまたいで一気に効いたのと対照的に、SeatMap はモード/フローをまたいで証拠が貯まって作るに至った。⁠利用者向けを深掘りすると、全業種共通の土台（ListCard）も モード固有の土台（SeatMap）も、両方とも3回ルールで埋まっていく。⁠ 弱い利用者向けの画面こそ、新しい土台が出る場所。

次回予告

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

試す

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

3画面で手組みされた座席表が、その場でコンポーネントに。弱い利用者向けの画面こそ、土台が埋まる。