SmartHR Design System NT

Tools

リソース

SmartHR Design System GitHub:使用性向上プラグイン

GitHub:SmartHR UI

GitHub:SmartHR Design System

SmartHR Design System NTとは?

SmartHR Design System NT(以下 NT)は、開発・運用の「プロセス」を変革し、使いやすいプロダクトを生み出すためのツールです。

優れたUIライブラリやガイドラインがあるだけでは、「使いやすさ」は実現できません。重要なのは、それらを活用して形にする「プロセス(工程のつながり)」です。

Nodal Transformation(接続点の変革)

image.png

NTが生まれた背景

世間に浸透しているデザインシステムは、UIコンポーネントとガイドラインを指すことが多いですが、開発を進める上で上流の要求分析や要件定義の精度が低ければ、成果物は「利用者のニーズからズレたUI」となってしまい、「使いやすさをデザインシステムで実現できる」とは言えない状況になっていました。これに対応するには、要求を上流から正しく製品に落とし込むプロセスが必要になります。

また、デザインシステムの浸透による聖書化がはじまり、利用者の批判的な思考が薄まり、結果としてプロダクトの成長が止まってしまう状況が出来てしまう運用の課題も生じていました。フィードバックを正しく引き出し、改善アクションにつなげる運用プロセスも必要です。

しかし、プロセスを定義するだけでは「使いやすい」を実現できません。

プロセスをうまく回すためのツールも必要です。ツール自体が新たなプロセスを作り出すこともあります。

そこで私たちは「プロセス」に注目し、「使いやすい」を実現させていく開発者のためのツールを提供します。

NTがターゲットとしている3つのプロセス

ツール開発をする上で、ターゲットとしているプロセスが3つあります。

1️⃣ 開発プロセス:要求が顧客価値へ変わる流れの可視化と最適化

「要求分析」や「要件定義」といった上流のインプットが、いかにしてUIライブラリを利用した成果物へ流れていくかを定義したものです。

工程を遡るプロセスも存在します。

要件定義では「利用者がやりたいことはこうです」ということを定義します。次の情報設計では「利用者の業務の仕組みはこうです」を定義します。次のUIでは「画面の設計はこうします」を定義します。要件定義と情報設計はUIライブラリの組み立て方の素材となります。

2️⃣ レビュープロセス:品質を接点ごとに担保する防波堤

成果物の品質を保証するための、具体的な評価視点とその運用を定義したものです。

要件定義では「利用者がやりたいことはこうです」ということを定義し、それに対して「利用者の想定に漏れはないですか?」というレビュー視点を持ちます。次の情報設計では「利用者の業務の仕組みはこうです」ということを定義し「その仕組みは利用者にとって分かりやすいですか?」というレビュー視点を持ちます。次のUIでは「画面の設計はこうします」という定義に対して「利用者は捜査しやすいですか?」というレビュー視点を持ちます。

3️⃣ 運用プロセス:現場や利用者の声を即座に取り込む改善サイクル

リリース後の利用者のフィードバックや利用データを、次の要求(インプット)としてプロセスへ組み込み、デザインシステム全体を継続的に進化させる仕組みです。終点と起点がつながるように定義したものです。

要件定義で「こういうものを作ります」と定義します。次にUIを作り、その次に開発、その次にフィードバックです。フィードバックでは「こういう課題があります」ということを確認し、再び要件定義に入ります。

ツールや仕組みの考案

開発や運用プロセスを構築しても、しばしば次の課題に直面します。

その仕組みがうまく回るように、各工程のインプットと成果物の関係に注目し、ツールを開発します。

例えば、UIのレビュープロセスにおいて、UI(=成果物)とチェックリスト(=インプット)が別々の場所にあると、「チェックリストを探す手間」「見比べる手間」「転記作業」が発生し、確認漏れの原因になります。

そこで、Figmaプラグイン上でチェックリストを即座に実行できるツールを提供できれば、チェックから修正までを同一画面で高速に完結させることができます。事前にセルフチェックができるようになることも大きなポイントです。第三者レビューにかかっていた工数を減らし、レビュー会議では本質的な議論に集中でき、会議の質も向上します。

開発や運用プロセスの各工程に対して、次の5つの考え方を照らし合わせて、必要なプロセス改善およびツールのヒントを得ます。


アイコン:インプットに必要なもの

①インプットに必要なものは何か?

インプット自体が欠けていると、次の成果物の品質が低下する可能性があります。


アイコン:品質

②どうやったら品質を満たせるか?

インプットの品質が欠けていると、次の成果物が品質が低下する可能性があります。


アイコン:成長のループ

③ループして成長できるか?

企画→開発→フィードバック→企画、というようにプロセスが回転しないと成長が止まる可能性があります。