AI に定期券の購入フローを作らせてみた — 利用者向けの購入の「最小単位」がまだ無かった（やってみた #119）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠鉄道の利用者向け 深掘り（バックログから・他モードに行く前に鉄道/航空の利用者向けを厚く）の1枚目⁠——⁠定期券の購入・更新フロー⁠（区間・種類期間・開始日・金額・決済）。

「鉄道・航空の利用者向けをきちんと潰してから他モードへ」と決めて、利用者向けバックログを作って上から回す。これはその1枚目。

結果 — 3.5/5

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

⁠AmountBreakdown — これのために作られた⁠（定期運賃＋連絡分−継続割引=支払額が1:1・ライブラリで最良）。⁠Stepper — 摩擦ゼロ⁠（375px対応・「5ステップのモバイル決済」のコメントあり＝#355 の修正）。DatePicker/MetadataList/Select/Badge も 摩擦ゼロ。 ⁠だが消費者の購入の中心＝価格つきの選択カードにコンポーネントが無い。⁠

観測の核 — 利用者向けの購入の「最小単位」が無い（RadioCard）

⁠種類・期間/経路の選択（価格つきオプションカード）＝手組み。最大の欠落。⁠ ToggleGroup は⁠テキストのみ⁠（右寄せの価格＋バッジの差込口が無い）・RadioGroup は label/description が⁠左寄せ固定⁠（右に ¥8,960/月＋「おすすめ」を置けない・ラジオの点 4px はスマホに小さい）・「価格つきの選択カード」は存在しない。「⁠RadioCard/SelectableCard（タイトル＋サブタイトル＋末尾の価格/手がかり＋バッジの差込口）は、あらゆる利用者向けの購入・プラン選択・配送オプション画面の最小単位。単一で最大の追加。⁠」

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

⁠今回 src の新規コンポーネントなし⁠（3.5/5・RadioCard 2/3）。⁠AmountBreakdown が定期運賃に7回目の業界越え⁠。

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

「鉄道・航空の利用者向けを厚く」と決めて1枚目を回したら、⁠利用者向けの購入の最小単位（RadioCard）の2つ目の証拠⁠が出た。利用者向けを深掘りすると、全業種共通/準・全業種共通の土台（ListCard・AmountBreakdown・SeatMap・LoyaltySummaryCard）の業界越えが固まる一方で、⁠まだコンポーネント化していない土台（RadioCard・TicketStub・SegmentedControl・RouteSelect）の証拠が確実に貯まる⁠。新モードに飛ぶより、鉄道/航空の利用者向けを潰し切るほうが、3回ルールの分母を効率よく埋める——「きちんと深掘りしてから次へ」という方針は、コンポーネント化の観点でも正しい。

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

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

試す

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

価格つきの選択カードという利用者向けの購入の最小単位が、まだ無かった——深掘り1枚目で、2つ目の証拠。