AI にきっぷ購入を作らせてみた — B2C 購入の「原子」が、3回目でついに部品になった（やってみた #121）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。鉄道 toC 深掘り（toC バックログ）の3枚目——おトクなきっぷ／一日乗車券 購入（商品比較・選択・枚数・決済）。

きっぷ商品の選択＝価格つき選択カード。観測の本命——それが3回目の手組みになるか。

結果 — 3.5/5、そして RadioCard の 3-confirm 発火

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

AmountBreakdown — kit 最良のフィット（おとな×枚数＋こども−割引=支払額が10行のデータマップ）。NumberInput layout="stepper" が「commerce の数量ピッカー」と明記＝おとな/こども枚数に drop-in。Stepper/MetadataList/Badge も zero。 だが商品選択＝価格つき選択カードが最大の B2C ギャップ。

観測の核 — pick-one の a11y まで言い当てられた

商品の選択（価格つき選択カード）＝手組み。最大の穴。 RadioCard/SelectableCard が無い。 索引と ListCard docs は ListCard に誘導するが、ListCard は aria-pressed（トグルボタン）の意味論で、単一選択のラジオではない——8択を button[aria-pressed] でやるのは「スクリーンリーダーが『1/8』でなく独立トグルとして読む a11y の悪臭」。RadioGroup は意味論は正しいが16px ドット＋テキストでカードでない。「RadioCard＝RadioGroup の意味論が ListCard の本体を着たもの。価格が一番目立つスロット＋おトクのフック＋選択チェック＋ring。~120行を消す。#1 の追加。」

3回連続——特急券 #109（「RadioGroup にカード型タイル無し」）・定期券 #119（価格つき種類期間カード）・きっぷ #121（価格つき商品カード）。別々3人の cold AI が独立に、しかも a11y の問題（aria-pressed トグル ≠ ラジオ単一選択）まで言い当てた。 その場で build した。

build — RadioCard（選択カード）

<RadioCardGroup value={value} onValueChange={setValue} aria-label="おトクなきっぷ">
  <RadioCard value="holiday" title="休日おでかけパス" description="首都圏フリーエリア・土休日限定"
    tags={<Badge variant="success">観光向け</Badge>} price={formatCurrency(2720)} highlight="約1,000円分おトク" />
</RadioCardGroup>

• RadioCardGroup＝role="radiogroup"＋roving tabindex＋矢印キー（kit の RadioGroup の WAI-ARIA パターンを踏襲）。
• RadioCard＝role="radio" のカード（タグ＋タイトル＋エリア/期間＋強調価格スロット＋おトクフック＋選択チェック＋ring・≥44px）。
• 真の単一選択ラジオ意味論＝ListCard の aria-pressed トグル問題を解消。索引も「価格つき選択カード=1つ選ぶ→RadioCard」「ListCard はナビ行」に区別。
• #370 クローズ（PR#371・実機375pxで単一選択がクリック＋ArrowDown で移動・常に aria-checked=1・92px タッチ・0 overflow・0 error）。

今回 src build = RadioCard（3-confirm・7個目の結晶化）。AmountBreakdown が8回目越境。追記: FilterChips（カテゴリ rail 再び手スクロール・#365）・StatusScreen に success が無い（購入完了に誤誘導・#366 2回目）。

学び — cold AI は「a11y の正しさ」まで3人で合意する

RadioCard が他の結晶化と違うのは、3人の cold AI が見た目だけでなく『pick-one を aria-pressed トグルでやるのは a11y 的に間違い』という意味論の問題まで独立に言い当てたこと。3回ルールは「同じ穴を3回」だけでなく、「同じ正しい設計に3回収束する」——だから build は推測でなく、3人の合意の転記になる。深掘りの効用がまた証明された：鉄道 toC を潰し切るほど、B2C の原子（RadioCard）が確実に結晶化する。

📊 結晶化スコアボード

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

• toC バックログ続行——航空（国際線 eチケット＝TicketStub 2回目 / 手荷物追跡 / ターミナルマップ＝FilterChips 3回目狙い）or 鉄道（駅ナカ提案 / 払戻し）。

試す

• gunjo.jp ／ 選択カード RadioCard ／ 金額内訳 AmountBreakdown ／ npm @gunjo/ui ／ GitHub ／ 前回まで #1〜#120
• GunjoUI by UIXHERO

B2C 購入の原子が、3回目でついに部品に——しかも3人の AI が a11y の正しさまで合意して。

---

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