DESIGN SYSTEMデザインシステム

デザインシステム

UI/UXの品質・一貫性を担保

デザインシステムの定義は様々ですが、当社では一貫したブランド体験を提供するための仕組みとして、UI/UXガイドライン・UIライブラリから成るデザインシステムを構築しました。
UIライブラリについてはFigmaコミュニティで公開しております。個人や商用利用にかかわらず、どなたでも自由に使用できますので、ぜひご活用ください。

UI/UXガイドライン

デジタルプロダクトの開発・画面デザインを行う際に、一貫性を担保したUI/UXを再現するために遵守すべき内容をまとめています。

UIライブラリ

UI/UX ガイドラインで定義したレイアウトやパーツ素材のデータをまとめています。デザインや開発を行う際に、パーツのサイズや色の指定などの情報が取得できます。

デザインシステムのメリット

ユーザーエンゲージメントの向上

お客様にとって分かりやすく使いやすいWebサイトを提供します。一貫性のあるデザインパターンやインタラクションを使用することで、ユーザーはより直感的に操作できるようになります。これにより、お客様にストレスなく快適な体験を提供し、ユーザーエンゲージメントの向上に繋げます。

ブランド力の向上

デザインルールを統一することで、ブランドイメージを一貫して伝えます。また、統一された使いやすいユーザビリティはブランド力の向上にも繋がります。こうして、一貫したユーザー体験を提供することで、当社の信頼性やプロフェッショナリズムを伝えます。

合意形成のスピードアップ

簡単にプロトタイプを制作できるため、プロジェクトの初期段階で完成形を確認できます。プロトタイプを元に、複数のメンバー間での議論や認識合わせを容易に行うことができ、開発後の手戻りを減らします。これによって、メンバー間のコラボレーションが活性化し、ユーザー体験の品質も高めることができます。

開発工数・コストの削減

UIライブラリには再利用可能なコンポーネントやデザインパターンが含まれています。これにより、デザイナーや開発者はデザインや開発の時間を節約することができます。また、アフラック全体でのデザイン変更やアップデートを迅速に反映させることができます。

デザインシステムの公開

Figma社が提供するFigma Communityより、UIライブラリを閲覧可能です。
下記3つの理由から当社はUIライブラリを公開します。

  • 1.当社のデザインに対する取り組み、すなわちお客様に感動的なユーザー体験を提供するための取り組みについて知っていただくため
  • 2.当社に関わるすべての企業・代理店にデザイン方針を知っていただくことで、ステークスホルダーの皆様にもご理解・ご協力をいただき、当社に関わるすべての体験を快適なものにするため
  • 3.当社が保険業界で先んじて公開することで、業界全体の取り組みをリードし、保険に関心を寄せられるすべてのお客様にストレスのない保険体験を提供するため

Aflac DESIGN SYSTEM

UIライブラリ
(Figma Community)

UIライブラリ(Figma)の利用に関する注意事項
1.公開サイトのライセンス基準、規則等に従って利用してください。
UIライブラリ(Figma)は、最新バージョンをFigma Communityで公開しています。同サイトで公開されているデータにはCC BY 4.0が適用されます。
2.1.にかかわらず、出典の記載については以下に準拠してください。
UIライブラリ(Figma)は編集・加工等して利用することが前提のリソースのため、UIライブラリ(Figma)を編集・加工等して作成されたUI等の画面パーツを利用者のウェブサイト等で利用する場合、出典を明記する必要はありません。
UIライブラリ(Figma)を編集・加工等せずに利用し公開する場合は出典を記載してください。
(出典記載例)出典:アフラック生命保険株式会社 Figma Community https://www.figma.com/@aflac_xd
「UIライブラリ(Figma)」とは、デザインパーツおよびコンポーネント等をFigmaデータにしたものをいいます。