AI に新幹線予約画面を作らせてみた — A→B 区間の見出しがコンポーネント化、索引の「縦と横」の取り違えを是正（やってみた #170）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠ストック深掘り（OriginDestination 狙い）⁠——⁠鉄道 特急・新幹線 空席照会・予約⁠（区間・列車一覧・座席表・運賃料金）。えきねっと/EX予約 風のモバイル予約画面。

結果 — 4/5、A→B 区間の見出しが3回目でコンポーネント化

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

⁠本物の交通の知識のあるライブラリ。⁠ 必要なコンポーネントはほぼ存在し、いくつかは日本の鉄道予約画面のために書かれたよう（空席/予約済/窓側/通路側/旅客区分 大人/小児/片道/往復 がソースの既定とアクセシビリティ名に焼き込まれている）。1星減点は、この画面を定義づける欠落＝⁠A→B 出発→到着のコンポーネントが無い⁠こと——この画面の最も特徴的な要素で、索引が能動的に誤誘導した。

観測の核 — A→B が3回目でコンポーネント化（しかも「縦と横」の取り違え）

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

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

⁠A→B 区間の見出しは #166 国際輸送(POL→POD)・#169 路線(起点→終点)・#170 特急(出発→到着＋列車の発→着) で3回目＝3回確認。その場で作った⁠：

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

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

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

• A→B は⁠横⁠（見出し・上に並ぶ）。
• Itinerary/RouteStops は⁠縦⁠（並び・下に流れる）。

索引は「経路だから Itinerary」と⁠意味のキーワード（経路/route）でマッチ⁠したが、⁠UI の形（横の A→B か縦の並びか）が逆⁠だった。予備知識ゼロの AI 評：「索引は存在する物には良い一覧だが、⁠該当なしと言わず最も近いものをでっち上げる——この画面を定義づける A→B でそれが起きるのが最悪⁠」。是正は OriginDestination を作り、索引で「A→B は横、RouteStops/Itinerary は縦」と⁠形で区別⁠した。⁠索引の格付けは、型・アクセシビリティの意味づけに加えて『レイアウトの形』まで含める。⁠

拾った点（良好）

• ✅ ⁠SeatMap が「新幹線が docstring に名指し・最良のコンポーネント」⁠＝通路の隙間・座席状態・グリッドのアクセシビリティ(8番A席、窓側、選択中)が完璧。
• ✅ AmountBreakdown(運賃+特急料金)/SegmentedControl(片道往復/座席種別/大人小児)/LineChip(のぞみ/ひかり)/DatePicker(ja) 全て そのまま合う。
• 🟡 ListCard の meta が muted-xs で発→着時刻には静かすぎ（title に逃がした）・Stepper(ウィザード)と NumberInput layout="stepper"(数量) の名前衝突。

⁠今回 src で作ったもの = OriginDestination（#425→PR#428）⁠。4/5・A→B コンポーネント化・索引「縦横」是正。

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

…SectionList / RouteStops(複数日) / NavRow / Statistic(goodWhen) / ⁠OriginDestination⁠（このセッションで10コンポーネントを作成/拡張） 進行中：帳票ダウンロード(2/3)・MatchCard(1/3)

📋 モード進捗

• ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅／🚌 バス ✅／🚚 トラック ✅（運輸5モード完走）
• ストック深掘り：goodWhen(#169)・OriginDestination(#170) コンポーネント化。残：帳票ダウンロード 2/3・MatchCard 1/3

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

• ストック深掘り仕上げ（帳票ダウンロード 3回目→作る）or 新業種へ。※次回までに決める。

試す

• ⁠gunjo.jp⁠ ／ ⁠区間ヘッダ OriginDestination⁠（新）／ ⁠座席表 SeatMap⁠ ／ ⁠金額内訳 AmountBreakdown⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#169
• ⁠GunjoUI by UIXHERO⁠

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