Clarity 2019 で デザインシステムの課題は人なんだと痛感した話
•
2 likes•3,405 views
The presentation tells what I learned from Clarity 2019, which is that most of the issues you face when you build a design system are about people.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Clarity 2019 で デザインシステムの課題は人なんだと痛感した話
Similar to Clarity 2019 で デザインシステムの課題は人なんだと痛感した話 (20)
More from Yusuke Goto
More from Yusuke Goto (20)
Clarity 2019 で デザインシステムの課題は人なんだと痛感した話
- 1. で デザインシステムの課題は人なんだと痛感した話 株式会社サイバーエージェント 五藤 佑典 - designsystems.tokyo🗼 #Clarity2019 Redux in Tokyo -
- 2. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ ● California State University, San Bernardino グラフィックデザイン専攻 ● ソフトウェアエンジニア @ サイバーエージェント ● 株式会社 AbemaTV 開発本部 ○ New Device チーム あらゆるデバイスにAbemaTV を展開するための技術を提供するチーム ○ Streaming Client チーム AbemaTV の再生品質を軸にUX エンジニアリングにコミットするチーム ○ 動画技術エバンジェリスト 世界各国に足を運び動画技術に関する情報をキャッチアップし、 社内外の動画サービスの発展に貢献するロール ○ DesignOps 推進バックエンド 大規模組織でスケールできるプロダクトデザイン開発組織の構築する活動
- 6. Clarity Clarity is a design systems conference focused on how we work together. We provide tools and standards to scale across an increasing number of devices, platforms, and products. But real success comes when people align around a shared vision and language. Diverse perspectives for design, development, and product unite so more people can be a part of the conversation. At Clarity, we elevate our skills through multi-faceted inclusion, empathy, technology, creativity, and collaboration. https://www.clarityconf.com/2019 デザインシステムのカンファレンス
- 7. Clarity Clarity is a design systems conference focused on how we work together. We provide tools and standards to scale across an increasing number of devices, platforms, and products. But real success comes when people align around a shared vision and language. Diverse perspectives for design, development, and product unite so more people can be a part of the conversation. At Clarity, we elevate our skills through multi-faceted inclusion, empathy, technology, creativity, and collaboration. https://www.clarityconf.com/2019 デザインシステムのカンファレンス
- 9. メイン会場は Yerba Buena Center of the Arts 朝食／昼食付き（Thank you, InVisionApp）
- 10. 見覚えがある会社のブースが並ぶ
- 12. InVision design systems expert とのミーティング Haiku の新プロダクト Diez のデモ
- 13. 最終日の夜は SFMOMA で After Party
- 14. 主催者 Jina はひっきりなしに話しかけられてパーティー中も忙しそうだった 僕はパーティー中に Brad Frost さん本人に自分の著書を手渡しで献本できて満足
- 15. After Party で参加者と話した所感 ● 大きな会社から（意外と）フリーランスまでさまざまな人がいた ○ 大きな会社は戦略的にデザインシステム専任チームを設置 ■ フェーズによってプロダクトチームとのサイズのバランスを調整 ○ 少人数案件でも効率的にまわすために適切な粒度のデザインシステムを 構築するケース ● 話した人はデザイナーと名乗る人ばかりだったが... ○ UI コンポーネントのインターフェースをコードでデザインしている、など デザイナーという言葉が指すスコープは広い
- 19. Why: 何のために作っているの？ ● 人が増えても一定のデザイン品質を保ちたい ● デザインの変更速度を上げたい ● 複数の問題に対する課題解決を促したい
- 20. What: 何を作っているの？何を作っていくの？ ● 共通価値観 ○ デザインビジョン ● 共通言語 ○ デザインレビューの観点 ○ デザイン原則 ○ 命名規則 ○ 用語集
- 21. What: 何を作っているの？何を作っていくの？ ● 共有リソース ○ デザインパターンライブラリ（デザイン的解決方法の一覧） ○ コンポーネントライブラリ（実装済のデザイン的解決方法の一覧） ○ デザイントークン（デザインに関する情報全般、色やフォントサイズ等） ● デザイン戦略 ○ ロードマップ ○ OKR ○ 負債を抱える条件と返済戦略の明文化
- 22. What: 何を作っているの？何を作っていくの？ ● 共通の実行体制 ○ ワークフロー ■ Story-Assured Design など
- 26. A slide from “Where We Can Go” by Daniel Eden
- 28. 納得。
- 30. 人によってデザインシステムの捉え方は異なる A design system is a collection of reusable components, guided by clear standards, then can be assembled together to build any number of applications. Marco Suarez
- 31. 人によってデザインシステムの捉え方は異なる A design system is the story of how your organization makes products. Brad Frost
- 32. 人によってデザインシステムの捉え方は異なる Design systems are not just about style guides, component libraries, UI kits, etc. A good design system empowers change in your company culture. Jina Anne
- 33. 人によってデザインシステムの捉え方は異なる A design system is, at its foundation, a set of rules. Mina Markham
- 35. デザインシステムに関するツールは世の中にたくさんある ● Abstract ● Figma ● InVision ● Zeroheight ● Storybook ● Interplay ● Modulz ● Webflow …
- 37. デザインシステムに関するツールは世の中にたくさんある ● Abstract ● Figma ● InVision ● Zeroheight ● Storybook ● Interplay ● Modulz ● Webflow … 自分たちの組織文化にそのままぴったし合う なんてツールはなかなかない
- 39. デザインシステムをモノを作るときのルールと捉える A design system is, at its foundation, a set of rules. Mina Markham
- 42. ルールはクリエイティビティを阻害しない ● ルールはプロダクトの創り方を規制する ● ルールとクリエイティビティは相互排他的ではない ● ルールは破ることができる
- 43. ルールはクリエイティビティを阻害しない ● ルールはプロダクトの創り方を規制する ● ルールとクリエイティビティは相互排他的ではない ● ルールは破ることができる 守るべきところを守る
- 44. ルールはクリエイティビティを阻害しない ● ルールはプロダクトの創り方を規制する ● ルールとクリエイティビティは相互排他的ではない ● ルールは破ることができる クリエイティブなレイヤーを作る
- 47. ルールはクリエイティビティを阻害しない ● ルールはプロダクトの創り方を規制する ● ルールとクリエイティビティは相互排他的ではない ● ルールは破ることができる ルールが作られた理由を 正しく理解していれば 正しく破ることができる
- 51. ルールでクリエイティビティを生み出すワーク Story by Suggestion ● Make spaces in the story for the listeners to give a word
- 52. 多様性がある意見を混ぜることが強いクリエイティビティを作る ● Start where you are ● Accept the offer ● Fully commit ● The response: Yes&
- 53. システムは文化から生まれる
- 58. Gap Stitch Design System に学ぶ 文化構築のノウハウ
- 59. デザインシステムの始まり デザインレビュー ● 組織が小さいうちはワークする ● スケールしない ○ 品質を担保しようとするとミーティングが多くなりすぎる
- 62. 繰り返して反復する デザインシステムの要素は 1 つずつ完成させていこうとしてはいけない ● 組織が成長すれば文化も変わる ○ 組織の成長に従事することが大事 ● 感情的な成長も含めて従事する 共有 リソース 共通 価値観 共通 言語 方向性の 共通認識 共通理解 共有資本 共通の 実行体制
- 64. 文化を作るための活動 ● デザインレビュー ● オフィスアワー ● 他チームへの派遣や選抜 ● デザインスプリント ● ジャーニーマップ ● ペア作業 ● 外部向けのコミュニケーション ● スコアカード ● Build / Measure / Learn
- 65. 文化を作るための活動 ● デザインレビュー ● オフィスアワー ● 他チームへの派遣や選抜 ● デザインスプリント ● ジャーニーマップ ● ペア作業 ● 外部向けのコミュニケーション ● スコアカード ● Build / Measure / Learn ● ロイヤリティが高いメンバーを 他チームへの派遣 ● チームに貢献しながら、 ニーズを理解する 一番効果的
- 66. 文化を作るための活動 ● デザインレビュー ● オフィスアワー ● 他チームへの派遣や選抜 ● デザインスプリント ● ジャーニーマップ ● ペア作業 ● 外部向けのコミュニケーション ● スコアカード ● Build / Measure / Learn ● 共通コンポーネントや ドキュメンテーションの利便性や品質 を採点する ● 誰かがデザインシステムの門番的 になってしまうのを防止する
- 67. 文化を作るための活動 ● デザインレビュー ● オフィスアワー ● 他チームへの派遣や選抜 ● デザインスプリント ● ジャーニーマップ ● ペア作業 ● 外部向けのコミュニケーション ● スコアカード ● Build / Measure / Learn ● 作っている中で完結しない ● 外部の人にやっていることを 共有する 地味に大事
- 68. デザインをする者の責任
- 69. 「デザインには力がある」 The World-Wide Work by Ethan Marcotte
- 70. Power = the ability to exert influence; to change behavior デザインには力（Power）がある It's all too easy to design something that excludes people.
- 71. デザインには力がある ＝ デザインする側の人間は力を持っている Robert Moses a.k.a. New York の Master Builder の高架橋デザイン
- 72. デザインには力がある ＝ デザインする側の人間は力を持っている ピンク = 貧困地域 緑 = High speed fiber network
- 75. システム自体もデザインされる
- 81. まとめ ● デザインシステムは人に関する課題が 9 割 ● デザインシステムの捉え方は人によって異なる ● デザインシステム ＝ ルールという捉え方もある ● ルールでクリエイティビティを加速させることができる ● 組織文化がデザインシステムを作り、デザインシステムが組織文化を作る ● デザインには力があり、デザインする者には正しく使う責任がある ● システムもデザインされるもの。正しくデザインしよう