バーティカルSaaS大規模リニューアルにおけるデザインシステムの取り組み
こんにちは。
株式会社エス・エム・エスでプロダクトデザイナーをしているりんです。介護・障害福祉事業者向け経営支援サービス「カイポケ」のUI/UXデザインを担当しています。
今回は、バーティカルSaaS製品の大規模リニューアルにおいて、私たちが導入したデザインシステムについてご紹介します！
「カイポケ」大規模リニューアル
「カイポケ」は、中小企業から大手企業まで50,400以上の事業所で利用される介護・障害福祉事業者向け経営支援サービスです。
そんなカイポケは継続的な事業成長、安定性やプロダクトの優位性を高めることを目的にリニューアルプロジェクトを2021年に始動しました。
1000ページ超のUIを含むアーキテクチャを全面刷新する大規模な挑戦です。
※リニューアルプロジェクトについての詳細はこちらもご覧ください。
デザインシステムの誕生
UIのさらなる一貫性と開発の効率化を目指し、全体的なUIの統一と改善を図るために、デザインシステムを導入することにしました。
まず、デザインシステムを次のように定義しました。
デザインを行う際のデザイン原則、トークン、コンポーネントの定義、さらにそれによって醸成されるチーム内の文化など、無形のものも含めた総称。
メンバーの目線を揃えるためにワークショップを行い、現在の課題、将来のあるべき姿、デザインシステムに対する期待を明確にしたうえで、デザインシステムの目的と目標を以下のように明文化しました。
目的：
時間の使い方を変える
私たちの仕事の中には仕様書の執筆や・ソースコードやデザインツール上での同じ部品の再生産など、最終成果物の生成に直接的には紐付かないような非生産的な活動時間が多くあります。
これらの時間を排除して生産的なアウトプットができる時間の割合を増やすことが本プロジェクトの目的です。この目的を達成することによってメンバーの迷いやチーム内の摩擦などを解消し、一人ひとりが創意工夫をしたアウトプットができるようにする割合を増やす狙いがあります。
目標：
1. ROIが向上すること
2. ユーザーが最速で課題を解決するための手段を提供すること
具体的にやっていること
次に、具体的な要素を策定していきました。
デザイン原則
ブランドガイドライン
ユーザーインターフェイスガイドライン
ユーザーインターフェイスアセット
Figmaライブラリ
フロントエンドライブラリ (≠Storybook)
今回はデザイン原則とユーザーインターフェイスガイドラインについて作成時のポイントいくつか紹介します。
１. デザイン原則
デザイン原則では、UIデザインを進めるうえでの基本的な方針や考え方を示しています。
デザイン原則を策定することでデザイナーだけでなく開発者、PO含めてチーム内での目線が揃えられ、意思決定やスムーズな意思疎通が可能になります。さらに、プロダクトが成長しても新しい要素に対しても基準を適用できるので、柔軟かつ一貫性のあるユーザー体験を維持できることが大きなメリットです。
カイポケのデザイン原則では、タッチデバイス対応の考慮やオブジェクトベースとタスクベースの適切な使い分け、中級者中心設計などを定義しています。
その中でも、中級者中心設計は重要なアプローチです。
カイポケの主要なユーザーである介護事業者やケアマネージャーは、すでに日常業務に習熟しており、基本的な操作や流れを理解しています。
例えば、初心者向けのオンボーディングガイドや説明が常に表示されると、逆に業務の妨げになりかねません。
説明を別レイヤーに分離することなど、必要なときに適切なサポートが得られるように工夫し、常にボリュームゾーンである中級者に最適な体験を意識しています。
２. ユーザーインターフェイスガイドライン
カイポケのデザインシステムは各コンポーネントのデザインと用途を定義しています。デザインと開発の連携を強化し、開発者がユーザーインターフェイスアセットの用途に共通認識を持ち、素早くデザイン・実装をおこなうために作成されています。
特徴的な取り組みをいくつか紹介します。
デザインガイドライン
デザインシステムを基に複数チームでデザイン制作を行っているため、各コンポーネントがどのような目的で使われるか、設計思想、そして具体的な使用ルール（Do's and Don'ts）を定義しています。
共通基準を明文化することでデザイナー同士の認識が統一され、解釈のずれやデザインのばらつきを防ぎ、すべてのチームが同じデザイン品質と方針を保ちながらデザイン制作を行なっています。
Storybookによる管理
開発の効率化、デザイナーと開発者の連携を強化するために、フロントエンドライブラリにChakra UI を使ったコンポーネント開発と Storybook の活用を推進しています。
具体的には、Figmaライブラリ上で定義されたデザインデータをもとに、 Storybookで各コンポーネントのインタラクティブな挙動や表示の違いを確認できるようになっています。
設計意図が正確に伝わり、デザインと実装のズレを減らすことができるため、チーム全体の開発スピードを向上に繋がりました。
また、新しいコンポーネントの設計段階でも、 Storybookでデザイナーがフィードバックを行うことができるため、開発初期から密に連携してスムーズな開発プロセスを実現しています。
運用して1年半 デザインシステムの今
こうした内容を運用して、1年半が経ちました。
新しいメンバーが増え、UIを活用した設計が進む中で、デザインシステムの新たな課題も見えてきています。
課題：
・ルールが開発の制限になってしまう
・フロントエンドライブラリとFigmaライブラリの間にズレが生じる
・デザインシステムをみんなで運用する意識が不足している
デザインシステムは作って終わりではなく、常にアップデートを続けるものです。
デザイナーが、Figmaライブラリを活用して新機能をデザインし、新しいコンポーネントの設計や既存コンポーネントのアップデート・見直しを日々行っています。
チーム内でよく語られるこの言葉が、私はとてもしっくりきています。
本当は、『デザインシステム』とあまり呼びたくない。
組織の課題に対応していく施策の集まりが、結果的にデザインシステムになっているという姿が理想的。
現在のカイポケチームでは、良い体験を生み出すために、デザインシステムをさらに進化させるフェーズにあります。
引き続き、カイポケのデザインシステムはバージョンアップしていきますので、次回の記事をお楽しみに！