共済の火災保険
掛金シミュレーション

概要

同じお客様向けに、過去に別の保険の掛金シミュレーションのデザインを制作しています。
今回は火災保険のデザインを製作しました。

案件詳細

前回の課題

前回はデザインカンプで成果物を提出し、承認を得たものの、開発フェーズでアコーディオン開閉時の表示内容の調整や、細かい文言の修正が多発しました。
これらの認識のズレにより、開発工程での負担が増大していました。

課題の解決策の提案

今回はプロトタイプを作り込んで、デザイン段階で詳細なユーザーフローを可視化、認識を擦り合わせることで、開発フェーズでの手戻りを最小限に抑えることを目指しました。

案件詳細

簡易的な見積りの後に、詳細の見積りに続く構成で、質問への回答によって分岐が多岐にわたります。
そこで、figmaのコンポーネントを活用し、可能な限りパーツを再利用して効率化を図りました。

Figmaは無料版だったため、複数条件の組み合わせによる分岐はできませんでした。
そのため、主要な分岐を網羅できる「条件の組み合わせ」を4種類に絞り込み、トップ画面には「条件の組み合わせ」の選択画面を用意、そこから4つのフローに分岐する構成としました。
トップ画面を除くすべての画面には、ヘッダに「トップに戻る」と「条件の組み合わせを確認する」ボタンを配置、プロトタイプ確認時の操作性を確保しました。

成果と学び

当初の想定通り、デザインの承認後の開発は、多少の手戻りはあったもののスムーズに進みました。
今回のアプローチにより、認識のズレを事前に解消することができました。
また、Figmaが無料版であっても、工夫をすれば分岐の多い案件にも対応できることがわかりました。

制作環境

デザインツール： Figma

参画期間

2024年12月～2025年2月（実働：約1.5カ月、他業務と並行）

所感

プロジェクト全体としては、開発フェーズでの効率が大きく向上しました。
一方で、デザインカンプの制作と比べて、プロトタイプの制作に掛かる時間は2～3倍に増えています。
また、文言や要素の有無など、細かい差異が大量にあり、制作・チェック共に神経をすり減らすような大変さがありました。
しかし、開発フェーズでの手戻りが減るという大きなメリットがあるため、このようなデザインのアプローチも、有効な選択肢になり得ると実感しました。