Slide 1

Slide 1 text

小さく始めるDesign System

Slide 2

Slide 2 text

デザイン言語システムを入れたらコミュニケーショ ンコストがぐっと下がった話〜メドレー TechLunch〜 http://developer.medley.jp/entry/2017/08/03/160000

Slide 3

Slide 3 text

“ これまでのデザインガイドラインは単にカラーや マージンの定義を取り決めるだけだったのです が、 Airbnb ではデザイン言語として定義し、他の 言語と同じようにチームと共有し、エンジニア・デ ザイナー同士で理解できる設計を作り上げている といった内容でした。 ”

Slide 4

Slide 4 text

よさそう

Slide 5

Slide 5 text

スタイルガイドだけでは足りない部分がDesign Systemで補えそう

Slide 6

Slide 6 text

ジョブメドレーにおいて (デザインの領域は小山さんがいい感じにやってくれるとして) フロントエンドの領域でDesign Systemをどのように捉えて どうやって取り込んでいくか

Slide 7

Slide 7 text

…etc

Slide 8

Slide 8 text

ジョブメドレーでDesign System導入すると 改善できそうなこと

Slide 9

Slide 9 text

ジョブメドレーでDesign System導入すると改善できそうなこと - 求職者側PC、求職者側SP、採用管理画面、etc… それぞれ別々でCSS/JSを書い てる

Slide 10

Slide 10 text

ジョブメドレーでDesign System導入すると改善できそうなこと - 求職者側PC、求職者側SP、採用管理画面、etc… それぞれ別々でCSS/JSを書い てる - CSSに記述している値に一貫性、規則性がない

Slide 11

Slide 11 text

ジョブメドレーでDesign System導入すると改善できそうなこと - 求職者側PC、求職者側SP、採用管理画面、etc… それぞれ別々でCSS/JSを書い てる - CSSに記述している値に一貫性、規則性がない - スタイルガイドの長期的な運用

Slide 12

Slide 12 text

ジョブメドレーでDesign System導入すると改善できそうなこと - 生産性 Productivity - 一貫性 Consistency - 持続可能性 Sustainability

Slide 13

Slide 13 text

Productivity 生産性

Slide 14

Slide 14 text

Productivity 生産性 - 何回ボタンのCSSを書き続け、これから先何回ボタンのCSSを書き続けるのか - ジョブメドレー全体を通して、ボタンに限らず全てのUIパーツで、どれだけ再利用せ ずに新たなCSSが増殖し続けているのか

Slide 15

Slide 15 text

Consistency 一貫性

Slide 16

Slide 16 text

Consistency 一貫性 - paddingやmargin、border-radius、duration、font-size等、あらゆる値に一貫性、規 則性がない

Slide 17

Slide 17 text

Sustainability 持続可能性 引用元: https://medium.com/@marcintreder/the-minimum-viable-design-system-75ca1806848a

Slide 18

Slide 18 text

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 スタイルガイドは作り終わる前にゾンビに変わってる

Slide 19

Slide 19 text

Sustainability 持続可能性 - 常に変化し続けるデザインにスタイルガイドを同期し続けるのは困難

Slide 20

Slide 20 text

Design System とは

Slide 21

Slide 21 text

Design System とは Salesforce Lightning Design System https://www.lightningdesignsystem.com

Slide 22

Slide 22 text

Design System とは Primer http://primer.github.io/

Slide 23

Slide 23 text

Design System とは IBM CARBON DESIGN SYSTEM http://carbondesignsystem.com/

Slide 24

Slide 24 text

Design System とは Atlassian Design Language https://atlassian.design/

Slide 25

Slide 25 text

Design System とは eBay Skin https://ebay.github.io/skin/

Slide 26

Slide 26 text

Design System とは “Rules, constraints, and principles, implemented in design and code.” Diana / Github https://speakerdeck.com/broccolini/design-systems-when-and-how-much デザインシステムは、デザインとコードで実装されたルール、制約、原則のこと

Slide 27

Slide 27 text

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 スタイルガイドはデザインの過程での遺物 デザインシステムはエコシステムを供給するプロダクト

Slide 28

Slide 28 text

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 デザインシステムはプロジェクトじゃなくて、プロダクトを供給するプロダクト

Slide 29

Slide 29 text

Design System とは 引用元: https://product-unicorn.com/design-systems-style-guides-all-those-libraries-what-the-hell-is-the-difference-4c2741193fdc

Slide 30

Slide 30 text

Design System とは 引用元: https://medium.com/@marcintreder/design-systems-sprint-1-the-interface-inventory-1f78d376e49a

Slide 31

Slide 31 text

Design System とは 引用元: https://speakerdeck.com/broccolini/design-systems-when-and-how-much

Slide 32

Slide 32 text

どのようにDesign Systemを 導入していくか

Slide 33

Slide 33 text

ジョブメドレーでDesign System導入したら改善できそうなこと - 生産性 Productivity - 一貫性 Consistency - 持続可能性 Sustainability

Slide 34

Slide 34 text

