こんにちは。
派遣業界のSaaS企業でUX/UIデザイナーをしている水田と申します。
この記事では、初期からデザイナー不在でデザイン負債が蓄積したプロダクトに対して、一人目のデザイナーとしてどのようにしてデザインの整理を試み、やがてデザインシステムを構築・運用していくことになったのか、その過程で私が学んだことをまとめてみました。
デザインシステムを作りはじめたいけど、どこから手をつければ良いか悩んでいる方。
今まさにチームでデザインシステムの構築を検討している方。
デザインシステムを運用しているものの、効果を十分に実感できていない方。
このような方々に読んで頂けると、少しお役立ちできるかもしれません。ではいきましょう。
PMF前のプロダクトにデザインシステムは必要ない
まず最初にお伝えしたいことは、PMF（プロダクト・マーケット・フィット）に至っていないプロダクトには、強固なデザインシステムは不要ということです。PMFには様々な定義がありますが、今回はBtoBのSaaSプロダクトで一般的にPMFの指標とされる、「チャーンレート（解約率）が一定水準以下の状態」をPMFと定義します。
PMFに至る前のプロダクトは、市場のニーズに合わせて素早く変化し続ける必要があります。この段階ではプロダクトの方向性が頻繁に変わるため、デザインシステムを運用しようとすると変化を鈍化させてしまいます。そのため、デザインシステムを構築・運用することのリターンが、投資に見合うかを正しく査定する必要があります。
私の感覚として、プロダクトの方向性がまだ固まっていない状態では、デザインファイルやUIコンポーネントはあえて緩く管理し、方向性が固まっていく過程に合わせて徐々にデザインの一貫性と運用効率を意識した管理体制に移行すれば良いと考えています。
PMF前は関わるデザイナーは少ないはずなので、ドキュメントやガイドライン作成のコストは可能な限り抑え、バーニングニーズ発見のためのUX/UIの試行錯誤に集中してもらいましょう。
プロダクトのフェーズにあったデザインシステムとは
ではPMFに至る前のプロダクトはどのようにUIデザインを運用するべきか？
そして、PMF達成後やその後のスケールを目指すフェーズではどのように拡張していけば良いか?
私は以下のような運用を理想としています。
PMF前のデザイン運用方針
- 基本的にオリジナルでUIコンポーネントは作成せず、Figmaコミュニティで公開されているものを調整して使う。
- UIコンポーネントやUIテキストは、SmartHRさんのデザインシステムを徹底的に参考にする。
- Figmaは整理しすぎない。高頻度で使用するもののみコンポーネント化する。網羅しようとしない。
1に関して、SaaSで使われる基本的なUIコンポーネントの大半は公開されているため、独自のコンポーネントを作ろうとしないことが重要です。発見することができないような独自or複雑なコンポーネントは、仕様を疑ってください。複雑性は後になって大きな負債になります。
Figma Community にて使用しているフロントエンドのフレームワーク名やライブラリ名で検索してみてください。以下は、MUIの公開Figmaライブラリです。無料で整備されたコンポーネントが手に入ります。
参考: Material UI Figma Community
2で伝えたいことは、日本のSaaSの雄であるSmartHRさんから徹底的に学び、日本全体で知見を活用していこう、ということです。SmartHRさんは、これまでの経験・学びを結晶化したデザインシステムを公開されています。
例えば、エラーメッセージの文言にどう一貫性を持たせてUXを向上させていくか？となった際に、SmartHRデザインシステムの「エラーメッセージ」を参考にしてみてください。膨大な試行錯誤と議論によって磨かれ、体系化されたガイドラインにアクセスできます。
3に関して、デザインの整理整頓には膨大な時間と意思力がかかります。私自身、デザイン負債が溜まったプロダクトを見ると「あぁ、すみずみまで徹底的に綺麗にしたい...」という欲望に頭を支配されます。しかし、このSaaS戦国時代に開発リソースを無駄にすることは最も避けるべきことであり、選択と集中を意識しなければいけません。
PMF前はカオスをカオスのままにし、デザインの一貫性の欠如や矛盾を無視してまでも、顧客が喉から手が出るほど欲しい一筋の価値を探り当てることに集中する勇気が必要です。
PMFを達成した後は、どのようにデザインを管理したらよいか？ 私は以下のように考えます。
PMF達成後のデザイン運用方針
- StorybookもしくはFigmaをSingle of Truthとし、唯一の参照元として整備する。
- 各UIコンポーネントのユースケースを洗い出し、明確なガイドラインを作成する。
- デザインシステム管理のための専任のチームか担当者を設ける。
1について、デザインを管理するには、唯一絶対の参照元を決め、厳守してください。当たり前のように聞こえるかもしれません。しかし、正しいデザインはどこか？最新のバージョンはどこか?といった参照先を確認する無駄なやり取りは、日々大量に発生します。まず最初に、唯一の参照元はどこか、バージョン管理はどうするか、に解を出してください。私は、Visionalさんの「デザインデータのマスター管理をやめたワケ」という記事を参考に運用を決定しました。
2で伝えたいことは、コンポーネントはガイドラインとセットにして初めて強力な一貫性を得る、ということです。どのようなケースでどのコンポーネントを使用するか? 使用NGなユースケースは何か？これらに関して一貫した解を提供するのがガイドラインです。以下Amebaさんのデザインシステムにある、フォームに関するガイドラインです。ここまで整理されていれば、デザイナーのスキル・経験に影響されず、一貫性を担保できます。
3に関して、デザインシステムは生き物だと思ってください。世話がおざなりだと、死んでしまいます。デザインシステムを構築した後は、明確なオーナーを決定し、運用・管理に責任を与えてください。責任の所在が明確でないと、あらゆるものは形骸化します。PMFを達成した後は、全力でデザインを管理してください。デザインの無秩序は、開発スピードを落とし、プロダクトの競争力を低下させます。
まとめ
デザインシステムは、プロダクトのユーザー体験の一貫性を保つ強力なツールです。
しかし、すべてのプロダクトが、すぐにそれを必要とするわけではありません。
PMF前の段階では、顧客の強い課題を特定し、見事なソリューションを作り上げることを優先しましょう。PMFを達成し、市場に適合したら、フェーズに応じたデザインシステムを構築し、管理・拡張していきましょう。
ご拝読頂いた皆様の貴重なリソースが正しくプロダクトに投下され、素晴らしい成果を生み出せるよう心から願っております。最後まで読んでいただき、ありがとうございました。
おわりに
株式会社CastingONEでは、HR業界で革新的なプロダクトのUXUIを一緒につくるデザイナーを募集中です。
社員、業務委託、短時間の副業でも大歓迎です。気軽にご連絡ください！
Discussion