BtoBサービスの大規模リニューアルで実感した！デザインシステムの3つの効果
皆さん、こんにちは！グッドパッチ UIデザイナーのナスカです。
業務効率化やソフトウェアの品質向上といった話題で、昨今注目を集め始めているデザインシステム。とはいえ、まだ導入している企業やプロダクトはそう多くはありません。
今回は「デザインシステムって、どんな効果があるの？」と思っている方や、導入に悩んでる方に向け、とあるクライアントのサービスリニューアルプロジェクトで、実際にデザインシステムを構築した現場を見てきた私の体験談をお伝えできればと思っています。
サービスリニューアルのタイミングは、開発も含めた環境を整える絶好の機会です。デザインシステムを通じて、早いタイミングで手戻りを防止することで、致命傷を防ぎ、効率良く開発を進められる仕組みを作りましょう。
デザインシステムの概要について詳しく知りたい方は、こちらの記事が参考になるので、ぜひご覧ください。
参考記事：良いデザインシステムとは その基本と構造をグッドパッチが解説
目次
リニューアルにおけるデザインシステムの重要性
私が参画していたプロジェクトは、企業向けサービスのリニューアルだったのですが、開発において、以下のような課題がありました。
- 機能を都度継ぎ足す形で開発してきたため、情報設計や画面が複雑化し、負債が増え、ソフトウェアとして耐えられない品質になっていた
- UIコンポーネントやガイドラインがなく、UIデザインに統一感がなかった
- デザイナーの人数が少ないため作業が間に合わず、なかなかリリースができない状態が続いていた
そのため、今後の拡張性を考慮した情報設計を行うことと、デザインの一貫性を保ち、効率的にデザインできる仕組みを作りながら必要な画面を作り切ることを目指し、プロジェクトが始まりました。
このプロジェクトでは、機能開発に加え、デザインシステムの内製化にも注力したのですが、先方は当初、デザインシステムに投資するという考えはありませんでした。
しかし、開発すべき画面の量やチームメンバーが多く、必要なコミュニケーション量も多いことから、認識合わせのコストがかさみ、少なからずミスが発生するようになります。
そこで、グッドパッチのUIデザイナーがUIコンポーネントライブラリやガイドラインの土台を作り、普及活動を行ったことでチーム全体で活用されるようになりました。リニューアルプロジェクトの初期だったので、定義したコンポーネントを適用していくのも、すぐに行えたというのは幸運でした。
そのうち、ガイドラインやコンポーネントが「デザインシステム」に昇華し、より生産性を向上させるために、先方もデザインシステムに投資してくれるようになったのです。
デザインシステム導入で感じた、3つの効果
それでは、ここからは実際にテザインシステムが生まれたことで、リニューアルの現場に生まれた良い影響を紹介していきます。
属人化を防ぎ、デザインと開発の作業効率が上がる
画面の構成要素が、UIコンポーネントライブラリで管理されていることで、0からボタンやフォームなどのUIパーツを作る必要がなくなり、作業効率が格段に上がりました。既存のパーツを再利用することで、早くアイデアを形にでき、デザイナーだけでなくエンジニアも機能開発に集中できるようになったのです。
要素が管理されていることで、属人化によるリスクも防げます。特定の人に依存する作業がなくなることで、開発もスムーズに進むようになります。
また、後から「スタイルを変更したい」「Stateを追加したい」と要望が出てくるケースはたくさんありますが、そんなときも、UIコンポーネントライブラリで一括更新をかければ、画面一つ一つを修正する手間がなくなり非常に楽です。
このような環境がなければ、ファイルによって古いスタイルが残っていたり、新しくメンバーが増えたときも、どのデザインが最新か判断がつかず困る場面が多かったのではないかと想像しています。UIコンポーネントがまとまっていなければ、既存の画面を見ながら手探りで作業することになっていたかもしれません。
逆にデザインシステムがあれば、スムーズに作業に入りやすくなりますし、どんな組織なのか、どうデザインを作っていけばいいのかの把握がしやすくなるので、新しいメンバーにとっても心強い味方になってくれるでしょう。
バージョン管理や新メンバーのオンボーディングという観点でも、デザインシステムの導入は早ければ早いほど良いと思います。
UIデザインに統一感が生まれ、品質を担保しやすくなる
多数のデザイナーが関わるプロジェクトでは、必然的にUIにばらつきが生まれやすくなります。
使用しているUI要素が他の画面とスタイルが違ったり、間違えた使い方をしていたり、カラーが違ったり、表記揺れがあったり……。レビューをしていてムズムズした経験はありませんか？ 特に歴史が長いサービスだと、過去のトレンドだった立体的なボタンと、現在トレンドのフラットなボタンとが混ざっているような例も少なくありません。
そんなとき、UIコンポーネントライブラリのような、デザインのパターンや要素がそろっていることで、デザインに統一感が出ますし、ガイドラインがあることでどんなケースで使えばいいのかがすぐに分かります。
また「このコンポーネントが使える」「このデザインパターンに合わせられる」とレビューがしやすくなり、各デザイナーが一貫したUIを作成できるようになりました。
似たような話でライティングガイドラインや用字用語集も役に立ちます。ワイヤーを作成して、実装前の精緻化に入るときに、表記揺れや単語チェック、ブランドの人格にフィットした振る舞いができているかを確認します。特に表記揺れは、ユーザーだけでなくチームの中でも同じオブジェクトを扱っているのか混乱してしまうので、ガイドラインのメリットが生じやすいです。
エンジニアとデザイナーのコミュニケーションが取りやすくなる
エンジニアとデザイナーのコミュニケーションのズレは、さまざまな現場で起こりやすいものですが、意思疎通がうまくいかないと、成果物にギャップが生まれますし、負債が蓄積し続けると、チーム内の関係も悪化するケースもあります。
このプロジェクトは、デザイン側と実装側の仕様が命名やAPI（Variants↔Props）のレベルで一致しているので、コミュニケーションが円滑でした。フロントエンドライブラリを作成することで、エンジニアもUIコンポーネントを理解し、同じ目線でアップデートを行うことができます。
「ガイドライン的にはこうですよ？」「Webの標準仕様も使えますよ」とFBをもらうこともよくあります。デザインシステムがあることで、デザイナーだけでなく、エンジニアとも一緒に仕組みを良くするマインドを持てています。
デザインシステム構築におけるデザイナーとエンジニアのコラボレーションの価値
デザインシステムに完璧はない──「いい仕組みを作る」マインドが大切
いかがでしたか？ 今回はデザインシステムを実際に使ってみてどんな効果を感じたかを紹介しました。
実際に経験して感じたのは、デザインシステムは完璧なものを作り上げるという取り組みではないということです。現時点でも100%ではないでしょう。
特にガイドラインなどは、関わっている人の数だけ解釈が生まれるので、アップデートをし続けるべきものですし、ビジネス環境の変化やプロダクトの進化に合わせたアップデートも出てきます。
実際に運用を始めると「このガイドラインだと分かりづらいからもっとこうしたい」「この使い方のほうがもっと良くなる」「このパターンが欲しい」といったさまざまな意見が出てくるでしょう。まとめるのはとても大変ですが、この動きによってデザインシステムはどんどん進化します。
現場から声が上がることで、デザインシステムが進化するのもそうですが、「いい仕組みを作る」というマインドがチーム全体に行き渡っていることを実感しています。改善に向けて、チームのまとまりやモチベーションが高まるというのも、プロジェクトを遂行する上では見逃せないポイントです。
デザインシステムの導入と運用には時間と労力がかかりますが、長期的に考えると非常に大きな効果があります。グッドパッチはデザインシステム構築支援を提供しています。デザインシステムの構築・運用に課題を感じている方はこちらからぜひお問い合わせください！
関連記事
