Project 03
オンラインで保険申込みを完結させるWebダイレクト画面の継続的なUI改善、およびデザインと実装の乖離を極小化する運用設計を担当しました。ここでは100画面を超える大規模プロダクトの品質を死守したプロセスについて紹介します。
クライアントから「最新仕様が不明瞭」という課題をヒアリング。デザインと実装の乖離を根本から解消し、開発効率を最大化するために、Figmaによる一元管理体制と運用フローを構築しました。
頻繁な文言修正や実装上の都合による仕様変更により、デザインデータと実際の画面が乖離し、正解が不明瞭になるケースがありました。
多数の画面が存在するため、修正箇所の特定や意図の伝達に時間がかかり、審査部門や開発チームとのコミュニケーションコストが増大していました。
画面数が100以上と膨大であるにもかかわらず、コンポーネントを使用していなかったため、修正コストが増大していました。
「正解（実装済み）」と「検討（改善案）」を分離した運用フローを設計しました。マスターFigmaファイルでは実装画面と乖離をなくした正解のデザインを画面単位で管理。改善Figmaファイルでは修正案を既存画面と比較配置し、変更箇所を黄色帯でハイライトすることで、エンジニアやクライアントが差分を一目で把握できるようにしました。
「実装の都合で色を増やしたい」という要求に対し、単に拒絶するのではなく、「負債をコントロール下に置く」アプローチを採用。特定の箇所に限定した「例外色」としてFigmaに登録し、ガイドラインに「使用禁止・限定」の旨を明文化。チームで共通認識が取れるようにして誤用を防ぎました。
主要UIをコンポーネント化することで、不必要なUIの量産を防ぎ、クライアントとの議論の質を向上させました。また修正コストの削減にも大きく貢献しました。
デザインデータの信頼性が向上し、クライアントやエンジニアが「Figmaを見れば正解がわかる」状態を実現。コミュニケーションの齟齬を大幅に削減しました。
厳しい制約下でも「例外をルール化」する運用により、大規模プロダクトの崩壊を防ぐ管理体制を確立しました。