デザインシステム構築に向けた委員会発足の話

はじめに

はじめまして。hacomono UX部エンジニアリングマネージャのしまです。
hacomonoへは2024年2月に入社いたしました。

現在UX部では、デザイナーと一緒に、プロダクトのUI改善のための委員会を発足し、日々改善に取り組んでいます。
委員会発足に至るまでの背景や、現在どのように委員会活動を進めているかをご紹介したいと思います。

まずはその前に、UX部の紹介を簡単にしたいと思います。

UX部とは

hacomonoのUX部には、私を含めて現在6名のエンジニアが所属しておりまして、下記のミッション・ビジョンを掲げ、日々プロダクト開発に取り組んでいます。

ミッション

hacomonoの強みの1つがUXであり、それを継続的なhacomonoの魅力として再現性を持たせることが私たちの使命（ミッション）です。
ユーザの顕在ニーズだけでなく、潜在ニーズを常に探究し続けます。

ビジョン

「期待を超えるユーザ体験（UX）を生み出すチームへ」

私たちは、ユーザの顕在・潜在ニーズを探究し続け、既成概念にとらわれない自由な発想と創造力を以って、期待を超えるユーザ体験（UX）を生み出していきます。
私たちは、技術を磨き続け、プロダクトの品質に徹底的にこだわり続けることで、期待を超えるユーザ体験（UX）を生み出していきます。

hacomonoプロダクトにおけるUIの問題

ここからが本題となります。

hacomonoは、プロダクトの急速な成長に対し、UI/UXのルールやガイドライン整備が追いついておらず、一貫性のあるUIを提供できていないという問題に直面しました。
また、デザイントークンやUIコンポーネントライブラリの整備もできておらず、デザイナーとエンジニアの間で、UIに関する共通認識が作れていない状態でした。
加えて、hacomonoでは数多くのエンジニアがUI実装をしているのですが、UIコンポーネントライブラリが整備できていないことで、エンジニア同士でも共通認識が作れておらず、同じUIにも関わらず別々のコンポーネントファイルとして実装されてしまうといった事も発生していました。

そのため私がhacomonoに入社した時には既に、デザイナーとエンジニアの間でデザインシステム構築に向けての議論が進められていました。
しかし話をしていく中で、メンバーひとりひとり、「解決したい問題」に微妙なズレがあるのではないか？と感じるようになりました。

課題の共通認識作り

そこでまずは一度立ち止まり、改めて関係者で課題の共通認識を作るため、「UIデザイン・実装に関する現状の問題」を各々から挙げてもらい、それらをKJ法を用いて整理する事にしました。

KJ法を用いた理由は、今回の目的が「問題を整理すること」だけでなく、「関係者で課題の共通認識を作る」事なので、なるべく「関係者が一緒に整理する」というプロセスを踏みたかったためです。
hacomonoは、フルリモートでの勤務となっており、全国各地に社員が在籍しています。
そのためツールには、オンラインでも実施可能なようにMiroを使用しました。

整理には多少時間はかかりましたが、一緒に整理するプロセスを通して、関係者で同じ方向を向くことができたと実感しています。
そして、「UIデザイン・実装のガイドラインを作り、浸透させることが最優先課題」という共通認識を作ることができ、改めてデザインシステム構築に向けての議論を再開できました。

余談になりますが、何か関係者間で共通認識を作る際には、結果だけではなくプロセスにも重きを置くことがとても重要と感じています。

UI改善委員会の発足

共通認識が作れたため、数名のデザイナー・エンジニアで構成された「UI改善委員会」を発足しました。
またあわせて、以下のような活動方針を定めました。

hacomonoのUI開発に関わる全ての人が、

正しいUIと間違ったUIの区別がつく状態を作ること
正しいUIにするには、どう実装すれば良いかわかる状態を作ること

委員会メンバーだけでUI改善するのではなく、hacomonoのUI開発に関わる全ての人たちで改善していける形を目指す形としています。
また、委員会メンバー自身で改善していくことももちろん重要ですが、現状はそれよりも「何が正しいのかを示すこと」が最優先事項のため、このような方針を定めました。

日々進化するプロダクトにおいて、完璧な形にすることは非常に難しいです。
そのため、「プロダクトが良い方向に向かっている（改善が進んでいる）状態」を作ることが重要と考えています。

現在

UI改善委員会としてのロードマップを定め、現在はデザイントークンの定義と、Atomic DesignのAtoms相当のUIコンポーネントをライブラリとして提供することに注力しています。
また、UIに関する各部署からのフィードバックを元に、プロダクトのUI改善も少しずつ進めています。
委員会としての具体的な活動については、デザイナーのなついもえこさんが執筆した下記の記事がとてもわかりやすいので、ぜひご覧ください。

定例会議の場やSlack上で日々議論しながら改善を進めていますが、関係者での課題の共通認識が作れたことや、活動方針が定められたことで、今も大きな認識のズレを起こすことなく進められています。
多少時間をかけてでも、一度立ち止まって共通認識を作って良かったなと感じています。