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

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

結果 — 4/5、設定の土台は ~90% だが「設定行」だけ欠落

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

⁠利用者向けのモバイル設定画面に本当に良いライブラリ。⁠ ~12個のコンポーネントが密な設定画面の ~90% をカバーし、アクセシビリティとモバイルの使い勝手が既に焼き込まれている。手組みしたのは1つだけ。

観測の核 — 索引が「遷移をトグルにすり替える」アクセシビリティのバグ

設定行（[アイコン] ラベル … 現在値 [右向き矢印] で詳細へ遷移）——ListCard を当てたくなる。だが予備知識ゼロの AI はアクセシビリティのバグを見抜いた：

予備知識ゼロの AI「⁠設定/ナビ行をモデルするコンポーネントが無い。索引は ListCard に誘導するが2点で誤り：(1) ListCard.onSelect は aria-pressed のトグルの意味づけ＝読み上げは『トグルボタン、押下/非押下』と読む・だが設定行は『次の画面へ遷移』でトグルではない＝意味づけが誤り。(2) ListCard は枠付きの単独カードで、端に寄せた iOS/Android のグループ行でない＝細い区切り線で分けた『現在の設定』ブロックを枠/影と戦わずに作れない。SettingRow+SettingGroup を ~110行手組みした。NavRow/SettingsRow であるべき・追加すべき最重要。⁠」

→ ⁠NavRow は今 2/3⁠（#152 タクシー法人 → #167 配達設定）＝#409。これは #150（索引が表示専用 Rating を入力に誘導）の⁠親戚⁠だ：⁠索引が『動くコンポーネント（ListCard.onSelect）』に誘導するが、その『動き方（aria-pressed のトグル）』が用途（遷移）と違う。⁠ 採用者は ListCard を当て、読み上げが「トグルボタン」と読んで初めてアクセシビリティのバグに気付く。⁠「コンポーネントが無い」より「索引が意味づけの違うコンポーネントを勧める」方が、見つけにくいアクセシビリティのバグになる。⁠

あと1回の設定/アカウント/メニュー画面で 3回確認 → 作る（NavRow＝遷移の意味づけで aria-pressed でない・SettingGroup でグループ化）。⁠今回は作らず⁠（NavRow 専用の目撃は #152/#167 の2回）。

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

デジタル会員証（バーコード/QR）は TicketStub にそのまま合う：

予備知識ゼロの AI「⁠TicketStub＝デジタル会員証を完璧に・format='qr'・ミシン目の上の children 差込口・codeLabel・サーバー描画で安全な決定的コード描画(hydration mismatch 無し＝考えられている)・本番の実バーコードは code prop と正直。⁠」

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

学び — 索引の罠は「アクセシビリティの正しさ」でも測れる

索引の罠を整理してきた（隠す/すり替える/自認する）。#167 で⁠4つ目の軸＝アクセシビリティの意味づけのすり替え⁠が見えた：

• #160 RelationshipRow＝⁠型/構造⁠のすり替え（人物固定を貨物に）。
• #167 ListCard＝⁠アクセシビリティの意味づけ⁠のすり替え（aria-pressed のトグルを遷移に）。

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

拾った点

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

⁠今回 src の新規コンポーネントなし⁠（4/5・TicketStub 会員証の検証・NavRow 2/3・アクセシビリティの意味づけのすり替えを発見）。

📊 コンポーネント化スコアボード（作成済 ⁠20個⁠ + RouteStops 複数日）

…SectionList / RouteStops(複数日)（このセッションで7コンポーネントを作成/拡張） 進行中：⁠NavRow(2/3)⁠・OriginDestination(1/3)・Statistic goodWhen(2/3)・MatchCard(1/3)

📋 モード進捗 — トラック 事業者向け5+利用者向け4

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

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

• トラックの利用者向け あと1枚（荷主の請求/支払 等）で ⁠事業者向け5+利用者向け5 対称＝トラック完走＝全5モード完走⁠へ。NavRow が3回目なら作る。※次回までに決める（利用者向け4 で完走とするか、対称まで掘るか）。

試す

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

索引が「動くコンポーネントに見えるが動かす意味が違う」へ誘導した——#150 の親戚。NavRow を作るのは見た目の欠落でなくアクセシビリティの意味づけの欠落を塞ぐ。索引の格付けはアクセシビリティまで含める。