先日行われた、弊社デザイナーが登壇したデザインシステムの勉強会に参加してきましたのでレポートを書いていきます！

デザインシステムとは

デジタルプロダクトの目的を達成するために首尾一貫したルールで編成された、お互い関連づけられたパターンとその実践方法です。
Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイドより引用

designsystems.tokyoとは

「デザインシステム」についての勉強会です。各社におけるデザインシステムの定義やスコープ、導入方法は千差万別ですが、それら各社の知見や学びを業界資産として可能な範囲で共有することで、個々人のスキル向上と、日本発のサービスやプロダクトのレベルアップを目的とした勉強会です。
designsystems.tokyo compassのページより引用

イベントテーマ「実際のデザインシステムってどうなの？」

freee株式会社と、弁護士ドットコム株式会社の２社が実際に作成したデザインシステムを公開し、各社のデザインシステムの現状、現在課題を感じている事を発表しました。

形式は会場を巻き込んだパネルディスカッション形式で、お酒やご飯を口にしながらラフな雰囲気で行われました。

登壇企業のデザインシステムの現状

freee株式会社
デザインシステムのUI/UXガイドライン「Groove」とUIコンポーネントライブラリ「Vibes」を整備しているとのことでした。
実際のデザインシステムのライブラリを見ることができました！

詳しくはfreee株式会社さんの記事をご覧ください。

弁護士ドットコム株式会社

弊社弁護士ドットコム株式会社ですが、複数のサービスを運営しており、その中の弁護士ドットコム、税理士ドットコム、クラウドサインの3つのサービスのデザイナーが1人ずつ登壇しました。
現在、各サービスそれぞれのデザインシステムを作成しています。

弁護士ドットコムの場合
・UIインベントリを作成し現状を把握
・「なぜ、デザインシステムが必要なのか？」を深掘り、課題を明確に
・デザイン原則・指針の作成

インナーブランディングを意図したワークショップで、ユーザーインタビューを元にターゲットのニーズを部署全体で深掘りし、ブランドパーソナリティを作成。
ブランドづくりの過程にプロデューサー・エンジニア・デザイナーが職種横断で関わる組織づくりを行う。


税理士ドットコムの場合
・UIインベントリを作成し現状を把握
・「なぜ、デザインシステムが必要なのか？」を明確に
・デザイン指針を作成
作る意義と作る方法を説明して事業部長の承認を得たのち事業部全体からアンケートを取り共通認識を獲得。マネージャーミーティングの場で経営理念と擦り合わせて決めた。

クラウドサインの場合
クラウドサインは、2つのプロダクトと対称的にプロダクト・チームの規模から見て、デザインシステムに大規模な投資はしないという選択をしている。
デザインの統一感などをドキュメント等ではなく、コミュニケーションで担保するという方針。

・UIインベントリを作成し現状を把握
・デザインが統一されていない箇所を探す→反映のサイクルを回す
インベントリーを元にデザインが統一されていない箇所を探し、月20% のラボ活動の時間を使って修正、反映するという事を行なっている。

ディスカッション

デザインシステムに関する悩みなどについてディスカッションが行われました。特に話題になったものを抜粋して紹介したいと思います。

【デザインシステムをやりたいが、業務の中でどうやって時間を確保している？】
・20%ルールがあるところは、その時間で行なっている。
・部活動のような自主的な活動からスタートして、ちょっとやってみたところで「実績出てるんです、拡大しましょう」というのも良いのでは？

【デザインシステムを作り、反映したことによる実際の売上の上昇率は？】デザインシステムが売上にどう貢献しているか、説明が難しいという話がありました。
それに対しては、売上よりも開発効率をあげる、コスト削減という観点で説明しているという会社が多かったようです。

他にも以下のような話題が出ました。
・デザインシステムはルールを厳格にしている？それともゆるく設定している？その理由は？
・ガイドラインに使い方のパターンは書いているか？
・指針をドキュメント化する時のコツ
・Atomic Designに従おうとすると破綻してしまう

感想

・参加者の会社が全員デザインシステムに実際に取り組んでいるため、質の高いディスカッションができました。
・参加者自身が経験して得たノウハウや事例を持っており、抱えている課題に対して仮説ではなくうちは実際にこんな事やってるよ！と教えてくれるのは大変ありがたいです。
・Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイドの監訳者の佐藤伸哉さんから直接お話を聞く事ができるとても良い機会でした。