当社のサービスであるSynergy!の UI デザインを担当しています、吉開敦です。 この記事では、Synergy! にデザインシステムを適用するために奮闘したお話をしたいと思います。
吉開 敦（ヨシガイ アツシ）趣味はゲームと料理。UI の勉強という体裁でゲームばっかりやってます。
得意料理はペペロンチーノ。シンプルだけど奥深いってとこに惹かれます。
Synergy! におけるデザイン実装の現状と課題
Synergy! は2005年のファーストリリースから現在まで、15年ほどサービスを提供してきました。 当時からは Web の技術も様変わりし、UI への要望も時代とともに変化しています。その時々の情勢に合わせ、適宜改修、改善を繰り返してきたためか、デザインとその実装に関して、次のような課題があります。
課題1. デザインルールにムラがある
ある程度のデザインルールはあるのですが、明文化されていないため、デザイナーがルールを独自解釈し、デザインをすることもよくありました。またデザインルール間で矛盾もあるため、設計時にデザイナーが迷う場面もしばしばみられます。
黄色は注意喚起のカラー。③は背景色＝青、丸アイコンが正しい
課題2. チームでのデザイン・実装が効率的ではない
歴史的に多くのデザイナーとエンジニアが関わってきたため、また、デザイナーとエンジニアを兼任していた場合もあったため、両者の担当領域の認識が担当者によって異なります。あるデザイナーは 1px の単位でデザインするのに対し、別のデザイナーは「そこはエンジニアでうまいことやって」というようにデザインのアウトプットの精度が異なる場合があります。エンジニアはデザインのアウトプットをどこまで正確に再現すればよいか判断できず、余計なコニュニケーションが生じます。 「これ 1px ずれてるよ！」「これはこれでいいんだっけ？」など、同じような話をいつもしています ← ここポイントです。
課題3. デザイナーとエンジニアの間で共通認識が持てていない
ルールが曖昧なのでそもそも共通認識なんて持てているわけない。。。
そんなとき、Web上のとある記事でデザインシステムという概念を知りました。 最初は「デザインシステムの導入により、デザインの一貫性を保つことができる」という文言に惹かれたのですが、調べていくうちに、他にも様々な効果があることがわかってきて、我々の課題解決にデザインシステムが有効ではないかと思うようになりました。
デザインシステムとはなにか？
デザインシステムとは、デザインの原則、概念、ガイド、コンポーネントなど、デザインに関するあらゆるルールを定めたもののことを言います。スタイルガイドやコンポーネントライブラリ（パターンライブラリ）はデザインスタイルの一部です。
デザインシステムを導入することにより以下の効果が期待できます。
効果1. UI の一貫性を保つ
UI の一貫性を保つことは製品を使用するユーザーにとっては、あらゆる画面で統一感のある操作を行なうことができ、また、画面表示に一貫性があることにより、わかりやすくなり、ユーザー体験の向上に繋がります。 開発者側にとっても、CSSやJSのコードのコンポーネント化が行いやすく、拡張性が高くなるといったメリットがあります。
効果2. デザイン制作がスムーズになる
統一されたデザインルールにより、デザイナーの迷いが少なくなり、デザイン制作の期間が短くなります。
効果3. デザイナーと開発者とで共通認識を持てる
デザインシステムを基盤として、デザイナーと開発者で意思の疎通を行なうことができます。このため基本的な共通認識を持つことが容易になり、必要なコミュニケーションの総量が減ります。
Synergy! へのデザインシステムの適用
Synergy! へのデザインシステムの適用にあたり、他社事例や書籍の調査から始めました。
参考にした資料
他社の公表するデザインシステムやスタイルガイドの事例
Atomic Designに向き合ってみてわかったことをまとめてみた - Findyブログ
デザインシステムを正しく理解しよう。作り方・参考事例のまとめ | Web Design Trends
デザインシステムと親和性のあるAtomic Designのコンポーネント指向の設計思想
Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド
調査後に方針を定め、以下のツールを用いて実際に適用を進めました。
使用したツール
実際に適用した際の手順は以下の通りです。
手順1. プロダクトを構成するコンポーネントをユーザーの行動ベースで分解 / 収集 / 分類 / 分析する。
手順2. 分類したものを精査 / リデザインする。
手順3. リデザインしたものをデザインカンプに起こし、エンジニアが実装する。
適用結果と振り返り
実際にデザインシステムの構築と適用を行った後、前述の３つの課題に対して再評価したところ、以下の結果になりました。
課題1. デザインルールにムラがある → 改善した○
課題2. チームでのデザイン・実装が効率的ではない → 改善ならず×
課題3. デザイナーとエンジニアの間で共通認識が持てていない → 改善するも△
それぞれもう少し詳しく振り返ります。
課題1. デザインルールにムラがある → 改善した○
精査 / リデザインのフェーズで、既存のデザインルールに関してもすべて見直しを行い、生かすものと廃止するものの取捨選択を行いました。そのため、デザインルールのムラがなくなり、デザインのアウトプットにぶれがなくなりました。
課題2. チームでのデザイン・実装が効率的ではない → 改善ならず×
古い UI フレームワークを使って実装している部分にデザインシステムを適用しようとしたところ、うまく適用できないという状況になりました。古い実装ではコンポーネント化されている部分と、されていない部分が混在するため、一律の方策で対応することができず、結局個別に実装を分ける、という対応をせざるをえませんでした。技術的負債を抱えたまま表面上の実装をするにとどまってしまいました。
課題3. デザイナーとエンジニアの間で共通認識が持てていない → 改善するも△
直接関係のあったデザイナーとエンジニアとでは、Figma のカンプを通じたコミュニケーションにより、共通認識を持つことができましたが、共通認識は当事者間同士に留まり、開発者全体で共通認識を持つまでには至りませんでした。
改善した箇所はあったものの、現状ではデザインシステムが十分有効であったとは言えません。 特に既存機能の改修に関しては、もう少し早い段階でデザイナー、エンジニア間で会話すべきだったと反省しています。
将来に向けて
この反省を踏まえ、今取り組んでいる新機能では新しい UI フレームワークを採用することもあり、最初からデザインシステムを導入しました。 新機能プロジェクトは現在進行中ですが、新たなデザインルールやコンポーネントの追加などをしながら整理を進めています。
理想のデザインシステムとは少し違ったカタチになりましたが、会社毎に状況や事情は違うので、これが当社での現実解かなと思っています。 今まで必要と言われながらも改修できずにいましたので、大きな進歩だと思っています。
さいごに
デザインシステムは、新規プロジェクトの方が圧倒的に適用しやすかったです。コストの面もありますが、既存機能への適用は古い UI フレームワークのしがらみが強すぎて、調査、改修にとても時間がかかりました。UI フレームワークの制限により、結局手が加えられない部分も多くあったのが心残りです。
多くの人を巻き込んだチャレンジでしたが、開発全体で UI に対しての意識が高まり、デザイナーとしても製品に対するデザインを再認識する良い機会になりました。
改修は今後も続きます。 改修が全て終わっても整えたものを常に最新のものにアップデートしていく必要があります。 デザインシステムを維持し、お客様が迷わず、より使いやすいシステムを作るために邁進していきます！