はじめに

Thinkingsでは現在、sonar ATSの顧客体験と開発効率向上を目的にデザインシステムの構築に取り組んでいます。具体的には、既存のプロダクトで利用されているUIの整理や新規UIの検討、各UIの定義を行っています。
 
この記事では、2023年にプロダクトデザインチームで実施したデザインシステム構築プロジェクトの概要をプロダクトデザインチームよりご紹介いたします。

プロジェクトの概要

デザインシステムとは
デザインシステムとは、良いデザインをチームで作るためのデザイン原則やデザインルール、デザインを構成する各パーツを管理するものです。
デザインシステムを構築する目的は大きく以下の二つと捉えています。

①ユーザーに、一貫性のある、快適な操作体験を届ける
デザインに関わるデザイナーやエンジニアがルールに基づいた意思決定をすることで、システムの開発者が増えたり、システムが大きくなっても一貫性のある操作体験を提供することができます。

②開発スピードの向上に貢献する
デザインマニュアルとして全チームが共通認識をもち、決まったコンポーネントやDesign Tokenを決まったルールで使いまわすことで、検討時間や作成時間を短縮し開発スピードの向上に貢献することができます。

プロジェクト推進体制

プロダクトデザインチームのメンバー2名（UIデザイナー Oさん、UXライター Yさん）を中心に、通常の機能開発案件のデザイン業務をこなしながら、スモールスタートでプロジェクトを開始しました。

また、アドバイザーとして株式会社シークレットラボの佐藤伸哉さん（@nobsato）にご参加いただき、プロジェクトの進め方や実際の検討に対して、毎週壁打ちをしていただきました。

デザインシステム構築のステップとプロジェクト前の状態

デザインシステムの構築には以下の4つのステップがあります。
（アメリカのデザインシステム製品のマネージャーTJ Harropoさんが提唱したもの）

Step１：デザインのコンポーネントがデザインツールで作成され見た目が整理されている（コンポーネント等の見た目についてデザイナー内の共通認識がある状態）

Step２：ステップ１のデザインシステムに、CSSおよびHTMLのガイドが追加され、エンジニアがそのCSS、HTMLを利用すればコンポーネントのデザインをシステム上で再現できる（コンポーネントの見た目の作り方をエンジニアに接続でき、実装できる状態）

Step３：エンジニア用、デザイナー用それぞれ対応した2セットのコンポーネントがあり連携している。（エンジニアとデザイナーでコンポーネントの共通認識が持てている状態）
Step４：デザイナーとエンジニアが共通のデザインシステムを使用し、完全に同期している。

引用：UXPin Merge 顧客事例『Iress』：デザインツールの再想像 Nick　Elliott

プロジェクトのスタート前は、デザインでよく使うパーツ（グローバルメニューやリストなど）が使いまわせるようにFigmaでコンポーネントとして管理されていました。
しかし、コンポーネントの利用ルールや見た目の定義等は明記されておらず、デザイン作成時に都度検討している部分や不正確な部分が多々ありました。

デザインシステム構築のStep１の中でも、コンポーネントは使いまわせる状態であるけれど、共通認識は持てていない状態でした。

本プロジェクトのゴールとスコープ

本プロジェクトはStep１内のレベルアップをゴールとしました。
将来的にはStep2以降のように、エンジニアとも共通認識をもてるようになることを念頭に置きつつ、まずはStep1の中で、デザインチーム内でデザインに対する見た目やルールの共通認識をもつことが重要だと考えました。また、それを達成するためには、自社にとって必要な要素の検討や進め方の型化が必要です。

そこで、 以下の通り「ゴール」と「行動目標」を設定しました。

ゴール： 「デザインチーム間でデザイン・ルールの共通認識をもつためのデザインシステム構築を、スムーズに進められる状態にする！✊」
 
行動目標： 「いくつかの項目（コンポーネント等）で、実際にデザインシステムの構築を進めながら、必要な要素やより良い進め方を検討する！」 

また、以下の内容はスコープ外としてスタートしました。

· デザインシステムのページ構成は今のまま（それほど困ってない）
· 作っておくコンポーネント自体を増やすこと（量より質の拡充）
· エンジニアのリソースが必要なこと（あくまでデザインチーム内の共通ルールをつくる）
· Design PrincipleやVoice and Toneの策定
（sonar ATS自体の価値や哲学に関わってきて話が大きい、デザインチーム内で完結できない）

実際に実施したこと

ざっくりと、以下のことを実施しました。

1.       世の中のデザインシステム構築のベストプラクティス収集（書籍・他社事例）
2.       現在のデザイン作成にあたり、困ること、決まっていたらいいなと思うことをチームでブレスト
3.       Components「Button」のデザインシステム構築
4.       Design Token「color」のデザインシステム構築
5.       Components「Field_Toggle/Radio/Check」のデザインシステム構築
6.       進めてみて、良かったこと良くなかったこと、学んだことをチームでブレスト、まとめ

結果的に、sonar ATS デザインシステム構築にあたり必要な要素、検討方法を一定型化することで、上記いずれも達成することができました。
合わせて、デザインチーム内での完結をスコープとしていましたが、構築したデザインシステムをもとにしたエンジニアチームへの要望起票もプロジェクト内で行うことができました。
 

具体的な内容や成果物については、後編で紹介していきますので、ご期待ください。