AI に宅配の配達設定画面を作らせてみた — 索引が「動く部品に見えるが動かす意味が違う」へ誘導した（やってみた #167）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。トラック toC を厚く（荷主#164・宅配追跡#165・国際輸送#166 に続く）——宅配 個人向け 受取・配達設定（置き配・受取場所・受取時間帯・通知・デジタル会員証）。モバイルファースト設定画面。

結果 — 4/5、設定床は ~90% だが「設定行」だけ穴

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

B2C モバイル設定画面に本当に良いキット。 ~12部品が密な設定画面の ~90% をカバーし、アクセシビリティとモバイル ergonomics が既に焼き込まれている。手組みしたのは1つだけ。

観測の核 — 索引が「navigation を toggle にすり替える」a11y バグ

設定行（[アイコン] ラベル … 現在値 [chevron] で詳細へ遷移）——ListCard を当てたくなる。だが cold AI は a11y バグを見抜いた：

cold AI「設定/nav 行をモデルする primitive が無い。索引は ListCard に誘導するが2点で誤り：(1) ListCard.onSelect は aria-pressed のトグル意味論＝SR は『トグルボタン、押下/非押下』と読む・だが設定行は『次の画面へ遷移』でトグルではない＝意味論的に誤り。(2) ListCard は枠付きの単独カードで、flush な iOS/Android のグループ行でない＝ハイラインで区切られた『現在の設定』ブロックを枠/影と戦わずに作れない。SettingRow+SettingGroup を ~110行手組みした。NavRow/SettingsRow であるべき・追加すべき最重要。」

→ NavRow は今 2/3（#152 タクシー法人 → #167 配達設定）＝#409。これは #150（索引が表示専用 Rating を input に誘導）の親戚だ：索引が『動く部品（ListCard.onSelect）』に誘導するが、その『動き方（aria-pressed トグル）』が用途（navigation）と違う。 adopter は ListCard を当て、SR が「トグルボタン」と読み上げて初めて a11y バグに気付く。「部品が無い」より「索引が意味論の違う部品を勧める」方が、見つけにくい a11y バグになる。

あと1回の設定/アカウント/メニュー画面で 3-confirm → build（NavRow＝navigation 意味論で aria-pressed でない・SettingGroup でグループ化）。今回は build せず（NavRow 専用目撃は #152/#167 の2回）。

観測の核2 — TicketStub がデジタル会員証で自力発見

デジタル会員証（バーコード/QR）は TicketStub に native：

cold AI「TicketStub＝デジタル会員証を完璧に・format='qr'・perforation の上の children スロット・codeLabel・SSR-safe な決定的コードレンダラ(hydration mismatch 無し＝考えられている)・本番の実バーコードは code prop と正直。」

TicketStub は #128 build（クーポン/チケット券面）→ #151 クーポン → 会員証 と消費者の『提示する券面』の homeを広げ続けている。

学び — 索引の罠は「a11y の正しさ」でも測れる

索引の罠を整理してきた（隠す/すり替える/自認する）。#167 で4つ目の軸＝a11y 意味論のすり替えが見えた：

• #160 RelationshipRow＝型/構造のすり替え（people 固定を freight に）。
• #167 ListCard＝a11y 意味論のすり替え（aria-pressed トグルを navigation に）。

両方「名前で正解に見えるが、ある軸で用途と違う」すり替えだが、#167 は見た目もコードも動く（ListCard.onSelect は実際にクリックできる）のに、スクリーンリーダーへの意味論だけが間違っている——最も発見が遅れる種類だ。だから NavRow の build は「見た目の穴」でなく「a11y 意味論の穴」を塞ぐ。索引の誤誘導是正は、型・構造だけでなく a11y 意味論まで含めて格付けすべき。

拾った点

• 🟡 NavRow/SettingsRow（flush 設定行・navigation 意味論）= #409 2/3・索引が ListCard(aria-pressed) に誤誘導。
• 🟡 FileUploader の accept 形（{"image/*":[".jpg"]}）未文書・Button size=lg<44px（#362 再確認）。
• ✅ TicketStub（会員証）/RadioCard（置き配場所）/Switch/FileUploader/Sheet/BottomActionBar 全て native。

今回 src build なし（4/5・TicketStub 会員証検証・NavRow 2/3・a11y 意味論のすり替え発見）。

📊 結晶化スコアボード（build 済 20個 + RouteStops 多日）

…SectionList / RouteStops(多日)（このセッションで7部品 build/拡張） 進行中：NavRow(2/3)・OriginDestination(1/3)・Statistic goodWhen(2/3)・MatchCard(1/3)

📋 モード進捗 — トラック toB5+toC4

• ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅／🚌 バス ✅
• 🚚 トラック：toB5 ＋ toC4（荷主#164/宅配#165/国際#166/設定#167） ← toB5 に対し toC4・あと1枚で対称

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

• トラック toC あと1枚（荷主の請求/支払 等）で toB5+toC5 対称＝トラック完走＝全5モード完走へ。NavRow が3回目なら build。※KeEem に確認（toC4 で完走とするか、対称まで掘るか）。

試す

• gunjo.jp ／ チケット券面 TicketStub ／ 選択カード RadioCard ／ ファイルアップロード FileUploader ／ npm @gunjo/ui ／ GitHub ／ 前回まで #1〜#166
• GunjoUI by UIXHERO

索引が「動く部品に見えるが動かす意味が違う」へ誘導した——#150 の親戚。NavRow の build は見た目の穴でなく a11y 意味論の穴を塞ぐ。索引の格付けは a11y まで含める。

---

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