AI にバスのモバイル乗車券を作らせてみた — SegmentedControl がコンポーネント化、2回連続でその場で作成（やってみた #156）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠バスの利用者向けを厚く⁠（接近案内#138・高速バス予約#139・経路検索#140 に追加＝事業者向け5 に対し弱い 利用者向け3 を掘る）——⁠モバイル乗車券・一日乗車券・IC⁠（券種・大人/小児・現金/IC/QR・運賃・有効時間・乗車時画面提示）。

結果 — 4.5/5、SegmentedControl がコンポーネント化（#155 Leaderboard に続き2回連続で作成）

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

⁠このライブラリは この画面のために用意されたかのよう。⁠ 予備知識ゼロの採用者が日本の交通のモバイル乗車券フローを作ると、速く正しいコンポーネントに着地し、難所（券面・有効期限・運賃台帳・下部ドック）が全て一級。半点減らしたのは唯一の本当の欠落——SegmentedControl が無いこと。

観測の核 — SegmentedControl が3回目でコンポーネント化（その場で作成）

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

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

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

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

design:verify 緑・tsc・ビルド緑・ブラウザで radiogroup×3・aria-checked×3（大人/IC/週）・data-slot を確認＝PR#414（#409 クローズ）。⁠コンポーネント化 17個目。⁠

学び — 「3回確認に達した候補のストック」は連続で放出される

#155 で Leaderboard、#156 で SegmentedControl——⁠2回連続でその場で作った⁠。偶然ではない。連載が150回を超え、⁠3回確認に達した候補のストック⁠が溜まっていた（Leaderboard 2/3・SegmentedControl 3+・ComparisonTable・反転指標…）。バスの事業者向け/利用者向けを厚く掘ると、そのストックが⁠該当する画面で3回目の目撃に達し、次々 作られる⁠：

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

これは #153-154 で書いた「土台が成熟すると新画面は②検証が主」の続き：⁠②検証の中で、たまたまストックの3回目を踏むと①その場で作るに変わる⁠。深掘りは「別業種での検証」と「ストックのコンポーネント化」を同時に回す。弱い側（利用者向け）ほどストックが多いから、⁠利用者向けを掘ると新規作成が出やすい⁠——「利用者向けこそ掘れ」という方針の理由がここでも効く。

拾った点

• ✅ TicketStub（モバイル券面 QR）/ExpiryBadge（有効期限）/RadioCard（券種）/AmountBreakdown（運賃）/BottomActionBar（購入）が全て これのために作られた＝~95%。
• ✅ 索引は誤誘導なし（旅客/支払いトグルも正しく誘導・SegmentedControl が無いことだけが欠落だった）。
• 🟡 ⁠ValidityTimer⁠（分秒の有効時間のカウントダウン＝ExpiryBadge は日単位で「2時間有効」を表せない）＝#415（ExpiryBadge の短い期間版の双子）。

⁠今回 src で作ったもの = SegmentedControl（#409→PR#414）⁠。4.5/5・3回確認でコンポーネント化・索引是正。

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

…ExpiryBadge / BottomActionBar / Gantt(日中モード) / Leaderboard / ⁠SegmentedControl⁠ 進行中：ComparisonTable・反転指標(2/3)・ValidityTimer(1/3)・ReferralCard

📋 モード進捗 — バスの利用者向け 深掘り開始

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

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

• バスの利用者向けをさらに（IC/定期・運行情報案内 等）で 事業者向け5 と対称へ、or トラック新モード。※次回までに決める。

試す

• ⁠gunjo.jp⁠ ／ ⁠セグメント切替 SegmentedControl⁠（新）／ ⁠チケット券面 TicketStub⁠ ／ ⁠有効期限 ExpiryBadge⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#155
• ⁠GunjoUI by UIXHERO⁠

SegmentedControl が3回目でコンポーネント化した——深掘りは「別業種での検証」と「3回確認に達した候補のコンポーネント化」を同時に回す。弱い側（利用者向け）ほどストックが多いから、利用者向けを掘ると新規作成が出やすい。