Figmaを共創の基盤に、三菱電機が進めるDXの新しいかたち

デファクトスタンダードへ、必然だったFigmaの選択

三菱電機は、家庭用エアコンから人工衛星まで幅広い事業領域を持つ総合電機メーカーです。同社がFigmaを本格導入したのは2023年7月のこと。それ以前は別のデザインツールを使用していましたが、メンテナンスモードへの移行が告知され、新たなツールへの乗り換えを迫られました。研究開発本部 統合デザイン研究所 ライフクリエーションデザイン部 ライフインタラクションデザイングループの山内 貴司氏は、当時をこう振り返ります。

山内氏「当時すでにFigmaはUI開発におけるデファクトスタンダードになっていたので、ほぼ一択でしたね。当時は今よりもクラウドツール導入のハードルが高い状況でしたが、複数拠点のメンバーがリアルタイムで同じファイルを見られるコラボレーション機能も魅力的で、Figmaを選ばない理由はありませんでした」

こうして、デザイン研究所での導入を皮切りに、Figmaは三菱電機のUI開発に根付いていきます。そしてFigmaを起点に、同社のデザイン文化は静かに、しかし確実に変わり始めます。その一つの到達点が、自社デザインシステム「Serendie Design System（SDS）」の誕生でした。

革新的なデザインシステムで挑む、共創を加速する基盤づくり

「Serendie（セレンディ）」とは、「思いがけない発見」を意味するSerendipity（セレンディピティ）とDigital Engineering（デジタルエンジニアリング）を組み合わせた造語です。その名には、偶然の出会いと創造の連鎖から、新たな価値を生み出すという思想が込められています。

三菱電機のDXをけん引するDXイノベーションセンター（DIC）のもとで誕生したSerendie Design System（SDS）は、単なるUIツールキットではありません。幅広い事業領域を持つ製造業の巨人が、「デザインの共通言語」を社内外に一斉開放するという、国内の大手事業会社でも先進的な試みです。デジタルイノベーション事業本部 DXイノベーションセンター システム連携企画部の柴田 博彬氏は、その狙いをこう話します。

柴田氏「事業領域が広い分、これまでは領域ごとにデザインがバラバラになりがちでした。SDSを共通基盤にすることで、社内のどの事業部でもブランドイメージを統一しやすくなります。効率的な開発を可能にし、UIデザイナーやソフトウェアエンジニア不足を補うためのツールとしても重要な存在です」

一般的なデザインシステムは、特定のプロダクトや単一ブランドを前提に作られるケースがほとんどです。しかしSDSは、まったく性質の異なる複数の事業領域を横断して適用することを最初から核に据えています。「テーミング」と呼ばれる着せ替え機能により、共通のコンポーネントを土台としながら、各事業部が独自のブランドアイデンティティを柔軟に表現できます。骨格を共有しながら表層だけを変えられるこのアプローチは、多様な事業を抱える三菱電機ならではの現実的な課題に真正面から向き合ったものです。

SDSのもう一つの際立った特徴は、デザイナーだけでなくエンジニアの活用を強く意識している点です。同社にはエンジニア主導のものづくり文化が根付いており、SDSは抽象的なデザイン原則よりも、すぐに使える具体的なUIコンポーネントにフォーカスしています。パーツを組み合わせるだけでプロトタイプが完成する「即効性の高さ」が、設計の根幹にあります。

山内氏「一般的なデザインシステムはデザイナー向けのツールというイメージが強いと思いますが、SDSはエンジニアにも使いやすいものにしたかった。FigmaのデータだけでなくReactのソースコードもセットになっているので、各事業部が自分たちでUIを作り、動くものにして試す、というサイクルを自律的に回せるようになっています」

デザインから実装までが一本化されることで、アイデアを形にして検証するまでのリードタイムが大幅に短縮され、アジャイルな開発文化を組織全体に根付かせる推進力になっています。

そして、このSDSが真に力を発揮するのは、社外との共創においてです。パートナー企業も同じ設計言語でプロジェクトに参加でき、デザインシステムそのものが共創のインフラとして機能します。

柴田氏「顧客やパートナーとの共創において、ツールの導入ハードルをなくすことを目的としています。オープンにしておけば、最初から同じツールでスムーズに動き出せます」

「完成させて守る」のではなく「開放して育てる」。SDSはそのフィロソフィーを体現した、共創のためのプラットフォームなのです。

AI連携で広がる、次世代のデザインシステム活用法

そしてSDSのもう一つの大きな特徴が、AIを意識した設計です。

山内氏「これからはAIとの連携もしやすいように作っておいた方がいいだろうという視点は、初期の頃からありました」

MCPが世の中に登場し始めた頃から、DICのメンバーはすでに自社MCPサーバーの構築に着手していました。「試しに作ってみたらこれは使えるぞということになって、本格的に作ってみようという流れになった」と柴田氏は話します。SDSと自社MCPサーバーを組み合わせた活用は、大きく3つの方向に広がっています。

