ds.t #Clarity2019 Redux in Tokyo
https://gyazo.com/b49f20324023f006678df25b5cc392a8
https://designsystems.connpass.com/event/146709/
designsystems_tokyoについて
https://designsystems.tokyo/
designsystems.tokyo - connpass
ガチなデザインシステムの勉強会
全員が発表者というスタンス
主に事業会社で構成
16社の持ち回り
Clarity Conferenceについて
デザインシステムのカンファレンス
2019年で4回目
Design Systems Coalition
前身のイベント
https://design.systems/coalition/
デザインシステムのツールが増えたのはこうした機会で議論されて開発された背景がある
Clarity Conference'19 recap
https://docs.google.com/presentation/d/17DxccbQZOsjaQQNPLTLYxwnRBAx6LhOLXy4DTiOo5k4/edit?usp=sharing
Paya Do
Clarity 2019 recap — A design systems conference - Paya Do - Medium
今回のClarityではAtomic Design作者のBrad FrostがMCをやった
Design Systemは単なるUIコンポーネント集ではない
人々のための人々によるもの
Tools
Figma
リアルタイム編集
アセット管理
UIが複雑
アニメーションがない
Interplay
React.js, Vue.jsサポート
まだ無料
invision
DSM
sketch、Storybookとシンク出来る
エンタープライズ向けなので高い
Abstract
デザイナー向けのGitHub、デザインのバージョン管理
ツールのトレンド
ビジュアライゼーション
オートメーション
ローコストでのドキュメント化
デザイナー・エンジニア・PMがそれぞれでオーナーシップがもてる
Design Tokens, Partnership & Trust, Growth
Design Token = CSS variables
全部のコンポーネントを変えるのはすごいコスト
デザイントークンだけ変えるようにコスト管理するようにしたい
カスタマイズ可能かそうでないかで分離する
https://t.co/H0y8V3B0nx?amp=1
パートナーシップ
「重要なのは人」という話
Trust & Growth
長年やってるがなかなか終わってない
オフィスアワーという相談する時間をつくってチームのサポートする
Accessibility for design system
健常者、障害者というカテゴライズだけではなくもっと包括的に利用者について考える
paddingによってブラウザのスクリーンリーダーが取得できないこともある
The World-Wide Work on Vimeo
spanで見た目を調整すると聞けなくなることがある
最近のUI Componentsの問題
フォーカスが当たらない
コントラスト比が低い
altや説明文が入れられない
i18n対応
各言語の仕様に合わないことに気づいた
まず文化を理解する
コンテキストが悪いのではなく、文化を理解する
Focus on user, not the technology
Next for Design System?
1970年のNY地下鉄がデザインシステムを作っていた
Best of Kickstarter: New York City Transit Authority Graphics Standards Manual – BOOOOOOOM! – CREATE * INSPIRE * COMMUNITY * ART * DESIGN * MUSIC * FILM * PHOTO * PROJECTS
デザイナーはガイドラインが好きだけど、もっと「なぜそうなっているか」を考慮しよう
GoogleのMaterial Designは自社で機能できているけど、各社で機能できているかは分からない
それぞれで必要な文脈があるので
アクセシビリティは重要
多くの人に享受できるものであるべきという視点
後付は大変
システムは人の文化に依存しやすい
軽んじていると、そこを改善するのは難しい
Clarity 2019でデザインシステムの課題は人なんだと痛感した話
https://www.slideshare.net/ygoto3q/clarity-2019-recap
ygoto3_
参加者
大企業
フリーランス
少人数で効率的にまわすためのデザインシステムを構築するために、フリーランスの方も参加
デザイナーと名乗る人が多かったが広義での、という感じだった
デザインシステムの定義
「モノを作る人のために作るモノ」
何のためにつくる?
人が増えても品質を保つ
変更速度を早める
複数の問題に対して課題解決
なにを作ってるの
共通価値観
共通言語
共通の実行体制
Design Systems are about People
90%は人に対すること、10%は仕事に対すること
人によって捉え方は異なる
再利用可能なコンポーネント
明確な標準化
アプリケーションをいくつも作ることが出来る
組織がどうやってプロダクトをつくるか
会社という組織を強くしていくためのもの
デザインシステムのツールは組織文化にフィットするものはまずない
ルールセット
自由なものづくりをしづらくなりそうな印象
クリエイティブを失いそう
そんなことはない
規制はするが守るべきところを守る
ルールとクリエイティブは相互排他的ではない
クリエイティブなレイヤーを作る
ルールは破ることが出来る
作られた理由を正しく知れば正しく破ることが出来る
ルールがないブレインストーミングは声が大きい人が注目されやすい
多様性がある意見を混ぜることでクリエイティブを発揮する
「そうだね、だから〜」という乗っかっていくルールでクリエイティブを発揮
システムは文化から生まれる
自然と生まれるものはシステム化できる
システム化できるものに注目する
文化とは
信念、振る舞い、対象、性質
デザインシステムの始まり
デザインレビュー
小さいうちはワークする
スケールできない
品質を保とうとするとMTGが多くなる
繰り返して反復していく
1つずつ完成させていこうとしてはいけない
成長すれば文化も変わる
感情的な成長も含めて従事
組織文化とデザインシステムは相互作用
デザインシステムの責務
デザインには力がある
人々の振る舞いを変えてしまう
高架橋でバスが通れないようなデザインをすると貧困層はそこを通れないことになる
システム自体にもデザインできる
間違った方向の力を与えると悪循環に成り得る
パネルディスカッション+Q&A
登壇者
Paya Do
株式会社メルカリ/デザインリサーチャー
ygoto3_
株式会社サイバーエージェント/エンジニア
谷拓樹
株式会社サイバーエージェント/UXエンジニア
丸 匠
株式会社サイバーエージェント/デザイナー
nobsato
株式会社シークレットラボ/代表取締役/デザインディレクター
使ってもらえるデザインシステムを作ろう
https://www.atlassian.design/
ユニークな名前が多い
Color - Atlassian Design
印象に残ったセクション
Responsive Web
生みの親Ethan Marcotteが登壇
https://vimeo.com/339383874
Adobe
モーションも考えよう
サービスに形容詞をつくろう
Design System I18n
インクルーシブについて強く意識
エクスクルーシブなデザインを作ってしまいがちな人はインクルーシブを意識しよう
サービスのエンドユーザーは誰?
デザイナーという捉え方について
UXエンジニアはデザインについても考えるが、日本はエンジニアという分け隔て方をしてる感
リサーチャーも同じ
Web寄りになってたのでクラスプラットフォーム感は薄かった
VUIをスケールするなら…?それは先の話すぎる?