昨今では、よく耳にするようになった「デザインシステム」ですが、クライアントワークでもデザインシステムを構築するケースが多くなっています。
デザインシステムは「UIの品質向上」や「開発の効率化」といった目的で作られることも多く、デザイナーとエンジニアの両者に関係があるものです。しかし、実際にデザインシステム構築をしていく際にデザイナーとエンジニアはどのように協力できるのでしょうか？
この記事では、Goodpatchで実際に行ったtoB SaaSのデザインシステム構築において、デザイナーとエンジニアのコラボレーションの取り組みや、その取り組みが生み出す価値について焦点を当ててみたいと思います。
目次
デザインシステムについて
デザインシステムの定義は文脈によってさまざまですが、この記事では「ブランドに紐づいたデザインの再現性を高め、ユーザーの利便性や開発効率を向上するための考え方とツールセット」として考えます。
デザインシステムの構成要素にもさまざまなものが含まれますが、「UIコンポーネント」や「デザイントークン」はUIの実装に関わるため、デザイナーとエンジニアの関心が重なりやすい領域です。
引用元：生き続けるデザインシステムの実現に向けたデザイナーの取り組み｜Goodpatch Blog グッドパッチブログ
デザインシステムを構築する際にしばしば起きる問題
クライアントワークでデザインシステムを構築する場合、デザイナーがデザイン方針やルールを定義するところまでは良いものの、その後に当時のメンバーが離脱してしまい、組織やプロダクトへの実装まで行われずに形骸化してしまうケースがあります。
特にUIコンポーネントに関しては、デザイナーとエンジニアでコミュニケーションが取れていない場合は、以下のような問題が起きる可能性があります。
- UIコンポーネントの分類や命名がデザイナーとエンジニアで異なっており認識がずれる
- UIコンポーネントの状態変化が考慮されておらず、実装時に考慮漏れが発覚する
- UIの仕様がWebの標準仕様から逸脱しており、アクセシブルでない上に実装に時間がかかる
このような問題を避けるためにデザイナーとエンジニアの両方の視点を取り入れながら、設計と実装をつないでいくことが重要です。
デザイナーとエンジニアのコラボレーションの取り組み
ここからはGoodpatchで実際に取り組んだtoB SaaSのプロダクト開発 + デザインシステム構築にあたって、UIコンポーネントに焦点を当てつつ、デザイナーとエンジニアのコラボレーションの取り組みについてご紹介します。
おおまかな開発プロセス
本プロジェクトはソフトウェアのUXデザイン・UIデザイン・デザインシステム構築までをGoodpatchが担当しました。デザインシステムに関しては「開発の効率化」を主な目的としつつ、ブランドのデザインガイドラインから、プロダクトのデザインガイドライン、UIコンポーネントの実装まで行いました。
大まかな開発プロセスとしては、デザインスプリントと実装スプリントを2週間単位で並行して進める形を取りました。
- デザインスプリント：ソフトウェアのユースケース抽出とUI設計
- UIコンポーネント実装スプリント：UIコンポーネントの抽出と実装
- アプリケーション本開発：UIコンポーネントを使ってアプリケーションを実装
デザインスプリントにおける取り組み
デザインスプリントでは、デザイナーが中心になってユースケースの抽出と情報設計・UI設計を行いますが、ユースケースによっては特殊なUIコンポーネントが必要だったり、既存のUIコンポーネントに修正を加える場合があります。
このとき、デザイナー視点ではユースケースに最適化したUIコンポーネントを作りたいこともありますが、UIコンポーネントの設計によっては、実装工数やメンテナンス性にも影響があるため、早い段階でエンジニアの視点を取り入れておくことで後戻りを防ぐことができます。
そのため、デザインスプリントにもエンジニアが参加し、ユースケースやUIの設計思想を理解した上でフィードバックを行う場をつくることで、早い段階でUIコンポーネントの改善点を発見することができました。
UIコンポーネントの実装スプリントにおける取り組み
UIコンポーネントの実装スプリントでは、エンジニアが中心になってUIコンポーネントの実装を行いますが、以下のような取り組みを行いました。
デザイントークンのFigmaとコードの同期
デザイントークンは、色やスペーシングなどUIの最小要素に名前をつけてパターン化したものですが、最初にデザイントークンを設計しておくことで、ランダムにスタイルのパターンが増えることを防ぎ、一貫性を維持しやすくなります。
今回は、Figmaに定義したデザイントークンをTokens Studio for Figma + Style Dictionaryを使ってコードに変換することで、Figmaとコードの同期を行いました。
初期段階では特にデザイントークンに変更を加えるケースもあり、デザイントークンに変更があった場合は、デザイナーがFigma上からGitHubのPull Requestを作れるため、コードが書けない場合でも容易に変更を反映することができました。
UIコンポーネントの設計と実装の同期
Figmaで定義されたUIコンポーネントをもとにデザイナーとエンジニアでUIコンポーネントの分類や命名、プロパティの定義について擦り合わせることで、エンジニアがUIコンポーネントを実装する際にもFigmaと同じ設計思想をコードに反映することができます。
Figmaとコードの設計思想が一致していることで、本開発のエンジニアチームはどのUIコンポーネントを利用すれば良いのかを判断しやすくなり、コミュニケーションや開発の効率化につながりました。
デザイナーとエンジニアのコミュニケーション
デザインスプリントでエンジニアのレビューを行っているとはいえ、やはり実装する中で実現性の問題や考慮漏れが見つかることもあります。
そのため、毎朝のデイリーミーティングでデザイナーとエンジニアでコミュニケーションを取ることで、エンジニアの実装が非常にスムーズに進むようになりました。
また、細部のインタラクションやアニメーションについては、デザイナーとエンジニアで集まって、ペアデザインのように一緒に作業をすることでアニメーションの動きをパターン化するなど、UIの一貫性とコードの複雑化の回避にもつながりました。
デザイナーとエンジニアのコラボレーションが生み出す価値
デザイナーとエンジニアのコラボレーションは重要であるという認識を持っていても、実際にどのような価値につながるのかは間接的で分かりにくい部分もあります。しかし、今回のデザインシステム構築においてデザイナーとエンジニアのコラボレーションによって、以下のような価値につながったと考えています。
ソフトウェアの開発効率の向上
当初、開発が必要なUIコンポーネントは多くありましたが、デザイナーとエンジニアが一緒に議論する中でUIコンポーネントの統廃合が行われ、30%ほど開発工数を削減することができました。
また、UI設計の段階でデザイナーとエンジニアの両者で議論し、認識を擦り合わせておくことで実装時に大きな手戻りが発生することはほとんどありませんでした。
アプリケーション本開発のエンジニアチームには、UIコンポーネントを組み合わせてアプリケーションを実装してもらうことで、開発効率が向上するだけでなく、本開発時に発生したUIコンポーネントの課題を適宜フィードバックしてもらうことで、デザインシステムの活用や浸透を促すことができました。
アプリケーション本開発のエンジニアチームに対して、「デザインシステムのUIコンポーネントを利用することで開発が効率化されたかどうか」をアンケート形式でフィードバックをいただいたところ、5段階中5の評価をいただくことができました。
ソフトウェアの品質の向上
デザイナーとエンジニアのコラボレーションによって、開発効率が高まるだけではなく（正確には開発効率が高まることによって）、ソフトウェアの品質向上にもつながりました。
ソフトウェアの品質にはさまざまな定義がありますが、この記事では「外部品質」と「内部品質」の２つの観点でどのような影響があったかを取り上げます。外部品質とはユーザビリティなどユーザーが感じる品質で、内部品質はコードの保守性など開発者が感じる品質となります。
まず、外部品質の観点では、UIの一貫性によるユーザーの認知負荷の軽減、ローディングやエラーなど細かい状態変化への対応、キーボード操作や文字サイズの拡大などアクセシビリティにも配慮することができました。
また、内部品質の観点では、デザイナーとエンジニアの設計思想が揃っていることで、UIの変更に対してコードの変更が追従しやすくなったり、Webの標準仕様に合わせるなどUIの複雑性を回避することでコードもシンプルになり、メンテナンス性の向上につながりました。
チームの一体感の向上
デザイナーとエンジニアのコミュニケーションが活発になることで、チームとしての一体感が向上しました。
チームの一体感はプロジェクトの推進力を上げ、プロダクトの品質向上にも寄与しますが、なにより同じ問題に向き合う仲間としてチームをハッピーにしてくれます。特に今回のプロジェクトでは、エンジニアに寄り添ってくれるデザイナーたちの存在も大きかったと思います。
このようにデザイナーとエンジニアのコラボレーションによって、さまざまなメリットが生まれることを実感しました。
おわりに
この記事では、デザインシステム構築におけるデザイナーとエンジニアのコラボレーションの取り組みと、コラボレーションによって生まれる価値をご紹介させていただきました。デザインシステムに限らず、ソフトウェアをつくる際にはデザイナーとエンジニアの協力は必要不可欠ですし、事業に向き合うための重要なパートナーだと考えています。
最後に宣伝ではありますが、Goodpatchではデザイナーとエンジニアの相互理解を支援するワークショップなども提供しております。
UIデザイナー向けエンジニアリング基礎研修の概要｜Goodpatch Blog グッドパッチブログ
お知らせ：今年も「アドベントカレンダー」の季節がやってきました！🎄
この記事はGoodpatchのエンジニアが中心に行っている Goodpatch Advent Calendar 2023 1日目の記事です。
Goodpatchのデザイナーが中心に行っている Goodpatch Design Advent Calendar 2023 もありますので、ぜひお楽しみください！
