AI に高速バスの座席予約を作らせてみた — 予約土台は丸ごと業界越え、SeatMap は「グリッドは完璧・属性は航空の形」（やってみた #139）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠バスの利用者向け⁠（接近案内に続くバス消費者2枚目）——⁠高速バス座席予約⁠（バスタ新宿→大阪・3列独立シート・座席選択・運賃・予約・乗車券）。

結果 — 4/5、予約の土台の5コンポーネントが高速バスに丸ごと業界越え

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

⁠6つの主役のうち5つ（RadioCard/AmountBreakdown/Stepper/TicketStub/PageHeader）が 摩擦ゼロ で、この日本の交通の利用者向けのために作られているのが見える。⁠ 索引は6つのピース全部を一発で正しいコンポーネントに誘導（誤誘導ゼロ）。

鉄道#109／航空#112・#114 で固めた⁠予約の土台が、高速バスでもほぼ手組みゼロ⁠。便プラン=RadioCard・運賃内訳=AmountBreakdown・予約=Stepper・乗車券QR=TicketStub・アプリバー=PageHeader。

観測の核 — SeatMap：「グリッドは完璧、属性は航空の形」

座席表の中心 SeatMap——予備知識ゼロの AI：

⁠グリッドは完璧に捌いた。⁠ columns={["A",null,"C",null,"D"]} で3列独立(1+通路+1+通路+1)、["A","B",null,"C","D"] で4列(2+通路+2)を無加工で表現・状態/maxSelectable/position(窓側通路側)/fee/grid のアクセシビリティ 全部正しい。 ⁠だが高速バス特有の座席属性がモデルに入らない。⁠ Seat.type は単一の文字列＝バス座席は『女性専用 かつ トイレ付近 かつ コンセント かつ 最前列』が同時に成立するのに、連結して1つの type に押し込み、自前の凡例で再分解・全部同じ info のドットに潰れる(女性専用をピンク/トイレ付を青 にできない)。組み込みの凡例は 航空の語彙(非常口/足元ゆったり)に固定で、貼り替え不可→2つ目の凡例を手組み。⁠車両の向き(前方=運転席)も無く 進行方向のマーカーを手組み。⁠「⁠今のままは『航空の座席表をバスに向けて何とか生き延びた』状態。⁠」

→ #390 SeatMap の高速バス対応（attributes: string[] で複数属性＋属性ごとの 凡例/tone のフック＋front/向きの差込口）。⁠SeatMap(#114 航空で作った)は『グリッドの抽象』は3モードに効くが『属性の抽象』が 航空の形＝同じコンポーネントでも抽象のレイヤーによって効き方が違う。⁠

もう一つ — 予約フローの2つの 行/バー の欠落

• 🟡 ⁠RadioRow / SelectableListItem⁠：乗車地/降車地のピッカーを手組み。RadioCard は購入向けの見た目(価格/おトク)で「バス停を選ぶ」に不適・ListCard の onSelect は aria-pressed トグルで単一選択でない・RadioGroup は素の input。「⁠ラジオの意味づけ＋タイトル/サブタイトル/末尾のメタ の行＝あらゆる予約ライブラリで最も欲しい追加。⁠」＝#391（RadioCard[カード]の行版・ListCard の aria-pressed の良くないパターンの単一選択版）。
• 🟡 ⁠BottomActionBar⁠：運賃+行動ボタン の追従フッターをまた手組み。⁠#125 欠航振替・#129 払戻し・#139 高速バス＝3回目⁠→3回ルール接近＝#391（PageHeader[上]の対=下の追従バー・safe-area inset）。

⁠今回 src の新規コンポーネントなし⁠（4/5・予約の土台5コンポーネントが業界越え・SeatMap の属性の欠落/RadioRow/BottomActionBar を課題に記録）。

学び — 「同じコンポーネントでも、抽象のレイヤーで業界越えの効き方が分かれる」

SeatMap は #114 で作り、#112/#114（航空）で効き、今 #139（バス）でも⁠グリッドの抽象は完璧に業界越え⁠した。だが⁠属性の抽象（座席の意味づけ）は 航空の形に固まっていて業界越えしなかった⁠。これは新しい型の観測：

• ⁠構造の抽象（グリッド・行×時間・距離×時間…）⁠ は最初から汎用で、モードをまたいでそのまま効く。
• ⁠意味の抽象（座席属性・状態の語彙・凡例のラベル…）⁠ は最初の業種（航空）に固まりやすく、別モードで手組みが出る。

つまり業界を越える地力テストは「コンポーネントが効くか」の二択でなく、「⁠コンポーネントのどの抽象レイヤーまで効くか⁠」を測る。SeatMap は構造◎・意味△。欠落は「コンポーネントが無い」だけでなく「⁠コンポーネントの意味のレイヤーが特定の業種に固まっている⁠」形でも開く——これが #138 の「段階的なレベル」や #137 の「期限の軸」に続く、また新しい欠落の型。

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

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub / Stringline 進行中：⁠BottomActionBar 3/3 接近⁠・StatusLevel 2/3・ExpiryBadge 2/3・StatusBoard 2/3・SeatMap 高速バス対応・RadioRow

📋 モード進捗

• ✈️ 航空：事業者向け5 + 利用者向け6 ✅／🚆 鉄道：事業者向け5 + 利用者向け6 ✅
• 🚌 ⁠バス：事業者向け2 + 利用者向け2（接近案内/高速バス予約）⁠ ／ 残り or 次モード

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

• ⁠新モード タクシー⁠（配車 事業者向け＝リアルタイム車両×注文マッチング/呼出 利用者向け＝配車アプリ）。4モード目で土台がどう効くか＋配車盤で StatusBoard 3回目が狙えるか。

試す

• ⁠gunjo.jp⁠ ／ ⁠座席表 SeatMap⁠ ／ ⁠ラジオカード RadioCard⁠ ／ ⁠ステッパー Stepper⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#138
• ⁠GunjoUI by UIXHERO⁠

予約の土台は丸ごと業界越え、SeatMap はグリッド◎・属性△——業界越えは二択でなく、コンポーネントのどの抽象レイヤーまで効くかで測る。欠落は「意味のレイヤーが特定の業種に固まる」形でも開く。