3
STORIES / ASSET
  • 飯澤大介氏 Daisuke Iizawa
    三菱電機株式会社
    DXイノベーションセンター システム連携企画部 次長、博士(学際情報学)
    1998年入社。携帯電話、車載機器、産業機器、家電など多岐にわたるUI/UXデザインに従事し、デザイン思考の導入、デザインエンジニアリング、CXやBXといった幅広い領域でプロジェクトをリード。2023年からは現職で社内外の共創や新規事業創出の企画を担当している。
  • 伊藤槙紀氏 Maki Ito
    三菱電機株式会社
    統合デザイン研究所 産業システムデザイン部 産業HMIDグループ
    2018年入社。UI/UXデザイナーとしてエネルギーシステムなどのBtoB向け製品を担当。並行して、社内に蓄積している大量データの可視化を行うデータビジュアライゼーションデザイナーとしても活動している。
  • 出口貴也氏 Takaya Deguchi
    Takram Japan株式会社
    デザインエンジニア サービスデザイナー
    サービスデザインとWebエンジニアリングを軸に、持続するプロダクトづくりを目指す。クックパッドでの新規事業立ち上げ、SaaSスタートアップのプロダクト責任者、HRTechスタートアップの取締役CXOなど、IT事業会社のプロダクトオーナーとしてゼロイチのプロダクトづくりや組織づくりに従事。2023年よりTakramに参加。Serendie Design Systemプロジェクトのリードを担当。
三菱電機株式会社は2024年11月7日、UI開発の効率化と品質向上を実現するデザインシステム「Serendie Design System(以下SDS)」の無償提供を開始した。豊富なデザインパーツを取りそろえるとともに、デザインツール「Figma」やフロントエンドフレームワーク「React」と連携してスムーズなワークフローを社内外に広く提供。共創の力によるDXの加速などが目的だ。

このインタビューではSDSの主要開発メンバーに集まってもらい、設計思想や開発背景、Serendie®を通したDX推進の価値などについて話を聞いた。
異例の社外公開。オープンな姿勢でアジャイルを浸透させる
  • ——皆さんの普段のお仕事とSDSでの役割を教えてください。
  • 飯澤 三菱電機DXイノベーションセンターのシステム連携企画部に所属し、プロジェクト全体のプロダクトオーナーを務めています。本プロジェクトにおける主な役割は、プロジェクトの方向性と意思決定を行うことです。
  • 伊藤 三菱電機 統合デザイン研究所に所属し、産業システム向けUIデザインを行っているほか、社内に蓄積される大量のデータの可視化をテーマに研究もしています。SDSでは「スクラムマスター」と呼ばれるプロジェクトを推進するファシリテーター的な立場でお仕事をしています。
  • 出口 私はTakramというデザインファームに所属しており、約1年前にSDSプロジェクトに参画しました。これまでデザインシステムに携わることも多かったことから、その経験を活かして支援させていただいています。
  • ——SDSの概要や目的について教えてください。
  • 飯澤 SDSは、UI開発の効率化と品質向上を実現するデザインシステムです。当社のデジタル基盤「Serendie®」を活用した社外パートナーとの価値共創プログラムを加速させる目的もあります。お客様との接点になるUI/UXの重要性は日増しに高まっており、ブランドアイデンティティの一貫性、ユーザーの利便性・操作性や顧客満足度の向上のために、UI/UXの統一が求められていたことも背景にありました。

    SDSの開発と並行して、Serendie®のブランドシステムの検討が、デザインファームのKESIKIによる統括的なクリエイティブ・ディレクションと、&Formによるデザインディレクションによって進められていました。Takramのみなさんには、そのブランドシステムとUI/UXの整合が取れたデザインシステムの立ち上げを伴走してもらっています。
  • 伊藤 弊社がデジタルサービスで顧客と共創し価値を生み出していくためには、「アジャイル開発」の考え方を浸透させることが必要だと考えています。そのためには、スピーディーに高品質なプロトタイプ開発を行うことがカギとなってきます。それを可能にする仕組みの1つがSDSです。
