AI に資産推移ダッシュボードを作らせてみた — 同じ業界を2枚やったら、別の層の穴が出た（やってみた #33）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。前回に続き 銀行を深掘り——今回は 資産推移ダッシュボード（総資産・前日比・資産推移チャート・資産配分ドーナツ・保有銘柄テーブル）。

「各業界で複数枚やってから次へ」という読者の方針。#32 は振込フロー（フォーム層）、今回 #33 は同じ銀行でも チャート/可視化層を突く。

結果 — 4/5

tsc/build 緑・console 0・375px と desktop 検証済み・h1 1個・損益は色だけに頼らず符号/矢印つき。

チャート層は、本物だった

金融データはチャートの鬼門だ（評価損益は負値・¥の巨大数・時系列・配分100%）。cold AI の評価:

チャート層は genuinely strong。 LineChart は responsive SVG（固定幅なし）・負値を正しく描く（1年=赤 → 全期間=緑 を実機確認）・referenceValue でゼロ線。DonutChart は conic-gradient・100%正規化・トークン色。Statistic/AnalyticsCard は損益を アイコン＋符号＋色で出す（色だけに頼らない）。

しかも #31 で出した ToggleGroup disallowEmpty(#170) が、期間切替(1M/3M/6M/1Y/全期間)の segmented control に使われ「real keyboard segmented control」と称賛。2回前の修正が、また次の回で武器になった。

新しい穴は "数値整形" 層に収束（しかも2回連続）

汎用画面では出なかった穴が、金融の数字だらけの画面で噴き出した:

• 🟠 通貨/数値フォーマッタが無い（最大の穴）。defaultChartValueFormatter は en-US 固定で ¥ も符号も compact も無し。総資産・KPI・セル・ツールチップ・ドーナツ中央…全部に ¥ 整形が要るので手巻き。#32 の振込画面でも同じ yen/signedYen を手巻きしていた＝2回連続（#180）。
• 🟠 AnalyticsCard の title が <h3> 固定で KPI 行の見出し順が崩れる（#181・CardTitle #116 / AlertTitle #163 と同じ heading family）。
• 🔴 ChartLegend(vertical) が長い値で横スクロールを誘発（¥4,100,000・33.5% が縮まずページ幅を超える・#182）。

今ラウンドの修正

src で安全な3つを land（PR#187）:

• formatCurrency/formatNumber/formatPercent（#180・JPY デフォルト・signed/compact）＝ fintech/EC/分析が毎回手巻きしてた整形を出荷。.pen 無しの runtime util（cn/ThemeProvider と同じ Utility export）。
• AnalyticsCard titleAs（#181・CardTitle の as に委譲・default h3 で不変）。
• ChartLegend overflow 修正（#182・ラベル側が先に縮み値は最後に truncate・ブラウザ実証で横スクロール解消）。

period control(#183)・チャート height/baseline(#184)・チャートの tone/軸/系列サマリ(#185)・チャート docs slug 404(#186) は起票。

学び — 同じ業界でも、層を変えれば別の穴

銀行 #32（フォーム層）: Form の隠れ a11y バグ(#175)
銀行 #33（チャート層）: 数値整形の不在(#180) + heading(#181) + legend overflow(#182)

「業界を深掘りする＝層を変えて何枚も作る」と、1枚では出ない穴が出る。 チャート自体は強かったのに、その周りの「金融の数字を整える」層が空いていた。読者の「複数枚やってから」が正しかった。

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

• 銀行をもう少し（ローン審査 / 明細・取引履歴）か、別の数字業界へ。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1〜#32
• GunjoUI by UIXHERO

まだ alpha。チャートは強く、その周りの整形層が穴だった回。

---

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