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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。前回に続き ⁠銀行を深掘り⁠——今回は ⁠資産推移ダッシュボード⁠（総資産・前日比・資産推移チャート・資産配分ドーナツ・保有銘柄テーブル）。

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

結果 — 4/5

tsc/build 緑・console 0・375px とデスクトップで検証済み・h1 1個・損益は色だけに頼らず、符号/矢印つき。

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

金融データはチャートの鬼門です（評価損益は負の値・¥の巨大な数・時系列・配分100%）。予備知識ゼロの AI の評価:

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

しかも ⁠#31 で出した ToggleGroup disallowEmpty(#170) が、期間切替（1M/3M/6M/1Y/全期間）の segmented control に使われ「キーボードで操作できる本物の segmented control」と称賛⁠されました。2回前の修正が、また次の回で武器になった。

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

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

• 🟠 ⁠通貨/数値の整形処理が無い⁠（最大の欠落）。defaultChartValueFormatter は en-US 固定で、¥ も符号も省略表記も無し。総資産・KPI・セル・ツールチップ・ドーナツ中央…全部に ¥ の整形が要るので手組み。⁠#32 の振込画面でも同じ yen/signedYen を手組みしていた＝2回連続⁠（#180）。
• 🟠 ⁠AnalyticsCard の title が <h3> 固定⁠で、KPI 行の見出しの順序が崩れる（#181・CardTitle #116 / AlertTitle #163 と同じ見出しの一族）。
• 🔴 ⁠ChartLegend（縦）が、長い値で横スクロールを誘発⁠（¥4,100,000・33.5% が縮まずページ幅を超える・#182）。

今ラウンドの修正

ソースで安全な3つを反映（PR#187）:

• ⁠formatCurrency/formatNumber/formatPercent⁠（#180・JPY 既定・符号/省略表記つき）＝ fintech/EC/分析が毎回手組みしていた整形を出荷。.pen 不要の実行時ユーティリティ（cn/ThemeProvider と同じ Utility として公開）。
• ⁠AnalyticsCard titleAs⁠（#181・CardTitle の as に委ねる・既定 h3 で変わらず）。
• ⁠ChartLegend のはみ出し修正⁠（#182・ラベル側が先に縮み、値は最後に切り詰め・⁠ブラウザ実証で横スクロール解消⁠）。

期間コントロール(#183)・チャートの高さ/基準線(#184)・チャートの色調/軸/系列のまとめ(#185)・チャート docs のページが 404(#186) は課題に記録。

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

銀行 #32（フォームの層）: Form の隠れたアクセシビリティ・バグ(#175)
銀行 #33（チャートの層）: 数値整形の不在(#180) + 見出し(#181) + 凡例のはみ出し(#182)

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

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

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

試す

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

まだ alpha。チャートは強く、その周りの整形の層が欠けていた回。