多様なBtoBサービスのためのデザインシステム / Design System for various BtoB service

■イベント 

【Engineering Team Presentation】各社のサービス品質を支えるベストプラクティス

https://sansan.connpass.com/event/209357/

■登壇概要

タイトル：多様なBtoBサービスのためのデザインシステム
発表者：株式会社日本経済新聞社　デジタル事業 情報サービスユニット
エンジニア　清野 光平

▼Builders Box

https://buildersbox-online.com/

Transcript

1. ଟ༷ͳ#UP#αʔϏεͷͨΊͷσβΠϯγεςϜ
   ࠷ॳͷҰา
   ೔ຊܦࡁ৽ฉࣾ 
 σδλϧࣄۀ
   ৘ใαʔϏεϢχοτ 
 ਗ਼໺ޫฏ
2. ৽ฉ΍ిࢠ൛ͷ࿩Ͱ͸ͳͯ͘ɺ
   ೔ຊܦࡁ৽ฉࣾͷ#UP#αʔϏεͷ࿩Λ͠·͢ 2
3. ೔ຊܦࡁ৽ฉࣾʹ͸
   ৽چ͞·͟·ͳ#UP#αʔϏε͕͋Γ·͢ 3
4. 4 ೔ຊܦࡁ৽ฉࣾͷ#UP#αʔϏε
5. 5 ೔ຊܦࡁ৽ฉࣾͷ#UP#αʔϏε
6. 6 ৽چ͞·͟·ͳαʔϏεΛఏڙ       લ਎αʔϏε 8FCαʔϏεԽ
7. #UP#αʔϏεͷσβΠϯ඼࣭ͷ՝୊
8. #UP#αʔϏε͸σβΠϯͷ඼࣭Λอͭͷ͕೉͍͠ 8
9. 9 #UP#αʔϏεͷσβΠϯʹؔ࿈͢Δಛੑ ػೳ਺ ɾ ը໘਺͕ଟ͍ αʔϏεͷଉ͕௕͍ ϨΨγʔ؀ڥʹ΋ରԠ
10. 10 #UP#αʔϏε͸଍͠ࢉͰ੒௕ɻ
    ଟػೳ͕༏ઌ͞Εɺ ը໘਺΋ଟ͘ͳΓ͕ͪ αʔϏεܦա೥਺ ػೳ਺
11. 11 #UP#͸ଉ͕௕͍αʔϏε͕ଟ͍ 1984 - 2002 - 2005 - 2000 -
12. 12 #UP#αʔϏεͷ੒ޭʹ͸௕͍೥਺͕ඞཁ 4BB4
    Ϗδωεͷ੒ޭʹ͸͋ͳ͕ͨߟ͍͑ͯΔҎ্ʹ௕͍೥਺͕ඞཁͰ͢ɻ
    ʜʜ
    ੒௕يಓʹͷͤऩӹԽ͢Δʹ͸͓Αͦ೥͸ඞཁɻ
    ʮ4BBTελʔ๼Ξοϓ
    ૑ۀऀ޲͚ΨΠυ
    
    4BMFTGPSDFʯ l
    
13. ࣍ୈʹཷ·͍ͬͯ͘σβΠϯ΍࣮૷ͷෛ࠴ 13
14. 14 ྨࣅίϯϙʔωϯτͷ൙ཞ σβΠϯͱ࣮૷ͷဃ཭ ࣮૷ͷϨΨγʔԽ CoffeeScript σβΠϯ΍࣮૷ͷෛ࠴ Ϙλϯ Ϙλϯ Ϙλϯ #3589CF #1089CF
15. 15 σβΠϯγεςϜ͕ඞཁ
    αʔϏεؒͰڞ௨ͷ6*Λఏڙͯ͠ɺ σβΠϯͷ඼࣭ ɾ ϝϯςφϯεੑΛ޲্
16. σβΠϯγεςϜ
    ཧ૝ͱݱ࣮
17. σβΠϯγεςϜ
    ϓϩμΫτΛ։ൃ͢Δ্ͰඞཁͱͳΔσβΠϯݪଇ΍ 
 ࠶ར༻Մೳͳ6*ίϯϙʔωϯτͳͲΛఆΊͨ΋ͷ 17
18. 18 Salesforce Lightning Design System https://www.lightningdesignsystem.com
19. 19 Material Design - https://material.io
20. 20 σβΠϯγεςϜͷݱ࣮໰୊ σβΠϯ඼࣭Λ޲্͍͖͍ͯͨ͠
    ˠ
    👍
    αʔϏεؒͷ6*ʹҰ؏ੑΛ΋͍ͨͤͨ
    ˠ
    👍
    σβΠϯγεςϜ͕ඞཁͩΑͶ
    ˠ
    👍
    ࣮ࡍ໰୊Ͳ͏΍ͬͯಋೖ͍ͯ͘͠ ʁ
    ˠ
    🤯
