金融UIのコールドテスト — 銀行の5層から M&A・補助金マッチングまで
振込フロー・資産推移チャート・取引明細テーブル・住宅ローン計算機・カード限度額ゲージ──銀行の5つの作法を順に突き、最後は M&A と補助金マッチングで「会社×制度」という非対称ペアまで踏み込んだ7枚。AmountBreakdown と MatchCard / CompanyCell が結晶化した業界です。
金融 の cold test、7 画面のまとめ。
なぜ金融UIは難しいのか
金融画面は「数字を読む」場面が多いのに、汎用フォームでは表現できない作法が至るところに現れます。金額の桁区切り・口座番号マスキング・残高不足チェックといった振込フォームの細部、複数税率や軽減税率が混じる請求書、損益分岐で色が反転するチャート、ローンのスライダーで月々返済がライブ更新される計算機──どれも「数の意味」を UI が知っている必要があります。後半の M&A と補助金マッチングでは、会社×会社・会社×制度という「非対称な二者間ペア」に踏み込み、汎用 RelationshipRow では足りないことが明確になりました。
ここで結晶化した部品
金融7枚で 3-confirm を満たして実装に到達した部品、または金融が起点になって後段の業界に効いた部品です。
- AmountBreakdown#36
金額を「内訳→中間値→最終値」と構造で導出して見せるブロック。カード明細から保険料、運賃、補助金まで横断する。
- MatchCard#173
二者間ペアリング（会社×制度などの非対称ペアを含む）のための entity-agnostic な詳細カード。3-confirm（求貨求車・M&A・補助金マッチング）で固まった。
- CompanyCell#173
組織版の identity セル（四角ロゴ・組織属性スロット）。PersonCell（円形アバター）の組織版として、補助金マッチングで初めて固まった。
- CalculationLedger (proto)#102
保険料の内訳手組みとして起票。最終的に AmountBreakdown に吸収された「金額導出の手組み」の典型例。
AmountBreakdown はこの後、保険（#103 で 3-confirm 到達）と運輸の運賃明細でも自力発見され続けています。「金額導出を構造で見せる」という形が、業界を越えて再利用される床として根付きました。
金融 の全ラウンド
金融 カテゴリの 7 画面を、ラウンド順に並べています。各カードから cold AI が組んだソース、解説記事、デスクトップ／モバイルのプレビューに飛べます。
/transfer条件はいつも通り（出荷物の npm パッケージ＋docs サイトだけ。ソース非公開）。金額の桁区切り・口座番号マスキング・残高不足チェック・本人確認…金融特有の制約は、汎用画面では当たらない。
/portfolio「各業界で複数枚やってから次へ」という読者の方針。#32 は振込フロー（フォーム層）、今回 #33 は同じ銀行でも **チャート/可視化層**を突く。
/transactions「各業界で複数枚」の方針で銀行を深掘り。#32=フォーム層、#33=チャート層、今回 #34 は **密なデータテーブル＋絞り込み＋エクスポート層**。
/loan「各業界で複数枚」で銀行を深掘り。#32=フォーム、#33=チャート、#34=テーブル、今回 #35 は **計算機（スライダー→月々返済リアルタイム計算）＋書類アップロード＋審査結果**の層。
/card「各業界で複数枚」で銀行を深掘り。#32=フォーム、#33=チャート、#34=テーブル、#35=計算機、今回 #36 は **限度額ゲージ＋ポイント（ロイヤルティ）＋カテゴリ別支出**の層。
/ma-matching`tsc` 緑・デスクトップ密。cold AI（群青を一度も触っていない設定）：
/subsidy-matching`tsc` 緑・モバイル/デスクトップ両対応。cold AI（群青を一度も触っていない設定）：
この業界が gunjo に残したもの
金融は、「数字に責任を持つ画面」全体の作法を群青に残しました。AmountBreakdown は銀行の利用明細・保険料・運賃・補助金など、金額を導出して見せる場面すべての床です。MatchCard と CompanyCell は補助金マッチング（会社×制度）の非対称ペアで初めて完成し、人物中心の RelationshipRow とは別に「組織や制度を扱う二者間ペアリング」という設計領域を開きました。