#170スコア 4/5運輸：鉄道

AI に新幹線予約画面を作らせてみた — A→B 区間ヘッダが結晶化、索引の「縦と横」の取り違えを是正（やってみた #170）

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

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

解説記事

AI に新幹線予約画面を作らせてみた — A→B 区間ヘッダが結晶化、索引の「縦と横」の取り違えを是正（やってみた #170）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。在庫深掘り（OriginDestination 狙い）——鉄道 特急・新幹線 空席照会・予約（区間・列車一覧・座席表・運賃料金）。えきねっと/EX予約 風のモバイル予約画面。

結果 — 4/5、A→B 区間ヘッダが3回目で結晶化

tsc 緑・375px mobile-first。cold AI（群青を一度も触っていない設定）：

本物の交通リテラシーのあるキット。 必要な部品はほぼ存在し、いくつかは日本の鉄道予約画面のために書かれたよう（空席/予約済/窓側/通路側/旅客区分 大人/小児/片道/往復 がソースの既定と a11y 名に焼き込まれている）。1星減点は1つの defining な穴＝A→B 出発→到着 primitive が無いこと——この画面の最も特徴的な要素で、索引が能動的に誤誘導した。

観測の核 — A→B が3回目で結晶化（しかも「縦と横」の取り違え）

ご乗車区間（東京 → 新大阪）と列車ごとの発→着（06:00 → 08:27）——この画面の主役は A→B だ：

cold AI「ご乗車区間 出発駅 → 到着駅 の A→B ヘッダを手組みした（RouteHeader.tsx・90行）。OriginDestination/RouteHeader/A→B primitive が無い。列車ごとの 発→着 も手組み（DepArr）＝同根。索引は Itinerary（日別の縦タイムライン）と RouteStops（番号付き縦の配送停留所＋遅延列）を勧めたが、両方とも『ページを下に流れる A→…→Z シーケンス』＝『上に横並びで swap 付きの A→B ヘッダ』の真逆の形。索引に従えば間違った UI になる。索引は『該当なし』と言わず最近傍をでっち上げる——最も重要な所で最悪だ。追加すべき最重要は OriginDestination（from/to/via・矢印・swap・結果行用の inline DepArr）。」

A→B 区間ヘッダは #166 国際輸送(POL→POD)・#169 路線(起点→終点)・#170 特急(出発→到着＋列車の発→着) で3回目＝3-confirm。その場で build した：

  • OriginDestination＝横並びの A→B（出発 → 到着・各端点は label＋sub[コード/時刻/番線]・矢印か所要時間の connector・出発⇄到着 の swap ボタン・経由 via）。
  • inline で発→着の結果行用コンパクト版（06:00発 → 08:27着）。
  • RouteStops/Itinerary とは別物＝あれらは縦に流れるシーケンス（配送停留所/日別プラン）、これは横の A→B。
  • 索引も是正＝A→B ヘッダ→OriginDestination に向け直し、Itinerary/RouteStops は縦シーケンスで形が逆、と明記。
  • ブラウザで ヘッダ(東京→新大阪＋swap)・via(羽田→福岡→那覇)・inline(06:00→08:27)・swap の aria-label を確認＝PR#428（#425 クローズ）。結晶化 23個目。

学び — 索引の罠に「形（縦 vs 横）の取り違え」が加わった

索引の罠を5軸まで整理してきた（隠す/すり替える[型・a11y 意味論]/自認する/誠実な空）。#170 で新しい軸＝レイアウトの形の取り違えが見えた：

  • A→B は横（ヘッダ・上に並ぶ）。
  • Itinerary/RouteStops は縦（シーケンス・下に流れる）。

索引は「経路だから Itinerary」と意味のキーワード（経路/route）でマッチしたが、UI の形（横の A→B か縦のシーケンスか）が逆だった。cold AI 評：「索引は存在する物には良い menu だが、該当なしと言わず最近傍をでっち上げる——defining な A→B でそれが起きるのが最悪」。是正は OriginDestination を作り、索引で「A→B は横、RouteStops/Itinerary は縦」と形で区別した。索引の格付けは、型・a11y 意味論に加えて『レイアウトの形』まで含める。

拾った点（陽性）

  • ✅ SeatMap が「新幹線が docstring に名指し・最良の部品」＝通路 gap・座席状態・grid a11y(8番A席、窓側、選択中)が完璧。
  • ✅ AmountBreakdown(運賃+特急料金)/SegmentedControl(片道往復/座席種別/大人小児)/LineChip(のぞみ/ひかり)/DatePicker(ja) 全て native。
  • 🟡 ListCard の meta が muted-xs で発→着時刻には静かすぎ（title に逃がした）・Stepper(ウィザード)と NumberInput layout="stepper"(数量) の名前衝突。

今回 src build = OriginDestination（#425→PR#428）。4/5・A→B 結晶化・索引「縦横」是正。

📊 結晶化スコアボード（build 済 23個）

…SectionList / RouteStops(多日) / NavRow / Statistic(goodWhen) / OriginDestination（このセッションで10部品 build/拡張） 進行中：document-download(2/3)・MatchCard(1/3)

📋 モード進捗

  • ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅／🚌 バス ✅／🚚 トラック ✅（運輸5モード完走）
  • 在庫深掘り：goodWhen(#169)・OriginDestination(#170) 結晶化。残：document-download 2/3・MatchCard 1/3

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

  • 在庫深掘り仕上げ（document-download 3回目→build）or 新業種へ。※KeEem に確認。

試す

A→B 区間ヘッダが結晶化した——索引の罠に「形（縦 vs 横）の取り違え」が加わった。意味のキーワードでマッチするが UI の形が逆。索引の格付けはレイアウトの形まで含める。

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

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

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

AmountBreakdownAmountLineBadgeBottomActionBarButtonCardDatePickerLineChipListCardNumberInputPageHeaderSeatMapSegmentedControlSeparatorStepperStepperStep

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

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