AI に M&A マッチングを作らせてみた — 索引が「会社にアバター」を勧めた回（やってみた #172）
/ma-matching375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に M&A マッチングを作らせてみた — 索引が「会社にアバター」を勧めた回（やってみた #172）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。MatchCard 狙いの深掘り＋新業種（M&A/事業承継・金融）——M&A マッチング（買い手⟷売り手・適合度・業種/エリア/規模の適合）。M&A アドバイザー向けの情報密度コンソール。
結果 — 4/5、ペアリング詳細だけが欠落
tsc 緑・デスクトップ密。予備知識ゼロの AI（群青を一度も触っていない設定）：
本物の強い事務方のライブラリ。 KPI の帯・ランク候補リスト・スコア Meter・案件テーブル・対応キューに用途向けに作られたコンポーネントが逐語で嵌まった。1星減点は、マッチングコンソールがまさにそれについての1つ＝二者間のペアリング詳細。会社×会社のコンポーネントが無く、索引が人物前提の物に能動的に誤誘導した。
観測の核 — 索引が「会社にアバター」を勧めた（MatchCard 2/3）
売り手×買い手のマッチ詳細（2社を左右に並べ＋適合度＋業種/エリア/規模/価格/シナジーの要因の適合）——RelationshipRow を当てたくなる。だが：
予備知識ゼロの AI「二者間の MatchCard/PairingPanel が無いので手組み(PairingPanel.tsx)。会社用の識別のセルが無い——PersonCell は avatar+name+role なので会社カラムを一から作った。索引は『2人を並べる(上司↔部下)』→ RelationshipRow と誘導するが、RelationshipRow の from/to は PersonCellProps 型＝2つの PersonCell(アバター＋在席ドット)を描画する。会社×会社 には3点で誤り：(1) アバター/在席の人モデルを組織に強制(2) 各社の財務データのリストの差込口が無い(3) スコア/要因の内訳の領域が無い(細い relationshipLabel だけ)。索引は視覚的に最も近い物を勧めつつ意味づけの上で間違い**。追加すべきは汎用の二者間 MatchCard/PairingPanel(left/right の対象＋スコア＋要因・人物前提でない)＋CompanyCell(PersonCell の組織版)。**」
MatchCard は #160 求貨求車(荷物×空車) と #172 M&A(売り手×買い手) で 2/3。 仕様は両回で安定＝left＋right の任意の対象の差込口＋中央 score/つなぎ＋factors の内訳・対象に依存しない。付随する欠落＝CompanyCell（組織の識別＝ロゴ/イニシャル＋名前＋データ）も浮上＝RelationshipRow が人物固定なのもこれが原因。あと1回のマッチング/比較画面で 3回確認 → 作る。
学び — 「視覚的に近い」と「意味づけの上で正しい」は別物（索引の罠の集大成）
索引の罠を整理してきた（隠す/すり替える[型・アクセシビリティ・形]/自認する）。#172 の RelationshipRow はすり替える罠の最も教科書的な形：
- 視覚的には近い（2つを並べた横長コンポーネント）。
- 意味づけの上では逆（人物固定で、会社の財務データも適合スコアも入らない）。
予備知識ゼロの AI 評：「索引は視覚的に最も近い物を勧めつつ意味づけの上で間違い——マッチングコンソールがまさにそれについての ペアリング詳細でそれが起きる」。これは #170 の「形（縦 vs 横）の取り違え」のさらに先＝横長で形は合うが、中身のモデル（人 vs 組織）が違う。索引の格付けは、型・アクセシビリティ・レイアウトの形に加えて対象のモデル（人か組織か）まで含める。
→ MatchCard は人物非依存で作る（あと1回で 3回確認）。CompanyCell も同時に＝PersonCell（人）↔CompanyCell（組織）の対。「人のコンポーネントがあるなら組織のコンポーネントも要る」——#150 で書いた「表示があるなら入力も要る」の組織版だ。
拾った点（良好な、別業種での検証）
- ✅ Leaderboard(適合度ランキング)/DataTable(案件一覧)/Meter(適合度 higher-is-better+target=提案推奨ライン)/ActionQueue(NDA/返答待ち)/StatGroup/FilterChips/MetadataList(各社の財務データ) 全て そのまま合う。
- 🟡 Select だけ children/option 駆動で他の items-prop の規約とズレ（開発体験）・Badge/Tag と Meter/Leaderboard の tone のユニオンが非互換でマッピングのつなぎが要る。
今回 src の新規コンポーネントなし（4/5・MatchCard 2/3・RelationshipRow 人物固定の再確認・CompanyCell 浮上）。
📊 コンポーネント化スコアボード（作成済 24個）
…OriginDestination / DocumentRow（このセッションで11コンポーネント） 進行中：MatchCard(2/3)・CompanyCell(1/3)・SimpleDialog(1/3)
📋 進捗
- 運輸5モード完走 ✅／ストック深掘りで goodWhen/OriginDestination/DocumentRow をコンポーネント化
- MatchCard 2/3（あと1回で作る）・新業種 金融(M&A)に着手
次回予告（やってみた #173）
- MatchCard 3回目（別のマッチング/比較画面）→ 作る＋CompanyCell、or 新業種さらに。※次回までに決める。
試す
- gunjo.jp ／ ランキング Leaderboard ／ メーター Meter ／ 一括操作表 ActionDataTable ／ npm
@gunjo/ui／ GitHub ／ 前回まで #1〜#171 - GunjoUI by UIXHERO
索引が「会社にアバター」を勧めた——視覚的に近いが意味づけの上で逆（人 vs 組織）。索引の格付けは対象のモデルまで含める。MatchCard は人物非依存で、CompanyCell とセットで作る。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。