21. ඞཁ͚ͩͲಋೖ͢Δͷ͕೉͍͠໰୊ 21
22. 22 αʔϏεʹΑͬͯ
    ίϯϙʔωϯτͷσβΠϯ͕ҧ͏ αʔϏεʹΑͬͯ
    ࢖༻ϥΠϒϥϦ͕ҧ͏ -1΍ϝʔϧͳͲ͍Ζ͍Ζ͋Δ σβΠϯγεςϜಋೖʹཱͪ͸͔ͩΔ໰୊ Ϙλϯ Ϙλϯ
23. 23 σβΠϯγεςϜಋೖʹ͸ίετ΋࣌ؒ΋͔͔Δɻௐ੔΋ඞཁ
24. 24 ʮ͔ͳΓ޻਺͔͔Γͦ͏͚ͩͲɺͲΕ͚ͩޮՌ͋Δͷʁʯ
    🤔
25. 25 ʮαʔϏεʹಋೖ͞Εͣɺ࡞ͬͯऴΘΓʹͳΔͷͰ͸ʁʯ
    😨
26. ࠷ॳͷҰาͱͯ͠ͷσβΠϯτʔΫϯ 26
27. σβΠϯτʔΫϯ
28. σβΠϯτʔΫϯ
    σʔλͱͯ͠දݱ͞ΕͨσβΠϯ্ͷܾఆࣄ߲ͷ͜ͱ 28
29. 29 Adobe Spectrum - Design Tokens https://spectrum.adobe.com/page/design-tokens/ σβΠϯτʔΫϯ
    ͨͱ͑͹Χϥʔίʔυ
30. Colors Background Color Text Color Border Color Font Font Size Opacity Line Height Spacing Radius Sizing Shadow Time Touch Media Query Z-index 30 σβΠϯτʔΫϯͷΧςΰϦ
    ྫ
    Salesforce Lightning Design System Salesforce Lightning Design System - Design Tokens https://www.lightningdesignsystem.com/design-tokens
