#168スコア 4.5/5運輸：トラック

AI に荷主の請求・支払ポータルを作らせてみた — NavRow が結晶化、トラック完走で全5モード完成（やってみた #168）

ルート: /shipper-billing
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI に荷主の請求・支払ポータルを作らせてみた — NavRow が結晶化、トラック完走で全5モード完成（やってみた #168）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。トラック toC 最後（荷主#164・宅配#165・国際#166・設定#167 に続く5枚目）——荷主向け 請求・お支払いポータル（請求書一覧・請求内訳・帳票DL・お支払い方法）。これで toB5+toC5 対称＝トラック完走＝全5モード完成。

まず — トラック完走で全5モード完成

トラック toB5（配車#159/求貨求車#160/車両労務#161/運賃請求#162/運送原価#163）+ toC5（荷主#164/宅配#165/国際#166/設定#167/請求#168）が対称完走。航空・鉄道・タクシー・バスに続き、運輸5モードすべてが toB+toC 対称で完走した。

結果 — 4.5/5、NavRow が3回目で結晶化

tsc 緑・モバイル/デスクトップ両対応。cold AI（群青を一度も触っていない設定）：

自分のドメインを既に考えていた稀なデザインシステム。 doc コメントが 請求/締め/客先別/立替金 を逐語で名指し。難所3つのうち2つ（小計付きグループ表・金額導出）が native に嵌まった。

観測の核 — NavRow が3回目で結晶化（a11y バグの是正つき）

設定行（お支払い方法・送付方法・通知）——3回目の手組みだった：

cold AI「NavRow/SettingsRow/ListRow が無い（パッケージ全 grep で皆無）。索引は『tappable 行のある設定画面』を ListCard に誘導するが、ListCard.onSelect は aria-pressed の button＝トグル/選択状態。詳細 Sheet を開く設定行は『navigation』でトグルでない＝aria-pressed は SR に『押下/非押下のスイッチ』と嘘をつく。aria-haspopup='dialog' で aria-pressed 無しの SettingsNavRow を手組みした。追加すべき最重要は NavRow＝そして索引の設定行エントリをそこに向け直せ。」

NavRow は #152 タクシー法人・#167 配達設定・#168 で3回目＝3-confirm。その場で build した：

  • NavRow＝flush 行（先頭アイコン＋ラベル＋説明＋右寄せ現在値＋末尾 chevron）。onSelect で navigation/disclosure の button（chevron 既定・opensDialog で aria-haspopup='dialog'）＝意図的に aria-pressed でない（詳細を開く行は navigation でトグルでない）。onSelect 無しなら静的な操作行（trailing に Switch/Badge）。
  • SettingGroup＝丸角コンテナ＋ハイライン区切り（iOS/Android のグループ設定ブロック）。
  • 索引も是正＝設定/ナビ行→NavRow に向け直し、ListCard.onSelect は aria-pressed（トグル）で詳細を開く行には誤り、と明記。
  • ブラウザで**nav-row button の aria-pressed=0（navigation 正・トグルでない）・aria-haspopup='dialog'=2（詳細を開く行）**を確認＝PR#426（#409 クローズ）。結晶化 21個目。

学び — NavRow は「a11y 意味論の穴」を塞いだ最初の build

#167 で「索引の罠の4つ目＝a11y 意味論のすり替え」を見つけた。#168 で その罠を build で塞いだ：

  • これまでの build は機能の穴（部品が無い）を塞いだ＝Leaderboard・SectionList・LimitMonitor…。
  • NavRow はa11y 意味論の穴を塞いだ＝部品（ListCard）はあって見た目もクリックも動くが、SR への意味論（aria-pressed トグル）が用途（navigation）と違う。

「動くが意味論が違う」は最も発見が遅れる欠陥（#150 の Rating 表示専用、#160 の RelationshipRow people 固定、#167 の ListCard aria-pressed と同系）。文脈ゼロの cold AI は「信じて使い、SR で読み上げて初めて気付く」。だから NavRow の build は、正しい a11y 意味論（navigation = aria-haspopup・トグルでない）を部品に焼き込み、adopter が知らなくても守られるようにした——これが #161 LimitMonitor で書いた「規約を部品に焼き込む」の a11y 版だ。

拾った点

  • ✅ SectionList が「キット最良の適合」（請求を月/締めグループ＋小計フッター）＝同セッション再検証。
  • ✅ AmountBreakdown（請求内訳）/RadioCard（支払方法）native。
  • 🟡 帳票DL list＝索引が空を正直に返した穴（document-download-row パターン無し）＝手組み。

今回 src build = NavRow（#409→PR#426）。4.5/5・NavRow 結晶化・a11y 索引是正・トラック完走。

📊 結晶化スコアボード（build 済 21個）

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

📋 モード進捗 — 全5モード完成 🎉

  • ✈️ 航空（toB5+toC6）✅／🚆 鉄道（toB5+toC6）✅／🚕 タクシー（toB6+toC6）✅／🚌 バス（toB5+toC6）✅／🚚 トラック（toB5+toC5）✅
  • 運輸5モードすべて toB+toC 対称で完走。

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

  • 運輸 arc が完走。次は 新業種（公共交通以外＝エネルギー/通信/農業/建設 等）か、運輸で残った in-progress 在庫の深掘りか。※KeEem に確認。

試す

NavRow が結晶化し、トラック完走で全5モードが揃った——NavRow は「a11y 意味論の穴」を塞いだ最初の build。動くが意味論が違う欠陥を、部品に正しい a11y を焼き込んで根治した。

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

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AmountBreakdownBadgeBadgePropsBottomActionBarButtonCardCheckboxMeterPageHeaderRadioCardRadioCardGroupSectionListSeparatorSheetSheetContentSheetDescriptionSheetHeaderSheetTitleStatistic

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。