Slide 1

Slide 1 text

ଟ༷ͳ#UP#αʔϏεͷͨΊͷσβΠϯγεςϜ ࠷ॳͷҰา ೔ຊܦࡁ৽ฉࣾ 
 σδλϧࣄۀ৘ใαʔϏεϢχοτ 
 ਗ਼໺ޫฏ

Slide 2

Slide 2 text

৽ฉ΍ిࢠ൛ͷ࿩Ͱ͸ͳͯ͘ɺ ೔ຊܦࡁ৽ฉࣾͷ#UP#αʔϏεͷ࿩Λ͠·͢ 2

Slide 3

Slide 3 text

೔ຊܦࡁ৽ฉࣾʹ͸ ৽چ͞·͟·ͳ#UP#αʔϏε͕͋Γ·͢ 3

Slide 4

Slide 4 text

4 ೔ຊܦࡁ৽ฉࣾͷ#UP#αʔϏε

Slide 5

Slide 5 text

5 ೔ຊܦࡁ৽ฉࣾͷ#UP#αʔϏε

Slide 6

Slide 6 text

6 ৽چ͞·͟·ͳαʔϏεΛఏڙ લ਎αʔϏε 8FCαʔϏεԽ

Slide 7

Slide 7 text

#UP#αʔϏεͷσβΠϯ඼࣭ͷ՝୊

Slide 8

Slide 8 text

#UP#αʔϏε͸σβΠϯͷ඼࣭Λอͭͷ͕೉͍͠ 8

Slide 9

Slide 9 text

9 #UP#αʔϏεͷσβΠϯʹؔ࿈͢Δಛੑ ػೳ਺ ɾ ը໘਺͕ଟ͍ αʔϏεͷଉ͕௕͍ ϨΨγʔ؀ڥʹ΋ରԠ

Slide 10

Slide 10 text

10 #UP#αʔϏε͸଍͠ࢉͰ੒௕ɻ ଟػೳ͕༏ઌ͞Εɺ ը໘਺΋ଟ͘ͳΓ͕ͪ αʔϏεܦա೥਺ ػೳ਺

Slide 11

Slide 11 text

11 #UP#͸ଉ͕௕͍αʔϏε͕ଟ͍ 1984 - 2002 - 2005 - 2000 -

Slide 12

Slide 12 text

12 #UP#αʔϏεͷ੒ޭʹ͸௕͍೥਺͕ඞཁ 4BB4Ϗδωεͷ੒ޭʹ͸͋ͳ͕ͨߟ͍͑ͯΔҎ্ʹ௕͍೥਺͕ඞཁͰ͢ɻ ʜʜ ੒௕يಓʹͷͤऩӹԽ͢Δʹ͸͓Αͦ೥͸ඞཁɻ ʮ4BBTελʔ๼Ξοϓ૑ۀऀ޲͚ΨΠυ4BMFTGPSDFʯ l

Slide 13

Slide 13 text

࣍ୈʹཷ·͍ͬͯ͘σβΠϯ΍࣮૷ͷෛ࠴ 13

Slide 14

Slide 14 text

14 ྨࣅίϯϙʔωϯτͷ൙ཞ σβΠϯͱ࣮૷ͷဃ཭ ࣮૷ͷϨΨγʔԽ CoffeeScript σβΠϯ΍࣮૷ͷෛ࠴ Ϙλϯ Ϙλϯ Ϙλϯ #3589CF #1089CF

Slide 15

Slide 15 text

15 σβΠϯγεςϜ͕ඞཁ αʔϏεؒͰڞ௨ͷ6*Λఏڙͯ͠ɺ σβΠϯͷ඼࣭ ɾ ϝϯςφϯεੑΛ޲্

Slide 16

Slide 16 text

σβΠϯγεςϜཧ૝ͱݱ࣮

Slide 17

Slide 17 text

σβΠϯγεςϜ ϓϩμΫτΛ։ൃ͢Δ্ͰඞཁͱͳΔσβΠϯݪଇ΍ 
 ࠶ར༻Մೳͳ6*ίϯϙʔωϯτͳͲΛఆΊͨ΋ͷ 17

Slide 18

Slide 18 text

18 Salesforce Lightning Design System https://www.lightningdesignsystem.com

Slide 19

Slide 19 text

19 Material Design - https://material.io

Slide 20

Slide 20 text

20 σβΠϯγεςϜͷݱ࣮໰୊ σβΠϯ඼࣭Λ޲্͍͖͍ͯͨ͠ˠ 👍 αʔϏεؒͷ6*ʹҰ؏ੑΛ΋͍ͨͤͨˠ 👍 σβΠϯγεςϜ͕ඞཁͩΑͶˠ 👍 ࣮ࡍ໰୊Ͳ͏΍ͬͯಋೖ͍ͯ͘͠ ʁˠ 🤯

Slide 21

Slide 21 text

ඞཁ͚ͩͲಋೖ͢Δͷ͕೉͍͠໰୊ 21

Slide 22

Slide 22 text

22 αʔϏεʹΑͬͯ ίϯϙʔωϯτͷσβΠϯ͕ҧ͏ αʔϏεʹΑͬͯ ࢖༻ϥΠϒϥϦ͕ҧ͏ -1΍ϝʔϧͳͲ͍Ζ͍Ζ͋Δ σβΠϯγεςϜಋೖʹཱͪ͸͔ͩΔ໰୊ Ϙλϯ Ϙλϯ

Slide 23

Slide 23 text

