- 伊藤
-
デジタル化が進むにつれ、顧客との接点となるUI/UXの重要性が増しています。ただ、UI開発には多くの時間とコストがかかるため、デザインやエンジニアリングの効率化が課題となっていました。
三菱電機でもブランドアイデンティティの一貫性と、ユーザーの利便性・操作性や顧客満足度の向上に向けたUI/UXの統一が求められていました。社内ではBtoB製品とBtoC製品でまったく違う文化があり、さらに社外パートナーからの見え方も違っていたことも課題でした。そこで、全社でのlookの共通化、PoC開発高速化を目指し、UI開発の効率化と品質向上を実現するデザインシステム「Serendie® Design System」の開発に至りました。
- 三浦
-
利便性や操作性を考慮して設計された汎用性の高いデザインパーツと、業界標準のデザインツール「FIGMA®」、フロントエンドフレームワーク「React」を連携させました。それによって簡単にUIデザインを作成し、高品質で統一感のあるUIを構築します。
デザインから実装への移行を大幅に効率化できるため、スムーズなワークフローを社内外に提供して開発期間を短縮し、共創によるデジタルトランスフォーメーション(DX)の加速にも貢献します。動くプロトタイプを短時間で作成し、ユーザーからのフィードバックを得ながら迅速にUIデザインを改善でき、実現可能性を検証するPoC開発にも適しています。
- 吉澤
-
開発にあたっては、国内外の完成度の高いデザインシステムを参考にしました。また、デザインシステムとしての使いやすさを意識し、開発中の段階からUIデザイン現場に投入し「実際に使ってみてフィードバックする」といった開発プロセスを大切にしました。
- 吉澤
-
立ち上げ期で意識したことは、最初から広く使えるシステムにしないこと。ゆくゆくは全社で使えるシステムにすると決まっていましたが、初期段階で要件を広げすぎると逆にだれも使えないシステムになりがちです。まずは狭い範囲に絞ってヒアリングしながら必要な機能を考え、徐々に広げていく手法を取りました。
- 伊藤
-
基本的に全て外部に公開する方針を取っているのも大きな特徴です。理由は3つあり、1つ目は社内に浸透させるため。三菱電機は事業数が多く、社内であっても他社レベルでルールが変わってしまうので、誰でも使えるオープンなシステムにすることが浸透の近道だと考えました。2つ目は、フロントエンドの開発について社外へ積極的に発信して当社のプレゼンス向上につなげるため。3つ目は、外部公開することで「恥ずかしくないシステムを作ろう」とチームの士気を上げるためです。
- 山内
-
結果として、どこに出しても「すごい!」と言われるレベルの実績になりました。これまで様々なプロジェクトに参加してきましたが、どのプロジェクトも条件との兼ね合いや紆余曲折があり、正直なところ胸を張って100%の自信作だと言えることは稀でした。しかし、Serendie® Design Systemはどこに出しても恥ずかしくないアウトプットです。
- 吉澤
-
世界を舞台に活躍するデザイン・イノベーション・ファームであるTakramと協働できたことが、非常にいい経験になりました。Takramと三菱電機が連携することで、デザインシステムがカバーする範囲としては、かなりの規模感でつくり上げる事ができたと感じます。
- 伊藤
-
今までの三菱電機は最初に全体の開発プロセスを決めるウォーターフロー開発が主でしたが、細かい開発をテストしながら繰り返すアジャイル開発にシフトしようとしています。Serendie®
Design
Systemは、そのアジャイル開発を後押しする存在になることを目指しています。
実際の開発に携わる人に「アジャイル開発をしましょう!」と理念を押し付けても、どうして必要なのか、工数をどう減らせるかなどが伝わらず、浸透させるのは難しいです。アジャイル開発に適したSerendie® Design Systemを活用すれば、必要性が伝わり浸透しやすくなると考えています。
- 三浦
- Serendie® Design Systemは社内外の利用者と相互にコミュニケーションして育てていく必要があるので「今後大きくするにはどんなアクションが必要か」「どういう人を巻き込んでいけばいいのか」など考える必要があります。そこに従来の業務と違ったおもしろさを感じました。
- 伊藤
-
作って終わりにせず、活きたデザインシステムにするには利用率を上げないといけません。「こんなシステムができたので使ってください」と告知するだけでは使ってもらえないので、開発段階から関係各所に声をかけて意見を吸い上げていき、現場に浸透させていきました。
ほかにも社内説明会を開いたり、導入のハードルを下げるためのブートキャンプをUIデザイン向けとコーディング向けに実施したり、PoCのスクラムチームへUIデザイナーとして参加し、Serendie® Design Systemを導入したUI開発のサポートを行ったりしています。利用者の声を拾い上げる場を定期的に設けて、Serendie® Design Systemに取り入れる運用ワークフローを整備し、社内コミュニティやイントラサイトの運用、社外向けに発信するSNSでの発信も実施しました。
- 吉澤
- 社内説明会やブートキャンプには想像以上の参加者が集まりました。「早速プロトタイプの開発に使い始めました」「まだ使う案件はないけれど、今後使えるように予習しておきたい」といった声が届き、期待されていることを実感しました。
- 伊藤
-
ブートキャンプは「職種ベースではなくスキルベースで受講してもらいたい」と考え、あえてイベント名を「for
UIデザイン」「for
コーディング」として、デザイナーやエンジニアなどの職種名を掲げないようにしました。「for
UIデザイン」にエンジニアも、「for
コーディング」にデザイナーも参加してくれ、役割の垣根を超えて新しいスキルを獲得し、越境しようとする人が増えていると感じました。
共通言語が増えて相互理解が深まることで、プロジェクトにおける価値検証のループをよりスピーディーに回し、ユーザーにとってより良いアウトプットを出せるようになるのではないかと期待しています。
- 三浦
- 社内にSerendie® Design Systemのコミュニティがあるのですが、すでに200名超のメンバーが入ってくれ、社内でもトップクラスの規模になっています。部署を横断して入ってくれているのがうれしいですね。ひっきりなしに参加申請が届くので、それだけ注目されているのだと実感します。リリース後はXでもたくさんのポストがあり、社外の反響も上々です。社内外のユーザーからのフィードバックを基により使いやすいデザインシステムを育てていきたいです。
- 吉澤
- 三菱電機はハードウェアを作っているメーカーというイメージが強いかもしれませんが、ソフトの重要性が非常に高くなっています。また、UIは製品の中で最も利用者に近く、最も強い印象を作る要素でもあるため重要視しています。FIGMA®やGITHUB®などの業界標準ツールを使い、三菱電機のような規模感でデザインシステムを整備している企業はほとんどありません。今後、業界を牽引していける様な存在になれればと思います。
- 山内
- 統合デザイン研究所は小さい組織ではありますが、社内のルールに風穴を開ける役割を担っていて、会社に与える影響は大きいです。三菱電機の中で一番自由で、一番期待されている場所ではないでしょうか。
「Serendie」は三菱電機株式会社の登録商標です。
「FIGMA」はFIGMA,
Inc.の登録商標です。
「GITHUB」はGITHUB,
Inc.の登録商標です。
三菱電機株式会社 統合デザイン研究所
デザイナー
伊藤 槙紀
2018年入社
UI/UXデザイナーとしてエネルギーシステムなどのBtoB向け製品を担当。並行して、社内に蓄積している大量データの可視化を行うデータビジュアライゼーションデザイナーとしても活動している。
三菱電機株式会社 統合デザイン研究所
デザイナー
三浦 美怜
2020年入社
高齢者向け見まもりサービスや聴覚障がい者向けコミュニケーションアプリの研究開発を担当した後、現在はコンシューマー向けアプリや新規事業のサービスおよびUIデザインに携わる。
三菱電機株式会社 統合デザイン研究所
UIデザイナー
吉澤 仁志
2015年入社
キャリア採用にて入社。エレベーターやビルシステムのUIデザインを経て、現在、コンシューマー向けアプリのUIデザインに携わる。
三菱電機株式会社 統合デザイン研究所
UI/UXデザイナー
山内 貴司
2014年入社
デザインコンサルティングファームをはじめ複数の会社を経て入社。衛星事業、新規事業支援、オランダ子会社でのマーケティング業務に従事した後、コンシューマー向けアプリ開発に携わる。



