アフラックデザインシステムとは
アフラックではFigmaを活用したデザインシステムを構築したことで、デザインの標準化が加速し、社内外の連携が強化されたという。同社のデザインシステムプロジェクトの特徴は、デザインシステムを作って終わりではなく、その「浸透」までを視野に入れて取り組んでいる点にある。
本記事では、アフラックがデザインシステムを構築するに至った背景や具体的なプロセス、またデザインシステムを「浸透」させるノウハウを紹介し、金融機関がデザインシステムを導入する際のヒントを探る。
アフラックがデザインシステムを構築した理由
アフラックは自社のデザインシステムを、ルールブックである「UI/UXガイドライン」と素材集である「UIライブラリ」、それらをどのように使用するかを記した「業務ガイドブック」の3つによって構成している。さらに、社員による活用を後押しするため、詳細な手順をまとめた「活用プロセス資料」も用意した。
ではなぜ、生命保険会社であるアフラックはデザインシステムを構築したのだろうか。
1つは社内外の関係者に一貫したUXを提供することにある。生命保険会社にとって代理店をはじめとしたパートナー企業は、ときに会社の「顔」になる大切な存在だ。アフラックに関わるすべての企業・代理店とデザイン方針を共有することで、アフラックに関わるすべてのタッチポイントにおいて、お客様に快適なUXの提供が可能になる。
また、アフラックは自社だけでなく、保険業界全体のUX向上によって、保険に関心を寄せられるすべてのお客様にストレスのない保険体験を提供したいと考えている。生命保険を検討する際には、複数の保険商品を比較検討するのが一般的だ。だからこそ、同社は自社のデザインシステムの取り組みを他社にも積極的に共有し、業界全体のUI/UXに対する意識の向上を図っている。
こうした状況のもと、アフラックは2024年5月にデザインシステムを社内リリース。同年8月には「UIライブラリ」の一部をFigmaコミュニティで一般公開した。
プリンシパル・エクスペリエンスデザイナーの服部さんはその意義を以下のように語る。
「われわれが先んじてデザインシステムを公開することで、保険業界全体のUXが向上するきっかけになればという想いで公開させていただきました」
なお、保険業界ではデザインシステムの一般公開の前例がないため、社内の理解が得にくい面もあったのではないかという問いに対して、「最初にやれば先進的な取り組みとして注目される。その上、アフラックの中期経営戦略にある『感動的なお客様体験を提供する』ことに真摯に取り組んでいるというアピールにもなり、ブランド力の向上にもつながる」と説得したそうだ。
デザインシステム構築におけるハードルとは
とはいえ、新たなデザインルールの導入は容易ではない。服部さんは、デザインシステムを作るときの悩みどころの一つとして「既存デザインとのギャップ」を挙げる。
デザインシステムを導入する際、デザインとしての最善を追求したいところだが、既存のデザインとのギャップが大き過ぎると、サイトの改修作業に過大な負荷がかかる。そうなると、社内においても受け入れられない、使ってもらえないものになってしまう。
「結局、デザインシステムというのはそれを適⽤することに意味がある。作って誰も使わなかったのでは意味がない。『生きる』デザインシステムをつくるには、適⽤フェーズのことを考慮しておくことが重要です」（服部さん）
そこでアフラックでは適用フェーズを考慮し、色や形状のパターンを徹底的にシンプルにしたデザインシステムを構築した。そうすることで、社外の協力会社に委託する際にも、作業者が悩まず高い再現性を実現できる。
「『色はこれだけ、ボタンはこれだけ』と限定すれば迷いようがなく、誰がデザインしてもデザインの統一が図れます。バリエーションを増やしたほうがリッチなデザインになるケースもありますが、適用のしやすさを優先し、みんなが簡単に使えるデザインシステムというものを目指しました」（服部さん）
