AI にマイレージ画面を作らせてみた — ListCard は3用途で効いたが、ロイヤリティの「華」は無かった（やってみた #116）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠航空の利用者向け 深掘りバッチの3枚目⁠——⁠予約管理・マイレージ⁠（会員ステータス・予約一覧・マイル）。「鉄道もポイント必要だったかも」という直感を、航空で先に確かめる。

結果 — 3.5/5

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

⁠ListCard が標準装備の主役⁠——予約行・マイル履歴・特典 の3つのリスト全部に同じコンポーネントで、摩擦ゼロ。≥44px の本物のボタン・aria-pressed・左の深刻度の帯。⁠ライブラリで最良の答え。⁠ ⁠だが画面の華＝ロイヤリティ要約にコンポーネントが無い。⁠ 会員ステータスカード（ランクのバッジ＋残高の大きな見出し数字＋次ランクまでの進捗＋失効警告）は全部手組み。「Statistic は平らな KPI タイルで、バッジも進捗も温かみも無い。⁠これが筆頭の欠落。⁠」

⁠ListCard が1画面で3用途⁠（予約/履歴/特典）＝全業種共通の土台の汎用性を一画面で実証。

課題に記録

• 🟢 ⁠LoyaltySummaryCard/TierCard⁠（残高の大きな見出し数字＋ランクのバッジ＋目標基準の進捗「ダイヤモンドまであと11,500 PP」＋失効の差込口）＝#364・1/3。⁠Meter の目標基準/ロイヤリティのモード⁠も同じ issue（Meter の読み上げが「38,500/50,000 PP（77%）」と容量の表現で、目標未満で赤に反転するハマりどころ＝「あと◯◯」の表現と、判定しないトーンが要る）。
• 🟢 ⁠44px のタッチ標的⁠（Button 最大40px・Tabs も手で min-h-11・#362）。Badge h-5 固定で2行の警告に上書き。

⁠今回 src の新規コンポーネントなし⁠（3.5/5・ListCard の3用途が成果・LoyaltySummaryCard は 1/3）。

学び — 「鉄道もポイント必要」の直感が裏付いた

航空のマイレージで「ロイヤリティ要約にコンポーネントが無い」と出た。私は「鉄道もポイント必要だったかも」と感じていた——⁠鉄道の利用者向けに戻れば IC/ポイント/定期で LoyaltySummaryCard の2回目が出る公算が高い⁠。これは利用者向けのモード固有の土台の中でも、⁠複数モード（航空マイル・鉄道ポイント・小売ロイヤリティ）にまたがる、準・全業種共通の土台⁠。バックログに鉄道の利用者向けのポイント画面を積んで、3回ルールの2つ目を踏みにいく。一方 ListCard は3用途で揺るがず＝⁠利用者向けの全業種共通の土台は、もう信頼できる段階⁠。

航空の利用者向けバッチ（#114-116）まとめ

⁠利用者向けを深掘りした結果＝SeatMap を固め、TicketStub/LoyaltySummaryCard/SegmentedControl/44px/利用者向けの温かみ という次の土台を露出。⁠ 弱い利用者向けの画面は、土台が一番出る場所だった。

試す

• ⁠gunjo.jp⁠ ／ ⁠リストカード ListCard⁠ ／ ⁠座席表 SeatMap⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#115
• ⁠GunjoUI by UIXHERO⁠

ListCard は3用途で効いた。ロイヤリティの華はまだ無い——だから次の土台が見えた。