AI に保険の契約者マイページを作らせてみた：「人生の長さ」を描く道具が無かった（やってみた #200）
/policy-portal375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
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行の手組みでした（issue#787）。
今回の AI の指摘が広い。「同じ形は、料金プラン＋オプション、口座＋サブ口座、部屋＋設備、案件＋タスク、どこにでもある」。
足りなかったもの2：年単位の期間
特約はそれぞれ満了する年齢が違います。主契約は終身、通院は70歳まで、先進医療は75歳まで、がんは80歳まで。これを並べて比べる図が要ります。
工程表の部品は、解像度が日か時間しかありません。契約日2013年から満了2059年までを日で刻むと約17,000列になります。区間の帯を描く部品もありますが、全部が同じ1本のレーンに重なる作りなので、開始日が同じで満了だけ違う今回のケースでは4本が潰れます。しかも横幅の下限が決まっているので、スマホでは横スクロールになります。
約105行の手組みでした。今回の AI の言葉です。「生命保険、住宅ローン、年金、保証、資格、リース。人生の長さを扱う画面が全部落ちる」（issue#788）。
期限バッジが「未登録」と言ってしまう
小さいけれど重い発見がありました。期限を出すバッジに満了なし（終身）を渡すと「未登録」と表示されます。保障が一生涯続くという良い知らせが、「登録されていません」に見える。今回の AI は場合分けして別のバッジに差し替えていました。
残り日数の表示も、30年先だと「残11,900日」になります。短期の期限を想定した既定でした。
名前で迷ったところ
金額の内訳を出す部品は、用途別の対応表には「請求書・インボイス」としか書かれていません。今回の AI は表になりかけたところで型定義を開き、説明に「基本保険料 ＋ 特約 − 各割引 = 年間保険料」という保険そのものの例が書いてあるのを見つけて即決しています。
割合を出すバーは分類が「チャート」なので、表示の部品を探していて見つからず、型定義を上から読んで発見したそうです。
CheckList も名前で損をしていました。チェックボックスの一覧だと思って候補から外していたら、説明に「チェック状態を省くと表示専用の行になる」とあり、「請求できるもの（対象・対象外＋金額）」にぴったりだった。「名前からは辿り着けない」と書かれています。
消費者向けとしての印象
今回の AI にも率直な感想を聞いています。
名前は業務システム寄り、中身は意外とスマホ寄り。（中略）実際に開くと
PageHeader・BottomActionBar・NavRow/SettingGroup・ListCard・RadioCard・DocumentRow・SectionListがあり、これらは明らかに実物のスマホ画面から抽出されている。効きが良い。名前で損をしている。
#192 で「B2C の部品が業務用の名前の海に埋もれている」と出たのと同じ診断です。
もう1つ、日本語が最初から想定されていることも評価されていました。金額の既定が円であること、期限の状態が日本語であること、説明の例に保険が出てくること。ただし「未登録」のように、既定の文言が用途に合わないと利用者に誤解を与えるので、上書きは常に必要だとも書かれています。
今回 直したものは無い：課題に記録だけにした
この回で新しく作ったコンポーネントはありません。読み取り専用の階層（issue#787）と年単位の期間（issue#788）は、どちらも課題に記録するだけにしました。3つの別々の画面で独立に必要になったら作る、という運用です。今回はどちらも1回目にあたります。
学び：「人の一生に関わるもの」を扱う画面が、まだ苦手
連載200枚目で分かったのは、足りなかったのが画面の部品ではなく、商品の形だったということです。一覧も履歴も手続きも書類も既にあるのに、主契約と特約の階層と、年単位の期間という、保険という商品そのものの形が描けませんでした。
どちらも保険に限りません。料金プランとオプション、口座と補助口座、住宅ローンの35年、資格の有効期間。「人の一生に関わるもの」を扱う画面が、まだ苦手です。
コンポーネント化スコアボード（作成済 27個）
直近で加わったのは #180 の CommentThread（27個目）です。ただし取り込みの手続きが止まっていて、この回の AI に渡した版（@gunjo/ui 0.1.0-beta.2）には入っていません。#181 からこの回まで、新しく作ったものはありません。
3回目待ち：読み取り専用の階層（issue#787）1回目、年単位の期間（issue#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
業務の骨格はそろっていても、商品の形は別でした。階層と年単位の期間という、人の一生に関わるものの描き方が、この画面で欠けたところです。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
この回の発見
上の記事から抜き出した、この回で分かったことです。状態は記事の時点ではなく、コンポーネント側のいまの実測です。
この回で要ると分かったもの
- 保険料の内訳、証明書のダウンロード、手続きの一覧、給付の履歴、払込の履歴。契約者が自分の契約を見る画面は、必要なものが一通りそろっています。
画面全体（生命保険の契約者マイページ）自分の画面で確かめる 契約者が自分の契約を見る画面を開いて、手続きと証明書と履歴が同じ画面から辿れるか確かめてください。
状態 対応済み
この回でつまずいたところ
- 主契約の下に特約がぶら下がるという保険の構造を、そのまま画面に出せませんでした。がん特約や先進医療特約を、主契約の子として並べる置き場がありません。
保障内容の階層（生命保険の契約者マイページ）原因 入れ子にできるコンポーネントは、子の行の項目名を1行に切り詰めるうえ、読むだけの契約内容を押せるものとして画面読み上げソフトに伝えるので、契約内容の表示には使えないからです。自分の画面で確かめる 主契約と特約を親子に並べた一覧を開いて、子の行の項目名が1行に切り詰められていないか確かめてください。
状態 未修正・直し方記録済み - 主契約は終身、通院は70歳まで、がんは80歳まで。満了する年齢が違う保障を、並べて比べる図が描けませんでした。
保障期間の比較（生命保険の契約者マイページ）原因 工程表のコンポーネントは目盛りを日と時間でしか刻めず何十年という保障期間を表せないうえ、1本の帯で期間を示すコンポーネントは何本並べても全部が同じ1行に重なるためです。自分の画面で確かめる 開始が同じで終わりだけ違う期間を4本出してみて、4本が別々の行として見比べられるか確かめてください。
状態 未修正・直し方記録済み - 一生涯続く保障には満了の日付がありません。日付が空のままだと、期限の表示が「未登録」になります。良い知らせが、登録し忘れに見えます。
保障の満了表示（生命保険の契約者マイページ）原因 期限の表示に「そもそも期限が無い」という出し方が用意されておらず、日付が空なら未入力とみなすためです。自分の画面で確かめる 満了日の無い項目に期限の表示を付けてみて、未入力と読める言葉が出ていないか確かめてください。
状態 未修正・直し方記録済み
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。