Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

sizucca
December 10, 2019

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

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

sizucca

December 10, 2019
Tweet

More Decks by sizucca

Other Decks in Design

Transcript

  1. 1 @sizucca / @sizucca_ • • 🗼 • 2008 2016

    • 2016 GMO • 2016/05 EC • 2017/07 • 2019/01 @kotarok JOIN • 2019/05 CTO DST( ) CDT( ) CTO DST CDT
  2. 2

  3. 7

  4. 8

  5. 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/
  6. 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
  7. 21 Fonts (strong) Noto Sans JP Regular Noto Sans JP

    Bold UD StdN W4 UD StdN W6 Weight ※ Noto Sans + Open Sans
  8. 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)
  9. 26

  10. 27 bold 3pt normal 2.25pt lighter 1.5pt lightest 0.75pt Pepper

    Gray 400 Pepper Gray 600 Pepper Gray 800 ( 0.75pt) ( )
  11. 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
  12. 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
  13. 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
  14. 32

  15. 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) + +
  16. 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
  17. 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) + +
  18. 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
  19. 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
  20. 43

  21. 44

  22. 46

  23. 53