デザインシステムを起点にしたオープンな組織文化づくり

DXの加速、AIの浸透、既存の業界や地理的な枠組みを超えた競争など、さまざまな要因が絡み合い、ビジネスを取り巻く状況が目まぐるしく変化してしています。多くの企業がその渦中にあり、未来を見据えてどのような戦略を取るかを、いままさに求められています。

宇宙から家電まで幅広い事業領域と多様な事業フェーズを有する三菱電機株式会社（以下、三菱電機）は「循環型 デジタル・エンジニアリング企業」への変革を打ち出し、その変革を加速させるためのDX基盤「Serendie（セレンディ）」をリリースしました。

Serendieは、データ分析基盤やWebAPI連携基盤など多様な事業をつなぐデジタル基盤や、社内外のコラボレーションを育む共創空間など、顧客の声やデータを取り入れながら、新しい価値を生み出すためのプラットフォームです。

Takramは、このDX戦略を支えるデザインシステムのデザインから開発までを一気通貫で手がけました。本デザインシステムは、Serendieブランドをベースに設計しています。

一般的にデザインシステムは組織や事業の在り方に合わせて設計されるため、今回は広い事業領域と多様な事業フェーズをもつ三菱電機に適応が求められました。これは国内外のデザインシステムの事例のなかでも求められる適応性がかなり高い部類に入ります。

デザインシステムの立ち上げは、デザイン原則など抽象的な要素から着手する場合もありますが、今回はエンジニア主導のモノづくり文化からの変革をめざす三菱電機の組織文化を踏まえて、UIコンポーネントなど具体性の高い要素からカバーし、プロトタイピングの高速化や車輪の再発明を防ぐなど、効果を実感しやすいところからスタートしました。

結果として、テーミングやマルチデバイス対応を考慮したデザイントークン、汎用的なUIコンポーネント群とそのJavaScript実装、300を超えるオリジナルアイコンが生まれました。

これらは「Figma API」や「Variables」「Code Connect」などFigmaが備える機能をフル活用してつくられ、デザイントークンを実装側とデザイン側で共有するなど、Single Source of Truthを突き詰めたものとなっています。これは、「デザイン×開発」がなせるTakramならではのアウトプットといえます。

今回のプロジェクトで検討してきたことは、成果物だけでなくその設計思想を記したドキュメントを含めて、ほぼすべて社外に公開しています。IT・テック系企業は社外公開の事例も多いですが、国内において三菱電機のような企業体では、ほぼ例がありません。

なぜ公開に踏み切ったのか。ひとつは社内外の誰もがアクセシブルなデザインシステムにするために、使いたいときにすぐ使える状態をめざしたことにあります。三菱電機ほどの企業規模となると、部門が違えばほぼ別の組織といってもいいでしょう。加えてソフトウェア開発においては関係会社や社外との協業で進められるケースも多くあります。


これらの背景のもと、社内外のコラボレーションをより促したいという想いや、協力会社も自由に使えたほうが開発の効率化など実利も大きいということを勘案して、社外公開に至りました。

ドキュメントサイト: Serendie Design System
Figma Community: Serendie UI Kit