#156スコア 4.5/5運輸：バス

AI にバスのモバイル乗車券を作らせてみた — SegmentedControl が結晶化、2回連続でその場 build（やってみた #156）

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

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

解説記事

AI にバスのモバイル乗車券を作らせてみた — SegmentedControl が結晶化、2回連続でその場 build（やってみた #156）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。バス toC を厚く（接近案内#138・高速バス予約#139・経路検索#140 に追加＝toB5 に対し弱い toC3 を掘る）——モバイル乗車券・一日乗車券・IC（券種・大人/小児・現金/IC/QR・運賃・有効時間・乗車時画面提示）。

結果 — 4.5/5、SegmentedControl が結晶化（#155 Leaderboard に続き2回連続 build）

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

このキットは このスクリーンのために用意されたかのよう。 文脈ゼロの adopter が日本の交通モバイル乗車券フローを作ると、速く正しい部品に着地し、難所（券面・有効期限・運賃台帳・下部ドック）が全て第一級。半点減らしたのは唯一の本当の穴——SegmentedControl が無いこと。

観測の核 — SegmentedControl が3回目で結晶化（その場 build）

大人/小児・現金/IC/QR の小さなトグル——ToggleGroup を当てたくなる。だが：

cold AI「SegmentedControl が無い。grep しても SegmentedGaugeCard しか出ない。代替は ToggleGroup だが items が w-fit ハードコード＋group が justify-center＝標準の等幅セグメント見た目にするには w-full justify-stretch [&>*]:flex-1 を後付けせねばならず、全 adopter が再発見する。しかも onValueChange が string|string[]（単/複両用）で (v)=>v&&setPassenger(v as ...) とキャストが要る。専用の単一選択 SegmentedControl なら綺麗な (v:string)=>void になる。追加価値が最も高い。」

SegmentedControl は出発/到着(#110/#140)・払戻し(#129)・個人/法人(#152 AccountChip)でも手組み済＝3-confirm を大きく超過。その場で build した：

  • SegmentedControl＝凹んだトラックに2-4等幅セグメント・active が浮く（iOS/Android 風）・role=radiogroup＋role=radio＋roving tabindex＋矢印キー・色だけに依存しない選択状態・onValueChange は常に単一 string。
  • ToggleGroup（汎用・content-fit・単/複両用・union 型）でも RadioCard（大きな価格付きカード）でも Tabs（コンテンツ切替）でもない、小さな等幅 mode/segment 切替。
  • 索引も是正＝by-use-case の「2-3等幅→ToggleGroup」を「2-4等幅→SegmentedControl」に直し、旅客区分/支払いトグルの専用項目を追加。

design:verify 緑・tsc・build 緑・ブラウザで radiogroup×3・aria-checked×3（大人/IC/週）・data-slot を確認＝PR#414（#409 クローズ）。結晶化 17個目。

学び — 「3-confirm の在庫」は連続で放出される

#155 で Leaderboard、#156 で SegmentedControl——2回連続でその場 build した。偶然ではない。連載が150回を超え、cold-test が3-confirm に達した候補の在庫が溜まっていた（Leaderboard 2/3・SegmentedControl 3+・ComparisonTable・inverted-metric…）。バス toB/toC を厚く掘ると、その在庫が該当する画面で3回目の目撃に達し、次々 build される：

  • 安全コンソール（#155）→ ランキングを3回目に踏む → Leaderboard。
  • モバイル乗車券（#156）→ 旅客区分トグルを（明示的に）踏む → SegmentedControl。

これは #153-154 で書いた「床が成熟すると新画面は②検証が主」の続き：②検証の中で、たまたま在庫の3回目を踏むと①build に変わる。深掘りは「越境検証」と「在庫の結晶化」を同時に回す。弱い側（toC）ほど在庫が多いから、toC を掘ると build が出やすい——KeEem が「toC こそ掘れ」と言い続けた理由がここでも効く。

拾った点

  • ✅ TicketStub（モバイル券面 QR）/ExpiryBadge（有効期限）/RadioCard（券種）/AmountBreakdown（運賃）/BottomActionBar（購入）が全て built-for-this＝~95%。
  • ✅ 索引は誤誘導なし（旅客/支払いトグルも正しく誘導・SegmentedControl 不在だけが穴だった）。
  • 🟡 ValidityTimer（分秒の有効時間カウントダウン＝ExpiryBadge は日粒度で「2時間有効」を表せない）＝#415（ExpiryBadge の短窓の双子）。

今回 src build = SegmentedControl（#409→PR#414）。4.5/5・3-confirm 結晶化・索引是正。

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

…ExpiryBadge / BottomActionBar / Gantt(intraday) / Leaderboard / SegmentedControl 進行中：ComparisonTable・inverted-metric(2/3)・ValidityTimer(1/3)・ReferralCard

📋 モード進捗 — バス toC 深掘り開始

  • ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅
  • 🚌 バス：toB5 ＋ toC4（接近#138/高速予約#139/経路#140/乗車券#156） ← toC をあと2枚で toB5 と対称
  • 🚚 トラック：未着手

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

  • バス toC をさらに（IC/定期・運行情報案内 等）で toB5 と対称へ、or トラック新モード。※KeEem に確認。

試す

SegmentedControl が3回目で結晶化した——深掘りは「越境検証」と「3-confirm 在庫の結晶化」を同時に回す。弱い側（toC）ほど在庫が多いから、toC を掘ると build が出やすい。

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

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

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

AlertAlertDescriptionAlertTitleAmountBreakdownBadgeBottomActionBarButtonCardCardContentCardHeaderCardTitleExpiryBadgeMetadataListPageHeaderRadioCardRadioCardGroupSeparatorSheetSheetContentSheetDescriptionSheetHeaderSheetTitleTicketStubToggleGroupToggleGroupItem

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

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