ジョブメドレーでDesign System導入したら改善できそうなこと - 生産性 Productivity - 一貫性 Consistency - 持続可能性 Sustainability それぞれどのようにアプローチしていくか

Slide 35

Slide 35 text

Productivity 生産性 1. Interface Inventory 2. ジョブメドレー全体で共通しているUIパーツ、または共通化したいUIパーツをリスト 化 3. Design Systemに反映 4. npmで供給

Slide 36

Slide 36 text

Productivity 生産性 Interface Inventory 引用元: http://bradfrost.com/blog/post/interface-inventory/

Slide 37

Slide 37 text

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とは、プロダクトのインターフェースを作り上げている部品の包括的な 収集のこと

Slide 38

Slide 38 text

Productivity 生産性 Interface Inventory ジョブメドレー全体で共通しているUIパーツ、または共通化したいUIパーツをリスト化

Slide 39

Slide 39 text

Productivity 生産性 Design Systemに反映

Slide 40

Slide 40 text

Productivity 生産性 npmで供給

Slide 41

Slide 41 text

Consistency 一貫性 1. デザインで使う値をデザイナーから貰う 2. Design Tokensを作成 3. npmで供給

Slide 42

Slide 42 text

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 信頼できる唯一の情報源

Slide 43

Slide 43 text

Consistency 一貫性 Design Tokens 1つの場所で定義したデザインの値 を全てのプラットフォームで参照でき るフォーマットで提供する 引用元: https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421

Slide 44

Slide 44 text

Consistency 一貫性 Theo Salesforceが開発してるDesign Tokensの管理ツール https://github.com/salesforce-ux/theo

Slide 45

Slide 45 text

Consistency 一貫性 Theo Theoでymlから各プラット フォーム向けフォーマットで Design Tokensを出力する 引用元: https://www.slideshare.net/developerforce/introducing-the-salesforce-lightning-design-system

Slide 46

Slide 46 text

Sustainability 持続可能性 1. Design Systemをプロダクトとして扱うようにマインドを変える 2. スタイルガイドをプロダクトチーム全員が見られる場所に置く 3. 継続してメンテナンスする

Slide 47

Slide 47 text

Sustainability 持続可能性 Design Systemをプロダクトとして扱うようにマインドを変える 引用元: https://medium.com/@marcintreder/the-minimum-viable-design-system-75ca1806848a

Slide 48

Slide 48 text

Sustainability 持続可能性 スタイルガイドをプロダクトチーム全員が見られる場所に置く

Slide 49

Slide 49 text

Sustainability 持続可能性 継続してメンテナンスする

Slide 50

Slide 50 text

ジョブメドレーの Design Systemのイメージ

Slide 51

Slide 51 text

ジョブメドレーの Design Systemのイメージ

Slide 52

Slide 52 text

小さく始める

Slide 53

Slide 53 text

小さく始める - 最初から一気に色々やらない - まずは一部だけ導入してみる - 上手くいく部分といかない部分を検証する - Design Systemの改善と段階導入を繰り返す

Slide 54

Slide 54 text

小さく始める ジョブメドレー全体を通して共通して利用されるUIコンポーネント やDesign Tokens、Sass mixinなどから、Design Systemによって 供給した方が有用であると判断したものを、段階的にmonorepo 管理のリポジトリにnpmとして追加していく

Slide 55

Slide 55 text

小さく始める 最初はレイアウト用のflexboxユーティリティと スペースのdesign tokenから始める

Slide 56

Slide 56 text

小さく始める 採用管理画面のみ 5px, 10px, 15px, 20px… のような5の倍数だけど、それ以外は 8px, 16px, 24px, 32px… のように8の倍数のスペースのルール

Slide 57

Slide 57 text

小さく始める 採用管理画面も将来的には8の倍数の スペースのルールに近い状態にすると 思うけど、それまでは採用管理画面の scssでスペースのtokenを上書きする

Slide 58

Slide 58 text

小さく始める flexboxのユーティリティでは、 等間隔にflex itemを配置する際の スペースをdesign tokensから 利用する

Slide 59

Slide 59 text

小さく始める storybookなりstyleguideが github pagesで誰でも見られる状態 にする

Slide 60

Slide 60 text

小さく始める - Design Systemに反映した方がよいものがあれば、Design Systemにフィード バックしてDesign Systemのnpmから供給するようにしていく - 全部Design Systemから供給は無理だろうけど、新たにCSSを書き続けること を減らす CSS HTML Sketch

Slide 61

Slide 61 text

小さく始める CSS HTML Sketch CSS HTML Sketch CSS HTML Sketch Design System

Slide 62

Slide 62 text

小さく始める HTML CSS HTML Sketch CSS HTML Sketch Design System CSS Sketch Design System Feedback

Slide 63

Slide 63 text

小さく始める HTML HTML CSS HTML Sketch Design System CSS Sketch Design System CSS Sketch Design System Feedback Feedback

Slide 64

Slide 64 text

小さく始める CSS HTML Sketch CSS HTML Sketch CSS HTML Sketch Design System

Slide 65

Slide 65 text

- 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