31. 31 ίʔυ্ͰͷσβΠϯτʔΫϯ ίʔυ্͸ม਺ͳͲͰఆٛ ΧϥʔύϨο τͳͲ :root { --color-nikkei-blue-100: #e4f2ff; --color-nikkei-blue-200: #9ecefc; --color-nikkei-blue-300: #5daaf3; --color-nikkei-blue-400: #2d8ae2; --color-nikkei-blue-500: #0e6ec8; --color-nikkei-blue-600: #0c59a1; --color-nikkei-blue-700: #0a3e6f; --color-nikkei-blue-800: #00203d; }
32. 32 τʔΫϯΛ࢖ͬͯελΠϧΛఆٛɻ ΧϥʔίʔυͷϋʔυίʔυͳͲ͸ෆཁʹ 🙆 🙅 h1 { color: var(--color-nikkei-blue-600); } h1 { color: #0c59a1; } h1 { color: get-token(color, nikkei-blue-600); } 🙆
33. 33 Figma API τʔΫϯ͸σβΠϯϑΝΠϧ͔ΒϏϧυπʔϧΛ௨࣮ͯ͠૷Ͱ࢖͏ܗࣜʹม׵ τʔΫϯఆٛϑΝΠϧ (YAML΍JSON) Ϗϧυπʔϧ σβΠϯϑΝΠϧ ࣮૷Ͱ࢖͏ϑΝΠϧ .js .scss .css .swift .xml
34. 34 σβΠϯͷܾఆ͸σβΠϯπʔϧ্ͰߦΘΕΔ Figma API color: nikkei-blue: 100: value: '#e4f2ff' 200: value: '#9ecefc' 300: value: '#5daaf3' 400: value: '#2d8ae2' 500: value: '#0e6ec8' 600: value: '#0c59a1' 700: value: '#0a3e6f' 800: value: '#00203d' :".-΍+40/Ͱॻ͖ग़͢ τʔΫϯ͸σβΠϯϑΝΠϧ͔Β஋Λॻ͖ग़͢
35. 35 ϏϧυπʔϧΛ࢖֤ͬͯϓϥοτϑΥʔϜ޲͚ʹग़ྗ :root { --color-nikkei-blue-100: #e4f2ff; --color-nikkei-blue-200: #9ecefc; } CSS $color-map: ( 'nikkei-blue-100': #e4f2ff, 'nikkei-blue-200': #9ecefc, ); SCSS public class DesignTokens { public static let colorNikkeiBlue100 = UIColor(red: 0.894, green: 0.949, blue: 1.000, alpha:1) public static let colorNikkeiBlue200 = UIColor(red: 0.620, green: 0.808, blue: 0.988, alpha:1) } Swift YAML color: nikkei-blue: 100: value: '#e4f2ff' 200: value: '#9ecefc' 300: value: '#5daaf3' 400: value: '#2d8ae2' 500: value: '#0e6ec8' 600: value: '#0c59a1' 700: value: '#0a3e6f' 800: value: '#00203d' Ϗϧυπʔϧ
    Style Dictionary ϕʔε
    w ୯Ґͷ׵ࢉ
    w ΤΠϦΞεͷղܾ
36. 36 τʔΫϯ͸໋໊͕େࣄɻ ͔ͬ͠Γٞ࿦ܾͯ͠ΊΔ ໋໊نଇΛఆΊͯϏϧυπʔϧͰ୲อ͢Δ 4ZTUFN@@%PNBJO#MPDL@@&MFNFOU.PEJ fi FS
37. 37 ઃఆͷӅṭ΍ΧελϚΠζΛͯ͠ɺ Ϗϧυπʔϧͱͯ͠ఏڙ 4UZMF
    %JDUJPOBSZ
    ͷઃఆΛӅṭ
    w ग़ྗϓϥοτϑΥʔϜ
    w ୯Ґ׵ࢉ 
 ͳͲ
    ࣗ෼ͨͪͷαʔϏε༻ͷΧελϚΠζ
    w ໋໊نଇ w τʔΫϯؒͷґଘղܾ Ϗϧυπʔϧͱͯ͠ϞδϡʔϧԽ { "name": "@nikkei/design-tokens", "devDependencies": { "@nikkei/design-tokens-builder": “1.0.0" }, "scripts": { "build": "tokens-builder build", "clean": “tokens-builder clean" } } τʔΫϯ͸ϏϧυπʔϧΛ࢖ͬͯϏϧυ
38. 38 αʔϏεͳͲτʔΫϯΛఆٛ͢Δଆ͸ఆٛϑΝΠϧΛ͚࣋ͭͩ τʔΫϯϏϧυπʔϧ τʔΫϯఆٛ color: nikkei-blue: 500: value: '#0e6ec8' grayscale: 100: value: '#f5f7fa' ίϯϙʔωϯτϥΠϒϥϦ αʔϏε τʔΫϯఆٛ color: primary: blue: value: '{color.nikkei-blue.500.value}' gray: value: '{color.grayscale.100.value}' τʔΫϯग़ྗ :root { --color__primary--blue: #0e6ec8; --color__primary--gray: #f5f7fa; } .button--primary { background-color: 
 var(--color__primary--blue); } .button-outline--primary { border-color: var(--color__primary--gray); }
39. ·ͣ͸σβΠϯτʔΫϯ͚ͩαʔϏεʹಋೖ 39
40. 40 σβΠϯτʔΫϯΛೖΕΔͱخ͍͜͠ͱ σβΠϯͷ඼࣭͕͕͋Δ
    σβΠϯͱ࣮૷ͷဃ཭Λղফ ϝϯςφϯεੑ͕͕͋Δ
    τʔΫϯఆ͕ٛ
    Single Source of Truth σβΠϯͱ࣮૷Ͱ 
 ڞ௨ݴޠΛ࣋ͯΔ #3589CF #3589CF </>
41. σβΠϯτʔΫϯ͚ͩͳΒಋೖָ͕ɻ࠷ॳͷҰาͱͯ͠ 41
42. σβΠϯγεςϜͷϩʔυϚοϓ
43. σβΠϯτʔΫϯΛ଍͕͔Γʹঃʑʹಋೖ͍ͯ͘͠ 43
44. 44 σβΠϯγεςϜ
    ࣮૷·ΘΓͷऔΓ૊Έ σβΠϯτʔΫϯ ίϯϑΟά ελΠϦϯά React ΞΠίϯ CSS, Sass JavaScript, JSON Swift, XM L
 … CSS, Sass browserslist stylelint … ݱϑΣʔζ ࣍ϑΣʔζ
    )5.-͸ϦϑΝϨϯε࣮૷
45. 45 σβΠϯγεςϜ
    ࣮૷·ΘΓͷͬ͘͟ ΓΞʔΩςΫνϟ τʔΫϯఆٛ τʔΫϯϏϧυπʔϧ τʔΫϯϑΝΠϧ τʔΫϯͷϔϧύʔ Button Checkbox bundle શ෦ೖΓ ϓϩμΫτݻ༗ͷελΠϧ ɾ
    ɾ
    ɾ 'JHNB
    "1* ։ൃ༻εΫϦϓτ τʔΫϯఆٛ τʔΫϯϑΝΠϧ Button Checkbox bundle શ෦ೖΓ ɾ
    ɾ
    ɾ ։ൃ༻εΫϦϓτ ΞϓϦଆ 3FBDU࣮૷ browserslist stylelint ɾ
    ɾ
    ɾ
46. 46 ೔ຊܦࡁ৽ฉࣾͰ͸Ұॹʹಇ͘஥ؒΛืू͍ͯ͠·͢ʂ https://hack.nikkei.com/jobs Twitter: @nikkeideveloper