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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠鉄道の利用者側1枚目⁠——⁠特急券・指定席のオンライン予約⁠（列車選択・座席表・料金内訳・予約フロー）。

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

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

tsc/build 緑・375px・0 console error。だが⁠スコアが落ちた⁠——そして⁠それは良い知らせ⁠。利用者向けに降りた瞬間、事務方7業界で出なかった欠落が一気に出た。予備知識ゼロの AI（群青を一度も触っていない設定）のレポート：

⁠構造化された フォーム/明細 の部分は強い⁠——AmountBreakdown（運賃＋特急料金−割引＝合計が一発・「鉄道運賃がそのまま落ちた」）・Stepper・RouteStops（停車駅）・MetadataList（確認）。⁠だが予約の主役＝座席表にコンポーネントが無く、いくつかのコンポーネントは事務方の性質が消費者向けの文脈に漏れる。⁠ 画面の ~70% はコンポーネントで組めたが、残り 30%（しかも最重要の 30%）は手組み。

課題に記録 — SeatMap（座席表）= 今回の主役の欠落

⁠座席表は完全に手組み（~180行）。座席表も 2次元の選択グリッドも、近いものすら無い⁠。ScheduleGrid（社員×日の空き）でも DataTable（表）でも ToggleGroup（1次元）でも無い。「⁠交通/イベント/映画で単一で最大の、繰り返し再利用される欠落⁠」。

→ #356。seats[]＋status（空席/予約済/選択中/確保）＋通路の記述子（2+3 vs 2+2）＋座席設備フラグ＋controlled selectedIds/maxSelectable＋アクセシビリティ（gridcell/aria-pressed/リッチな読み上げ名）。⁠鉄道だけでなく航空・映画・スタジアム・イベントに汎用⁠——利用者向けの交通のシリーズでまたすぐ出るはず（1/3）。

直した — Stepper の 375px での切れ（実バグ）

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

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

その他の利用者向けの欠落（観測）

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

⁠今回 src で修正 = Stepper 375px⁠（実バグ）。⁠AmountBreakdown は 利用者向けの運賃にも業界越え⁠（4回目の独立利用）。

学び — 利用者向けの画面は「新しい土台」を一気に掘り当てる

事務方を14業種・100枚以上やって「作り切った/欠落が出ない」状態に近づいていた。⁠だが利用者向けに降りた1枚目で、スコアが 3.5 に落ち、SeatMap という大型コンポーネント・結果カードリスト・見た目の温かみ という3つの新しい欠落が一度に出た。⁠ これは「やってみた」の核心そのもの——⁠未踏の文脈に踏み込むと、揃ったはずの土台にまだ欠落がある⁠。事業者向けで全業種共通の土台（StatGroup/AmountBreakdown/ActionQueue）を埋めたように、⁠利用者向けには利用者向けの土台（SeatMap・結果リスト・消費者の手触り）がある⁠。交通系は全モードで事業者向けと利用者向けの両方やる——次の欠落は、その両側から出てくる。

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

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

試す

• ⁠gunjo.jp⁠ ／ ⁠金額内訳 AmountBreakdown⁠ ／ 逆引き索引 ⁠/docs/by-use-case⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#108
• ⁠GunjoUI by UIXHERO⁠

利用者向けに降りた瞬間、最低スコアと新しい欠落。だからこそ、やる価値があった。