Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,175 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

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

  1. 1. で デザインシステムの課題は人なんだと痛感した話 株式会社サイバーエージェント 五藤 佑典 - designsystems.tokyo🗼 #Clarity2019 Redux in Tokyo -
  2. 2. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ ● California State University, San Bernardino グラフィックデザイン専攻 ● ソフトウェアエンジニア @ サイバーエージェント ● 株式会社 AbemaTV 開発本部 ○ New Device チーム あらゆるデバイスにAbemaTV を展開するための技術を提供するチーム ○ Streaming Client チーム AbemaTV の再生品質を軸にUX エンジニアリングにコミットするチーム ○ 動画技術エバンジェリスト 世界各国に足を運び動画技術に関する情報をキャッチアップし、 社内外の動画サービスの発展に貢献するロール ○ DesignOps 推進バックエンド 大規模組織でスケールできるプロダクトデザイン開発組織の構築する活動
  3. 3. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_
  4. 4. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_
  5. 5. サンフランシスコ開催の に行ってきました
  6. 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. 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 デザインシステムのカンファレンス
  8. 8. 前日は Microsoft のオフィスで参加登録 被写体可否を可視化するデザイン
  9. 9. メイン会場は Yerba Buena Center of the Arts 朝食/昼食付き(Thank you, InVisionApp)
  10. 10. 見覚えがある会社のブースが並ぶ
  11. 11. InVision design systems expert とのミーティング Haiku の新プロダクト Diez のデモ
  12. 12. 最終日の夜は SFMOMA で After Party
  13. 13. 主催者 Jina はひっきりなしに話しかけられてパーティー中も忙しそうだった 僕はパーティー中に Brad Frost さん本人に自分の著書を手渡しで献本できて満足
  14. 14. After Party で参加者と話した所感 ● 大きな会社から(意外と)フリーランスまでさまざまな人がいた ○ 大きな会社は戦略的にデザインシステム専任チームを設置 ■ フェーズによってプロダクトチームとのサイズのバランスを調整 ○ 少人数案件でも効率的にまわすために適切な粒度のデザインシステムを 構築するケース ● 話した人はデザイナーと名乗る人ばかりだったが... ○ UI コンポーネントのインターフェースをコードでデザインしている、など デザイナーという言葉が指すスコープは広い
  15. 15. デザインシステムと一言に言っても いろんな形があるんだなぁ
  16. 16. 名前に「デザイン」と付いているが、デザイナーだけのためのモノではなく、エンジニ ア、PM、経営者、コンテンツ制作者、広告、営業ほかサービスを作る全ての人のため に作るモノ。 デザインシステムとは『モノを作る人のために作るモノ』 AbemaTV 開発本部で定義したもの
  17. 17. Why: 何のために作っているの? ● 人が増えても一定のデザイン品質を保ちたい ● デザインの変更速度を上げたい ● 複数の問題に対する課題解決を促したい
  18. 18. What: 何を作っているの?何を作っていくの? ● 共通価値観 ○ デザインビジョン ● 共通言語 ○ デザインレビューの観点 ○ デザイン原則 ○ 命名規則 ○ 用語集
  19. 19. What: 何を作っているの?何を作っていくの? ● 共有リソース ○ デザインパターンライブラリ(デザイン的解決方法の一覧) ○ コンポーネントライブラリ(実装済のデザイン的解決方法の一覧) ○ デザイントークン(デザインに関する情報全般、色やフォントサイズ等) ● デザイン戦略 ○ ロードマップ ○ OKR ○ 負債を抱える条件と返済戦略の明文化
  20. 20. What: 何を作っているの?何を作っていくの? ● 共通の実行体制 ○ ワークフロー ■ Story-Assured Design など
  21. 21. How: 長く暗中模索ながら 自分たちに必要なデザインシステムを構築中
  22. 22. 他者が実践したようにプラクティスを模倣しても ワークしないということに課題感を持ちながら
  23. 23. 他者が実践したようにプラクティスを模倣しても ワークしないということに課題感を持ちながら Clarity 2019 に参加
  24. 24. A slide from “Where We Can Go” by Daniel Eden
  25. 25. 納得。
  26. 26. 人によってデザインシステムの捉え方は異なる
  27. 27. 人によってデザインシステムの捉え方は異なる 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
  28. 28. 人によってデザインシステムの捉え方は異なる A design system is the story of how your organization makes products. Brad Frost
  29. 29. 人によってデザインシステムの捉え方は異なる 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
  30. 30. 人によってデザインシステムの捉え方は異なる A design system is, at its foundation, a set of rules. Mina Markham
  31. 31. 捉え方が人によって違うのは・・・ 必要になるデザインシステムの形が組織の文化によって違うから
  32. 32. デザインシステムに関するツールは世の中にたくさんある ● Abstract ● Figma ● InVision ● Zeroheight ● Storybook ● Interplay ● Modulz ● Webflow …
  33. 33. デザインシステムに関するツールは世の中にたくさんある ● Abstract ● Figma ● InVision ● Zeroheight ● Storybook ● Interplay ● Modulz ● Webflow … 自分たちの組織文化にそのままぴったし合う なんてツールはなかなかない
  34. 34. デザインシステムをモノを作るときのルールと捉える
  35. 35. デザインシステムをモノを作るときのルールと捉える A design system is, at its foundation, a set of rules. Mina Markham
  36. 36. デザインシステムをモノを作るときのルールと捉える ルールと聞くと自由にモノ作りができなくなりそう
  37. 37. デザインシステムをモノを作るときのルールと捉える ルールと聞くと自由にモノ作りができなくなりそう クリエイティビティを失いそう
  38. 38. ルールはクリエイティビティを阻害しない ● ルールはプロダクトの創り方を規制する ● ルールとクリエイティビティは相互排他的ではない ● ルールは破ることができる
  39. 39. ルールはクリエイティビティを阻害しない ● ルールはプロダクトの創り方を規制する ● ルールとクリエイティビティは相互排他的ではない ● ルールは破ることができる 守るべきところを守る
  40. 40. ルールはクリエイティビティを阻害しない ● ルールはプロダクトの創り方を規制する ● ルールとクリエイティビティは相互排他的ではない ● ルールは破ることができる クリエイティブなレイヤーを作る
  41. 41. 一貫性の上にクリエイティブなレイヤーを作る 一貫性がある基礎 クリエイティブな レイヤー クリエイティブな レイヤー クリエイティブな レイヤー 検証された UI 表現力に溢れる ビジュアル
  42. 42. 一貫性の上にクリエイティブなレイヤーを作る 一貫性がある基礎 クリエイティブな レイヤー クリエイティブな レイヤー クリエイティブな レイヤー 例) アクセシビリティが 検証された UI 表現力に溢れる ビジュアル
  43. 43. ルールはクリエイティビティを阻害しない ● ルールはプロダクトの創り方を規制する ● ルールとクリエイティビティは相互排他的ではない ● ルールは破ることができる ルールが作られた理由を 正しく理解していれば 正しく破ることができる
  44. 44. ルールがクリエイティビティを加速させる例
  45. 45. Denise Jacobs のメッセージ 意見に多様性があればあるほど クリエイティブなアイデアは 生まれる
  46. 46. ルールがないブレインストーミング ● 声が大きい人の意見が一番注目されがち ● ギークな人の意見に疲れて閉口してしまう
  47. 47. ルールでクリエイティビティを生み出すワーク Story by Suggestion ● Make spaces in the story for the listeners to give a word
  48. 48. 多様性がある意見を混ぜることが強いクリエイティビティを作る ● Start where you are ● Accept the offer ● Fully commit ● The response: Yes&
  49. 49. システムは文化から生まれる
  50. 50. システムは文化から生まれる デザインシステムはモノをグループで作ろうとしている人々の文化から生まれる 例えばデザインレビューは デザイン品質を組織で一定以上に保ちたいと 考える人々から自然に生まれるシステム化 できる文化
  51. 51. 文化とは 特定のグループにいる人々の間で
  52. 52. 文化とは 信念 振舞 性質対象 特定のグループにいる人々の間で
  53. 53. 文化とは 信念 振舞 性質対象 特定のグループにいる人々の間で が共有されている状態
  54. 54. Gap Stitch Design System に学ぶ 文化構築のノウハウ
  55. 55. デザインシステムの始まり デザインレビュー ● 組織が小さいうちはワークする ● スケールしない ○ 品質を担保しようとするとミーティングが多くなりすぎる
  56. 56. デザインシステムの要素によって作る文化 共有リソーススタイルライブラリ 共通価値観組織標準 共通言語ドキュメンテーション 方向性の共通認識ロードマップ
  57. 57. デザインシステムの要素によって作る文化 共有理解コミュニケーション戦略 共有資本貢献 共通の実行体制ガバナンス
  58. 58. 繰り返して反復する デザインシステムの要素は 1 つずつ完成させていこうとしてはいけない ● 組織が成長すれば文化も変わる ○ 組織の成長に従事することが大事 ● 感情的な成長も含めて従事する 共有 リソース 共通 価値観 共通 言語 方向性の 共通認識 共通理解 共有資本 共通の 実行体制
  59. 59. 組織文化とデザインシステムは相互作用の関係 組織文化がデザインシステムを作り、デザインシステムが組織文化を作る 共有 リソース 共通 価値観 共通言語 方向性の 共通認識 共通理解 共有資本 共通の 実行体制 スタイル ライブラリ 標準 ドキュメン テーション ロードマッ プ コミュニケーショ ン戦略 貢献 ガバ ナンス
  60. 60. 文化を作るための活動 ● デザインレビュー ● オフィスアワー ● 他チームへの派遣や選抜 ● デザインスプリント ● ジャーニーマップ ● ペア作業 ● 外部向けのコミュニケーション ● スコアカード ● Build / Measure / Learn
  61. 61. 文化を作るための活動 ● デザインレビュー ● オフィスアワー ● 他チームへの派遣や選抜 ● デザインスプリント ● ジャーニーマップ ● ペア作業 ● 外部向けのコミュニケーション ● スコアカード ● Build / Measure / Learn ● ロイヤリティが高いメンバーを 他チームへの派遣 ● チームに貢献しながら、 ニーズを理解する 一番効果的
  62. 62. 文化を作るための活動 ● デザインレビュー ● オフィスアワー ● 他チームへの派遣や選抜 ● デザインスプリント ● ジャーニーマップ ● ペア作業 ● 外部向けのコミュニケーション ● スコアカード ● Build / Measure / Learn ● 共通コンポーネントや ドキュメンテーションの利便性や品質 を採点する ● 誰かがデザインシステムの門番的 になってしまうのを防止する
  63. 63. 文化を作るための活動 ● デザインレビュー ● オフィスアワー ● 他チームへの派遣や選抜 ● デザインスプリント ● ジャーニーマップ ● ペア作業 ● 外部向けのコミュニケーション ● スコアカード ● Build / Measure / Learn ● 作っている中で完結しない ● 外部の人にやっていることを 共有する 地味に大事
  64. 64. デザインをする者の責任
  65. 65. 「デザインには力がある」 The World-Wide Work by Ethan Marcotte
  66. 66. Power = the ability to exert influence; to change behavior デザインには力(Power)がある It's all too easy to design something that excludes people.
  67. 67. デザインには力がある = デザインする側の人間は力を持っている Robert Moses a.k.a. New York の Master Builder の高架橋デザイン
  68. 68. デザインには力がある = デザインする側の人間は力を持っている ピンク = 貧困地域 緑 = High speed fiber network
  69. 69. デザインには力がある = デザインする側の人間は力を持っている
  70. 70. デザインする側の人間は力を持っている 力を持った人間には責任がある
  71. 71. システム自体もデザインされる
  72. 72. システムをデザインする = デザインシステムに力を与えることになる 共有 リソース 共通 価値観 共通言語 方向性の 共通認識 共通理解 共有資本 共通の 実行体制 スタイル ライブラリ 標準 ドキュメン テーション ロードマッ プ コミュニケーショ ン戦略 貢献 ガバ ナンス
  73. 73. デザインシステムに間違った方向の力を与えれば 共有 リソース 共通 価値観 共通言語 方向性の 共通認識 共通理解 共有資本 共通の 実行体制 スタイル ライブラリ 標準 ドキュメン テーション ロードマッ プ コミュニケーショ ン戦略 貢献 ガバ ナンス
  74. 74. デザインシステムに間違った方向の力を与えれば 共有 リソース 共通 価値観 共通言語 方向性の 共通認識 共通理解 共有資本 共通の 実行体制 スタイル ライブラリ 標準 ドキュメン テーション ロードマッ プ コミュニケーショ ン戦略 貢献 ガバ ナンス 組織も間違った方向に成長する
  75. 75. 悪循環の成長 共有 リソース 共通 価値観 共通言語 方向性の 共通認識 共通理解 共有資本 共通の 実行体制 スタイル ライブラリ 標準 ドキュメン テーション ロードマッ プ コミュニケーショ ン戦略 貢献 ガバ ナンス
  76. 76. 悪循環の成長 共有 リソース 共通 価値観 共通言語 方向性の 共通認識 共通理解 共有資本 共通の 実行体制 スタイル ライブラリ 標準 ドキュメン テーション ロードマッ プ コミュニケーショ ン戦略 貢献 ガバ ナンス 構築することだけでなく システム化された後の組織が持つリスクと責任を考えることを 促される
  77. 77. まとめ ● デザインシステムは人に関する課題が 9 割 ● デザインシステムの捉え方は人によって異なる ● デザインシステム = ルールという捉え方もある ● ルールでクリエイティビティを加速させることができる ● 組織文化がデザインシステムを作り、デザインシステムが組織文化を作る ● デザインには力があり、デザインする者には正しく使う責任がある ● システムもデザインされるもの。正しくデザインしよう
  78. 78. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ ありがとうございました

×