UI開発の効率化と品質向上を実現する「Serendie Design System」を提供開始

デザインシステムを介して社内外との共創を促進し、デジタルサービスの創出を加速

Serendie Design Systemのビジュアルアイデンティティ

　三菱電機株式会社は、当社独自のデジタル基盤「Serendie™（セレンディ）」を活用した価値共創プログラムの加速に向けた取り組みの一環として、UI（※1）開発の効率化と品質向上を実現するデザインシステム「Serendie Design System」を構築し、Webサイト（※2）にて11月7日から無償で提供を開始します。本システムは、豊富なデザインパーツや、デザインツール「Figma」（※3）とフロントエンドフレームワーク「React」（※4）の連携によるスムーズなワークフローを社内外に提供するもので、共創によるデジタルトランスフォーメーション（DX）の加速に貢献します。

　近年、デジタル化の進展に伴い、顧客との接点になるUI/UX（※5）の重要性が増す一方で、UI開発には多くの時間と費用がかかることから、デザインやエンジニアリングの効率化が喫緊の課題となっています。当社においても、ブランドアイデンティティの一貫性と、ユーザーの利便性・操作性や顧客満足度の向上に向けた、UI/UXの統一が求められていました。

　「Serendie Design System」は、当社の多様な事業領域で培われた知見を集約し、再利用可能で豊富な数のデザインパーツを有する、当社初の事業領域を横断したデザインシステムです。本システムは、「Figma」を活用し、利便性や操作性を考慮して設計されたデザインパーツを組み合わせるだけで、簡単にUIデザインの作成が可能で、高品質で統一感のあるUIを簡単に構築できます。また、「Figma」とWebアプリケーション開発で広く利用されているJavaScriptのライブラリーである「React」の連携により、デザインから実装への移行を大幅に効率化できるため、開発期間の短縮に貢献します。さらに、動くプロトタイプを短時間で作成して、ユーザーからのフィードバックを得ながら迅速にUIデザインを改善できるため、PoC（※6）開発にも最適なツールです。

　当社は、UI開発の効率化と品質向上を実現する「Serendie Design System」の提供を通じて、社外パートナーとの共創によるデジタルサービスの実現を加速してまいります。

■新システムの特長

1．豊富なデザインパーツにより、統一感のある包括的なUIの構築が可能

・ボタン、フォーム、アイコンなど、すぐに利用可能なデザインパーツを豊富に用意。すべてのデザインパーツをデザインの統一性を考慮した設計とすることで、デザインの専門知識がない人でも、簡単に見た目や使い勝手に統一感のあるUIを構築可能

・デザインパーツは当社のブランドガイドラインに準拠し、利便性や操作性にも配慮した設計。より多くの人が使いやすい包括的なUIを構築可能

・一度作成したUIの再利用性を確保することで、類似デザイン作成時に流用が可能となり、開発効率の向上に貢献

UIデザインパーツの一例

2．デザインツール「Figma」とフロントエンドフレームワーク「React」の活用・連携により、効率良いUIの構築と開発期間の短縮を実現

・UIデザインの業界標準である「Figma」を活用し、デザインパーツを組み合わせることで簡単にUIデザインの作成が可能。汎用的なデザインパーツを多く備えることで、プロトタイプを短時間で作成できることに加え、複数人でも同時に共同編集が可能な「Figma」の特徴と合わせて、効率良いUIの構築を実現

・「Figma」とWebアプリケーション開発で広く利用されているJavaScriptのライブラリーである「React」の連携により、デザインから実装へのスムーズな移行を実現することで、開発期間の短縮に貢献

UIデザインの一例

3．「Serendie Design System」を活用し、共創空間「Serendie Street」の活動を加速

・「Serendie Street」（※7）での共創活動において、デザイナー、エンジニア、ビジネス担当者など異なる専門性を持つ参加者同士が、「Serendie Design System」に定義された共通のデザインパーツや用語を用いることで、参加者全員が共通認識を持つことが可能となり、スムーズなコミュニケーションを実現

・迅速にUIプロトタイプを作成可能なため、共創の場においてアイデアを具体的な形にすることで、参加者全員がイメージを共有しやすくなり、議論のブラッシュアップに寄与

・豊富なデザインパーツを活用することで、開発期間の大幅な短縮を可能とし、共創活動の成果である新たな価値の迅速な提供に貢献

■ 関係者コメント

三菱電機株式会社　執行役員　DXイノベーションセンター長　朝日 宣雄

「デジタル基盤『Serendie』では、さまざまな分野の専門知識を有した方々との共創により、アジャイルな開発と継続的なアップデートを指向しています。この活動においては、お客様に使いやすく、統一性を持ったUIを維持していくことが非常に重要となり、『Serendie Design System』はそれを可能とするために開発しました。三菱電機グループ内だけでなく、社外のパートナーの方々とも共有して活用してまいります。」

■今後の予定・将来展望

将来的なグローバルでのサービス展開を視野に入れ、多言語対応を進めていくとともに、デザインプロセスだけでなく、エンジニアリングプロセスもデザインシステムに統合することで、デザイナーとエンジニアがより有機的にコラボレーションできる環境を構築し、効率的かつ高品質なUX開発を推進していきます。また、Serendie Streetでの共創活動を通じて、新たなデザインパーツを継続的に開発・追加し、より多くのユースケースに対応できる柔軟性を高め、社内のデザイナー、エンジニア、共創パートナーとともに、活発なエコシステムを構築します。さらに、情報共有や相互協力を通じて、デザインシステムのさらなる発展と、より良いUI/UXデザインの普及を目指します。

■商標関連

「Serendie」	三菱電機株式会社の出願中の商標
「Figma」	FIGMA, INC.の登録商標
「React」	Meta Platforms, Inc.の登録商標

■三菱電機グループについて

　私たち三菱電機グループは、たゆまぬ技術革新と限りない創造力により、活力とゆとりある社会の実現に貢献します。社会・環境を豊かにしながら事業を発展させる「トレード・オン」の活動を加速させ、サステナビリティを実現します。また、デジタル基盤「Serendie」を活用し、お客様から得られたデータをデジタル空間に集約・分析するとともに、グループ内が強くつながり知恵を出し合うことで、新たな価値を生み出し社会課題の解決に貢献する「循環型 デジタル・エンジニアリング」を推進しています。1921年の創業以来、100年を超える歴史を有し、社会システム、電力システム、防衛・宇宙システム、FAシステム、自動車機器、ビルシステム、空調・家電、情報システム・サービス、半導体・デバイスといった事業を展開しています。世界に200以上のグループ会社と約15万人の従業員を擁し、2023年度の連結売上高は5兆2,579億円でした。詳細は、www.MitsubishiElectric.co.jpをご覧ください。

※1　User Interface

※2　https://serendie.design/

※3　プロトタイピングやフィードバックの収集など多くの機能があり、リアルタイムでの共同編集が可能なデザインツール

※4　WebサイトやWebアプリのUI開発に用いられるJavaScriptのライブラリー

※5　User eXperience

※6　Proof of Conceptの略で、新しい概念・理論・アイデアを製品化に移す前に、実現可能性や効果を検証すること

※7　これまでにない新たな価値の創出を目指し、社内外や国内外の多様な人財による共創を推進するための空間

＜お客様からのお問い合わせ先＞

三菱電機株式会社　DXイノベーションセンター

〒221-0056 神奈川県横浜市神奈川区金港町1番地7　横浜ダイヤビルディング

E-mail：[e-mail]