スライド資料のデザインシステムをつくっている話

2019年12月10日に開催された「ds.t Episode IV: GMO Pepabo」
https://designsystems.connpass.com/event/156487/
の登壇資料。

Transcript

1. 0 🗼ds.t Episode IV: GMO 2019/12/10 @sizucca from
2. 1 @sizucca / @sizucca_ • • 🗼 • 2008 2016 • 2016 GMO • 2016/05 EC • 2017/07 • 2019/01 @kotarok JOIN • 2019/05 CTO DST( ) CDT( ) CTO DST CDT
4. 3 1. 2. 3. 4.
5. 1. 4
6. 5 CDT 3 1 4 3 1 4 IR
7. 😇 6
10. 9 CDT Draft
11. 10 1. 1 → 2. → 3. → 4. etc …
12. 💡 11
13. Design Systems 12
14. 2. 13
15. 14 Style Guide 1 Pepper Style Guide
16. Style Guide ver.2 15
17. Style Guide 16
18. Color 17
19. 18 Pepper Color PepperColor Gray 100, 800, 400, 600 Blue 400, 600 Yellow 400, 600 Red 400, 600 1 Color PepperColor ※ 50 1 https://pages.git.pepabo.com/design/pepper-color/
20. 19 (strong) (highlight) (caution) Pepper Gray 800 Pepper Blue 600 Pepper Yellow 600 Pepper Red 600 ( ) Pepper Gray 600 - - - Pepper Gray 600 Pepper Blue 600 Pepper Yellow 600 Pepper Red 600 Pepper Gray 200 Pepper Blue 200 Pepper Yellow 200 Pepper Red 200
21. Typography 20
22. 21 Fonts (strong) Noto Sans JP Regular Noto Sans JP Bold UD StdN W4 UD StdN W6 Weight ※ Noto Sans + Open Sans
23. 22 Size xx-large 60pt x-large 44pt large 32pt medium 24pt small 20pt x-small 16pt xx-small 12pt xxx-small 9pt ※ Size 60pt QU Heading 1 QU Heading 2 QU QU QU 20pt → 22pt → 24pt → ∞ 16pt → 14pt → 12pt ※ 18pt QU QU QU ( 1.3)
24. 23 12pt 14pt, 16pt, 18pt 1.2 1.4 12px 1.2 14px 1.4
25. Gird 24
26. 25 Grid 8 margin • 8 4 8 16 24 32 40 48 ( mm)
28. 27 bold 3pt normal 2.25pt lighter 1.5pt lightest 0.75pt Pepper Gray 400 Pepper Gray 600 Pepper Gray 800 ( 0.75pt) ( )
29. 28 ( ) 1FQQFS (SBZ  QU ( ) Pepper Gray 400 0.75pt ( ) 1FQQFS (SBZ  QU ( ) Pepper Gray 400 0.75pt 1FQQFS  QU Pepper 600 1.5pt Pepper 600 2.25pt 0.4cm 8px ( ) Pepper 400, 600 3pt
30. 29 5 level 1 ( ) Pepper 600 ( ) Pepper 600 level 2 ( ) Pepper 500 ( ) Pepper 600 Pepper 200 level 3 ( ) Pepper 400 ( ) Pepper 600 Pepper 200 level 4 ( ) Pepper 300 ( ) Pepper 600 Pepper 200 level 5 ( ) Pepper 200 ( ) Pepper 400 Pepper 200
31. 30 (strong) (highlight) (caution) Pepper Gray 600 Pepper Blue 600 Pepper Yellow 600 Pepper Red 600 Pepper Gray 400 Pepper Blue 400 Pepper Yellow 400 Pepper Red 400 6 4 2 2 2 6 4 3 3 6 4 4 6 5 6 6 4 2 2 2 6 4 3 3 6 4 4 6 5 6 6 4 2 2 2 6 4 3 3 6 4 4 6 5 6 6 4 2 2 2 6 4 3 3 6 4 4 6 5 6 4 2 .5 .5 .5 4 2 1 1 4 2 2 4 3 4 4 2 .5 .5 .5 4 2 1 1 4 2 2 4 3 4 4 2 .5 .5 .5 4 2 1 1 4 2 2 4 3 4 4 2 .5 .5 .5 4 2 1 1 4 2 2 4 3 4
32. 31 QU  SetRadius
34. 33 • • • • 💡 >
35. 34 600 (600) Yellow
36. 35 700 (700) 700
37. 36 Gray 800 ( 400 3pt) ( 200 2 ) ( 400 3pt) ( 200 2 ) ( 200) ( 600 3pt) ( 200) ( 600 3pt) + + ( 400 3pt) ( 200 2 ) ( 400 3pt) ( 200 2 ) ( 200) ( 600 3pt) ( 200) ( 600 3pt) + +
38. 37 600 ( 400 3pt) ( 200 2 ) ( 400 3pt) ( 200 2 ) ( 200) ( 600 3pt) ( 200) ( 600 3pt) + + ( 400 3pt) ( 200 2 ) ( 400 3pt) ( 200 2 ) ( 200) ( 600 3pt) ( 200) ( 600 3pt) + + Yellow + 600 (800 ) Blue + 600 700 700 Red + 600 700 700
39. 38 700 ( 400 3pt) ( 200 2 ) ( 400 3pt) ( 200 2 ) ( 200) ( 600 3pt) ( 200) ( 600 3pt) + + ( 400 3pt) ( 200 2 ) ( 400 3pt) ( 200 2 ) ( 200) ( 600 3pt) ( 200) ( 600 3pt) + +
40. 39 800 ( 400 3pt) ( 200 2 ) ( 400 3pt) ( 200 2 ) ( 200) ( 600 3pt) ( 200) ( 600 3pt) + + ( 400 3pt) ( 200 2 ) ( 400 3pt) ( 200 2 ) ( 200) ( 600 3pt) ( 200) ( 600 3pt) + + + 800 700 700
41. Logos 40
42. 41 / GMO https://git.pepabo.com/corporate/goodies/tree/master/ R: G: B: 62 111 153 R: G: B: 57 60 65 GMO R: G: B: 0 91 172 by R: G: B: 125 125 125
43. 3. 42
46. 45 1. Style Guide PowerPoint → 2. PowerPoint → 3. Style Guide →
48. 😇 47
49. 48 CDT Draft
50. 49 1. 2. 3. 4.
51. 😇 50
52. 51 • • •
53. 😎 52
55. 4. 54
56. 55 Pepper inhouse ✨ ✨
57. 🗼 56