23 σβΠϯγεςϜಋೖʹ͸ίετ΋࣌ؒ΋͔͔Δɻௐ੔΋ඞཁ

Slide 24

Slide 24 text

24 ʮ͔ͳΓ޻਺͔͔Γͦ͏͚ͩͲɺͲΕ͚ͩޮՌ͋Δͷʁʯ 🤔

Slide 25

Slide 25 text

25 ʮαʔϏεʹಋೖ͞Εͣɺ࡞ͬͯऴΘΓʹͳΔͷͰ͸ʁʯ 😨

Slide 26

Slide 26 text

࠷ॳͷҰาͱͯ͠ͷσβΠϯτʔΫϯ 26

Slide 27

Slide 27 text

σβΠϯτʔΫϯ

Slide 28

Slide 28 text

σβΠϯτʔΫϯ σʔλͱͯ͠දݱ͞ΕͨσβΠϯ্ͷܾఆࣄ߲ͷ͜ͱ 28

Slide 29

Slide 29 text

29 Adobe Spectrum - Design Tokens https://spectrum.adobe.com/page/design-tokens/ σβΠϯτʔΫϯͨͱ͑͹Χϥʔίʔυ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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; }

Slide 32

Slide 32 text

32 τʔΫϯΛ࢖ͬͯελΠϧΛఆٛɻ ΧϥʔίʔυͷϋʔυίʔυͳͲ͸ෆཁʹ 🙆 🙅 h1 { color: var(--color-nikkei-blue-600); } h1 { color: #0c59a1; } h1 { color: get-token(color, nikkei-blue-600); } 🙆

Slide 33

Slide 33 text

33 Figma API τʔΫϯ͸σβΠϯϑΝΠϧ͔ΒϏϧυπʔϧΛ௨࣮ͯ͠૷Ͱ࢖͏ܗࣜʹม׵ τʔΫϯఆٛϑΝΠϧ (YAML΍JSON) Ϗϧυπʔϧ σβΠϯϑΝΠϧ ࣮૷Ͱ࢖͏ϑΝΠϧ .js .scss .css .swift .xml

Slide 34

Slide 34 text

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/Ͱॻ͖ग़͢ τʔΫϯ͸σβΠϯϑΝΠϧ͔Β஋Λॻ͖ग़͢

Slide 35

Slide 35 text

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 ΤΠϦΞεͷղܾ

Slide 36

Slide 36 text

36 τʔΫϯ͸໋໊͕େࣄɻ ͔ͬ͠Γٞ࿦ܾͯ͠ΊΔ ໋໊نଇΛఆΊͯϏϧυπʔϧͰ୲อ͢Δ 4ZTUFN@@%PNBJO#MPDL@@&MFNFOU.PEJ fi FS

Slide 37

Slide 37 text

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" } } τʔΫϯ͸ϏϧυπʔϧΛ࢖ͬͯϏϧυ

Slide 38

Slide 38 text

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); }

Slide 39

Slide 39 text

·ͣ͸σβΠϯτʔΫϯ͚ͩαʔϏεʹಋೖ 39

Slide 40

Slide 40 text

40 σβΠϯτʔΫϯΛೖΕΔͱخ͍͜͠ͱ σβΠϯͷ඼࣭͕͕͋Δ σβΠϯͱ࣮૷ͷဃ཭Λղফ ϝϯςφϯεੑ͕͕͋Δ τʔΫϯఆ͕ٛSingle Source of Truth σβΠϯͱ࣮૷Ͱ 
 ڞ௨ݴޠΛ࣋ͯΔ #3589CF #3589CF >

Slide 41

Slide 41 text

σβΠϯτʔΫϯ͚ͩͳΒಋೖָ͕ɻ࠷ॳͷҰาͱͯ͠ 41

Slide 42

Slide 42 text

σβΠϯγεςϜͷϩʔυϚοϓ

Slide 43

Slide 43 text

σβΠϯτʔΫϯΛ଍͕͔Γʹঃʑʹಋೖ͍ͯ͘͠ 43

Slide 44

Slide 44 text

44 σβΠϯγεςϜ࣮૷·ΘΓͷऔΓ૊Έ σβΠϯτʔΫϯ ίϯϑΟά ελΠϦϯά React ΞΠίϯ CSS, Sass JavaScript, JSON Swift, XM L
 … CSS, Sass browserslist stylelint … ݱϑΣʔζ ࣍ϑΣʔζ )5.-͸ϦϑΝϨϯε࣮૷

Slide 45

Slide 45 text

45 σβΠϯγεςϜ࣮૷·ΘΓͷͬ͘͟ ΓΞʔΩςΫνϟ τʔΫϯఆٛ τʔΫϯϏϧυπʔϧ τʔΫϯϑΝΠϧ τʔΫϯͷϔϧύʔ Button Checkbox bundle શ෦ೖΓ ϓϩμΫτݻ༗ͷελΠϧ ɾ ɾ ɾ 'JHNB"1* ։ൃ༻εΫϦϓτ τʔΫϯఆٛ τʔΫϯϑΝΠϧ Button Checkbox bundle શ෦ೖΓ ɾ ɾ ɾ ։ൃ༻εΫϦϓτ ΞϓϦଆ 3FBDU࣮૷ browserslist stylelint ɾ ɾ ɾ

Slide 46

Slide 46 text

46 ೔ຊܦࡁ৽ฉࣾͰ͸Ұॹʹಇ͘஥ؒΛืू͍ͯ͠·͢ʂ https://hack.nikkei.com/jobs Twitter: @nikkeideveloper