小さく始めるDesign System /Design System

メドレー開発本部の社内勉強会「TechLunch」で発表した内容を掲載しました。 人材採用システムのジョブメドレーにおいて、Design Systemを「小さく始める」手法で導入を進めているので、そのプロセスについて紹介させていただきました。

発表者：舘野 真

Transcript

1. 小さく始めるDesign System
2. デザイン言語システムを入れたらコミュニケーショ ンコストがぐっと下がった話〜メドレー TechLunch〜 http://developer.medley.jp/entry/2017/08/03/160000
3. “ これまでのデザインガイドラインは単にカラーや マージンの定義を取り決めるだけだったのです が、 Airbnb ではデザイン言語として定義し、他の 言語と同じようにチームと共有し、エンジニア・デ ザイナー同士で理解できる設計を作り上げている といった内容でした。 ”
4. よさそう
5. スタイルガイドだけでは足りない部分がDesign Systemで補えそう
6. ジョブメドレーにおいて （デザインの領域は小山さんがいい感じにやってくれるとして） フロントエンドの領域でDesign Systemをどのように捉えて どうやって取り込んでいくか
7. …etc
8. ジョブメドレーでDesign System導入すると 改善できそうなこと
9. ジョブメドレーでDesign System導入すると改善できそうなこと - 求職者側PC、求職者側SP、採用管理画面、etc… それぞれ別々でCSS/JSを書い てる
10. ジョブメドレーでDesign System導入すると改善できそうなこと - 求職者側PC、求職者側SP、採用管理画面、etc… それぞれ別々でCSS/JSを書い てる - CSSに記述している値に一貫性、規則性がない
11. ジョブメドレーでDesign System導入すると改善できそうなこと - 求職者側PC、求職者側SP、採用管理画面、etc… それぞれ別々でCSS/JSを書い てる - CSSに記述している値に一貫性、規則性がない - スタイルガイドの長期的な運用
12. ジョブメドレーでDesign System導入すると改善できそうなこと - 生産性　Productivity - 一貫性　Consistency - 持続可能性　Sustainability
13. Productivity 生産性
14. Productivity 生産性 - 何回ボタンのCSSを書き続け、これから先何回ボタンのCSSを書き続けるのか - ジョブメドレー全体を通して、ボタンに限らず全てのUIパーツで、どれだけ再利用せ ずに新たなCSSが増殖し続けているのか
15. Consistency 一貫性
16. Consistency 一貫性 - paddingやmargin、border-radius、duration、font-size等、あらゆる値に一貫性、規 則性がない
17. Sustainability 持続可能性 引用元： https://medium.com/@marcintreder/the-minimum-viable-design-system-75ca1806848a
18. Sustainability 持続可能性 “Before the style guide was done, it already turned into a zombie.” Marcin Treder / UXPin https://medium.com/@marcintreder/the-minimum-viable-design-system-75ca1806848a スタイルガイドは作り終わる前にゾンビに変わってる
19. Sustainability 持続可能性 - 常に変化し続けるデザインにスタイルガイドを同期し続けるのは困難
20. Design System とは
21. Design System とは Salesforce Lightning Design System https://www.lightningdesignsystem.com
22. Design System とは Primer http://primer.github.io/
23. Design System とは IBM CARBON DESIGN SYSTEM http://carbondesignsystem.com/
24. Design System とは Atlassian Design Language https://atlassian.design/
25. Design System とは eBay Skin https://ebay.github.io/skin/
26. Design System とは “Rules, constraints, and principles, implemented in design and code.” Diana / Github https://speakerdeck.com/broccolini/design-systems-when-and-how-much デザインシステムは、デザインとコードで実装されたルール、制約、原則のこと
27. Design System とは “A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.” Nathan Curtis / eightshapes https://twitter.com/nathanacurtis/status/656829204235972608 スタイルガイドはデザインの過程での遺物 デザインシステムはエコシステムを供給するプロダクト
28. Design System とは “A Design System isn’t a Project. It’s a Product, Serving Products.” Nathan Curtis / eightshapes https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935 デザインシステムはプロジェクトじゃなくて、プロダクトを供給するプロダクト
29. Design System とは 引用元： https://product-unicorn.com/design-systems-style-guides-all-those-libraries-what-the-hell-is-the-difference-4c2741193fdc
30. Design System とは 引用元： https://medium.com/@marcintreder/design-systems-sprint-1-the-interface-inventory-1f78d376e49a
31. Design System とは 引用元： https://speakerdeck.com/broccolini/design-systems-when-and-how-much
32. どのようにDesign Systemを 導入していくか
33. ジョブメドレーでDesign System導入したら改善できそうなこと - 生産性　Productivity - 一貫性　Consistency - 持続可能性　Sustainability
34. ジョブメドレーでDesign System導入したら改善できそうなこと - 生産性　Productivity - 一貫性　Consistency - 持続可能性　Sustainability それぞれどのようにアプローチしていくか
35. Productivity 生産性 1. Interface Inventory 2. ジョブメドレー全体で共通しているUIパーツ、または共通化したいUIパーツをリスト 化 3. Design Systemに反映 4. npmで供給
36. Productivity 生産性 Interface Inventory 引用元： http://bradfrost.com/blog/post/interface-inventory/
37. Productivity 生産性 “An interface inventory is a comprehensive collection of the bits and pieces that make up your interface.” Brad Frost http://bradfrost.com/blog/post/interface-inventory/ Interface Inventoryとは、プロダクトのインターフェースを作り上げている部品の包括的な 収集のこと
38. Productivity 生産性 Interface Inventory ジョブメドレー全体で共通しているUIパーツ、または共通化したいUIパーツをリスト化
39. Productivity 生産性 Design Systemに反映
40. Productivity 生産性 npmで供給
41. Consistency 一貫性 1. デザインで使う値をデザイナーから貰う 2. Design Tokensを作成 3. npmで供給
42. Consistency 一貫性 Design Tokens "We define our design in a single location and use a system to cascade it down to all platforms. We call it our Single Source of Truth." Sönke Rohde http://thibault.mahe.io/talks/design-tokens/#17 信頼できる唯一の情報源
43. Consistency 一貫性 Design Tokens 1つの場所で定義したデザインの値 を全てのプラットフォームで参照でき るフォーマットで提供する 引用元： https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421
44. Consistency 一貫性 Theo Salesforceが開発してるDesign Tokensの管理ツール https://github.com/salesforce-ux/theo
45. Consistency 一貫性 Theo Theoでymlから各プラット フォーム向けフォーマットで Design Tokensを出力する 引用元： https://www.slideshare.net/developerforce/introducing-the-salesforce-lightning-design-system
46. Sustainability 持続可能性 1. Design Systemをプロダクトとして扱うようにマインドを変える 2. スタイルガイドをプロダクトチーム全員が見られる場所に置く 3. 継続してメンテナンスする
47. Sustainability 持続可能性 Design Systemをプロダクトとして扱うようにマインドを変える 引用元： https://medium.com/@marcintreder/the-minimum-viable-design-system-75ca1806848a
48. Sustainability 持続可能性 スタイルガイドをプロダクトチーム全員が見られる場所に置く
49. Sustainability 持続可能性 継続してメンテナンスする
50. ジョブメドレーの Design Systemのイメージ
51. ジョブメドレーの Design Systemのイメージ
52. 小さく始める
53. 小さく始める - 最初から一気に色々やらない - まずは一部だけ導入してみる - 上手くいく部分といかない部分を検証する - Design Systemの改善と段階導入を繰り返す
54. 小さく始める ジョブメドレー全体を通して共通して利用されるUIコンポーネント やDesign Tokens、Sass mixinなどから、Design Systemによって 供給した方が有用であると判断したものを、段階的にmonorepo 管理のリポジトリにnpmとして追加していく
55. 小さく始める 最初はレイアウト用のflexboxユーティリティと スペースのdesign tokenから始める
56. 小さく始める 採用管理画面のみ 5px, 10px, 15px, 20px… のような5の倍数だけど、それ以外は 8px, 16px, 24px, 32px… のように8の倍数のスペースのルール
57. 小さく始める 採用管理画面も将来的には8の倍数の スペースのルールに近い状態にすると 思うけど、それまでは採用管理画面の scssでスペースのtokenを上書きする
58. 小さく始める flexboxのユーティリティでは、 等間隔にflex itemを配置する際の スペースをdesign tokensから 利用する
59. 小さく始める storybookなりstyleguideが github pagesで誰でも見られる状態 にする
60. 小さく始める - Design Systemに反映した方がよいものがあれば、Design Systemにフィード バックしてDesign Systemのnpmから供給するようにしていく - 全部Design Systemから供給は無理だろうけど、新たにCSSを書き続けること を減らす CSS HTML Sketch
61. 小さく始める CSS HTML Sketch CSS HTML Sketch CSS HTML Sketch Design System
62. 小さく始める HTML CSS HTML Sketch CSS HTML Sketch Design System CSS Sketch Design System Feedback
63. 小さく始める HTML HTML CSS HTML Sketch Design System CSS Sketch Design System CSS Sketch Design System Feedback Feedback
64. 小さく始める CSS HTML Sketch CSS HTML Sketch CSS HTML Sketch Design System
65. - https://speakerdeck.com/broccolini/design-systems-when-and-how-much - http://thibault.mahe.io/talks/design-tokens/#1 - https://speakerdeck.com/broccolini/building-design-systems-at-github - https://speakerdeck.com/didoo/from-zero-to-cosmos - https://speakerdeck.com/mdo/build-your-own-bootstrap - http://bradfrost.com/blog/post/style-guide-driven-design-systems/ - https://github.com/alexpate/awesome-design-systems - https://medium.freecodecamp.org/how-to-build-a-design-system-with-a-small-team-53a3276d44ac - https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71 - https://adele.uxpin.com/ - https://github.com/opentable/design-tokens - http://bradfrost.com/blog/post/design-system-frictions/ - https://medium.com/@marcintreder/design-systems-sprint-0-the-silver-bullet-of-product-development-8c0ed83bf00d - https://medium.com/salesforce-ux/living-design-system-3ab1f2280ef7 - https://blog.prototypr.io/pattern-library-style-guides-design-systems-do-you-need-one-b7857af0f255 - https://speakerdeck.com/studiomohawk/design-system-as-a-product-at-frontrend-vol-dot-8 - https://github.com/salesforce-ux/theo - https://lernajs.io/ - https://primer.github.io/ - http://atomicdesign.bradfrost.com/chapter-1/ - https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421 - https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3 - http://bradfrost.com/blog/post/interface-inventory/ - https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935