SmartHRのプロダクトデザインシステム史上最大のアップデートがはじまります。 ー SmartHR Design Systemの現在地（2024年4月版）
こんにちは、SmartHR プロダクトデザイナーの@versionfiveです。
SmartHR Design Systemを公開して5年近くが経ちます。
立ち上げから携わっている私から、SmartHRのプロダクトデザインシステムが現在直面している変化と、それに向けた私たちの取り組みについてお話ししたいと思います。
※ SmartHR Design Systemには様々なコンテンツが公開されていますが、本記事ではプロダクトに絞って書いています。
振り返り：これまでの取り組み
SmartHR Design Systemのこれまでの取り組みを記事や書籍から簡単に紹介します。
プロダクトのコンテンツを2020年11月に公開してから約2年間の年表や得られた知見を私の記事でまとめました。「プロダクト開発のため（だけ）のデザインシステム」という明確な目的で運用してきたことによる結果を紹介しています。
デザインシステムとプロダクト開発との関わり方やスタンスについては@wentz_designさんのSchema 2022 by Figmaでの発表記事が詳しいです。
デザインシステムを「デザインとエンジニアリングが不可分なプロダクト開発において生産性を向上するための手段」と位置づけ、妥当な意思決定を早めるための「補助線」として開発チームの中で行っている運用や工夫をお話しています。
さらに具体的な作成プロセスやコンテンツづくり、運用方法などを、一般論も踏まえてまとめた書籍『ちいさくはじめるデザインシステム』を出版しました。もう1年以上前なのが驚きです。
Q. 「書籍化までしたってことは、プロセスやドキュメントもある程度完成してるんだよね？」
書籍に目を通していただいた方には、もしかするとこのように映っているのかもしれません。しかし私たちの回答は、
A. 「そんなことはありません。」
です。実は書籍出版時点（2023年3月）からSmartHRの社員は300名以上増えており、事業を支えるための組織体制の大きな見直しもありました。
開発組織も当然大きくなっていて、プロダクトデザイナーのプロダクト開発への関わり方もアップデートしつつあります。
「デザインシステムは、それを運用する組織の体制や構造に強く影響を受ける」ということで、現在2つの状況からデザインシステムは次のステップに進むフェーズにきています。
デザインシステムの進化を後押しする2つの状況
マルチプロダクト戦略
SmartHRがマルチプロダクト戦略を打ち出したことで「ユーザーインターフェースの品質と一貫性がもたらす使いやすさ」がより重要になってきました。競合他社との機能のコモディティ化が進むなか、「使いやすさ」は商品価値として差別化要素の一つと位置づけられます。詳細はダイレクターのfumiya(@tyoys00)さんの前回の記事をぜひ読んでください。
プロダクトデザイン組織の拡大
マルチプロダクト戦略を受けて、私たちは「プロダクトの使用性を担保する開発者である」とプロダクトデザイン組織全体で定めました。
私たちにとってデザインシステムは「ナレッジ・ノウハウの集合」から「プロダクトの使用性品質を担保する仕組み」へと、より高度な進化が求められています。
すでに組織体制としても、2024年4月からVP of Product Design直下にデザインシステムのサポートをミッションにもつ「プロダクトデザイン企画室」が設置されたり、デザインシステムサイトの開発体制を変えるなどの動きもあります。
一方、4年間の積み上げでデザインシステムのコンテンツもそれなりに増えてきています。プロダクトデザイナーも当時の7名から14名に増えており、デザインシステムを作ってきたメンバーと以降にジョインしたメンバーの間で「ガイドラインを把握する・生み出す」解像度に差が生まれています。
最近とったアンケートでは、約3分の1のメンバーがデザインシステムをあまり把握できていないという結果もありました。
やってきたこと（2023年3Q〜）
これらの状況に対応する準備を昨年後半から徐々に始めています。
プロデザがプロダクト品質の「使いやすさ」に対して客観的に分析できるようになる
マルチプロダクト開発（複数のプロダクトを複数の開発チームで自立分散的に開発する状況）においては、プロダクトの数が増えるほどプロダクト全体で一貫性のあるUIに保つなどの難易度は飛躍的に上がっていきます。
「まずは自分たち（プロデザ）からできなければ」ということで、複数ドメイン ✗ 複数機能 ✗ 複数デザイナーの環境においてもUIの品質と一貫性を維持・向上できるように、プロダクト品質としてのユーザビリティ（使用性）に改めて注目しました。
「UIデザイン使用性チェックリスト」の開発
アウトプットとしてデザインシステムに「ユーザビリティ（使用性）」カテゴリを新設しました。これまで取り組んできたアクセシビリティの品質基準やユーザビリティテストのドキュメントを集約し、新たなコンテンツとしてUIデザイン使用性チェックリストを公開しています。
UIデザイン使用性チェックリストは、プロダクトの使用性を担保するためにUIデザイン時点で考慮すべき観点の一覧をリストアップしたものです。私たちは「使いやすい」という主観的な判断を、日本産業規格（JIS）を参照することでより客観的に評価できる手段を模索しています。
（チェックリストの作成プロセスなどの詳細は、また別の機会に）
これからやること（2024年〜）
UIデザイン使用性チェックリストの基準をプロダクトデザイナー全員で作り上げる
2024年はUIデザイン使用性チェックリストを活用し、開発現場で「プロダクトUIの一貫性を高める活動」を自律的にできる状態をめざして、プロダクトデザイナーがそのための環境整備を牽引していきます。
しかしチェックリストはつくったものの、実際はチェックで参照する基準（デザインシステム）がスカスカな状態です…。JISを元に先に「使用性を維持・向上する満たすべき項目の一覧」を作りましたが「どうなっていれば満たすのか」に当たる基準がまだないのです。
そこで、まずはとにかくチェックリストで参照する基準を “プロダクトデザイナー全員で” 作り上げる活動をはじめます。
「基準の充足状況」をみるとほとんどの基準がないことがわかる。
チェックリストには「視線誘導」「レイアウトパターン」「（視覚的）グルーピングの装飾」のようなアプリケーションのUIを構成する基礎になる基準が含まれています。これまで開発してきたプロダクトの大量の実績をもとに、抽象化して基準にする作業を全員で分担しながら進めていきます。
私が知るなかでデザインシステムを公開してから最も大きなアップデート（さらなるコンテンツの充実）がこれから始まります。
なぜプロダクトデザイナー全員でやるのか
よくある対応として、デザインシステムの整備は専任チームが担うことがあります。しかし、作業上は効率的でもその後の現場導入で苦労しているケースをたくさん聞いてきました。
私たちは現場で使う・使っている基準をアウトプットすることが重要で、デザインシステムのオーナーシップは現場のプロダクトデザイナーがもつべきだという考えから「プロデザ全員で」 取り組んでいきます。
全員で取り組むメリット
全員で取り組むメリットとして「UIデザイナーとしての成長」も狙っています。
UIデザイナーは普段の作業の中で「規則的につくる」ことを当たり前にやっています。UIの一貫性の大元ですね。
これを発展させて「より多くのプロダクトに当てはまるようにして、他者にもわかるようにアウトプットする」ことが「基準をつくる」ことであり、UIデザイナーのスキルの一つだと考えています。特に複数の職種が協働で作り続けるSaaSのプロダクトデザイナーには、備えておくべきスキルだと思います。
全員で「基準をつくる」ことに取り組むことが、プロダクトデザイン組織のスキルレベルの底上げにもつながると考えています。
さらに昨年からプロダクトデザイナー職の新卒採用もはじめていて、組織のスキルレベルもより多様になっていきます。SmartHRのプロダクトデザイナーは、全員が「基準をつくれるデザイナー」になることを組織で支援していきます。
まとめ
当たり前のことですが、デザインシステムは一度つくって終わりではなく、組織体制やミッションにも合わせて基準の継続的なアップデートが必要です。
基準づくりに（開発者の中で）プロダクトデザイナーが率先して関わることによって、
高度なデザインシステムを育て、開発チームがより本質的なプロダクト開発に集中できるように、
マルチプロダクト戦略において重要な「使いやすさ」の品質をデザインシステムという仕組みで担保していけるように、
私たちはデザインシステムをレベルアップしていきます。
私たちはプロダクトデザイナーを募集しています！
SmartHRでは引き続きプロダクトデザイナーの採用に注力しています。プロダクトデザイナー職にご興味が湧いた方はカジュアル面談などでぜひ気軽にお話しましょう。