Case

生命保険の見積ハードルを下げながら、直感的に理解できるUXデザインを実現

ＳＯＭＰＯひまわり生命保険株式会社様

Issue

コンテンツ更新の手間がかかり、デザインの統一感が損なわれてしまっていた

コンバージョンを得るための重要なページが外部ドメインに分散しており、コンテンツ更新のボトルネックやUX体験に課題がありました。また、各保険商品の内容や特約を分かりやすく説明するコンテンツ設計をする必要がありました。

Solution

分散したページを集約して、ユーザーが理解しやすいUXを提供する

現状の外部ドメインに分散したページを公式サイトのドメインに一元化し、サイトの信頼度を高めるとともに、統一感と商品ごとの色を活かしたWebデザインを提供し、コンテンツ更新の効率向上とスムーズなUX体験を提供しました。これにより、検討ユーザーの見積ハードルを下げ、コンバージョンに寄与する仕組みを提供しました。

Design Concept

保険用語「特約」をデザインでわかりやすく表現

生命保険をはじめて検討するユーザーにとって「特約」というキーワードは馴染みのないものかと思います。

今回のデザイン改修では、これを視覚的に分かりやすくすることを重視しました。検討中ユーザーがメインの保証内容と特約が簡単に理解できるよう、飲食店のメニューや携帯電話のオプションでも見かける「＋（プラス記号）」を用いたシンプルなUIを提供し、シンプルで直感的なデザインアプローチを採用しました。

これによりユーザーの効果的なコンバージョンを達成できるようサポートしています。

各商品の色を打ち出せるCSS設計を作り、新商品発売にも迅速な対応を実現

ＳＯＭＰＯひまわり生命様の保険商品はそれぞれに配色が設定されています。そこで、既存サイトの雰囲気を損なわずに、各商品特有のカラーを活かすCSS設計を採用しました。

具体的には、"色"と"形"を分離して記述し、形に対して色を指定することで、その商品のデザインが完成する仕組みです。

これにより、商品の特長やメリットを視覚的に引き立てつつ、ユーザーに直感的なコンテンツが提供できるようになります。またこの設計により、新商品が増えても迅速な開発が可能となりました。

Coding Technique

エレメントリスト活用により入れ込み工数を圧縮

LYZONでは設立当初から、「HTMLの知識がなくてもコンテンツ作成できる」を理念として様々な技術革新に取り組んでいます。

そのなかでもエレメントリストは長年親しまれているデザインシステムの一つです。エレメントリストは、多彩なパーツのセットをあらかじめ用意して、これらのパーツをコピー&ペーストするだけで多彩なページデザインが実現できます。

ＳＯＭＰＯひまわり様のWebサイトにおいては、8割以上のページでご利用いただいており、充実した内容のページが誰でも作れるとともに、工数の短縮化を実現しています。

デザインシステムを活かす論理的なCSS設計を取り入れています

デザインシステムは運用で活かすべき資産であり、お客さまのユーザー体験を向上させる重要な要素の一つです。

ＳＯＭＰＯひまわり生命様のWebサイトでは、デザインシステムの更新が入っても、柔軟な対応ができる独自のCSS設計を取り入れています。そのため、初回リリースから5年以上経過しても、HTMLの書き直しをほとんどすることなくデザインリニューアルを成功させました。

また、ページごとのテーマカラーに応じて色が変わるエレメントを作成し、かつ運用でテーマカラーが増減してもサイトが崩れることなく表示される仕組みを導入し、エンドユーザーが高いユーザー体験を得られるとともに、お客さまからのご要望に沿ったデザインが簡単に提供できる仕組みとなっています。

Credit

SITE URL	https://www.himawari-life.co.jp/
INDUSTRY	金融・保険業
DIRECTOR	相原小林河西
DESIGNER	佐々木大西
SYSTEM ENGINEER	キム
FRONTEND ENGINEER	キム佐々木