#139スコア 4/5運輸：バス

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

ルート: /highway-bus
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

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

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。バス toC（接近案内に続くバス消費者2枚目）——高速バス座席予約（バスタ新宿→大阪・3列独立シート・座席選択・運賃・予約・乗車券）。

結果 — 4/5、予約床5部品が高速バスに丸ごと越境

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

6つの主役のうち5つ（RadioCard/AmountBreakdown/Stepper/TicketStub/PageHeader）が zero-friction で、この日本の交通 B2C のために作られているのが見える。 索引は6ピース全部を一発で正しい部品に誘導（誤誘導ゼロ）。

鉄道#109／航空#112・#114 で結晶化した予約床が、高速バスでもほぼ手組みゼロ。便プラン=RadioCard・運賃内訳=AmountBreakdown・予約=Stepper・乗車券QR=TicketStub・app-bar=PageHeader。

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

座席表の中心 SeatMap——cold AI：

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

→ #390 SeatMap coach 対応（attributes: string[] 複数属性＋属性ごとの legend/tone hook＋front/向きスロット）。SeatMap(#114 航空 build)は『グリッド抽象』は3モードに効くが『属性抽象』が airline 形＝同じ部品でも抽象のレイヤーで効き方が違う。

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

  • 🟡 RadioRow / SelectableListItem：乗車地/降車地ピッカーを手組み。RadioCard は購入味(価格/おトク)で「バス停を選ぶ」に不適・ListCard の onSelect は aria-pressed トグルで単一選択でない・RadioGroup は素の input。「radio セマンティクス＋title/subtitle/trailing-meta の行＝あらゆる予約キットで最も欲しい追加。」＝#391（RadioCard[カード]の行版・ListCard の aria-pressed smell の単一選択版）。
  • 🟡 BottomActionBar：運賃+CTA の sticky フッターをまた手組み。#125 欠航振替・#129 払戻し・#139 高速バス＝3回目→3-confirm 接近＝#391（PageHeader[上]の対=下の sticky バー・safe-area inset）。

今回 src build なし（4/5・予約床5部品越境・SeatMap 属性gap/RadioRow/BottomActionBar 起票）。

学び — 「同じ部品でも、抽象のレイヤーで越境の効き方が分かれる」

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

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

つまり越境の地力テストは「部品が効くか」の二値でなく、「部品のどの抽象レイヤーまで効くか」を測る。SeatMap は構造◎・意味△。穴は「部品が無い」だけでなく「部品の意味レイヤーが特定業種に固まっている」形でも開く——これが #138 の「定性レベル」や #137 の「期限軸」に続く、また新しい穴の型。

📊 結晶化スコアボード（build 済 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-coach・RadioRow

📋 モード進捗

  • ✈️ 航空：toB 5 + toC 6 ✅／🚆 鉄道：toB 5 + toC 6 ✅
  • 🚌 バス：toB 2 + toC 2（接近案内/高速バス予約） ／ 残り or 次モード

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

  • 新モード タクシー（配車 toB＝リアルタイム車両×注文マッチング/呼出 toC＝配車アプリ）。4モード目で床がどう効くか＋配車盤で StatusBoard 3回目が狙えるか。

試す

予約床は丸ごと越境、SeatMap はグリッド◎・属性△——越境は二値でなく、部品のどの抽象レイヤーまで効くかで測る。穴は「意味レイヤーが特定業種に固まる」形でも開く。

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

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AmountBreakdownAmountLineBadgeButtonCardPageHeaderRadioCardRadioCardGroupSeatSeatMapSelectSeparatorStepperStepperStepTagTicketStub

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。