三菱電機は、同社独自のデジタル基盤「Serendie（セレンディ）」を活用した価値共創プログラムの加速に向けた取り組みの一環として、UI開発の効率化と品質向上を実現するデザインシステム「Serendie Design System」を構築し、ウェブサイトにて無償で提供を開始する。本システムは、豊富なデザインパーツや、デザインツール「Figma」とフロントエンドフレームワーク「React」の連携によるスムーズなワークフローを社内外に提供するもので、共創によるデジタルトランスフォーメーション（DX）の加速に貢献する。
近年、デジタル化の進展にともない、顧客との接点になるUI/UXの重要性が増す一方で、UI開発には多くの時間と費用がかかることから、デザインやエンジニアリングの効率化が喫緊の課題となっている。同社においても、ブランドアイデンティティの一貫性と、ユーザーの利便性・操作性や顧客満足度の向上に向けた、UI/UXの統一が求められていた。
「Serendie Design System」は、同社の多様な事業領域で培われた知見を集約し、再利用可能で豊富な数のデザインパーツを有する、同社初の事業領域を横断したデザインシステム。本システムは、「Figma」を活用し、利便性や操作性を考慮して設計されたデザインパーツを組み合わせるだけで、簡単にUIデザインの作成が可能で、高品質で統一感のあるUIを簡単に構築できる。また、「Figma」とウェブアプリケーション開発で広く利用されているJavaScriptのライブラリーである「React」の連携により、デザインから実装への移行を大幅に効率化できるため、開発期間の短縮に貢献する。さらに、動くプロトタイプを短時間で作成して、ユーザーからのフィードバックを得ながら迅速にUIデザインを改善できるため、PoC開発にも最適なツール。
同社は、UI開発の効率化と品質向上を実現する「Serendie Design System」の提供を通じて、社外パートナーとの共創によるデジタルサービスの実現を加速していく。
新システムの特徴
1．豊富なデザインパーツにより、統一感のある包括的なUIの構築が可能
- ボタン、フォーム、アイコンなど、すぐに利用可能なデザインパーツを豊富に用意。すべてのデザインパーツをデザインの統一性を考慮した設計とすることで、デザインの専門知識がない人でも、簡単に見た目や使い勝手に統一感のあるUIを構築可能
- デザインパーツは当社のブランドガイドラインに準拠し、利便性や操作性にも配慮した設計。より多くの人が使いやすい包括的なUIを構築可能
- 一度作成したUIの再利用性を確保することで、類似デザイン作成時に流用が可能となり、開発効率の向上に貢献
2．デザインツール「Figma」とフロントエンドフレームワーク「React」の活用・連携により、効率良いUIの構築と開発期間の短縮を実現
- 「Figma」を活用し、デザインパーツを組み合わせることで簡単にUIデザインの作成が可能。汎用的なデザインパーツを多く備えることで、プロトタイプを短時間で作成できることに加え、複数人でも同時に共同編集が可能な「Figma」の特徴と合わせて、効率良いUIの構築を実現
- 「Figma」とウェブアプリケーション開発で広く利用されているJavaScriptのライブラリーである「React」の連携により、デザインから実装へのスムーズな移行を実現することで、開発期間の短縮に貢献
3．「Serendie Design System」を活用し、共創空間「Serendie Street」の活動を加速
- 「Serendie Street」での共創活動において、デザイナー、エンジニア、ビジネス担当者など異なる専門性を持つ参加者同士が、「Serendie Design System」に定義された共通のデザインパーツや用語を用いることで、参加者全員が共通認識を持つことが可能となり、スムーズなコミュニケーションを実現
- 迅速にUIプロトタイプを作成可能なため、共創の場においてアイデアを具体的な形にすることで、参加者全員がイメージを共有しやすくなり、議論のブラッシュアップに寄与
- 豊富なデザインパーツを活用することで、開発期間の大幅な短縮を可能とし、共創活動の成果である新たな価値の迅速な提供に貢献
今後の予定・将来展望
将来的なグローバルでのサービス展開を視野に入れ、多言語対応を進めていくとともに、デザインプロセスだけでなく、エンジニアリングプロセスもデザインシステムに統合することで、デザイナーとエンジニアがより有機的にコラボレーションできる環境を構築し、効率的かつ高品質なUX開発を推進していく。また、Serendie Streetでの共創活動を通じて、新たなデザインパーツを継続的に開発・追加し、より多くのユースケースに対応できる柔軟性を高め、社内のデザイナー、エンジニア、共創パートナーとともに、活発なエコシステムを構築する。さらに、情報共有や相互協力を通じて、デザインシステムのさらなる発展と、より良いUI/UXデザインの普及を目指す。
