AI に生保営業の朝のポータルを作らせてみた — 保険5枚、ほぼ全部が既存コンポーネントで組めた（やってみた #105）
/insurance-agent-portal375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
この回の発見
この下の記事から抜き出した、この回で分かったことです。状態は記事の時点ではなく、コンポーネント側のいまの実測です。
この回で要ると分かったもの
- 見込みから成約までの段階が、カードを並べた列として出ます。列の並びはボードの枠の内側だけで横にスクロールするので、スマートフォンでもページ全体は横にずれません。
見込みパイプライン（生保営業（ライフプランナー）の活動ポータル）自分の画面で確かめる 375pxの幅で開いて、パイプラインを横に送ってもページ自体が横にずれないか確かめてください。
状態 対応済み - 今月の手数料の見込みが、募集手数料とインセンティブを足し、取消や戻入（あとから差し引かれる分）を引いた形で出ます。
手数料内訳（生保営業（ライフプランナー）の活動ポータル）自分の画面で確かめる 取消や戻入がある月を開いて、引かれた分が控除だと分かる形で出ているか確かめてください。
状態 対応済み
この回でつまずいたところ
- 失効防止や更新や満期や誕生日といった、いま対応が要る項目を深刻度の順に並べるところを、手で書くことになりました。
要対応アラート（生保営業（ライフプランナー）の活動ポータル）原因 深刻度で並んだ対応待ちの一覧を出すコンポーネントが当時は無く、深刻度と見た目の対応づけを毎回自分で書く必要があったためです。自分の画面で確かめる 朝いちばんに見る画面で、対応が要る項目が深刻度の順に並んでいるか確かめてください。
状態 対応済み
解説記事
AI に生保営業の朝のポータルを作らせてみた — 保険5枚、ほぼ全部が既存コンポーネントで組めた（やってみた #105）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。保険 5枚目＝締め——生保営業（ライフプランナー）の活動ポータル（目標・見込みパイプライン・本日のアポ・担当顧客・手数料）。
#101〜104 は社内の事務方（査定/契約/支払/引受）。#105 は現場の募集人側＝別のペルソナで保険を締める。観測：人物の階層・金額内訳・パイプライン・関係——ここまで作ったコンポーネントが、営業の朝の画面でも全部、組み立てで済むか。
結果 — 4.5/5・「ほぼ手組みゼロ」で締まった
tsc/build 緑・375px 横溢れゼロ・0 console error。KPI・目標・要対応アラート・見込みパイプライン・本日のアポ・手数料内訳・担当顧客ブック・顧客を掘り下げる詳細。予備知識ゼロの AI（群青を一度も触っていない設定）のレポート：
これまで使った中で、日本の業務画面に一番嵌まるライブラリ。逆引き索引が毎回ぴったりのコンポーネントに誘導し、3つ（
AmountBreakdown・KanbanBoard・Meter）は保険の営業画面を実際に見た人が設計したとしか思えない。本番相当のポータルを——KPI・アラート・パイプライン・アポ Timeline・顧客ブック・担当↔顧客・手数料の明細・顧客を掘り下げる詳細——ほぼ手組み UI ゼロで、初回パスでtsc＋next build緑。
コンポーネントの業界越えが全部決まった：
-
AmountBreakdown（金額内訳）= 主役。手数料の導出にぴったり——heading（募集手数料/インセンティブ・調整）・subtotal（手数料小計）・kind:"subtract"（取消・戻入を −¥34,500 のグリフ・控除トーン）・tone:"positive"の当月手数料見込 ¥545,900・formula。加算＋符号付きの減算＋合計、完璧に嵌まった、欠落なし。しかも掘り下げた詳細の 年換算保険料で3度目の再利用——汎用に効く。 -
KanbanBoard（見込みパイプライン）= div の寄せ集めでない本物のパイプラインのコンポーネント。見込→アプローチ→提案→申込→成約、リッチなカード、自前で横スクロールを内包＝モバイルでページを壊さない。 -
Meter（目標進捗・higher-is-better/target）・RelationshipRow（募集人↔顧客）・StatGroup（KPI）・Timeline（アポ）・DataTable（ブック）・Sheet（掘り下げる詳細）も全部。
観測の核 — 索引が「全部、名指しで、正解」
/docs/by-use-caseがここでの一番の収穫。 7つのニーズを与えたら、各々に正確なコンポーネントがそのまま返り、日本語の一行の理由が頭の中のモデルと一致した（金額の導出：明細 − 控除 = 合計→AmountBreakdown／カード列のボード：パイプライン→KanbanBoard）。MetervsProgress（目標 vs 容量の罠）まで曖昧さなく分けた。「在るのに見つからない」も誤誘導も、ゼロ。
#102 で索引が金額内訳を EditableDataTable に誤って誘導していた——#103 でそれを AmountBreakdown に向け直した。#105 で、その索引が「全部、名指しで、正解」になった。 直した欠落が塞がっているのを、3回後の別の予備知識ゼロの AI が裏付けた。
課題に記録 — ActionQueue / AlertList（2回目）
唯一の手組み＝要対応アラート（失効防止/更新/満期/誕生日）を Alert＋grid＋手書きの深刻度マップで。「深刻度でソートされた、対応が必要な項目の対応待ちリストのコンポーネントが無い・営業の朝の画面 全部に出る」。→ #350。これは2回目——#102 でも更新の「今すぐ対応リスト」が手組みされ「専用のアラート対応待ち行が無い」と指摘されていた。あと1回で3回ルール。StatGroup（KPI 行）と対になる「朝のダッシュボードのもう半分」。
今回 src の新規コンポーネントなし（4.5/5・保険5枚を作り切り）。
学び — 保険は「作り切った」、そして土台はもう一段
保険5枚（査定/契約/支払/引受/営業）を回し切った。各回 ~85〜90% が組み立て、毎回 src で作るものは最小か無し——新しい欠落がほぼ出ない＝その業界のコンポーネントが揃った合図。医療7枚・製造6枚・公共5枚で見た「作り切り」が、保険でも起きた。そして締めの #105 は、AmountBreakdown（#103 で作った）と KanbanBoard（#142 系）が営業画面で同時に効き、索引が全部正解——機能と発見可能性の両輪が、業界をまたいで噛み合っている。残る候補は ActionQueue（2/3）。
次回予告（やってみた #106）
- 保険を締めたので、15業界目へ移る——運輸・交通（運行ダイヤ Gantt）／建設（工程 Gantt＋施工 Gallery）／エネルギー（検針・設備 Meter）あたり。
ActionQueue3回目の観測も継続。
試す
- gunjo.jp ／ 金額内訳 AmountBreakdown ／ 逆引き索引 /docs/by-use-case ／ npm
@gunjo/ui／ GitHub ／ 前回まで #1〜#104 - GunjoUI by UIXHERO
保険、5枚で作り切り。土台がまた一段かたまって、次は15業界目へ。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。