サービスにおけるDesign Systemの構築

A77456b262557e22986345f6d0555c58?s=47 nakajijapan
September 04, 2019

サービスにおけるDesign Systemの構築

モバイル開発をしている上でデザインとの関係性は切手は切れない関係だとお思います。
また、プロダクト自体も成長に伴い複雑性がましてきました。そのときに私はデザインシステム
に注目して様々なアプローチしてきました。

本発表ではあまり馴染みではない「デザインシステム」はどういうものなのかという基本的な話から
ではどのようにしてプロダクトにデザインシステムを導入し、どこまで何をしていったのか
エンジニアリングを持って何を解決していったのかを解説します。

A77456b262557e22986345f6d0555c58?s=128

nakajijapan

September 04, 2019
Tweet

Transcript

  1. J04%$ αʔϏεʹ͓͚Δ %FTJHO4ZTUFN ͷߏங

  2. 4PGUXBSF&OHJOFFS %F/"J04%$4UB⒎/,+*OUFSOFU J04"OESPJENBD04

  3. J04%$ αʔϏεʹ͓͚Δ %FTJHO4ZTUFN ͷߏங

  4. None
  5. ͖͔͚ͬ

  6. σβΠφෆ଍ ˞ݱ৬Ͱ͸ͳ͍

  7. None
  8. σβΠφɾ ΤϯδχΞͷ ೝࣝͷҧ͍

  9. None
  10. %FTJHO4ZTUFN

  11. None
  12. %FTJHO4ZTUFN

  13. %FTJHO4ZTUFN wσβΠϯݪଇɺϒϥϯυɺελΠϧΨΠ υɺύλʔϯϥΠϒϥϦͳͲʹΑͬͯߏ੒ ͞Εͨ΋ͷ

  14. %FTJHO4ZTUFN wσβΠϯݪଇɺϒϥϯυɺελΠϧΨΠ υɺύλʔϯϥΠϒϥϦͳͲʹΑͬͯߏ੒ ͞Εͨ΋ͷ w།Ұͷࢦ਑Ͱ͋Γ૊৫શମʹ͓͚Δσβ Πϯͷڞ௨ݴޠ

  15. Կ͕มΘΔͷʁ wνʔϜϝϯό͕Ұ؏ͨ͠σβΠϯʹΑΔ 69ͷఏڙ͕Ͱ͖Δ wνʔϜϝϯόʹΑΔޮ཰తͳ։ൃ͕Ͱ͖ Δ wσβΠϯ஌ࣝͷਁಁ

  16. ࣄྫ

  17. None
  18. None
  19. 5&% wϧʔϧɿΏΔ͍ w෦඼ɿ݁߹ܕ w૊৫ɿ෼ࢄܕ

  20. None
  21. None
  22. "JSCOC wϧʔϧɿݫ֨ w෦඼ɿϞδϡʔϧܕPS݁߹ܕ w૊৫ɿूதܕ IUUQTBJSCOCEFTJHOCVJMEJOHBWJTVBMMBOHVBHF

  23. #PPUTUSBQ

  24. 5XJUUFS#PPUTUSBQ wϧʔϧɿݫ֨ w෦඼ɿϞδϡʔϧܕPS݁߹ܕ w૊৫ɿ

  25. )*(

  26. .BUFSJBM%FTJHO

  27. %FTJHO4ZTUFN w୯७ʹελΠϧΨΠυɺύλʔϯϥΠϒ ϥϦͷπʔϧ܈ͱ͍͏Θ͚Ͱ͸ͳ͍ w࡞Γํʹܾ·ͬͨܗ͕ࣜͳ͍

  28. None
  29. ࢥ૝

  30. σβΠϯݪଇ

  31. ڧऑ ۙ઀ ൓෮ ੔ྻ

  32. ڧऑ ۙ઀ ൓෮ ੔ྻ T

  33. ϓϩμΫτΛ࡞Δ ͱ͖ʹେ੾ʹͯ͠ ཉ͍͜͠ͱ

  34.  %FTJHO4ZTUFN ελΠϧΨΠυ ίϯϙʔωϯτϥΠϒϥϦ ϓ ϩ μ Ϋ τ σβΠϯݪଇ

    ϒϥϯσΟϯά ΨΠυϥΠϯ ৘ใઃܭ 5ZQPHSBQIZ $PMPS 4QBDJOH (SJE /BWJHBUJPO "MFSU *UFNMJTU *DPO *NBHF #VUUPO
  35. σβΠϯݪଇͷಛ௃ wγϯϓϧͰΘ͔Γ΍͍͢ wͦΕ͕આ໌Ͱ͖Δ wͲ͕͜༏ઌ͞Ε͍ͯΔͷ͔͕Θ͔Δ wؔ࿈෇͚΍͘͢ɺ֮͑΍͍͢

  36. T IUUQTQSJODJQMFTEFTJHO

  37. "QQMF

  38. &TTFOUJBM%FTJHO 1SJODJQMFT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

  39. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

  40. (PPHMF

  41. w.BUFSJBMJTUIFNFUBQIPS w#PME HSBQIJD JOUFOUJPOBM w.PUJPOQSPWJEFTNFBOJOH w'MFYJCMFGPVOEBUJPO w$SPTTQMBUGPSN .BUFSJBM%FTJHO

  42. None
  43. )*(ɺ.BUFSJBM %FTJHOͰ͍͍ͷͰ ͸ͳ͍͔ʁ

  44. None
  45. αʔϏε ಛ༗ͷԿ͔͸ͳ͍ ͔ߟ࡯͢Δ

  46. αʔϏεಛ༗ͷԿ͔ wϒϥϯσΟϯά wͲ͏ݟΒΕ͍͔ͨ wϢʔβʔετʔϦʔ wԿΛղܾ͍ͤͨ͞ͷ͔ wνʔϜͷՁ஋؍

  47. αʔϏεʹ͓͚Δ σβΠϯݪଇ ϓϥοτϑΥʔ Ϝʹ͓͚Δσβ Πϯݪଇ

  48. ελΠϧΨΠυ

  49. ελΠϧΨΠυ w5ZQPHSBQIZ w$PMPS w4QBDF w(SJE w&UD

  50. ελΠϧΨΠυ wͲͷΑ͏ʹ؅ཧ͢Δ͔ w໋໊͢Δ wҙຯΛ࣋ͨͤΔ

  51. ελΠϧΨΠυ wͲͷΑ͏ʹ؅ཧ͢Δ͔ w໋໊͢Δ wҙຯΛ࣋ͨͤΔ

  52. None
  53. None
  54. ύλʔϯϥΠϒϥϦ

  55. ύλʔϯϥΠϒϥϦ wσβΠϯύλʔϯͷηοτ

  56. ύλʔϯϥΠϒϥϦ w#VUUPO w"MFSU w/BWJHBUJPO w-JTU w&UD

  57. ύλʔϯϥΠϒϥϦ wॏཁͳ΋ͷ͔Βநग़ wࢹೝੑͷߴ͍৔ॴΛ༻ҙ

  58. None
  59. 1PDPDIBʹ͓͚Δ %FTJHO4ZTUFN

  60. None
  61. 1PDPDIB wιʔγϟϧϥΠϒ഑৴ΞϓϦ wd wଟ࠼ͳΠϕϯτاըΛ࣮ࢪ wϨϕϧʹԠͨ͡ԋग़ΪϛοΫ

  62. 1PDPDIB w̎೥͕ܦա͠ϓϩδΣΫτͷن໛֦େ wΑΓେ͖͍νʔϜͰϓϩδΣΫτӡ༻͢ Δస׵ظ

  63. None
  64. ϓϩμΫτ࡞Γͷ ೝࣝͷҧ͍

  65. ݴޠԽ

  66. ݴޠԽͷඞཁੑ wཧղ౓ͷڧԽ w྆ϓϥοτϑΥʔϜͷඍົͳҧ͍ΛΧόʔ wαʔϏεಛ༗ͷ֓೦

  67. ݴޠԽͷඞཁੑ wཧղ౓ͷڧԽ w྆ϓϥοτϑΥʔϜͷඍົͳҧ͍ΛΧόʔ wαʔϏεಛ༗ͷ֓೦ ཧ૝͸ϨϏϡʔ͠ͳͯ͘΋6*ઃܭ࣌ʹߟྀ ࣮ͯ͠ߦ͕Ͱ͖͍ͯΔ

  68. %PDVNFOU

  69. %PDVNFOU wݱঢ় wղܾࡦ wͳͥͳͷ͔Λهड़ w۩ମྫ

  70. %PDVNFOU wཧղ౓ΛਂΊͯ΋Β͏ wͦΕΛԠ༻֤ͯࣗ͠Ͱద࣮ٓ૷͕Ͱ͖Δ

  71. ൣғ wϧʔϧɿΏΔ͍ w෦඼ɿϞδϡʔϧܕ w૊৫ɿ෼ࢄܕ

  72. σβΠϯݪଇ

  73. σβΠϯݪଇ wࢹௌɾ഑৴ը໘ wͦΕҎ֎

  74. σβΠϯݪଇ wࢹௌɾ഑৴ը໘ wָ͠͞ɾײಈΛલ໘ʹ wͦΕҎ֎ wγϯϓϧɺ؆୯ɺΘ͔Γ΍͍͢

  75. σβΠϯݪଇ wࢹௌɾ഑৴ը໘ wָ͠͞ɾײಈΛલ໘ʹ wͦΕҎ֎ wγϯϓϧɺ؆୯ɺΘ͔Γ΍͍͢

  76. վળ

  77. σβΠϯݪଇ wϢʔβಉ࢜ʹ͸ͱ͜ͱΜָ͠ΜͰ΋Β͏ w੣࣮ͳͱ͜Ζ͸੣࣮ʹ

  78. None
  79. .BUFSJBM %FTJHO )*(

  80. αʔϏεʹ͓͚Δ σβΠϯݪଇ ϓϥοτϑΥʔϜ ʹ͓͚ΔσβΠϯ ݪଇ 1PDPDIBΒ͠͞Λ ౿ऻͤ͞Δ

  81. ֤ཁૉʹ མͱ͠ࠐΉ

  82. σβΠϯݪଇ

  83. σβΠϯݪଇ wΠϯλϥΫγϣϯ wϥΠςΟϯά

  84. ΠϯλϥΫγϣϯ w5SBOTJUJPO w7BMJEBUJPO w/FUXPSLJOH

  85. 5SBOTJUJPO w.PEBM w೚ҙͷ࡞ۀʹूத w.PEBMPO.PEBM w/BWJHBUJPO w֊૚తͳ৘ใ ॏཁͳ৘ใ

  86. 5SBOTJUJPO w.PEBM w೚ҙͷ࡞ۀʹूத w.PEBMPO.PEBM w/BWJHBUJPO w֊૚తͳ৘ใ ίϯςΩετҡ࣋

  87. 7BMJEBUJPO w'FFECBDL͸ϦΞϧλΠϜʹ wϢʔβʹબ୒ࢶΛ༩͑ͳ͍ wԿΛೖྗ͢Δͷ͔໌֬ʹ͢Δ wΤϥʔ͸දࣔͤͣ͞ʹࣄલʹࢭΊΔ

  88. /FUXPSLJOH wݪଇ௨৴͸ҙࣝͤ͞ͳ͍ wඇಉظͳͷ͔ಉظͳͷ͔ΛݟۃΊΔ w௨৴தͷදݱ͸͞Γ͛ͳ͘

  89. ϥΠςΟϯά w5POF w.FTTBHF w"MFSU w&SSPS

  90. ελΠϧΨΠυ

  91. ελΠϧΨΠυ w5ZQPHSBQIZ w$PMPS w4QBDF w&UD

  92. ίʔυԽ ͱ ࢹ֮Խ

  93. ελΠϧΨΠυ w໊લͰཧղɾ࣮૷Մೳʹ͢Δ wੜ੒͸ࣗಈԽ wGSBNFXPSLΛผʹͯ͠؅ཧ

  94. w໊લͰཧղɾ࣮૷Մೳʹ͢Δ wੜ੒͸ࣗಈԽ wGSBNFXPSLΛผʹͯ͠؅ཧ ελΠϧΨΠυ 4XJGU(FO

  95. w໊લͰཧղɾ࣮૷Մೳʹ͢Δ wੜ੒͸ࣗಈԽ wGSBNFXPSLΛผʹͯ͠؅ཧ ελΠϧΨΠυ

  96. ύλʔϯϥΠϒϥϦ

  97. ύλʔϯϥΠϒϥϦ w#VUUPO w"MFSU w/BWJHBUJPO w-JTU FUD

  98. ίʔυԽ ͱ ࢹ֮Խ

  99. ύλʔϯϥΠϒϥϦ w໊લͰཧղɾ࣮૷Մೳʹ͢Δ wGSBNFXPSLΛผʹͯ͠؅ཧ wՄࢹԽ w֬ೝ༻ͷεΩʔϚΛ࡞੒

  100. None
  101. ·ͱΊ

  102. %FTJHO4ZTUFN wσβΠϯݪଇɺϒϥϯυɺελΠϧΨΠ υɺύλʔϯϥΠϒϥϦͳͲʹΑͬͯߏ੒ ͞Εͨ΋ͷ w།Ұͷࢦ਑Ͱ͋Γ૊৫શମʹ͓͚Δσβ Πϯͷڞ௨ݴޠ

  103. %FTJHO4ZTUFN wσβΠϯݪଇ͔ΒܾΊ͍ͯ͘ wϞόΠϧ͸ϓϥοτϑΥʔϜͷ%FTJHO 4ZTUFNΛ౿ऻͤ͞Δ

  104. %FTJHO4ZTUFN wͲΜͳϑΣʔζɺνʔϜن໛Ͱ͋Εɺେ খ͋ΕͲݴޠԽɾࢹ֮Խ͢Δ͜ͱ͸Ұ؏͠ ͨϓϩμΫτ࡞Γʹେ੾ͳ໾ׂΛՌͨͯ͠ ͘ΕΔ

  105. %FBJHO0QT

  106. 5IBOLT

  107. &OKPZ