三菱電機、UI開発の効率化と品質向上を実現するデザインシステム「Serendie Design System」を無償提供

　三菱電機株式会社は7日、独自のデジタル基盤「Serendie（セレンディ）」を活用した価値共創プログラムの加速に向けた取り組みの一環として、UI開発の効率化と品質向上を実現するデザインシステム「Serendie Design System」を構築し、Webサイトで無償提供を開始した。

　Serendie Design Systemは、三菱電機の多様な事業領域で培われた知見を集約し、再利用可能で豊富な数のデザインパーツを有するデザインシステム。システムは、プロトタイピングやフィードバックの収集など多くの機能があり、リアルタイムでの共同編集が可能なデザインツール「Figma」を活用し、利便性や操作性を考慮して設計されたデザインパーツを組み合わせるだけで、簡単にUIデザインの作成が可能で、高品質で統一感のあるUIを簡単に構築できる。

UIデザインパーツの一例

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

　デザインパーツは、三菱電機のブランドガイドラインに準拠し、利便性や操作性にも配慮した設計となっており、より多くの人が使いやすい包括的なUIを構築可能。一度作成したUIの再利用性を確保することで、類似デザイン作成時に流用が可能となり、開発効率の向上に貢献する。

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

　また、Figmaと、Webアプリケーション開発で広く利用されているJavaScriptライブラリ「React」の連携により、デザインから実装への移行を大幅に効率化でき、開発期間の短縮に貢献する。動くプロトタイプを短時間で作成して、ユーザーからのフィードバックを得ながら迅速にUIデザインを改善できるため、PoC開発にも適している。

UIデザインの一例

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