AI にトラックの収支ダッシュボードを作らせてみた — トラックの事業者向け 完了、直近作ったものが次々再検証された（やってみた #163）
/truck-pl375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にトラックの収支ダッシュボードを作らせてみた — トラックの事業者向け 完了、直近作ったものが次々再検証された（やってみた #163）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。トラックの事業者向け 最後（配車#159・求貨求車#160・車両労務#161・運賃請求#162 に続く5枚目）——運送原価・収支ダッシュボード（車両別/荷主別収支・原価内訳・実車率/原価率・標準的運賃比較）。経営企画向け。
結果 — 4/5、そして直近作ったものが次々「再検証」された
tsc 緑・デスクトップ情報密度・可変データ駆動。予備知識ゼロの AI（群青を一度も触っていない設定）：
このライブラリは日本の事務方の財務に異様に充実している。 予備知識ゼロの採用者が密度の高いアクセシブルな損益コンソールをほぼ全部 既存のコンポーネントで組めた。減点は1点＝反転 KPI の意味づけの欠落。
観測の核 — このセッションで作ったコンポーネントが、トラック財務で再検証された
連載のこのセッションで Leaderboard(#155)・LimitMonitor(#161) を作った。#163 のトラック収支画面で、両方が予備知識ゼロの AI に自力発見され、本来の用途に嵌まった：
-
Leaderboard＝上位/下位の収支ランキング・予備知識ゼロの AI「呼び出し側が並べる・valueLabel で¥整形・行ごとの tone・deltaTones で up=bad・悪い順の『要対応』を明示・完璧に嵌まった」。 -
LimitMonitor＝実勢運賃 vs 標準的運賃（2024）・予備知識ゼロの AI「direction='floor'＋符号付き over が over/under に綺麗に適合」＝拘束時間のために作った上限監視が、運賃比較で再利用された。 - チャートの土台（StatGroup/LineChart/LabeledDonutCard/Delta）＝全データ駆動・静的化ゼロ。
コンポーネントは作ったら終わりでない＝後発の予備知識ゼロの AI が別業種で自力発見して初めて『本当に汎用だった』と分かる。 トラック財務という新しい文脈で Leaderboard/LimitMonitor が本来の用途に嵌まったのは、#155/#161 で作ったものが業種を超えて正しかった証拠だ。
観測の核2 — Statistic の反転 KPI は今 2/3
原価率（低いほど良い）・実車率（高いほど良い）の KPI——上昇=悪い/良いが指標で逆になる：
予備知識ゼロの AI「Statistic/StatGroup に goodWhen/direction の概念が無い。tone は trend から既定＝上矢印は常に緑。原価率 +1.2pt(悪化)・実車率 −2.3pt(悪化) で trend(矢印=実際の変化)と tone(意味=良し悪し)を手で別管理した。Delta と Leaderboard は符号ごとの tones/deltaTones を持つのに Statistic は無い＝設計思想でなく見落としに見える。追加すべき最重要は Statistic の good-direction。」
→ #412 goodWhen は今 2/3（#154 営業係数 → #163 原価率/実車率）。あと1回の財務/運用 KPI 画面で3回確認＝作る（goodWhen:"high"|"low" で trend から反転トーン導出・明示 tone は優先）。今回は作らず＝goodWhen 専用の目撃はまだ2回（#155/#157 の『重大度カウントの値の色付け』は別機能）。
学び — 「別業界での再検証」が土台成熟の最終証明
連載でコンポーネントの検証は3段階で深まった：
- 作った翌画面で自力発見（#136→#153 Stringline）＝同業種・近い画面。
- 別モードの本来の居場所で自力発見（#159 RouteStops が貨物配送に）＝業種跨ぎ・本来の用途。
- 別業種で『たまたま』嵌まる（#163 LimitMonitor が運賃比較に・元は拘束時間）＝設計時に想定しなかった文脈で汎用性が証明される。
③が最も強い検証だ。LimitMonitor は「改善基準告示の拘束時間」のために作ったが、予備知識ゼロの AI は「標準的運賃との over/under」に当てた——同じ『値 vs 名前付き上限』の形だから。土台が成熟すると、新画面は新しいコンポーネントをほぼ生まず、既存コンポーネントが想定外の文脈で再利用される。#163 はその最終証明＝トラックの事業者向け5 を完了しても、新規作成は1つも出ず、代わりに3つの直近作ったものが再検証された。
拾った点
- 🟡 Statistic goodWhen（反転 KPI）= #412 2/3。
- 🟡 ChartLegend に formatValue 無し（チャート系統の中で非対称・value は ReactNode）。
- 🟡 LimitMonitor が "サーバー描画で安全" と doc に書くが、formatValue の関数 prop を server から渡すと next build が崩れる（"サーバー描画で安全" は内部 hook の話で関数 prop ではない＝罠・doc 注記推奨）。
- ✅ Delta が黒字/赤字・標準運賃差に符号ごとの tones で完璧・LabeledDonutCard が原価内訳にそのまま適合。
今回 src の新規コンポーネントなし（4/5・トラックの事業者向け5 完了・Leaderboard/LimitMonitor の別業種での再検証・Statistic goodWhen 2/3）。
📊 コンポーネント化スコアボード（作成済 20個）
…LineChip / LimitMonitor / SectionList（このセッションで6コンポーネント） 進行中：Statistic goodWhen(2/3)・MatchCard(1/3)・ValidityTimer(1/3)
📋 モード進捗 — トラックの事業者向け5（事業者向け 厚く完了）
- ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅／🚌 バス ✅
- 🚚 トラック：事業者向け5（配車/求貨求車/車両労務/運賃請求/運送原価） ← 事業者向け 完了・次は 利用者向け へ
次回予告（やってみた #164）
- トラックの利用者向け へ（荷主の集荷依頼・貨物追跡＝事業者を通じて利用者に届くタイプ・
B2B2C／個人の宅配・再配達追跡）でトラックも対称完走へ。※次回までに決める。
試す
- gunjo.jp ／ ランキング Leaderboard ／ 上限監視 LimitMonitor ／ 折れ線 LineChart ／ 差分 Delta ／ npm
@gunjo/ui／ GitHub ／ 前回まで #1〜#162 - GunjoUI by UIXHERO
トラックの事業者向けが完了し、直近作ったものが次々再検証された——別業種での再検証（別業種で想定外に嵌まる）が土台成熟の最終証明。LimitMonitor は拘束時間のために作ったが、運賃比較に当たった。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。