Launchpad

中小規模の保険会社がデジタル変革を進めるにあたり、ユーザーにとって分かりやすい商品ページを効率的に作成できるようにするには、どうすればよいか。

Company

OneDegree Global

My Role

Sr. Product Designer

Platform

Web, SaaS

Period

2022

Project Overview

Launchpad は、限られた社内 IT リソースの中でも、中小規模の保険会社が保険商品ページを迅速に制作・運用できるよう設計された、モジュール型 CMS です。

導入以前は、新しいキャンペーンや商品改定のたびに個別開発が必要で、マーケティング部門による要件整理、プロダクトチームとの調整を経てから開発に着手するのが一般的でした。その結果、公開までに 3 か月以上かかることも珍しくなく、商品やブランドごとにページ構成や品質にもばらつきが生じていました。さらに、ちょっとした文言修正であってもエンジニアの対応が必要で、運用面で大きな負荷となっていました。

そこで Launchpad では、保険業務に特化したテンプレートベースの CMS を構築し、再利用可能なレイアウトブロックを組み合わせることで、ページ構成、フォーム設定、アセット登録、公開までをノーコードで完結できるようにしました。

本プロジェクトの目的は、開発依存を減らしながらページ品質を標準化し、中小規模の保険会社のデジタル変革を支える、拡張性と使いやすさを備えた編集基盤を実現することでした。

responsibilities

UI/UXデザイン

初期フェーズでは、情報設計と主要フローを担当した UX デザイナーと連携しながら、プロジェクトを進行しました。その後は、新機能における UX 設計も引き継ぎつつ、エディター全体の UI 設計およびインタラクション設計を主導しました。

モジュール型コンポーネント設計

商品セクション、FAQ、フォーム、メディアなどの再利用可能なブロックを組み合わせ、1 ページを構成できるモジュール型レイアウトアーキテクチャを提案・設計しました。

右側設定パネルの共通化

すべてのモジュールで共通して利用できる右側設定パネルを設計し、編集パターンを統一しました。これにより、非技術系ユーザーでも迷いにくく、学習コストを抑えた編集体験を実現しました。

インタラクション／モーション設計

モジュールの挙動、編集ロジック、選択状態、ドラッグ＆ドロップ、画面遷移などの細かなインタラクションを設計し、ページ構築を直感的に行える操作体験へと整えました。

ビジュアルディレクション

複数の保険会社ブランドに展開しやすいよう、モダンでニュートラルなトーンを持つ、エディター向けのビジュアルスタイルを定義しました。

技術制約に対する設計対応

リアルタイムプレビューに制約がある中でも、構造化されたプレビュー状態や API を活用したハイブリッドなプレビュー案を提案し、ユーザーの安心感を損なわない編集体験を検討しました。

PM・開発との連携／デモ支援

PM やエンジニアと密に連携しながら実現性をすり合わせ、プロトタイプ、注釈付き仕様、デモ用アセットの作成を通じて、社内共有や顧客提案も支援しました。

Problem Insights

エンドユーザーに直接アクセスすることが難しかったため、ビジネス、オンボーディング、サポートなどの社内関係者へのヒアリングを通じて課題を整理しました。その中で、以下の 3 点が共通する主要なペインポイントとして見えてきました。

軽微なレイアウト修正やコンテンツ更新であっても、開発者への依存度が高い

商品やブランドごとに、ページ構成や見た目の品質にばらつきがある

商品ページの公開・更新までに、3 か月以上かかることも珍しくない

Design Process / Strategy

エンドユーザーとの接点が限られていたため、意思決定は社内インサイトをもとに行い、非技術系チームでも扱いやすい、モジュール型で拡張性のあるエディターを目指しました。

Business / User Needs の理解

ビジネス、オンボーディング、サポートなどの社内チームへのヒアリングを通じて、リリースの遅さ、分断された業務フロー、軽微な修正にも開発対応が必要であることなど、現場が抱える課題を把握しました。これらの知見をもとに、エディターで解決すべき要件と設計方針を整理しました。

タスク整理と優先順位付け

