AI に保険の契約者マイページを作らせてみた：「人生の長さ」を描く道具が無かった（やってみた #200）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青を一度も見たことのない AI に、実際の画面で組ませていく連載。⁠200枚目⁠です。保険の6枚目で、この業種では初めての契約者向けになります。お題は⁠生命保険のマイページ⁠。主契約と特約、受取人、保険料の内訳、給付の履歴を1枚で見せる画面です。

結果：4/5。骨格は組めたが、保険という商品の形が描けなかった

予備知識ゼロの AI に、公開されている npm パッケージと gunjo.jp の docs だけを渡して組ませました。tsc は緑、実行してもエラーはありません。

保険はこれまで5枚作りましたが、⁠すべて事業者側⁠でした。査定、契約管理、支払、引受、代理店。今回から5枚すべてを契約者側にして、業種として対称にします。

今回の主役：消費者マイページの語彙は、そろっていた

効いたものは多くありました。保険料の内訳、証明書のダウンロード、手続きの一覧、給付の履歴、払込履歴の表。#192（入居者マイページ）で「消費者マイページの語彙そのもの」と評価された設定画面風の組み合わせが、ここでも効いています。

数で見ると、この画面は32種類の部品で組まれていて、手で組んだのは下に書く2箇所（約95行と約105行）だけでした。骨格の側は、ほとんど戦わずに入っています。

問題は⁠保険という商品そのものの形⁠でした。

足りなかったものと、名前で迷ったところ

大きく2つです。保険という商品そのものの形が描けないことと、部品はあるのに名前から辿り着けないことです。

足りなかったもの1：主契約と特約の階層

保険は「主契約の下に特約がぶら下がる」構造です。医療保険の主契約があり、その下に先進医療特約、がん特約、通院特約が付く。それぞれ保障の内容と金額が違います。

⁠この形を描く部品がありませんでした。⁠

今回の AI は TreeView に行きました。用途別の対応表が「単一親のツリー（組織図）」に案内しているからです。ところが実装を読んで撤退しています。理由が2つ。⁠ラベルが1行に省略される⁠ので「がん診断特約／100万円／80歳まで／あと約32年」が入らない。そして⁠読み取り専用の契約内容にツリー操作の役割を与えるのは、画面読み上げソフト（スクリーンリーダー）に「ツリーウィジェット」と名乗ることになり不適切⁠だから。

Accordion は畳んでしまうので契約内容には合わず、まとまり見出しのリストは階層になりません。約95行の手組みでした（#787）。

今回の AI の指摘が広い。⁠「同じ形は、料金プラン＋オプション、口座＋サブ口座、部屋＋設備、案件＋タスク、どこにでもある」⁠。

足りなかったもの2：年単位の期間

特約はそれぞれ満了する年齢が違います。主契約は終身、通院は70歳まで、先進医療は75歳まで、がんは80歳まで。⁠これを並べて比べる図⁠が要ります。

工程表の部品は、解像度が⁠日か時間しかありません⁠。契約日2013年から満了2059年までを日で刻むと⁠約17,000列⁠になります。区間の帯を描く部品もありますが、⁠全部が同じ1本のレーンに重なる⁠作りなので、開始日が同じで満了だけ違う今回のケースでは4本が潰れます。しかも横幅の下限が決まっているので、スマホでは横スクロールになります。

約105行の手組みでした。今回の AI の言葉です。⁠「生命保険、住宅ローン、年金、保証、資格、リース。人生の長さを扱う画面が全部落ちる」⁠（#788）。

期限バッジが「未登録」と言ってしまう

小さいけれど重い発見がありました。期限を出すバッジに⁠満了なし（終身）を渡すと「未登録」と表示されます⁠。保障が一生涯続くという良い知らせが、「登録されていません」に見える。今回の AI は場合分けして別のバッジに差し替えていました。

残り日数の表示も、30年先だと⁠「残11,900日」⁠になります。短期の期限を想定した既定でした。

名前で迷ったところ

