Design Systems community conference 「Clarity2019」 報告会に参加してきた

9/24にdesignsystems.tokyo主催のサイバーエージェントさんで開催されたds.t #Clarity2019 Redux in Tokyoに参加してきました。
   
この会はClarity2019というデザインシステムのカンファレンスに参加してきた人たちの報告会です。

ハッシュタグは、#designsystems_tokyo なのでこれでツイッター検索すると実況が追えます。

Clarityとは

まずClarityというカンファレンスはなんなのか？という話がありました.

元々ClarityはDesign Systems Coalitionという名前のカンファレンスでした。
なのでこのClarityも主にDesign Systemsについて語る会です。

Google,Salesforce,AirBnB,Facebook,Slackなど著名な企業が登壇などしていて、デザインシステムのカンファレンスとして一番大きなイベントで、Googleのマテリアルデザインはこのイベントに向けて大きな発表を準備してたりもするらしいです。

参加者としては、いわゆるデザイナー、PM、フロントエンドエンジニアが多く、デザインに関わる人たちが多いらしいです。

詳しくは公式サイトをどうぞ。

Clarity ’19 Recap

登壇者：Paya Do
資料：https://docs.google.com/presentation/d/17DxccbQZOsjaQQNPLTLYxwnRBAx6LhOLXy4DTiOo5k4/edit#slide=id.g5a73ded19e_2_50

Clarity 2019 recap — A design systems conference に以前書かれていた記事+αの内容なので、この記事を読むのが一番よいです、自分が聞いて抜粋したいと思ったとこだけまとめます、

アクセシビリティ

- デザインシステムは文化に近く、組織に根付くものになる
- アクセシビリティが考慮されていないデザインシステムは、長い間アクセシビリティを忘れる組織にしてしまう可能性がある!
- デザインシステムを構成する際は、アクセシビリティを忘れないことが重要
- ブラウザごとのpaddingを考慮できていない例などの紹介
- FireFoxを対応するために、タグを挟む対応をするとスクリーンリーダーが正しく読み上げることができない
- 詳しくは以前このThe World-Wide Workという動画で語られてるらしいです

Design Tokens

- SalesforceではDesign Tokensを策定した。
- Design Tokensとは、フォント、カラー、スペースなどカスマイズ不可能なもの
- Atomic Designを考案したBrad Frost(このイベントの司会でもある)も提唱している
https://bradfrost.com/blog/post/extending-atomic-design/

Clarity 2019 で デザインシステムの課題は人なんだと痛感した話

登壇者：五藤 佑典 さん

資料 :
https://www.slideshare.net/ygoto3q/clarity-2019-recap

- カンファレンス参加者は「デザイナー」と名乗る人が多かったらしい
- UIを実装する人、デザインを作っている人、デザインを考えるのに関わる人(PM的な)も全員デザイナーと名乗ってた
- デザイナーというスコープが広くなっている
- デザインシステムは90%はユーザーのため。10%は開発者のため。
- 自分は開発効率が上がることや、デザインが揃ってデザイン効率が上がる部分について考えることが多かったので、ユーザーのためになるデザインシステムについてはあまり考えてなかったなと思う
- デザインシステムは文化、ルール
- PM、エンジニア、デザイナー、関わる人全員に浸透しておく必要がある
- Gapはデザインシステムについての動画を作ったりするなど、文化を形成する部分にかなり力を入れてたりする

懇親会で聞いたこと

個人的にはデザインシステムを長年開発されたプロジェクトに入れるにはどうすればいいかな〜と思って懇親会でデザイナーさん達に聞きました。
(ここはざっくり覚えてる内容です)

Q.
デザインシステム入れるとして、どの部分からデザイン置き換えればいいでしょうか?

A.
ユーザーストーリー的に一番重要な部分からやればいいと思う、ユーザーのインパクトが大きい導線を整えることがまずは大事。
他には更新頻度が少ない画面は、手が入れやすいかも。

Q.
デザインシステムはなにからやればいいのか？

A.
まずは色やフォントなどDesign Tokenからやるとよさそう.

* 先日サイバーエージェントさんが記事を書かれていたのが参考になる内容でした。
プロダクトの「色」と向き合う「デザインとエンジニアリング」

大事なのは命名した理由やルールが分かりやすくあること。
例えば先ほどのSalesforceのデザインシステムも色に説明があります.

その他雑談
- ある企業ではまず社内のアプリケーションでデザインシステムに取り組んだという話を聞きました
- Design変更の承認がとりすい、みんな使ってくれるのでデザインシステムはなんたるかを広めるのによかった

まとめ

Clarity2019という存在自体知らなかったのですが、報告会をしてくれた達が、会場の雰囲気や楽しさを語ってくれたので、行ってみたいという気持ちになりました。

パネルディスカッションもあったのですが、なにもメモ等とっていなかったので割愛します。

ざっくり覚えている部分だったので間違えてたら教えていただきたいです。

報告会を開いてくれたみなさんありがとうございました。