非技術系ユーザーが商品ページ作成時に行う主要タスクを整理し、レイアウト選択、コンテンツ編集、フォーム設定、ステップ構成、確認作業といった本質的な操作に注力しました。すべての例外に対応するのではなく、まず中核となるタスクを明確にすることで、シンプルで予測可能な編集体験を維持しました。

モジュール型編集モデル

商品ハイライト、FAQ、フォーム、メディアなどの再利用可能なブロックを組み合わせてページを構築する、モジュール型の編集モデルを提案・設計しました。これにより、拡張性と一貫性を確保しながら、開発工数の重複を抑えられる構成を実現しました。

エディター内インタラクション設計

モジュールの選択、ドラッグ＆ドロップ、状態変化、画面遷移など、編集体験全体のインタラクションロジックを定義しました。非技術系ユーザーでも迷わず操作できる、分かりやすく一貫した体験を目指しました。

エディター向けビジュアルシステム

長時間の編集作業でも視認しやすく、複数ブランドにも適用しやすいよう、ニュートラルで整理された、ブランド依存度の低いビジュアル言語を構築しました。

後期フェーズでの UX 改善

プロダクトの進行に合わせて、新機能フローの設計、モジュール設定の見直し、編集体験全体の分かりやすさの改善を継続的に行いました。高度な機能追加を進めながらも、当初定義したインタラクションモデルとの整合性を保つことを重視しました。

UI / UX Design Solutions

CMS と外部システムの連携

このエディターは、IXT プラットフォームや外部システムと API 連携し、構造化された商品データを一元管理できるよう設計されています。ユーザーは、商品情報の取り込みからレビュー申請、公開予約、非公開化までを、テンプレートベースの UI 上でスピーディに行うことができます。

編集モードとページカスタマイズ

技術的なバックグラウンドを持たないユーザーでも扱いやすいよう、レイアウトモジュールを中心とした直感的な編集体験を設計しました。これにより、IT チームへの依存を抑えながら、商品ページや購入フローの更新を効率化しました。

📌 技術的制約への対応

一般的な Web サイトビルダーのような完全なライブプレビューは実現できなかったため、Standard API を活用したデータ連携と、エディター内で確認可能なプレビューの仕組みを提案しました。これにより、公開前確認におけるユーザーの不安や、作業時の摩擦を軽減することを目指しました。

📌 統一されたサイドパネルによるモジュール編集

すべてのページタイプで共通の編集ロジックを採用し、モジュールを選択すると右側に対応する設定パネルが表示される構造に統一しました。テキスト編集、画像アップロード、表示設定の変更などを同じ UI パターンで行えるため、学習負荷を下げながら、一貫した操作体験を実現しました。

📌 幅広いブランドに対応するビジュアル設計

初期案では、柔らかいシャドウや丸み、ブラーなどを用いた、より表情のある UI も検討しましたが、複数の保険会社ブランドに対応する必要性から、最終的にはよりミニマルでニュートラルな方向へ調整しました。これは、視認性と汎用性のバランスを重視した判断でした。

📌 テンプレートベースのカスタマイズ

商品ハイライト、FAQ、フォーム、メディアセクションなどの既定レイアウトブロックを組み合わせることで、ページを柔軟に構成できるようにしました。テーマカラーの切り替えや背景画像の設定なども含め、専門的な知識がなくてもブランドに沿った調整をしやすい仕組みにしました。

モジュール型レイアウトシステム

各セクションを差し替え可能なブロックとして設計し、既定パターンから素早くページを構築できるようにしました。一方で、全体のデザイン一貫性は維持できる構造としています。

購入フローテンプレート

アカウント作成、プラン選択、フォーム入力、見積もり、決済までをカバーする、ステップ型のモジュラー購入フローを設計しました。中小規模の保険会社でも、最小限の技術負荷でデジタル購入体験を立ち上げられることを目指しました。

Design System

To ensure scalability and usability across insurance product pages, I established a modular design system based on atomic design principles. The system included reusable layout blocks, flexible UI components, and a semantic color structure to support future expansion.

As part of this effort, I also introduced a dark theme to enhance visual clarity and reduce eye strain, especially for long-form reading scenarios bringing a modern, tech-forward feel to a traditionally conservative industry.

デザインシステム

