#20スコア 4.5/5基盤UI・汎用

AI に空ダッシュボードを作らせてみた — 連続クリーンが、途切れた（やってみた #20）

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

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

解説記事

AI に空ダッシュボードを作らせてみた — 連続クリーンが、途切れた（やってみた #20）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は 空（first-run）ダッシュボード。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は /dashboard-empty に、ようこそ Banner、ゼロ値の Statistic、空データのチャート、オンボーディング・チェックリスト（Progress）、空のアクティビティ（EmptyState）、フルページ StatusScreen。

#18・#19 と2回連続で新 class ゼロだった。今回はその3回目——「もう本当に枯れたか」の詰め。

結果 — 4.5/5（だが streak は途切れた）

tsc/build 緑・コンソール 0・hydration なし・375px overflow 0。機能は文句なし。でも、新しい a11y class が1つ出た。

いちばん良かった — チャートの空データが、本当に堅牢

first-run dashboard の核心は「データが無い時に壊れないか」。実機で測ったら:

  • DOM 全体で NaN ゼロ。 BarChart 全ゼロ→各バー height:0%・軸は残る（意図的な空）。
  • DonutChart 全ゼロ→ circular-chart-utils.ts に明示の if(every value<=0) return fallback——ドーナツの div-by-zero クラッシュをわざわざ潰してある。
  • SparklineChart data={[]}→空 polyline（NaN なし）。span = max-min || 1。

「空データでチャートが壊れる」は多くのライブラリが踏む地雷。gunjo は明示的にガードしてあった。ここは大きな加点。

でも streak が途切れた — 新 a11y class

EmptyState / StatusScreen の title が、見出しじゃない。 ソース確認:

  • EmptyState.tsx:32 … <p className="text-sm font-semibold">{title}</p>
  • StatusScreen.tsx:129 … <p className="text-2xl font-semibold">{resolvedTitle}</p>

＝フルページの StatusScreen（"No projects yet" 等）に <h1> がゼロ。 スクリーンリーダーで見出しナビすると、内容のある画面なのに何も見つからない（WCAG 2.4.6/1.3.1）。headingLevel/as の逃げ道も無い → #104。

これは #57/#71/#83/#87/#93 に続く a11y の6度目。 空状態系は first-run の主役なのに、見出し意味論が抜けていた。プロフィール（#18）や設定（#19）は EmptyState を主役にしないから、この画面で初めて踏んだ。

ほか minor: Progress が max=0 で割り算ガード無し（#105）／Badge に success tone 無し（Statistic には在るのに・#106）／docs の import パスが複数ページで誤記（#50）。

学び — "枯れた" を急がない

正直に言う。#18/#19 の「2回連続クリーン」で "もう枯れた" と思いかけた。でも #20 が否定した。 #8 で「枯れ始めた」と早とちりして #9 に否定されたのと、同じ構図。

機能軸 ── 枯れた（クラッシュ/NaN/型なし。チャートの空データすら堅牢）
a11y ──── class 単位でまだ（画面タイプが変わると新インスタンスが出る・6度目）
docs ──── まだ（import 誤記・空データ例なし）

機能は枯れた。でも a11y の "完全網羅" は、まだ。 画面の種類を変えるたびに、その画面が主役にする部品の a11y 穴が出る。だから loop-until-dry は——まだ回す。 盛らず、6度目の a11y を6度目として直す。

直すたびに次の回で消える。でも"次の種類の画面"が、まだ新しい穴を見せる。それが、まだ枯れてない証拠。

#104（heading 追加）/#105（Progress ガード）は PR #108 で land——EmptyState 全 demo→<h2>、StatusScreen 全6 variant→<h1> を実ブラウザで確認。並行してた #100 Slider も PR #107 で land。

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

  • Blog / Docs 記事ページ / ランディング ほか。a11y の網羅をもう一段詰める。

試す

まだ alpha。機能は枯れ、a11y は詰めの途中——"枯れた"と急がず、6度目を6度目として直す。

<!-- 公開前: #104/#105 land 後に PR 反映／相互URL差込／スクショ確定／EN(dev.to)ミラー -->

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

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

BadgeBannerBarChartButtonCardCardContentCardDescriptionCardHeaderCardTitleContainerDonutChartEmptyStateProgressProgressWidgetSeparatorSparklineChartStatisticStatusScreen

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

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