金融UIのコールドテスト — 銀行の5層から M&A・補助金マッチングまで
振込フロー・資産推移チャート・取引明細テーブル・住宅ローン計算機・カード限度額ゲージ──銀行の5つの作法を順に突き、最後は M&A と補助金マッチングで「会社×制度」という非対称ペアまで踏み込んだ7枚。AmountBreakdown と MatchCard / CompanyCell が正式なコンポーネントになった業界です。
金融 の cold test、7 画面のまとめ。
なぜ金融UIは難しいのか
金融画面は「数字を読む」場面が多いのに、汎用フォームでは表現できない作法が至るところに現れます。金額の桁区切り・口座番号マスキング・残高不足チェックといった振込フォームの細部、複数税率や軽減税率が混じる請求書、損益分岐で色が反転するチャート、ローンのスライダーで月々返済がライブ更新される計算機──どれも「数の意味」を UI が知っている必要があります。後半の M&A と補助金マッチングでは、会社×会社・会社×制度という「非対称な二者間ペア」に踏み込み、汎用 RelationshipRow では足りないことが明確になりました。
ここで群青に加わったコンポーネント
金融7枚で 3回確認を満たして実装に到達したコンポーネント、または金融が起点になって後段の業界に効いたコンポーネントです。
- AmountBreakdown#36
金額を「内訳→中間値→最終値」と構造で導出して見せるブロック。カード明細から保険料、運賃、補助金まで横断する。
- MatchCard#173
二者間ペアリング（会社×制度などの非対称ペアを含む）のための entity-agnostic な詳細カード。3回確認（求貨求車・M&A・補助金マッチング）で固まった。
- CompanyCell#173
組織版の identity セル（四角ロゴ・組織属性スロット）。PersonCell（円形アバター）の組織版として、補助金マッチングで初めて固まった。
- CalculationLedger (proto)#102
保険料の内訳手組みとして課題として記録。最終的に AmountBreakdown に吸収された「金額導出の手組み」の典型例。
AmountBreakdown はこの後、保険（#103 で 3回確認到達）と運輸の運賃明細でも自力発見され続けています。「金額導出を構造で見せる」という形が、業界を越えて再利用されるキャンバスとして根付きました。
金融 の全ラウンド
金融 カテゴリの 7 画面を、ラウンド順に並べています。各カードから cold AI が組んだソース、解説記事、デスクトップ／モバイルのプレビューに飛べます。
/transfer厳格な金融フォームが、隠れていたアクセシビリティ・バグを暴いた。
/portfolio同じ業界でも、層を変えれば別の欠落。
/transactions銀行で最高スコア。前回出した ¥の整形処理を、次の AI が見つけて使った。
/loan複利は「バグの不在」まで検証する段階に。1回前に直したバグが、次の AI に「直ってる」と検証された。
/card頻度がコンポーネントを浮かび上がらせる。3回連続で出た"足りないコンポーネント"を、ついに作った。
/ma-matchingペアリング詳細だけが欠落。「視覚的に近い」と「意味づけの上で正しい」は別物（索引の罠の集大成）。
/subsidy-matching二者間ペアリングが最後まで欠落。「3つ目の目撃」が仕様を最終確定させる。
この業界が gunjo に残したもの
金融は、「数字に責任を持つ画面」全体の作法を群青に残しました。AmountBreakdown は銀行の利用明細・保険料・運賃・補助金など、金額を導出して見せる場面すべてのキャンバスです。MatchCard と CompanyCell は補助金マッチング（会社×制度）の非対称ペアで初めて完成し、人物中心の RelationshipRow とは別に「組織や制度を扱う二者間ペアリング」という設計領域を開きました。