Serendie Design SystemのWebサイト
  • ——では、もう少し粒度を細かくして、SDSの具体的な設計思想やコンセプトを教えていただけますか?
  • 飯澤 三菱電機は事業領域が広く、1種類のプロダクトに対してデザインシステムを作る一般的なスタートアップやIT企業とはニーズが根本的に異なります。それらの幅広いニーズに対応するため、どういった構造のデザインシステムにするかなど出口さんを中心にいろいろと検討していただいて、柔軟に対応できるシステムを作りました。
  • 出口 私がジョインさせていただいてから、まずは1カ月ほどいろんな方にインタビューをさせていただきました。その中で感じたことは、三菱電機の中には「エンジニア主導のものづくりの文化」があるということです。そのため、このSDSではデザイン原則のような抽象的な部分よりも具体的な部分にフォーカスしています。その1つが、「UIコンポーネント」と呼ばれる汎用的なパーツ集です。パーツを組み合わせることで、デザイナーがいなくてもプロトタイプを作れるような「即効性の高さ」に注力しました。
  • 伊藤 それに加えて、もう1つのコンセプトは「オープンであること」です。
  • 出口 SDSは社外公開することになったのですが、それはこの1年私たちが検討を重ねてきたものをほぼすべて公開するということです。三菱電機さんのような規模の大きな事業会社がこうしたオープンなデザインシステムを公開する事例は、国内では例がありません。
  • 伊藤 そうした社外へのインパクトをつくることで、逆にSDSの社内認知も広まるのではないかと期待しています。
  • ——主な利用目的はプロトタイピングかと思いますが、それだけプロトタイピングの重要性が増しているということでもありますよね。
  • 飯澤 私たちが目指しているのは、「製品を販売して保守する」という従来のビジネスモデルから、「販売した製品が生み出す情報を利用して価値を提供し続ける」という新たなモデルへの変革です。その過程では、お客様との接点がデジタルサービス中心となり、UI/UXがより重要になってきます。それらの活動の根幹には、プロトタイピングとデザインシステムがあると考えています。
多様な事業領域に適応する着せ替え型のデザインに
  • ——SDSが提供する具体的なアピアランス(見た目)の方向性は、どのようなコンセプトで定めましたか?
  • 飯澤 それを決めるのに何カ月も検討を続けてきましたね。SDSの利用シーンとして、弊社の共創空間「Serendie Street Yokohama」でのプロトタイピングを念頭に置いていることもあり、Serendie®のブランドアイデンティティに沿った「新しい可能性を受け入れる」ことをコンセプトに、最終的に5つのカラーテーマを用意しました。
  • 出口 骨格だけ定義しておいて、テーマを変えることで自由に着せ替えできるようなイメージですね。
  • 飯澤 その一方、個別でのデザイン調整がしやすいようにも設計しています。すでに個別にデザイナーが入ってブランディングしているプロジェクトでは、プロトタイピングから製品化する際にデザインを変える必要もありますからね。
  • ——扱う事業領域は多岐にわたると思いますが、幅広く使える工夫などはありますか?
  • 伊藤 特定の事業領域に特化しないよう、汎用性と再現性の高さを重視しました。書体についても広くアプリケーションに使われているものを採用していて、基本的にはGoogleフォントなど無料で使えるものを選んでいます。そのため、SDSのデザインテイストはベーシックなものに抑えられていて、個性が必要なプロジェクトの場合は必要に応じて着せ替えをしていただければと考えています。
  • ——デザイナーがいなくてもプロトタイプ開発ができるのは、大きなスピードアップにつながりそうですね。
  • 出口 SaaSで多用されるログイン画面や管理画面などはテンプレート的に用意していますので、コピペしてより簡単にプロトタイピングできるようにしています。
  • 伊藤 社内の利用者からは「テンプレートをちょっとだけ変えるだけで簡単にプロトタイプの画面を作れた」という声も上がってきています。
  • 出口 テンプレートはSDSが提供するUIコンポーネントを組み合わせて作られているので、SDSの使い方のお手本のようになっているのも特徴だと思います。
  • 飯澤 統合デザイン研究所の中には、さまざまなUI/UXデザイナーが在籍していますが、彼らが深く関われていないプロダクトも存在するのが現実です。しかし、SDSがあれば、そうしたところにも三菱電機のデザインを届けられるというわけです。
  • 伊藤 統合デザイン研究所には百数十人のデザイナーがいますが、従業員3万人を超える規模感に対しては、どうしても手が行き届かない部分が出てきてしまいます。それに対して、一定のアクセシビリティやユーザビリティが担保されたデザインシステムが広まるのは、三菱電機が提供する製品の品質の底上げにもつながるため、デザイナーとしても希望を持ってSDS開発に取り組んできました。
  • ——他のデザインシステムと比較した際のストロングポイントはありますか?
  • 飯澤 汎用性を持たせつつも、Serendie®らしさをしっかりと表現している点ですね。一般的なUIの様相ではありますが、じわっと三菱電機のデザインの哲学を入れ込んでいます。なんとなく使っても、Serendie®が持っているオープンな雰囲気が出るようになっていると思います。
  • 出口 先ほどご説明したコンセプトとも通じますが、いろんな事業に適応できるようになっている点もストロングポイントですね。そもそも、三菱電機さんのようにBtoCからBtoBまで幅広く事業をやっている会社自体が世の中には少なく、多くは特定のプロダクトのためのデザインシステムが一般的です。SDSのように多様な事業・多様なプロダクトへの適応が求められるデザインシステムは、アップルやGoogleのようなプラットフォーマーや、デジタル庁のような行政機関でないとあまり見かけません。SDSの場合は三菱電機のビジネスモデル的に自然とそれを求められ、デザインシステムとしてもユニークな点となりました。
