AI にタクシー会員・クーポン画面を作らせてみた — 連載最強の領域への適合、作ったコンポーネントが次々「自宅」に帰った（やってみた #151）
/taxi-membership375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にタクシー会員・クーポン画面を作らせてみた — 連載最強の領域への適合、作ったコンポーネントが次々「自宅」に帰った（やってみた #151）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。タクシーの利用者向けを深掘り（配車#147・予約#148・履歴#149・サポート#150 に続く5枚目。事業者向け6 に対し利用者向けを厚く継続中）——会員・サブスク・クーポン（会員ランク・ポイント・乗り放題・クーポン・友達紹介）。
結果 — 4.5/5、連載で最も強い領域への適合
tsc 緑・375px mobile-first。予備知識ゼロの AI（群青を一度も触っていない設定）：
このライブラリは、この画面のために作られたとしか思えないほど向いている（怪しいほど）。 予備知識ゼロの採用者が日本の配車の会員/クーポン画面を作ると、JSDoc が文字通り『クーポン』『ポイント残高』『プラン』『会員証』を名指しする、用途向けに作られたコンポーネントにほぼ全部運ばれる。
7つのコンポーネント（LoyaltySummaryCard/RadioCard/TicketStub/ListCard/ExpiryBadge/BottomActionBar/PageHeader）が~95%を正しいアクセシビリティとタッチ標的でカバー・索引も7用途中6を前知識ゼロで正しく誘導。
観測の核 — 作ったコンポーネントが次々「自宅」に帰った
この画面で、連載で作った/固めたコンポーネントが自宅（本来の用途）に帰った/別業界で自力発見された：
-
LoyaltySummaryCard（#118 で作った＝ポイント/ランクの大きな見出し）＝まさにその居場所・会員名/ランク/保有ポイント/次ランクの進捗/失効/履歴ボタン が 1:1。 -
TicketStub（#128 で作った＝クーポン/会員証の券面）＝クーポン提示の居場所・QR+コードラベル+ミシン目。 -
ExpiryBadge（#142 で作った＝資格期限）＝クーポンの利用期限で自力発見＝乗務員(#142 資格)→資産(#144 車検)→クーポン(#151) と「日付vs期限」の軸が3つの領域を横断。 -
BottomActionBar（#147 で作った）＝#147→#148→#149→#151 と5連続自力発見。
予備知識ゼロの AI「LoyaltySummaryCard/RadioCard/TicketStub/ListCard/ExpiryBadge/BottomActionBar/PageHeader が合わせて ~95% を正しいアクセシビリティとタッチ標的で・索引が前知識ゼロで誘導。第三者のライブラリで見た利用者向けの会員画面で、最強の領域への適合。」
学び — 「深掘りの終盤は、固めた土台が画面を勝手に組み上げる」
タクシーの利用者向けを5枚掘って、面白い景色が見えた：最初の利用者向け画面（#147 配車）は BottomActionBar を手組みさせた（欠落）。だが5枚目（#151 会員）は、過去に作ったコンポーネントが次々と自宅/業界を越えて嵌まり、手組みは紹介カード1ブロックだけ。 これはコンポーネント化の到達点：
- 利用者向けの土台（PageHeader/ListCard/FilterChips/RadioCard/AmountBreakdown/TicketStub/LoyaltySummaryCard/ExpiryBadge/BottomActionBar）が一通り作られ、
- 新しい利用者向け画面は「手組みゼロに近い組み立て」になる。
これは 事務方を14業種・運輸の事業者向けを5モードで作り切ったのと同じ曲線を、利用者向けでも描き切りつつある証拠。#138 で「別業界での自力発見の複利が一巡を閉じる」と書いたが、タクシーの利用者向けでも同じ複利が回り、5枚目で『最強の領域への適合』に到達した。深掘りを潰すほど、新画面は土台の組み合わせだけで立つ——それが目指すゴール。
拾った欠落（利用者向けロイヤリティ）
- 🟠 ReferralCard（友達紹介＝報酬の行+コピーできるコードチップ+共有）＝手組みした唯一のブロック＝#408。
- 🟡 PromoCodeField（クーポンコード入力・英数＝InputOTP/ScanInput は不適）＝索引で唯一 未対応＝#408。
- 🟡 LoyaltySummaryCard の tierTone（tone=brand が固定の群青グラデ・ゴールド会員でも青＝ランク色を反映できない）＝#408（#118 の拡張）。
今回 src の新規コンポーネントなし（4.5/5・ロイヤリティ土台が~95%業界越え・ReferralCard 等を課題に記録）。
📊 コンポーネント化スコアボード（作成済 15個）
…PageHeader / Itinerary / TicketStub / Stringline / StatusBoard / ExpiryBadge / BottomActionBar 進行中：ReferralCard/PromoCodeField・RatingInput・SectionList・DateTimePicker・StatusLevel 2/3
📋 タクシーの利用者向け 進捗（事業者向け6 に接近）
- 🚕 タクシー：事業者向け6 ／ 利用者向け5（配車/予約/履歴/サポート/会員） ← あと1枚で 事業者向け6 と対称
- 残り 利用者向け候補：法人配車・タクシーチケット（事業者を通じて利用者に届くタイプ・
B2B2C）
次回予告（やってみた #152）
- タクシーの利用者向け 最後の1枚（法人配車・チケット 等）で 事業者向け6+利用者向け6 対称＝タクシー本当の完走へ。※次回までに決める。
試す
- gunjo.jp ／ ロイヤリティ LoyaltySummaryCard ／ チケット券面 TicketStub ／ 有効期限 ExpiryBadge ／ npm
@gunjo/ui／ GitHub ／ 前回まで #1〜#150 - GunjoUI by UIXHERO
作ったコンポーネントが次々「自宅」に帰った——深掘りの終盤は、固めた土台が画面を勝手に組み上げる。タクシーの利用者向けも5枚目で最強の領域への適合に到達した。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。