私たちが最初に Claude Code で作った Web デモの一つが、保険プランシミュレーターです。 家族構成・働き方・資産・リスク許容度を入れると、生命／医療／がん／就業不能の必要保障額を計算し、90歳までの資産推移を3シナリオで描きます。 この記事では、なぜ／どうやって作ったのか、その裏側をお話しします。
なぜ作ったのか
きっかけは、ある相談でした。"保険、入りすぎている気がするけど、自分で計算する気力がない"。── 多くの人が抱える悩みです。 しかし保険会社のシミュレーターは "自社商品を売るための前提" でしか動かないし、独立系のツールは UI が古く、入力項目も多い。 「家計のリスクを可視化する独立系の Web ツール」が、フロンティアAIの時代なら半日で作れるはず ── そう思って手を動かしました。
設計の意図
1. 単一 HTML、CDN だけで完結
ビルド不要、サーバー不要、依存は Chart.js だけ。Vercel に上げて URL を渡すだけで誰でも触れる ── このシンプルさは "気軽に試せる" 体験の土台です。
2. "答え" ではなく "考える材料" を出す
シミュレーターは正解を出しません。「あなたの場合、こういうリスクとこういうカバー率がある」 という見え方を返します。判断は使う人に委ねる。
3. リスク種類ごとにタブ分け
生命・医療／ペット保険／自動車保険／地震保険 ── 性質の違うリスクを、同じ画面で並列に扱うと混乱します。タブで切り替える設計に落ち着きました。
Claude Code に何を任せ、何を任せなかったか
任せたこと
- HTML / CSS / JavaScript の構造化と書き起こし
- Chart.js でのグラフ実装
- レスポンシブ対応とアクセシビリティの調整
- 計算ロジックのコード化
任せなかったこと
- 保険料の市場相場の妥当性確認（人間が責任を持つ領域）
- UI のトーン＆マナー（私たちのブランドに馴染むかは人間が見る）
- "何を見せて、何を見せないか" の判断（情報設計は最終的に人）
結果として何が起きたか
仕様の打ち合わせから2日で動くデモが上がりました。週末に1人で集中して触る用途なら、これで十分機能します。 何より、動くものがあると会話が一気に具体的になる ── これが一番の発見でした。 "ここの数字、本当に合ってる？" "もう一つリスクを足したい" ── そういう議論は、設計書では絶対に出てきません。
"PowerPoint と動くデモは、議論の解像度が桁違いに違う。"
運用上の注意
保険料・必要保障額・公的給付額はすべて市場相場に基づく 概算です。実際の商品・引受条件とは異なります。 試作・デモ用途であり、実際の募集行為には使用しないでください。
関連リンク
この記事についてのご質問やご相談は お問い合わせ よりお気軽にどうぞ。
ブログ一覧へ戻る