ホーム/ 導入事例
金融 / 事業会社

iDeCo申込サービスを、Laravel + Livewire でゼロから新規開発

金融商品大手事業会社

大手事業会社の新規iDeCo申込サービスを、Laravel + Livewire + Tailwind + AWSで一から構築。金融商品ならではの確認フロー・本人確認・規約同意などを、画面遷移を増やさずにLivewireで段階表示する設計とした。

Before / After

プロジェクトでの変化

  • 申込フロー画面数
    段階表示で集約
  • 離脱率
    想定範囲内に収束
  • リリース計画
    10ヶ月で予定通り
Challenge

課題

iDeCoは規約・本人確認・職業情報など、入力項目が多くフローが複雑になりがち。画面遷移を細かく分けると離脱が増え、まとめると入力負担が大きい、というトレードオフを設計段階で詰める必要があった。

Approach

アプローチ

  1. 01 業務要件と監督官庁・運営管理機関の要件を整理し、入力項目を分類
  2. 02 Laravel + Livewire で「1画面・段階表示」のフォームUIを設計
  3. 03 AWS上でステージング/本番を分離し、データ取扱いの境界を明確化
  4. 04 Tailwindで申込フォーム専用のデザインシステムを最小構成で構築
Key Success Factors

成功要因

段階表示型のフォーム設計
画面遷移を増やさずLivewireで段階表示し、入力負担と離脱率のトレードオフを設計段階で詰めた。
監督要件の事前整理
監督官庁・運営管理機関の要件を入力項目分類に先に落とし込み、後工程での仕様揺れを抑えた。
本人情報の境界明確化
AWS上でVPC・IAMから設計し、本人情報を扱う領域とそれ以外を最初から物理的に分離した。
サーバ起点の状態管理
Livewireで状態管理をサーバ側に寄せ、フロント由来の検証漏れが起きにくい構造にした。
Solution

ソリューション

Laravel本体に Livewire を組み合わせ、SPA的な体験をしつつもサーバ側でバリデーション・状態管理を完結。AWSはVPC・IAMの設計から行い、本人情報を扱う領域とそれ以外を明確に分けた。

同じような課題、ありませんか?

業種や規模を問わず、まずはお話を伺います。

お問い合わせフォーム
Other Cases

他の事例

事例一覧を見る

お気軽にご相談ください。

ご相談内容は守秘義務のもと取り扱います。
お問い合わせをいただいてから、営業日2日以内にご返信いたします。