Serendie Design Systemとは
Serendie Design Systemは、三菱電機株式会社DXイノベーションセンターが提供するデザインシステムです。
デザインシステムは、デザインと開発の効率化、アクセシブルで一貫したプロダクト品質の担保、ナレッジの蓄積とベストプラクティスの波及、コミュニケーションの円滑化などを目的とします。そのために、ブランドやビジュアルに関するアイデンティティの定義、カラーやタイポグラフィなど視覚要素を定めたデザイントークン、再利用性の高いUIコンポーネント、アイコンやイラストなどのビジュアルアセットを提供します。これらは代表例であり、デザインシステムの構成要素は組織や状況に応じて様々です。
Serendie Design Systemは、三菱電機のモノづくり文化に寄り添いつつ、実験的で新しいサービスをスピーディーに生み出す基盤となることを目指しています。そのため、提供するアセットはデジタルプロダクト開発に即効性のあるものが中心です。完璧さや堅牢性だけを追求するのではなく、軽やかで柔軟なプロダクトづくりを実現するためのデザインシステムです。
原則
デザインシステムの形は組織によって様々ですが、根底には共通の原則があります。「最新のデザインファイルがどこにあるかわからない」「再利用可能なアイコン集の存在を知らない」などを避け、Single Source of Truth (SSOT: 信頼できる唯一の情報源) を目指すことはその一つです。
これはSerendie Design Systemにおいても同様です。三菱電機の文化や目指す姿を背景に、Serendie Design Systemでは次の３つの原則を重視しています。
多様な事業領域への適応
Serendie Design Systemは、三菱電機が有する多様なブランド・多様なプロダクトに適応することがコンセプトの一つです。このような環境では、事業領域ごとにVisual Identityが定義され、特定のプロダクトに特化したUIコンポーネントが必要になることも多く、アクセシビリティ基準など満たすべき品質も異なります。ここでそれぞれの事業領域で完全に独立したデザインシステムを作ってしまうと、サイロ化が進み、BorderlessやCirculativeの原則が満たせなくなります。
そこで重要となるのが着せ替え型の設計です。Serendie Design Systemが提供するデザイントークンおよびSerendie UIは、その表層を変化させる仕組みを備えています。これをテーミングと呼び、デフォルトではSerendieブランドを踏襲した5つのテーマを提供しますが、ここに事業ごとのカスタムテーマを追加でき、そのテーマによってSerendie UIを上書きできます。
このようにすることで、Serendie Design Systemは各事業デザインシステムの骨格として機能します。また特定のプロダクトに特化したUIコンポーネントはSerendie UIには取り込まず、事業デザインシステム内での提供に留めることで、部門を横断した連携の負荷が下がり、ガバナンスしやすくなることを目指しています。
なお、テーミングだけでなく、コードとFigma間でのデザイントークンの同期など、Serendie Design Systemが備えるその他の仕組みも各事業デザインシステムで活用できます。この仕組みは三菱電機社内向けとなりますが、具体的なワークフローなどをGitHubにて公開しています。