AI に定期券の購入フローを作らせてみた — B2C 購入の「原子」がまだ無かった（やってみた #119）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。鉄道 toC 深掘り（バックログから・他モードに行く前に鉄道/航空 toC を厚く）の1枚目——定期券の購入・更新フロー（区間・種類期間・開始日・金額・決済）。

KeEem に「鉄道・航空 toC をきちんと潰してから他モードへ」と言われ、toC バックログを作って上から回す。これはその1枚目。

結果 — 3.5/5

tsc 緑・375px mobile-first・5ステップ購入フロー。cold AI（群青を一度も触っていない設定）：

AmountBreakdown — これのために作られた（定期運賃＋連絡分−継続割引=支払額が1:1・kit 最良）。Stepper — zero-friction（375px対応・「5-step mobile-checkout」のコメントあり＝#355 fix）。DatePicker/MetadataList/Select/Badge も zero-friction。 だが消費者購入の中心＝価格つき選択カードに部品が無い。

観測の核 — B2C 購入の「原子」が無い（RadioCard）

種類・期間/経路の選択（価格つきオプションカード）＝手組み。最大の穴。 ToggleGroup はテキストのみ（右寄せ価格＋badge のスロット無し）・RadioGroup は label/description が左寄せ固定（右に ¥8,960/月＋「おすすめ」を置けない・radio dot 4px は電話に小さい）・「価格つき選択カード」は存在しない。「RadioCard/SelectableCard（title＋subtitle＋末尾の価格/affordance＋badge スロット）は、あらゆる B2C 購入・プラン選択・配送オプション画面の原子。単一最大の追加。」

#109（特急券予約で「RadioGroup に カード型の選択タイルが無い」）＋#119＝RadioCard 2/3（#370・#135/#365 と兄弟）。支払方法ピッカー（索引が「部品なし」を返す）も同じ RadioCard でカバー。駅→駅 swap（RouteSelect）も #109/#115/#119 で繰り返し。あと1回の購入/プラン画面で 3-confirm → build。

今回 src build なし（3.5/5・RadioCard 2/3）。AmountBreakdown が定期運賃に7回目越境。

学び — 深掘りは「同じ穴の別証拠」を確実に集める

「鉄道・航空 toC を厚く」と決めて1枚目を回したら、B2C 購入の原子（RadioCard）の2つ目の証拠が出た。toC を深掘りすると、universal/準-universal な床（ListCard・AmountBreakdown・SeatMap・LoyaltySummaryCard）の越境が固まる一方で、まだ結晶化していない床（RadioCard・TicketStub・SegmentedControl・RouteSelect）の証拠が確実に貯まる。新モードに飛ぶより、鉄道/航空 toC を潰し切るほうが、3回ルールの分母を効率よく埋める——KeEem の「きちんと深掘りしてから」は、結晶化の観点でも正しい。

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

• toC バックログ続行——鉄道（駅構内ナビ / きっぷ購入）or 航空（国際線 eチケット＝TicketStub 2回目 / 手荷物追跡）。RadioCard 3回目を狙えるプラン/購入系も。

試す

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

価格つき選択カードという B2C 購入の原子が、まだ無かった——深掘り1枚目で、2つ目の証拠。

---

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