コミュニティを生み出すデザインシステムへ
  • ——なるほど。非常に多くの人に利用されるデザインシステムとして、他に意識されたことはありますか?
  • 飯澤 「SDSを通してのコミュニティづくり」をプロジェクト初期から意識して議論を重ねてきました。統合デザイン研究所や、出口さんのような社外の専門家、公開後に興味を持ってくれた社外の方々など、そういった人たちとどのように関係性を築いていくかを、ずっと気にしてきました。
  • 出口 私が所属しているTakramのようなデザインファームは、納品して関係性が終わってしまうお仕事が基本です。しかし、SDSの開発にあたっては、継続的にお付き合いできる仕組みをつくりましょうと話しています。
  • 飯澤 それが社外公開の理由の1つでもあります。社内向けの関係づくりはもちろん、Serendie Streetでのコミュニティづくりにも一役買いたいと考えています。
  • 伊藤 社内ではSDSの説明イベントや、デザイン向けと開発向けにそれぞれブートキャンプイベントを開催しています。どれも多数の参加があり「早速プロトタイプの開発に使い始めました」「まだ使う案件はないけれど、今後使えるように予習しておきたい」といった声も届き、期待してくれている方々がたくさんいることがわかりました。彼らやこれからの利用者のために、継続的にイベントや勉強会を実施するなどの仕組みづくりを意識してプロジェクトを進めています。まだ運用が始まったばかりですが、参加者や社外の方の意見を聞いて、より使いやすいデザインシステムとしてブラッシュアップしていきたいと思っています。
  • ——最後に、SDSの今後の展望を教えてください。
  • 飯澤 UIキットのみならず、今後はコードも公開する予定です。リリース後も社内外からのフィードバックを取り入れてシステムを進化させながら、国内での運用を確立し、その後はグローバル展開も見据えています。
  • 出口 最初からあらゆるニーズに対応できるUIコンポーネントをそろえることは難しいので、何を追加していくのかなどは社内外のニーズや意見を聞いたうえで検討していきます。そうした改善活動がこれから続くのではないかと考えています。
  • 伊藤 社内浸透の点では、Serendie Streetに新たに入ってきた人たちのオンボーディングにも取り入れたいと考えています。統合デザイン研究所としては、社内で蓄積してきたナレッジをSDSを通して新人研修的に浸透できるのではないかと思うので、そうした活動も広げていきたいですね。