プロジェクトでの変化
-
申込フロー画面数段階表示で集約
-
離脱率想定範囲内に収束
-
リリース計画10ヶ月で予定通り
課題
iDeCoは規約・本人確認・職業情報など、入力項目が多くフローが複雑になりがち。画面遷移を細かく分けると離脱が増え、まとめると入力負担が大きい、というトレードオフを設計段階で詰める必要があった。
アプローチ
- 01 業務要件と監督官庁・運営管理機関の要件を整理し、入力項目を分類
- 02 Laravel + Livewire で「1画面・段階表示」のフォームUIを設計
- 03 AWS上でステージング/本番を分離し、データ取扱いの境界を明確化
- 04 Tailwindで申込フォーム専用のデザインシステムを最小構成で構築
成功要因
- 段階表示型のフォーム設計
- 画面遷移を増やさずLivewireで段階表示し、入力負担と離脱率のトレードオフを設計段階で詰めた。
- 監督要件の事前整理
- 監督官庁・運営管理機関の要件を入力項目分類に先に落とし込み、後工程での仕様揺れを抑えた。
- 本人情報の境界明確化
- AWS上でVPC・IAMから設計し、本人情報を扱う領域とそれ以外を最初から物理的に分離した。
- サーバ起点の状態管理
- Livewireで状態管理をサーバ側に寄せ、フロント由来の検証漏れが起きにくい構造にした。
ソリューション
Laravel本体に Livewire を組み合わせ、SPA的な体験をしつつもサーバ側でバリデーション・状態管理を完結。AWSはVPC・IAMの設計から行い、本人情報を扱う領域とそれ以外を明確に分けた。