デザイナーが少ないからこそ、デザインシステムが必要
── 三菱電機には従来からデザインガイドラインがあったと思いますが、今回新たにデザインシステムをつくろうと思った背景を教えていただけますか？
飯澤大介（以下、飯澤） たしかに、これまでもガイドラインは存在していました。2023年4月に、事業部をまたいでデジタルサービス・基盤を構築することをミッションとする「DXイノベーションセンター」が設立されたのですが、ここで統一的な基準が必要となったんです。事業環境に違いがある分、事業別に個別に進めると差が出てきてしまうので。
また、DXイノベーションセンターは従来のような個別最適ではなく、異なる事業間で横断的に利用できるウェブAPIのようなコンポーネントの提供を重視しています。この考え方に沿って、デザインガイドラインからもう一歩エンジニアリング領域に踏み込んだデザインシステムの構築を進めようということになりました。
三菱電機株式会社 DXイノベーションセンター システム連携企画部 次長、博士（学際情報学）。1998年入社。携帯電話、車載機器、産業機器、家電など多岐にわたるUI/UXデザインに従事し、デザイン思考の導入、デザインエンジニアリング、CXやBXといった幅広い領域でプロジェクトをリード。2023年からは現職で社内外の共創や新規事業創出の企画を担当する。
そもそも、三菱電機は宇宙から家電まで幅広い事業分野を有しています。しかし、その多様な事業分野でつくられるプロダクトすべてにUI/UXデザイナーの手が行き届くわけではない現実があります。実際に社内にはデザイナー不在で開発されているプロダクトも多く、そうした現場での課題解決のためにデザインシステムは重要だと考えました。
── DXイノベーションセンター設立当初からデザインシステムの構築を視野に入れていたのでしょうか？
飯澤 実は、デザインシステムのことまでは考えていませんでした。ただ、私はデザイン領域出身なので、組織にデザイン思考やサービスデザインの視点が必要だという考えは最初からもってはいましたね。
そもそもDXイノベーションセンターのメンバーは三菱電機での経験が豊富なメンバーが多く、特にエンジニアリング系やR&D系のメンバーは、フロントエンドの開発やUI/UXデザインに相当な苦労を経験してきました。だからこそ、アジャイル開発やサービスデザインの文脈で議論を重ねるなかで、デザインシステムの重要性が自然と認識されたんです。予想以上に多くの方から賛同を得られたことを考えると、潜在的に必要性は強くあったのだと感じます。
── そもそもデザインシステムをつくることには、どのようなメリットがあるのでしょう。
出口貴也（以下、Degoo） ひとつは、車輪の再発明を防ぐこと。つまり、同じものをつくり続けることをやめるということですね。
また、アジャイル開発におけるナレッジの蓄積という側面もあります。三菱電機はアジャイル開発を社内で定着させたいという意思があるなか、フィードバックループの設計が必要になります。いかにしてユーザーのフィードバックをデザインシステムにためていくか。デジタル資産として、早期につくって“複利”で効果を波及させていくんです。
加えて、外部公開による効果もあります。外部にデザインシステムを公開することで、三菱電機のものづくりの姿勢を示すことができ、それは外向けでありながら社内文化の醸成にも繋がります。
そして社外のデジタル人材に三菱電機を将来のキャリアの選択肢として検討してもらうための材料にもなります。同様の事例はテック系企業では多くあり、そこに三菱電機のような企業が加わることのインパクトは大きいと考えました。
変化と維持のバランス
── 実際にデザインシステムを構築するにあたって、なぜTakramに依頼されたのでしょうか？
飯澤 Takramとは以前、私がデザイン部署にいた際のブランドマネジメントプロジェクトでご一緒したんです。私自身はブランドからUI/UXまでを一気通貫で考えたいという思いがあり、DXイノベーションセンターとしてエンジニアリングとの接続を重視するかたちでTakramにご相談をしました。Serendieのデジタル基盤は技術基盤から共創基盤、人財基盤、プロジェクト推進基盤まで多岐にわたるので、エンジニアリングとデザインの越境を実現できるTakramとの協業は、組織的な納得感も得られやすかったです。
Degoo 依頼をいただいた当初は、具体的なプロダクトの内容がまだ固まっていませんでした。何をつくるかと、どうつくるかを考える必要があったんですよね。通常のデザインシステムは既存サービスがあってからの構築が多いのですが、今回はあらゆることが同時進行です。そのため、仮想のSaaSを想定してプロトタイピングを行なうなど、Takramらしいアプローチで進めていきました。
── Takramでは、どのプロジェクトでも最初にインタビューを行ないますよね。
Degoo 今回も役員の方を含め約10人にインタビューをしました。デザインシステムの運用においていちばん重要なのは、育てていく部分です。それを3万人規模の大企業かつデザインシステムにかかわった経験のある人も少ないという状況のなかでどう進めるかを考えなければなりませんでした。
── 今回、KESIKIと&Formが親ブランド Serendieのビジュアルアイデンティティ（VI）をつくったあとから、Takramがそれを継承しデザインシステムに展開するという順番をとっています。どう進めていきましたか？
山田水香（以下、Pasmo) 今回は親ブランドである「 Serendie」のVIガイドラインをもとに、特にカラーやグラフィックエレメントの使い方でTakramなりの解釈を入れつつ噛み砕いていきました。KESIKIさんと&Formさんがめざすものを理解し、三菱電機として与えたい印象と擦り合わせるために。
ここで難しかったのは、どこにアンカーを置いてビジュアルを展開するかを考えることでした。決め過ぎないVI、ダイナミックアイデンティティ、固定されていないプライマリーカラーなど、自由度が高かった分、どこを重視するかを探らなければなりませんでした。
そのなかで、セレンディピティを表現する要素として、モーション、カラー、図形があり、カラーの組み合わせを工夫しました。ポップ過ぎない印象のため、矩形のサイズ差でメリハリを出しつつ、モーションでおもしろい動きを加え、5つのカラーテーマを設定して切り替わっていく仕組みをつくったんです。
── カラーテーマはどう決めたのでしょうか？
Degoo 決め方は悩みました。家電から宇宙まで、幅広い事業に対応できるカラーにしようという点と、このSerendie Streetから新規事業が生まれてくるだろうと考え、場のコンセプト資料を読み込んだうえで、暖色系やアースカラー的なテーマを追加するなど、意識して取り組みました。
飯澤 デザインだけでなく、エンジニアリングの視点も入った「デザインエンジニアリング」として、VIをしっかり料理してくれた点は、打ち合わせを重ねるなかで納得感が共有できていて、非常に興味深かったですね。
DXイノベーションセンターにはプリンシプルがありますが、変えていくという思いは全員がもっています。既存のサービスに合わせるのではなく、それを踏まえたかたちで出して、少しずつ皆が感化されて変わっていくイメージを共有できていたと思います。
伊藤槙紀（以下、伊藤） Serendie Streetの中で使うものとしてつくったデザインシステムですが、既存事業からも使いたいという声が上がってきています。これはうれしい誤算でした。
オープンにすることの意味
──今回、デザインシステムを社外にも公開していますが、どのような議論がありましたか？
飯澤 フルオープンにするか、一部公開にするか、どういう環境で公開するかなど、さまざまな議論をしました。そのなかで、スケールを広げ、UI/UXだけでなくサービスづくりの考え方を共有する人を増やすことを優先したんです。社外の方との共創も想定している場なので、フルオープンにしようと。
三菱電機株式会社 統合デザイン研究所 産業システムデザイン部 産業HMIDグループ。2018年入社。UI/UXデザイナーとしてエネルギーシステムなどのBtoB向け製品を担当。並行して、社内に蓄積している大量データの可視化を行なうデータビジュアライゼーションデザイナーとしても活動する。
Degoo 最初に公開すべきだと思ったのは、伊藤さんから聞いた話がきっかけでした。以前、事業分野ごとに異なるデザインシステムを検討していたとお聞きして、部門が違えば本当に別組織だということを実感しました。そのうえで、今回はどうしようかというところが参考になっています。
デザインシステムを使うにあたって承認プロセスが発生すると心理的なハードルが生まれ、「面倒だから後で」「自分たちでつくろう」という判断につながり、車輪の再発明が起きやすくなります。だからこそ、いっそ社外公開してしまうことで、社内の誰もが自由に使える状態になり、採用などのアウターブランディング効果も期待できると考えました。
── 公開してみてどうでしたか？
伊藤 公開してよかったです。社内ポータルだけの発表では「そうなんだ」で終わることが多いなか、X（旧Twitter）アカウントでの発信に社内の人が興味をもって問い合わせてくるなど、社外公開が最大のインナーブランディングになりました。100人くらいフォロワーが増えました（笑）。
飯澤 実際、われわれとまったく関係のない社外からの問い合わせもあり、コミュニティとまではいかなくても、Serendie Streetという場で外部に開かれた発展が見えてきそうです。
── ただ公開するだけではなく、浸透も必要となるわけですが、どのように発信をしていきましたか？
伊藤 “成長するデザインシステム”にはコミュニティの場が重要です。社内ではTeamsでコミュニティチームを立ち上げ、SharePointで内部向け情報を提供し、ウェブサイトで外部発信を行なっています。300人規模の社内説明会や、100人規模のブートキャンプも開催しました。スキル別に「UIデザイン」と「コーディング」という2回のブートキャンプを実施したんです。
飯澤 デザイン部署とエンジニアリング部署が分かれている会社で、UIのワークショップにエンジニアが参加したり、コーディングにデザイナーが参加してくれたり、予想以上の越境が見られたのもよかったです。このインサイトは今後のコミュニティ運営に活かせると思います。
伊藤 出口さんからも意見を吸い上げる場の重要性を教わったので、今後は月1回なり隔週で定期的なイベントの開催を計画しています。コアユーザーを集めて使用事例や改善要望を共有する場を設けたいと考えています。
── 先ほど「デザインシステムの運用でいちばん重要なのは育てること」というお話がありましたが、これから育てていくにあたって必要なことはなんでしょう？
Degoo まず、伊藤さんのようなインハウスデザイナーがリーダーとして推進役を担うことが重要です。よくある兼業型のボトムアップでは、誰も責任をもたないことで先に進まなかったり、途中で止まってしまうケースが少なくないからです。
次に、オンライン／オフライン両方での意見収集の場を設計することです。GitHubでユーザーとのフォーラムをつくり、気軽に意見を投稿できる場を設けたり。ただし、これがデザインシステム運用チームへの開発依頼になってしまわないよう、一緒につくっていく場づくりを意識しています。
Xでのエゴサーチもフィードバックとして活用しています。スタートアップにおけるプロダクト開発のように、ユーザーの声を取りに行きつつ柔軟に方向性を決めていくことが重要なので。
── デザインシステムは制作の効率化だけでなく、サイロ化した組織に横串を刺す役割もあるんですね。
Degoo はい。車輪の再発明防止はわかりやすい目的のひとつですが、それだけなら他社が公開している既存のデザインシステムを使うのでもいい。サイロ化を防ぐコミュニティづくりとそのための内省が重要なポイントなんです。
飯澤 DXイノベーションセンターとしては、マインドセットの変革を横展開することが重要なんです。デザインシステムを使って自分たちでフロントエンドデザインやサービスのあり方を考え、コミュニティにアクセスする流れが生まれることを期待しています。
伊藤 しかも、それを「人知れず」行なうことが重要なのだと思います。マインドセット変革を直接的に言うのではなく、便利さや簡単さをアピールし、使うなかで自然と変化していくのが理想です。
── そのためのツールとしても、デザインシステムは有効なんですね。
Pasmo 日常的に使うアセットは、自分事化の入り口としてもいいと思います。
Degoo マインドセット変革では予算が取りにくいですが、車輪の再発明防止なら理解されやすく、コストメリットも計算しやすいですからね。
── 確かに、抽象的なビジョンは同じ方向を見ていても違う絵を見ている感じがありますが、コスト削減効果は具体的で分かりやすい。ただし、それは入り口で、その先に本当の目的がある。
伊藤 気付いたら浸透しているのが理想的ですね。
── システムへのフィードバックだけでなく、周囲のリテラシー向上や新しい発展につながりそうですね。
飯澤 まさにそうなってほしいです。実際、ある会議で予想外の部署が高品質なプロトタイプを見せてくれて、Serendieのデザインシステムを使っていると言われた時は感動しました。そこから仲間意識が生まれ、共通言語ができることで、ツールとしての効果が広がっていくのがおもしろいです。