金額の内訳を出す部品は、用途別の対応表には「請求書・インボイス」としか書かれていません。今回の AI は表になりかけたところで型定義を開き、説明に⁠「基本保険料 ＋ 特約 − 各割引 = 年間保険料」という保険そのものの例⁠が書いてあるのを見つけて即決しています。

割合を出すバーは分類が「チャート」なので、表示の部品を探していて見つからず、型定義を上から読んで発見したそうです。

CheckList も名前で損をしていました。チェックボックスの一覧だと思って候補から外していたら、説明に「チェック状態を省くと表示専用の行になる」とあり、「請求できるもの（対象・対象外＋金額）」にぴったりだった。⁠「名前からは辿り着けない」⁠と書かれています。

消費者向けとしての印象

今回の AI にも率直な感想を聞いています。

⁠名前は業務システム寄り、中身は意外とスマホ寄り。⁠（中略）実際に開くと PageHeader・BottomActionBar・NavRow/SettingGroup・ListCard・RadioCard・DocumentRow・SectionList があり、これらは明らかに実物のスマホ画面から抽出されている。効きが良い。⁠名前で損をしている。⁠

#192 で「B2C の部品が業務用の名前の海に埋もれている」と出たのと同じ診断です。

もう1つ、⁠日本語が最初から想定されている⁠ことも評価されていました。金額の既定が円であること、期限の状態が日本語であること、説明の例に保険が出てくること。ただし「未登録」のように、⁠既定の文言が用途に合わないと利用者に誤解を与える⁠ので、上書きは常に必要だとも書かれています。

今回 直したものは無い：課題に記録だけにした

この回で新しく作ったコンポーネントはありません。読み取り専用の階層（#787）と年単位の期間（#788）は、どちらも課題に記録するだけにしました。3つの別々の画面で独立に必要になったら作る、という運用です。今回はどちらも1回目にあたります。

学び：「人の一生に関わるもの」を扱う画面が、まだ苦手

連載200枚目で分かったのは、⁠足りなかったのが画面の部品ではなく、商品の形だった⁠ということです。一覧も履歴も手続きも書類も既にあるのに、主契約と特約の階層と、年単位の期間という、保険という商品そのものの形が描けませんでした。

どちらも保険に限りません。料金プランとオプション、口座と補助口座、住宅ローンの35年、資格の有効期間。⁠「人の一生に関わるもの」を扱う画面が、まだ苦手⁠です。

コンポーネント化スコアボード（作成済 27個）

直近で加わったのは #180 の CommentThread（27個目）です。ただし取り込みの手続きが止まっていて、⁠この回の AI に渡した版（@gunjo/ui 0.1.0-beta.2）には入っていません⁠。#181 からこの回まで、新しく作ったものはありません。

3回目待ち：読み取り専用の階層（#787）1回目、年単位の期間（#788）1回目。

保険の進捗：事業者向け5枚のあと、契約者向けの1枚目

• 事業者向け：#101 保険金の査定、#102 契約の管理、#103 保険金の支払、#104 引受の査定、#105 代理店ポータル
• 契約者向け：⁠#200 契約者マイページ⁠（いまここ）、#201 給付金の請求、#202 保険料の試算、#203 告知、#204 更新

この5枚で、保険は事業者側と契約者側がそろいます。

次回予告（やってみた #201）

保険の7枚目。入院した契約者が⁠給付金を請求する画面⁠です。#192（入居者マイページ）で見つかった「写真を添える部品がキーボードから操作できない」という不具合に、別の AI が独立に気づくかどうかを見ます。

試す

• ⁠gunjo.jp⁠ ／ ⁠金額の内訳 AmountBreakdown⁠ ／ ⁠書類の行 DocumentRow⁠ ／ ⁠期限バッジ ExpiryBadge⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#199
• ⁠GunjoUI by UIXHERO⁠

業務の骨格はそろっていても、商品の形は別でした。階層と年単位の期間という、人の一生に関わるものの描き方が、この画面で欠けたところです。