会計・給与のコールドテスト — 請求書・仕訳・経費精算・給与・年末調整・書類DL

なぜ会計・給与UIは難しいのか

会計と給与は「数字が合うこと」が常に前提です。仕訳の借方＝貸方バランスを強制し、複数税率（10%/8%軽減）の混在を税率別内訳で正しく見せ、経費精算では申請→承認→差戻しの流れと差戻しコメント必須を組み立て、給与の支給控除がライブ再計算される。会計事務所や経理部の人が違和感を持たない密度で組まないと、信用に直結します。連載で初めて 5/5 が出たのが #39 経費精算で、ここから「ほぼ戦わずに出荷できる」群青の床が見えてきました。

ここで結晶化した部品

会計・給与6枚で実装まで到達した、または別の業界の床として再利用された部品です。

• EditableDataTable#37

  明細行のインライン編集 + 税率別内訳を扱える表。請求書から介護報酬請求まで横断する金額表の床。

• AmountBreakdown#41

  年末調整の還付/追徴が「ライブで」更新される箇所など、過不足を構造で見せる必要のある給与・税の画面に効く。

• DocumentRow#171

  アイコン＋ファイル名＋メタ＋独立した DL ボタン＋選択チェックを安全に並べる書類行。ListCard.onSelect でカード全体が button になる入れ子問題を根治した。

• ApprovalWorkflow (proto)#39

  経費精算の申請→承認/差戻し（差戻しはコメント必須）。後の不動産・公共の審査ワークフローと合わせて 3-confirm へ。

DocumentRow は HR の書類セルフサービス（#171）が 3-confirm の決め手となり、AmountBreakdown / EditableDataTable は他業界の金額画面で何度も再発見され続けています。

会計・給与 の全ラウンド

会計・給与 カテゴリの 6 画面を、ラウンド順に並べています。各カードから cold AI が組んだソース、解説記事、デスクトップ／モバイルのプレビューに飛べます。

#37スコア 4/5

AI に請求書（インボイス）作成画面を作らせてみた — 銀行で育てた部品が、別業界でそのまま効いた（やってみた #37）

/invoice

銀行を5枚やり切ったので、隣の「数字業界」へ。会計には銀行に無い作法がある——明細行のインライン編集、複数税率（10%/8%軽減）の混在、**税率別内訳**、適格請求書（インボイス制度）の登録番号。

#38スコア 4/5

AI に仕訳入力（複式簿記）を作らせてみた — 名前で検索できないピッカーの罠を直した（やってみた #38）

/journal

会計を深掘り。請求書(#37)に続き、今回は **借方合計＝貸方合計のバランス強制**という、銀行にも請求書にも無かった制約が核。

#39スコア 5/5

AI に経費精算（承認フロー付き）を作らせてみた — 前回作った編集グリッドが、翌回 5/5 の主役になった（やってみた #39）

/expense

`tsc`/`build` 緑・console 0・375px で明細がカード化・承認フロー（申請→承認/差戻し）動作・差戻しはコメント必須・h1 1個。**39回目にして初めて、cold AI が「ほぼ戦わずに出荷できる」と満点を付けた。**

#40スコア 4.5/5

AI に給与明細の編集画面を作らせてみた — 直近2回で作った primitive が、両方とも別業界で即採用された（やってみた #40）

/payroll

`tsc`/`build` 緑・console 0・375px で支給/控除グリッドがカード化・差引支給額がライブ再計算（マイナスは警告）・承認→確定フロー動作・h1 1個。

#41スコア 4.5/5

AI に年末調整の申告画面を作らせてみた — 直近で作った4つが、全部ゼロ摩擦で使われた（やってみた #41）

/year-end

`tsc`/`build` 緑・console 0・375px で編集グリッドがカード化・過不足額がライブ再計算（還付/追徴を明示）・提出フロー動作・h1 1個。

#171スコア 4/5

AI に給与明細ダウンロード画面を作らせてみた — DocumentRow が結晶化、ListCard が「構造的に」できない理由（やってみた #171）

/hr-documents

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

この業界が gunjo に残したもの

会計・給与は、「数字が合うこと」を UI が機械的に保証する作法を群青に残しました。EditableDataTable はインライン編集グリッドの床、DocumentRow はファイルアイコン＋名前＋メタ＋独立した DL ボタンを安全に並べる行（カード入れ子の不正HTMLを根治）、AmountBreakdown は給与・税の「過不足を見せる」場面で繰り返し効きます。連載が「ほぼ戦わずに出荷できる」域に入った起点もこの業界でした。