AI にきっぷ購入を作らせてみた — 利用者向けの購入の「最小単位」が、3回目でついにコンポーネントになった（やってみた #121）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠鉄道の利用者向け 深掘り（利用者向けバックログ）の3枚目⁠——⁠おトクなきっぷ／一日乗車券 購入⁠（商品比較・選択・枚数・決済）。

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

結果 — 3.5/5、そして RadioCard の3回目が発火

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

⁠AmountBreakdown — ライブラリで最良の一致⁠（おとな×枚数＋こども−割引=支払額が10行のデータマップ）。⁠NumberInput layout="stepper"⁠ が「購入の数量ピッカー」と明記＝おとな/こども枚数にそのまま。Stepper/MetadataList/Badge も手組みゼロ。 ⁠だが商品選択＝価格つきの選択カードが最大の利用者向けの欠落。⁠

観測の核 — 1つ選ぶ形のアクセシビリティまで言い当てられた

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

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

作る — 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＋矢印キー（ライブラリの RadioGroup の WAI-ARIA パターンを踏襲）。
• RadioCard＝role="radio" のカード（タグ＋タイトル＋エリア/期間＋⁠強調した価格の差込口⁠＋おトクのフック＋選択チェック＋ring・≥44px）。
• ⁠本当の単一選択ラジオの意味づけ⁠＝ListCard の aria-pressed トグル問題を解消。索引も「価格つきの選択カード=1つ選ぶ→RadioCard」「ListCard はナビの行」に区別。
• #370 をクローズ（PR#371・実機375pxで単一選択がクリック＋ArrowDown で移動・常に aria-checked=1・92px タッチ・溢れ0・0 error）。

⁠今回 src で作ったもの = RadioCard⁠（3回目・7個目のコンポーネント化）。⁠AmountBreakdown が8回目の業界越え⁠。追記: FilterChips（カテゴリの帯 が再び手スクロール・#365）・StatusScreen に success が無い（購入完了に誤誘導・#366 2回目）。

学び — 予備知識ゼロの AI は「アクセシビリティの正しさ」まで3人で合意する

RadioCard が他のコンポーネント化と違うのは、⁠3人の予備知識ゼロの AI が見た目だけでなく『1つ選ぶ形を aria-pressed トグルでやるのはアクセシビリティ的に間違い』という意味づけの問題まで独立に言い当てた⁠こと。3回ルールは「同じ欠落を3回」だけでなく、⁠「同じ正しい設計に3回収束する」⁠——だから作るのは推測でなく、3人の合意の転記になる。深掘りの効用がまた証明された：鉄道の利用者向けを潰し切るほど、利用者向けの最小単位（RadioCard）が確実に固まる。

📊 コンポーネント化スコアボード

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

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

試す

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

利用者向けの購入の最小単位が、3回目でついにコンポーネントに——しかも3人の AI がアクセシビリティの正しさまで合意して。