#109スコア 3.5/5運輸：鉄道

AI に特急券予約を作らせてみた — toC に降りた瞬間、最低スコアと新しい穴が出た（やってみた #109）

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

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

解説記事

AI に特急券予約を作らせてみた — toC に降りた瞬間、最低スコアと新しい穴が出た（やってみた #109）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。鉄道の利用者側（toC）1枚目——特急券・指定席のオンライン予約（列車選択・座席表・料金内訳・予約フロー）。

#106〜108 の鉄道は全部事業者側（指令/乗務員/車両）の back-officeだった。今回は利用者側（B2C）に降りる——えきねっと/EX予約のような消費者向け。観測の核——back-office 寄りの kit は、消費者の予約フローでどこまで通用するか。

結果 — 3.5/5（連載でここ最近の最低）。それが収穫。

tsc/build 緑・375px・0 console error。だがスコアが落ちた——そしてそれは良いニュース。toC に降りた瞬間、back-office 7業界で出なかった穴が一気に出た。cold AI（群青を一度も触っていない設定）のレポート：

構造化された form/ledger 部分は強い——AmountBreakdown（運賃＋特急料金−割引＝合計が一発・「鉄道運賃がそのまま落ちた」）・Stepper・RouteStops（停車駅）・MetadataList（確認）。だが予約の主役＝座席表に primitive が無く、いくつかの部品は back-office の DNA が消費者文脈に漏れる。 画面の ~70% は部品で組めたが、残り 30%（しかも最重要の 30%）は手組み。

起票 — SeatMap（座席表）= 今回の主役の穴

座席表は完全に手組み（~180行）。seat-map も 2D 選択グリッドも、近いものすら無い。ScheduleGrid（staff×day の可用性）でも DataTable（表）でも ToggleGroup（1次元）でも無い。「transit/event/cinema で単一最大の再利用される欠落」。

→ #356。seats[]＋status（空席/予約済/選択中/確保）＋通路記述子（2+3 vs 2+2）＋座席設備フラグ＋controlled selectedIds/maxSelectable＋a11y（gridcell/aria-pressed/リッチ SR 名）。鉄道だけでなく航空・映画・スタジアム・イベントに汎用——toC 交通アークで必ずまた出る（1/3）。

直した — Stepper の 375px clip（実バグ）

Stepper が375pxで5ステップ目を切る。「決済ステップの右端が x=416、コンテナは x=359 で clip——5ステップのモバイル決済で、ユーザーは flow の終わりが見えない」。

→ 固定 w-[60px] コネクタ＋w-16 ステップで5ステップ656px必要だったのを、flex-1 コネクタ＋full-width＋モバイル w-14 に。5ステップが ~360px に収まり375pxで溢れない（PR#355・375px 実機で overflow 0 確認）。API 変更なし＝全 Stepper 利用者に効く。

その他の toC ギャップ（観測）

  • 🟢 commerce の結果カードリストが無い——候補列車を Card+Badge+Button で手組み。索引は「検索結果→DataTable」（back-office 反射）に誤誘導＝B2C には不向き。#135 に追記（結果カードリスト＋カードタイル radio）。
  • 🟢 視覚的な温かみ——「中立/実務的・モノクロ・四角いカード・温かみゼロ＝有能な管理コンソール。えきねっとでなく claims 画面に見える」。消費者向けは感情的な手がかり（路線イメージ・大きく親しみやすい時刻表示・安心の色）が要る。back-office kit が toC をやると、機能は足りるが手触りが足りない。
  • 🟢 NumberInput/Badge の SR ラベルが英語既定（#326 追記）。

今回 src fix = Stepper 375px（実バグ）。AmountBreakdown は B2C 運賃にも越境（4回目の独立利用）。

学び — toC は「新しい床」を一気に掘り当てる

back-office を14業種・100枚以上やって「作り切った/穴が出ない」状態に近づいていた。だが toC に降りた1枚目で、スコアが 3.5 に落ち、SeatMap という大型 primitive・結果カードリスト・視覚的温かみ という3つの新しい穴が一度に出た。 これは「やってみた」の核心そのもの——未踏の文脈に踏み込むと、揃ったはずの床にまだ穴がある。toB で universal な床（StatGroup/AmountBreakdown/ActionQueue）を埋めたように、toC には toC の床（SeatMap・結果リスト・消費者の手触り）がある。交通系は全モードで toB/toC 両方やる——次の穴は、その両側から出てくる。

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

  • 鉄道 toC 2枚目（乗換案内/経路検索 or 運行情報案内）で RouteStops 越境＋結果リスト再観測、あるいは次モードの toC/toB。SeatMap 2回目（航空 seat）の観測も。

試す

toC に降りた瞬間、最低スコアと新しい穴。だからこそ、やる価値があった。

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

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

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

AlertAlertDescriptionAlertTitleAmountBreakdownBadgeButtonCardCardContentCardHeaderCardTitleContainerHStackMetadataListNumberInputRadioGroupRadioGroupItemRouteStopItemRouteStopsSelectSeparatorStepperStepperStepToggleGroupToggleGroupItemVStack

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

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