いちからデザインシステムを作ってみて学んだこと

59e3a2c1b2fb70e8d96096fd35bcb2c2?s=47 halken
May 18, 2019

 いちからデザインシステムを作ってみて学んだこと

Inside Frontend #3 C-4

59e3a2c1b2fb70e8d96096fd35bcb2c2?s=128

halken

May 18, 2019
Tweet

Transcript

  1. 2.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. य़໺݈ޗʢ͸Δͷ͚Μ͝ʣ ϠϑʔגࣜձࣾσβΠφʔ

    ೥৽ଔೖࣾʢࣾձਓ೥໨ʣ େֶ࣌୅͸৘ใ޻ֶઐ߈ σʔλϕʔεͷݚڀΛ͍ͯͨ͠ @halsakulalala
  2. 5.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ΞδΣϯμ ɾσβΠϯγεςϜΛͭ͘Δ͖͔͚ͬ

    ɾσβΠϯγεςϜ։ൃɿσβΠϯฤ ίϯϙʔωϯτચ͍ग़͠ ελΠϧΨΠυ੍࡞ ɾσβΠϯγεςϜ։ൃɿϑϩϯτΤϯυฤ ίϯϙʔωϯτϥΠϒϥϦ࣮૷ᶃ ʼʼʼࣄ݅ʻʻʻ ίϯϙʔωϯτϥΠϒϥϦ࣮૷ᶄ ɾ͍͔ͪΒ;Γ͔͑ͬͯΈͯ
  3. 6.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ΞδΣϯμ ɾσβΠϯγεςϜΛͭ͘Δ͖͔͚ͬ

    ɾσβΠϯγεςϜ։ൃɿσβΠϯฤ ίϯϙʔωϯτચ͍ग़͠ ελΠϧΨΠυ੍࡞ ɾσβΠϯγεςϜ։ൃɿϑϩϯτΤϯυฤ ίϯϙʔωϯτϥΠϒϥϦ࣮૷ᶃ ʼʼʼࣄ݅ʻʻʻ ίϯϙʔωϯτϥΠϒϥϦ࣮૷ᶄ ɾ͍͔ͪΒ;Γ͔͑ͬͯΈͯ
  4. 8.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ༷ʑͳ໾ׂΛ࣋ͭ޿ࠂ഑৴ܥαʔϏε͕ଘࡏ͢Δ ӡ༻ɾվળΛߦ͏ͨΊʹؔΘ͍ͬͯΔਓ͕ͨ͘͞Μ͍Δ

    ޿ࠂ഑৴ܥαʔϏε ࣾ಺֎߹Θͤͯ Ҏ্ ؔΘ͍ͬͯΔਓ ΤϯδχΞɾσβΠφʔɾϏδωεɾۀ຿ҕୗͳͲ  ໿ਓ
  5. 11.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. σβΠϯγεςϜ੍࡞ϝϯόʔ σβΠφʔਓͰߏ੒

    ࢲ σβΠϯઃܭ ίʔσΟϯάઃܭ 1. ๻͸ίϯϙʔωϯτϥΠϒϥϦͷ࣮૷ϝΠϯͰδϣΠϯ
  6. 12.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ελΠϧΨΠυ σβΠϯͷ͔ͨ͠ɺߟ͑ํͷఆٛΛυΩϡϝϯτԽ

    ίϯϙʔωϯτϥΠϒϥϦ σβΠϯͱίʔυ͕ηοτʹͳͬͨ ίϯϙʔωϯτύʔπͷఏڙ σβΠϯΩοτ σβΠϯπʔϧͰར༻Մೳͳ6*ύʔπͷఏڙ σβΠϯγεςϜͱͯ͠༻ҙ͢Δ΋ͷ
  7. 14.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ϚΠϧετʔϯʢ࣌఺ʣ 

    ຤ ຤ ελΠϧΨΠυ࡞੒ ίϯϙʔωϯτϥΠϒϥϦ࣮૷ ຤
  8. 15.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ΞδΣϯμ ɾσβΠϯγεςϜΛͭ͘Δ͖͔͚ͬ

    ɾσβΠϯγεςϜ։ൃɿσβΠϯฤ ίϯϙʔωϯτચ͍ग़͠ ελΠϧΨΠυ੍࡞ ɾσβΠϯγεςϜ։ൃɿϑϩϯτΤϯυฤ ίϯϙʔωϯτϥΠϒϥϦ࣮૷ᶃ ʼʼʼࣄ݅ʻʻʻ ίϯϙʔωϯτϥΠϒϥϦ࣮૷ᶄ ɾ͍͔ͪΒ;Γ͔͑ͬͯΈͯ
  9. 16.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. σβΠϯΨΠυϥΠϯࡦఆ σβΠϯݪଇΛఆٛ

    ʜσβΠϯ࡞੒ʹ͓͍ͯج൫ͱͳΔ΋ͷ ந৅తͳελΠϧΛఆٛ ʜ৭ɺΞΠίϯɺάϦουɺϚʔδϯɺλΠϙάϥϑΟͳͲ ۩ମతͳϧʔϧΛఆٛ ʜϞʔγϣϯɺ֤σβΠϯύλʔϯɺίϯϙʔωϯτঢ়ଶͳͲ
  10. 18.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ίϯϙʔωϯτͷϦετΞοϓ 6*ΠϯϕϯτϦͷ࣮ࢪ

    ࣮ࡍͷը໘͔Β ίϯϙʔωϯτͱ ͳΓ͏ΔύʔπΛ୳͢ ࿈ܞऴྃ೔ͷมߋ ࿈ܞ*%ɾ࿈ܞ໊ɾ࡞੒ऀ  ܾఆ ηάϝϯτ࿈ܞ σʔλΧελϚΠζ ΦʔσΟΤϯεάϧʔϓ ηάϝϯτ࿈ܞͷ࡞੒͕׬ྃ͠·ͨ͠ɻ ਖ਼͘͠ೖྗ͞Ε͍ͯͳ͍߲໨͕Օॴ͋Γ·͢ɻ
  11. 21.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ಛघͳύλʔϯ͕ग़ͯ͘Δ ʮͻͱͭͷύλʔϯʹ͢Δʯ·Ͱ͸ܾ·Δ

    ͚ͩͲͬ͘͠ΓདྷΔ໊લ͕શવݟ͔ͭΒͳ͍ ϑΟϧλ ϑΟϧλ อଘ ͜Εͷ໊લΛܾΊΑ͏ େ͖ͳোนɿίϯϙʔωϯτ໊͕Ӭԕʹܾ·Βͳ͍
  12. 22.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ίϯϙʔωϯτ͕࣋ͭ໾ׂΛߟ͑ͯɺద੾ͳݴ༿ΛબͿ ݟͨ໨ʹͱΒΘΕͳ͍

    νʔϜϝϯόʔશһ͕ೲಘ͢Δ·Ͱٞ࿦͢Δ ೲಘ͠ͳ͍ʹద੾ͳݴ༿Ͱ͸ͳ͍ ϑΟϧλ ϑΟϧλ อଘ ίϯϙʔωϯτ໊͕Ӭԕʹܾ·Βͳ͍ղܾࡦ 1MBUFʹܾఆ "DUJPO#BSʹܾఆ
  13. 23.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ϚΠϧετʔϯʢ࣌఺ʣ 

    ຤ ຤ ελΠϧΨΠυ࡞੒ ຤ ίϯϙʔωϯτ ϥΠϒϥϦ࣮૷ ίϯϙʔωϯτύλʔϯ੔ཧʹ͕͔͔࣌ؒͬͯ͠·ͬͨ 㱺࣮૷Λޙճ͠ʹͯ͠ɺελΠϧΨΠυྔ࢈ମ੍΁
  14. 24.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ࢲ σβΠϯઃܭ

    ίʔσΟϯάઃܭ 1. ஗ΕΛऔΓ໭ͨ͢Ίʹɺ๻ࣗ਎΋σβΠϯઃܭΛ΍Δ͜ͱʹ
  15. 29.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ελΠϧΨΠυ࡞੒ʹࢀՃͯ͠Α͔ͬͨ͜ͱ ϑϩϯτΤϯυ໨ઢͷσβΠϯϨϏϡʔΛࣄલʹͰ͖ͨ

    ࣮ࡍʹͲ͏࣮૷͢Δ͔Λߟ͑ͨͱ͖ʹɺ଍Γͳ͍΋ͷΛࢦఠ͠΍͍͢ ྫɿϚ΢εΦʔόঢ়ଶͷελΠϧ͸Ͳ͏ͳΓ·͔͢ʁ ɹɹςΩετΠϯϓοτͷΤϥʔ࣌ͷঢ়ଶ͸͋Γ·͔͢ʁ ɹɹςΩετ͕ෳ਺ߦͷͱ͖Ͳ͏ͳΓ·͔͢ʁ 㱺ཁ݅ͷൈ͚࿙Εͷ๷ࢭʹͳͬͨ 㱺ࠩ͠໭͠Λࣄલʹ཈͑Δ͜ͱ͕Ͱ͖ͨ
  16. 30.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ελΠϧΨΠυ࡞੒ʹࢀՃͯ͠େมͩͬͨ͜ͱ ߟ͑ΒΕΔશͯͷσβΠϯύλʔϯΛ༻ҙ͢Δඞཁ͕͋Δ

    छྨYαΠζYঢ়ଶ෼ͷύʔπΛ࡞੒ ෦෼తʹζϨ͍ͯΔͷʹؾͮ͘㱺શ෦௚͢ɾνΣοΫ σβΠϯϧʔϧΛจࣈԽ͢Δ೉͠͞ ޡղΛੜ·ͳ͍Α͏ʹ͢Δ͜ͱ ෆ໌ྎͳ෦෼͕ͳ͍ঢ়ଶʹ͢Δ͜ͱ
  17. 32.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ϚΠϧετʔϯʢத०࣌఺ʣ 

    ຤ ຤ ελΠϧΨΠυ࡞੒ ຤ ίϯϙʔωϯτ ϥΠϒϥϦ࣮૷ ελΠϧΨΠυΛͭ͗ͭ͗ྔ࢈㱺ͳΜͱ͔༧ఆ௨Γ খ͍͞ύʔπ͔Βॱ࣍ϥΠϒϥϦ࣮૷΁
  18. 33.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ΞδΣϯμ ɾσβΠϯγεςϜΛͭ͘Δ͖͔͚ͬ

    ɾσβΠϯγεςϜ։ൃɿσβΠϯฤ ίϯϙʔωϯτચ͍ग़͠ ελΠϧΨΠυ੍࡞ ɾσβΠϯγεςϜ։ൃɿϑϩϯτΤϯυฤ ίϯϙʔωϯτϥΠϒϥϦ࣮૷ᶃ ʼʼʼࣄ݅ʻʻʻ ίϯϙʔωϯτϥΠϒϥϦ࣮૷ᶄ ɾ͍͔ͪΒ;Γ͔͑ͬͯΈͯ
  19. 36.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ίʔσΟϯάઃܭ جຊతʹ#&.ه๏Λ౿ऻ

    छྨʢUZQFʣ ύʔπʢ@@QBSUʣ ঢ়ଶʢJT ʣ αΠζʢTJ[F ʣ
  20. 37.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 'SBDUBM ɾελΠϧΨΠυδΣωϨʔλʔ

    ɾ.BSLEPXOͰυΩϡϝϯτ͕ॻ͚Δ ɾ)BOEMFCBST :".- ɾ੩తαΠτΛॻ͖ग़͢͜ͱ͕Ͱ͖Δ https://fractal.build/
  21. 40.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ϚΠϧετʔϯʢ຤࣌఺ʣ 

    ຤ ຤ ελΠϧΨΠυྔ࢈ ຤ ίϯϙʔωϯτ ϥΠϒϥϦ࣮૷ ࣮૷͸ॱௐʹਐΜͰ͍ͬͨ ͜ͷ··݄຤ʹ͸Ұஈམ͢Δ͸ͣɾɾɾ
  22. 43.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ίϯϙʔωϯτϥΠϒϥϦͷఏڙํ๏ 3FBDUίϯϙʔωϯτϥΠϒϥϦͱͯ͠ఏڙʹస׵

    ޿ࠂ؅ཧܥπʔϧͷ΄ͱΜͲ͸3FBDUΛ࢖͍ͬͯͨ )5.-$44εχϖοτͰ͋ΔͳΒ͹ίʔυΛݟΔ͜ͱ͸ͳ͍ ΞοϓσʔτΛਵ࣌ద༻͍ͯ͘͠ࡍʹ੔߹ੑΛͱΔͨΊʹඞཁ
  23. 45.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ϚΠϧετʔϯʢத०࣌఺ʣ 

    ຤ ຤ ελΠϧΨΠυ࡞੒ ຤ ࠓ·Ͱͷ࣮૷ͷ੒Ռ͕΄΅ʹ ͱ͍͏ΑΓ݄຤·ͰʹऴΘΔ͸͕ͣͳ͍ ίϯϙʔωϯτ ϥΠϒϥϦ࣮૷ ௥Ճ ཁ݅
  24. 48.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ͜Ε͔ΒσβΠϯγεςϜɺͲ͏͢Δʁ ΍ΊΔͱ͍͏બ୒ࢶ

    ͜Ε͔ΒઌͷকདྷͷͨΊʹ΍ΔՁ஋͸͋Δ 3FBDUίϯϙʔωϯτϥΠϒϥϦఏڙ΁ͷ௅ઓ
  25. 51.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ؀ڥߏ੒ XFCQBDL

    3FBDU 5ZQF4DSJQU 54-JOU UTMJOUDPOpHBJSCOC  1SFUUJFS $44.PEVMFTXJUI4BTT 4UPSZCPPL OQNQBDLBHFͰ3FBDUίϯϙʔωϯτఏڙͰ͖ΔΑ͏ʹ
  26. 52.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. $44.PEVMFT $44.PEVMFT͔$44JO+4͔ͷબ୒

    কདྷతʹ$44ϑϨʔϜϫʔΫͱͯ͠ఏڙ͢ΔՄೳੑ $44 4BTT ͕Θ͔ΔσβΠφʔͰ΋मਖ਼Ͱ͖ΔΑ͏ʹ $44.PEVMFTXJUI4BTTΛ࠾༻
  27. 53.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 3FBDUY5ZQF4DSJQU ϝϯόʔ಺ʹ5ZQFTDSJQUͷ༗ࣝऀ͸͍ͳ͔ͬͨ

    ͦΕͰ΋ಋೖ͢ΔՁ஋͸͋Δͱࢥ͍ͬͯͨ ɾ੩తͳΤϥʔ͕ݟ͔ͭΓ΍͍͢ʢະఆٛͷม਺ͱ͔ʣ ɾΤσΟλͷิ׬ػೳ͕ศར
  28. 56.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ؀ڥߏஙͰҰ൪ۤ࿑ͨ͜͠ͱ 㱺CVOEMFϑΝΠϧ͕

    ͏·͘ੜ੒͞Εͳ͍ 㱺ίϯϙʔωϯτ͕ಡΈࠐΊͳ͍ ओͳݪҼɿ 4BTTͷܕղܾ͕Ͱ͖͍ͯͳ͔ͬͨ ʢϑΝΠϧߏ੒ʹ΋໰୊͋ͬͨʣ ղܾࡦɿ UZQJOHTGPSDTTNPEVMFTMPBEFS ΛೖΕͨ ܕఆٛϑΝΠϧΛՃ͑ͨ ˣXFCQBDLDPOpHKT͔Βൈਮ
  29. 58.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 3FBDUDPNQPOFOU ։ൃ

    QBDLBHF σβΠϯγεςϜ ελΠϧΨΠυ ίϯϙʔωϯτϥΠϒϥϦʹελΠϧΨΠυͷ୲อ
  30. 60.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 5ZQF4DSJQUʹ׳ΕΔ·Ͱʹ͕͔͔࣌ؒͬͨ ຊ౰ʹ͜ͷܕఆٛͰਖ਼͍͠ͷ͔ʁ

    ͜ͷॻ͖ํ͕ྑ͍ॻ͖ํͳͷ͔ʁ 1SPQ5ZQFTΛఆٛ͢Δඞཁ͕͋ͬͨ ελΠϧΨΠυ͔Β͞Βʹઃܭ͢Δඞཁ͕͋Δ ίϯϙʔωϯτϥΠϒϥϦ࣮૷Ͱେมͩͬͨ͜ͱ
  31. 62.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ΞδΣϯμ ɾσβΠϯγεςϜΛͭ͘Δ͖͔͚ͬ

    ɾσβΠϯγεςϜ։ൃɿσβΠϯฤ ίϯϙʔωϯτચ͍ग़͠ ελΠϧΨΠυ੍࡞ ɾσβΠϯγεςϜ։ൃɿϑϩϯτΤϯυฤ ίϯϙʔωϯτϥΠϒϥϦ࣮૷ᶃ ʼʼʼࣄ݅ʻʻʻ ίϯϙʔωϯτϥΠϒϥϦ࣮૷ᶄ ɾ͍͔ͪΒ;Γ͔͑ͬͯΈͯ
  32. 63.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ͍͔ͪΒ;Γ͔͑ͬͯΈͯ σβΠϯ͔Β࣮૷·Ͱ͜ͳ͢ͷ͸ɺͱͯ΋େมͩͬͨ

    ʜຊ౰ʹ࢖ͬͯ΋Β͑Δͷ͔ɺҙຯ͕͋Δͷ͔ͱ͍͏ෆ҆ ʜϞνϕʔγϣϯΛอͭͷ͕೉͔ͬͨ͠ σβΠϯγεςϜ͸ڊେͳϓϩμΫτ ʜ෦෼తʹ͸͡ΊΔ͜ͱ͚ͩͰ΋ྑ͍ͱࢥ͏ ʜελΠϧΨΠυ͚ͩͰ΋ ίϛϡχέʔγϣϯ͕େࣄ ʜ࢖ͬͯ΋Β͏ଆͷؾ࣋ͪΛཧղ͢Δ͜ͱ͕ඞཁ
  33. 64.

    Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ࠓޙʹ͍ͭͯ ͞ΒʹίϯϙʔωϯτΛ૿΍ͯ͠ॆ࣮ͷσβΠϯγεςϜ΁

    㱺ܧଓͯ͠ӡ༻͍ͯ͘͜͠ͱ͕େࣄ 㱺ΑΓڧݻͳσβΠϯγεςϜΛ໨ࢦ͢ 㱺3FBDUͱ߹Θͤͯ)5.-$44εχϖοτͷఏڙ΋ ෦ॺ಺ʹ͸·ͩ·ͩਁಁͰ͖͍ͯͳ͍ 㱺࣮ࡍʹ࢖ΘΕͯͦ͜ҙຯ͕͋Δ 㱺ࠓ౓ͦ͜ঃʑʹϓϩμΫτʹಋೖΛ໨ࢦ͢ σβΠφʔYϑϩϯτΤϯυΤϯδχΞΛ໨ࢦͯ͠