1つ目は、自然言語でUIを作る「バイブコーディング」です。自社MCPサーバーに接続したAIエージェントに「スマホアプリのログイン画面を作って」と指示するだけで、SDSのコンポーネントを使ったUIが生成されます。Figma MakeとSDSもコネクターでつなぐことができ、同様の使い方が可能です。従来、UIを作るにはデザイン部門への社内発注が必要でコストと時間がかかっていましたが、今では各事業部が自律してプロトタイプを作り、試すサイクルを回せるようになっています。

2つ目は、デザインの「準拠チェック」と「置き換え」です。自社MCPサーバーとFigma MCPを組み合わせたFigmaプラグインの開発により、Figmaで作ったデザインがSDSのガイドラインに準拠しているかを自動でチェックできます。

柴田氏「さらに、SDS誕生以前に作られたFigmaデザインのURLを入力するだけで、SDS準拠のUIへ一括で置き換えできる機能も実現しています」

3つ目は、Q&Aの自動化です。SDSやFigmaの使い方に関する問い合わせに対し、自社MCPサーバーを活用したAIが自動応答する仕組みを社内リリースしました。約500人のコアユーザーを含む、約15万人を対象としています。

柴田氏「毎週何件か来ていた問い合わせが、ほぼゼロになりました。人間が対応しなければいけないような質問しか来なくなりましたね」

SDSのAIフレンドリーな設計は、こうした形で現場の業務を着実に変えています。自社MCPサーバーとFigmaの連携によって、デザインの作成・検証・運用のサイクルがより速く、より自律的に回るようになってきました。

スプリント期間を1/2に圧縮。Figma Makeが変えた、スピードと表現力

SDSとMCPを活用した取り組みと並行して、Figma Makeは現場の「スピード」と「表現力」の両面を変えつつあります。柴田氏が特に変化を感じているのが、顧客への提案スピードです。

柴田氏「打ち合わせでお客さまからの困りごとをヒアリングしたら、裏でFigma Makeを動かしておいて、会議の終盤に『こんなものを作ってみたんですけど』とリアルタイムでお見せする、というのをやっています。皆さん『本当に今作ったんですか』と驚かれますね。その場でフィードバックをもらって、すぐプロンプトを入力して直せるので、次の会議まで持ち越さずに修正が完了するんです」

その効果は数字にも表れています。DICが支援したとあるプロジェクトでは、そのアプリ開発においてFigma Make導入後にプロトタイプの開発期間が2週間から1日に短縮。顧客・社内へのデモ件数は3件から12件へと4倍に増加し、価値検証期間は10週から6週へと大幅に圧縮されました。スプリント期間も3か月から1.5か月に半減し、生まれた余白は、次のフェーズである事業化の準備へと活かされています。

この劇的な効果を下支えしているのは、開発環境が不要ですぐに使い始められる手軽さ、既存のFigmaファイルやSDSコンポーネントとの高い親和性、共有・共同編集のしやすさなどの点だといいます。

一方、デザイナーの山内氏が魅力だと感じるのは「感覚の伝達」です。以前は動画を作ってエンジニアに動きを伝えていましたが、Figma Makeを使えばインタラクティブなプロトタイプを瞬時に作れます。

山内氏「カーソルに追従する動き、UXの感触など、言語化しづらいところも含めて、Figma Makeで作ってそのまま共有できる。サンプルの動画だと、それをどうやって実装するか聞かれても何も言えなかった。でも今は実際に動くものがあるので、コミュニケーションが円滑です」

さらに重要なのが、エンジニアとの議論の深化です。

山内氏「動くものがあると机上の空論が現実の話になって、できる・できないの二択から、どうすれば実現できるかという議論に変わっています。『できない』が生まれにくくなった感覚がありますね」

グローバルに広がるSDSは次の進化へ

これまで国内のみだったSDSの活用は、この1年で海外子会社にも広がっています。

柴田氏「海外からもGitHubのコントリビュート申請が届くようになりました。グローバルに育っている実感があり、アクセシビリティや多言語対応も今後より力を入れていきたいです。また近々、デザインからコーディングまで完全にSDSで作られたスマホアプリもリリースされる見込みです。こういった具体的な成果が積み重なることで、SDSの活用がより加速していくことを期待しています」

山内氏「大きい事業会社であるがゆえに、なかなか社内の隅々まで情報が行き渡りづらいという課題もあります。社外の方も積極的に使ってもらうことで、インナープロモーションにつながっていくのでは。SDSは無料で公開していますので、どなたでも気軽に使い始めていただきたいですね」

業界全体で三菱電機のデザインシステムが開発の共通言語になる日は、そう遠くないかもしれません。