保険商品のページ群を継続的に拡張・運用できるよう、Atomic Design の考え方をベースにしたモジュール型デザインシステムを構築しました。再利用可能なレイアウトブロック、柔軟な UI コンポーネント、意味ベースで整理されたカラー構造を整備することで、将来的な機能追加やページ展開にも対応しやすい基盤をつくりました。また、長文閲覧時の視認性向上や目の負担軽減にも配慮し、ダークテーマも導入しました。保守的になりやすい保険業界に対して、より現代的でテック感のある印象を与える役割も担っています。

コンポーネントアーキテクチャ

各画面を Atoms、Molecules、再利用可能なレイアウトブロックによって構成することで、保守性と拡張性を高めました。商品ページと購入フローの両方で一貫性を維持しやすくなり、新規モジュール追加時のデザイン・開発負荷も抑えられました。

セマンティックカラートークン

ライト／ダーク両テーマに対応するため、状態ベースで整理したセマンティックカラーシステムを整備しました。default、hover、error、success などの状態を明確に定義することで、コンポーネント横断での一貫性を保ち、開発との連携もスムーズにしました。

Team & Ownership

主なデザインオーナーシップ

このプロジェクトでは、プロダクト、エンジニアリング、ビジネスチームと密に連携しながら、主に以下の領域を担当しました。

CMS 型エディターに適した新しいビジュアル言語を提案し、実際のプロダクトに導入

競合調査を行い、一般的なページビルダーの設計パターンをもとに編集ロジックを定義

テキスト、画像、ログイン、商品モジュールなどに共通する右側設定パネルを設計

ログイン、プラン選択、フォーム回答、決済までを含む購入フロー全体の設計と改善をリード

市場調査と要件を踏まえ、新機能フローを主体的に企画・設計

ランディングページ、エディター、購入フロー全体のレイアウトを統合・調整し、視覚面と機能面の一貫性を担保

チームでの進め方

プロジェクトでは、2 名の UI デザイナーと 1 名の UX デザイナーと連携して進めました。1 名は Product Landing Page、もう 1 名は CMS モジュールとエディター設計を担当し、私は後半フェーズでそれらを統合・改善しながら、全体体験の整合性向上を担いました。また、PM と密に連携し、提案した設計方針をロードマップに反映しながら、実行に向けたチーム調整も進めました。開発チームとは複数回にわたって要件や実装可能性を確認し、注釈付き仕様やモジュール分解図を提供することで、実装を支援しました。さらに、社外パートナー向け提案に使用するデモ用アセットも作成し、プロダクト価値の訴求にも貢献しました。

Impact & Takeaways

想定される効果

📉開発期間を最大 60％短縮

事前に定義されたテンプレートと構造化された編集フローにより、従来は外部開発を前提に 2〜3 か月を要していた商品ページや購入ページの立ち上げを、約 1 か月まで短縮できる可能性が見えてきました。これにより、市場投入までのリードタイム短縮と運用負荷の軽減が期待されました。

💰エンジニアリングおよび QA 工数を約 50％削減

モジュール型システムの導入後、クライアントからは、社内の開発工数およびテスト工数が大きく減少したとのフィードバックが寄せられました。

⏱️習得しやすい設計

シンプルな編集モデルを採用することで、非技術系チームでも基本操作を理解しやすく、無理なく使い始められるようにしました。

💬 Sandbox testing におけるパートナーからのフィードバック

シンプルな編集モデルを採用することで、非技術系チームでも基本操作を理解しやすく、無理なく使い始められるようにしました。

「保険業界向けに特化して設計されているため、必要な機能が揃っていて使いやすい。」

「WordPress も試しましたが、学習コストが高く、このツールは私たちのニーズに合っていると感じました。」

主な学び

理想と現実のバランスを取ること

伝統的な業界向けのプロダクトでは、先進性のある機能を追求するだけでは不十分であり、実際の業務フローや利用者の成熟度に合わせて設計へ落とし込むことの重要性を学びました。

複雑な B2B 要件を使いやすい構造へ翻訳すること

保険会社やオペレーションチームへのヒアリングを通じて、文書化されていない業務ルールや業界特有の要件を、分かりやすい UX 構造へ変換する力の重要性を強く実感しました。B2B ツールの設計においては、ドメイン理解そのものが体験の質を左右することを改めて認識しました。