現在、デンソーではソフトウェア領域の開発も増え、社外向けのサービスや社内のDXを進めるためのシステムなど、様々な開発が行われています。その結果、デザイン対象も「モノづくり」から「コトづくり」へと広がり、ユーザーとの接点となるUIデザインの業務も急増しました。このような状況に対応するため、デザイン部ではUIデザイナーの採用や育成に力を入れています。

数年前まではメーターやカーナビといった車載機器のUIデザインが中心であったため、PCやスマホを対象としたUIデザインをする際には学び直しが必要でした。各デザイナーが書籍やオンラインスクールに通って得た知見を部内で共有するなど、チームメンバー間で知見を共有し合い実開発の中で実践していきました。

その結果、不良品管理システム 黄伝モバイルの開発でグッドデザイン賞やiFデザイン賞を受賞するなど、UIデザインの実績は着実に増えてきました。UIデザインの機会が増えるにしたがって知見も増え、またエンジニアからも「UIデザインについて学びたい」「意図を理解して理想に近い形で実装したい」という声も増えたため、デザイナーだけでなくエンジニアも巻き込んで、持続的に高品質なUIをデザインできる仕組みを整えたいという想いから、自分たちが得た知見をまとめたデザインシステムの開発が始まりました。

関連記事を見る　
[Works]不良品管理システム黄伝モバイル

現在のデンソーUIデザインシステムは三部構成になっていて、企画/要件定義/情報設計時に大事にするべき視点や考えをまとめた「心構え」、UIの表現におけるデンソーらしさや品質担保に寄与するルールをまとめた「表現要素」、UIの設計や品質の良し悪しを判断する基準となる「設計基準」があります。（設計基準は準備中）
今回は主に「表現要素」にフォーカスした内容をご紹介します。

UIの「表現要素」のガイドライン化にあたっては、まずはロゴレイアウトやタイポグラフィの検討から始め、カラーやスペーシングなどの基本的な要素のガイドライン化を進めていきました。

これまでにもコーポレートコミュニケーション向けのデザインガイドラインは存在していたのですが、UIデザインのユーザビリティを向上させるような目的で作られたものではなかったため、サービスやシステムのUIデザインに特化したガイドラインが必要でした。例えば、デンソーのブランドカラーである赤を単純にUIデザイン上で使用すると、それがブランド表現のためのプライマリーカラーなのか、警告を意味するカラーなのか分からなくなってしまう場合があるため、UIデザインにおけるカラーがどうあるべきかを慎重に検討してきました。

UIデザインにおいては マスターブランドと呼ばれるいわゆるデンソーブランドを強く押し出すプロダクトから、デンソーブランドを感じさせない独立ブランドとなるプロダクトまで幅広いデザインが求められるため、当初は様々なシーンに対応できる色相を網羅したカラーパレットを用意することを考えていました。

しかしカラーパレットを用意し過ぎてしまうと、デザイナーが各ブランドの世界観にあった色を作り込む大切な過程すら取り除いてしまうことになってしまいます。デザイナーのその検討過程を尊重するため、網羅的なカラーパレットの用意は取りやめ、目的ごとに割り当てられたセマンティックカラーのみ整備して、各プロダクトで使用するブランドのプライマリーカラーは開発ごとに検討することを前提としたガイドラインを用意しました。

このように他の要素においても、デンソーらしさを保ちつつ、使いやすいユーザビリティを担保するガイドラインを作成することにこだわりました。

検討の初期はデザイナー向けのFigmaファイルだけを準備していたのですが、実際の開発においてはエンジニアにデザイン案を実装してもらう際に、デザイナーの意図と異なる実装になってしまう問題が多々ありました。
これらの問題を解消するため、エンジニア向けの実装コード共有ツールの導入にも力を入れていきました。

デンソーでは携わるプロジェクトごとに各開発部署のエンジニアと協力してUIを開発するため、プロジェクトが変わるごとに関わるエンジニアが変わります。同じようなデザインのコンポーネントでもプロジェクトごとに毎度新しく実装してもらうことになってしまうので、その工数を削減するために、storybookというツールを用いてデザインシステムの各コンポーネントを一覧できるコンポーネントライブラリを用意しました。
このライブラリ上ではボタンの種類やインタラクションなどの仕様や、その実装コードの表示、コピー＆ペーストができるため、デザイナーとエンジニア間のコミュニケーションコストを短縮できるものになっています。

世の中のデザインシステムをベンチマークしていると、本当に様々な形があります。一つのプロダクトをしっかり育てている組織であれば企業ブランドを前面に押し出して細部までそのイメージを保つよう厳格にコントロールされていたり、その真逆で多種多様なサービスやプロダクトを手広く展開する組織であれば、多様な使われ方を許容する作りになっていたりしますが、私たちの場合はまさに後者の考え方でした。

規定しすぎると使えなくなり、規定しなさすぎると意味がなくなるため、バランスを取るのに苦労しました。何度もアップデートを重ね、最初は細かく決めていたものを要点のみ押さえたルールに変更するなど、試行錯誤を経て現在の形へたどり着きました。
企業ブランドが前面に出ず、分野が多岐に渡るところがデンソープロダクトの特徴といえますが、私たちのデザインシステムはまさにこういったものづくりに対する思想がそのまま反映されています。いわば治具のような存在といえます。

ちなみに治具というのは、工場で何かものを作る時に作業を効率化し、正確さを高めるための支えとなる器具のことです。デンソー社内の工場でも、現場の知恵や工夫がたくさん詰まった手作りの治具が活躍しています。

実はUIデザインシステムのwebサイトのキービジュアルにも治具のモチーフが使われています。
ステンシルの型を想像してもらえるとわかりやすいのですが、同じ型を使ってもスプレーの吹き具合を少し変えるだけで全く印象が異なる模様を描くことができます。 
あるところまでは型を使って効率的かつ正確に、そしてある程度の遊びを持たせて多彩なプロダクトを作ることができるのがこのデザインシステムの強みだと思っています。

既にデザインシステムを活用した様々な開発が始まっており、作業時間の短縮や知見共有の効率化といった効果も出てきました。特にデザインの初期フェーズにかかる工数を削減できたことで、体験設計やプロトタイプ検証に時間をかけられるようになったことはUIデザインの品質向上につながったと感じます。
実際に使ってみて得た気づきをうまく取り入れながら、今後も多様なニーズに応えられるものに改善し続けていきたいです。