エンジニアも自己判断で活用できる、デザインシステムの運用
こんにちは！Monoxerでデザイナーをしているmoyoです😀 2019年頃から、アプリ、WEB管理画面のデザインやチーム拡張の仕組みづくりを担当しています。
皆さんの会社では、デザインシステム運用どうされてますか？モノグサ開発チームでは、2021年の始めからデザインシステムの運用と実装を行なっており、一歩目として、エンジニアが独自の判断でUI Componentを活用できることを大事にしています。
モノグサデザインシステムの目的
もともとMonoxerではBootstrapを活用していました。（今も一部）しかし、各々がComponentを自由に解釈しUIに適用した結果、画面ごとにボタンの使い方が異なっていたりなど、多くの課題が発生していました...。
そこで始まったのがデザインステム運用の試みです。モノグサ開発チームでは、デザインシステム運用によって実現したい状態を以下のように定めています。
1. ユーザーが"目的"に集中できる
2. デザイナーが体験設計、価値設計に集中できる
3. エンジニアが独自の判断で、ふるまいの揃ったUIを実装できる
最終的には1を達成すべく、現在は特に3に力を入れています。
背景として、モノグサ開発チームはアジャイル的な開発をしており、各人が大きな裁量を持って日々開発を進めています。デザインシステムというルールを作ることで、自由で裁量ある開発を制限したくはない。むしろ、ルールによってエンジニアもUIデザインをできるチームにしようと考えました。
万人にひらかれたパターンランゲージの構築という観点では、デザインシステムの背景にあるクリストファー・アレグザンダーの思想にも準じていると思っています。
Storybook×Figmaで、エンジニアもUI Componentを活用可能に
デザイン業務にはFigmaを活用しており、重要度の高いComponentから制作し、実装を進めていただいています。Componentにはできる限りContext, Problem,Solutionを明記し、解決策としての妥当性を誰でもチェックできるようにしています。
実装されたComponentはStorybookで確認できます。
エンジニアと解決策を議論する際、Storybookを一緒に見ながら適当なComponentを探せるため、とてもとても便利です。FigmaでのUI作成を待っていただかなくとも、数十秒の会話で解決できる課題が増えました。
また、storybook-addon-figmaを導入しており、Storybook上でFigmaのデザインデータを確認可能です。エンジニアは、Figmaを開かずにComponentのContext,Problem,Solutionを参照できます。
ジェネラルルールの作成
デザインシステムやComponentをデザイナーのものにせず、開発チーム全体で改善していくためには、現状を疑う姿勢が不可欠です。しかし、現状を疑い、より良い形を思い描くためには、まず背景を知っている必要があります。
そこで、背景を知りたくなった時に参照できるよう、UIの基本的な設計思想をジェネラルルールとしてFigmaにまとめています。Corner, Shadow, Grid system, Marginを用意しており、今後も必要に応じて増やす予定です。
ライティングガイドラインの作成
Monoxerは新規概念が多いサービスで、ユーザーにとって馴染みのない言葉を説明しなければならない場面が多々あります。ライティングは、デザイナー、エンジニアによって最もブレが大きい要素でもあるため、必要最低限の項目をガイドライン化しました。
タイトル、見出し、エラー文を始め、よく間違える名詞や、文章の具体的なGood、Bad例を記載しています。コピー&ペーストですぐ使える状態を理想としています。
実際の活用風景
実装済みのComponentは既に活用が始まっており、エンジニアが独自に活用してくださっているのをよく見かけます。
改善提案+修正をしてくださるケースも多く、日々議論しながら改良を続けています。
デザインシステムの取り組みはまだまだ発展途上であり、実装や既存画面への反映はまだまだ道半ばです。ユーザーが"目的"に集中できるという最大の目標を達成すべく、今後も進んでいきます。
最後に
モノグサのデザインシステムは、「拡張性」や「大きな裁量」を楽しむチームの雰囲気に合わせて運用しています。新入社員向けのデザインレクチャーやStarterチケット、領域ごとのTechLeadなど、デザインシステム運用に関連する仕組みはまだまだあり、何よりCTOの采配やTechLeadのリーダーシップがあってこそスムーズに進んでいるので、いつかそのあたりも解体してお伝えしたいです。
一緒に拡張性のあるデザインシステムを作りたい、モノグサ開発チームに興味が湧いた、という方はMeetyなどで気軽にお話しましょう！ありがとうございました！
参考文献
以下は、デザインシステム運用にあたって参考にさせていただいた記事、文献一覧です。