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

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

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

Transcript

1. J04%$ αʔϏεʹ͓͚Δ
   %FTJHO
   4ZTUFN ͷߏங
2. 4PGUXBSF
   &OHJOFFS %F/"
   
   J04%$
   4UB⒎
   
   /,+
   *OUFSOFU J04
   
   "OESPJE
   
   NBD04
3. J04%$ αʔϏεʹ͓͚Δ
   %FTJHO
   4ZTUFN ͷߏங
5. ͖͔͚ͬ
6. σβΠφෆ଍ ˞ݱ৬Ͱ͸ͳ͍
8. σβΠφɾ
   ΤϯδχΞͷ
   ೝࣝͷҧ͍
10. %FTJHO
    4ZTUFN
12. %FTJHO
    4ZTUFN
13. %FTJHO
    4ZTUFN w
    σβΠϯݪଇɺϒϥϯυɺελΠϧΨΠ υɺύλʔϯϥΠϒϥϦͳͲʹΑͬͯߏ੒ ͞Εͨ΋ͷ
    
14. %FTJHO
    4ZTUFN w
    σβΠϯݪଇɺϒϥϯυɺελΠϧΨΠ υɺύλʔϯϥΠϒϥϦͳͲʹΑͬͯߏ੒ ͞Εͨ΋ͷ
    w
    །Ұͷࢦ਑Ͱ͋Γ૊৫શମʹ͓͚Δσβ Πϯͷڞ௨ݴޠ
    
15. Կ͕มΘΔͷʁ w
    νʔϜϝϯό͕Ұ؏ͨ͠σβΠϯʹΑΔ 69ͷఏڙ͕Ͱ͖Δ
    w
    νʔϜϝϯόʹΑΔޮ཰తͳ։ൃ͕Ͱ͖ Δ
    w
    σβΠϯ஌ࣝͷਁಁ
    
16. ࣄྫ
19. 5&% w
    ϧʔϧɿΏΔ͍
    w
    ෦඼ɿ݁߹ܕ
    w
    ૊৫ɿ෼ࢄܕ
22. "JSCOC w
    ϧʔϧɿݫ֨
    w
    ෦඼ɿϞδϡʔϧܕ
    PS
    ݁߹ܕ
    w
    ૊৫ɿूதܕ IUUQTBJSCOCEFTJHOCVJMEJOHBWJTVBMMBOHVBHF
23. #PPUTUSBQ
24. 5XJUUFS
    #PPUTUSBQ w
    ϧʔϧɿݫ֨
    w
    ෦඼ɿϞδϡʔϧܕ
    PS
    ݁߹ܕ
    w
    ૊৫ɿ
25. )*(
26. .BUFSJBM
    %FTJHO
27. ✍
28. %FTJHO
    4ZTUFN w
    ୯७ʹελΠϧΨΠυɺύλʔϯϥΠϒ ϥϦͷπʔϧ܈ͱ͍͏Θ͚Ͱ͸ͳ͍
    w
    ࡞Γํʹܾ·ͬͨܗ͕ࣜͳ͍
30. ࢥ૝
31. σβΠϯݪଇ
32. ڧऑ ۙ઀ ൓෮ ੔ྻ
33. ڧऑ ۙ઀ ൓෮ ੔ྻ T
34. ϓϩμΫτΛ࡞Δ ͱ͖ʹେ੾ʹͯ͠ ཉ͍͜͠ͱ
35. 
    %FTJHO
    4ZTUFN ελΠϧΨΠυ ίϯϙʔωϯτϥΠϒϥϦ ϓ ϩ μ Ϋ τ σβΠϯݪଇ ϒϥϯσΟϯά ΨΠυϥΠϯ ৘ใઃܭ 5ZQPHSBQIZ $PMPS 4QBDJOH (SJE /BWJHBUJPO "MFSU *UFN
    MJTU *DPO *NBHF #VUUPO
36. σβΠϯݪଇͷಛ௃ w
    γϯϓϧͰΘ͔Γ΍͍͢
    w
    ͦΕ͕આ໌Ͱ͖Δ
    w
    Ͳ͕͜༏ઌ͞Ε͍ͯΔͷ͔͕Θ͔Δ
    w
    ؔ࿈෇͚΍͘͢ɺ֮͑΍͍͢
37. T IUUQTQSJODJQMFTEFTJHO
38. "QQMF
39. &TTFOUJBM
    %FTJHO
    1SJODJQMFT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
40. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
41. (PPHMF
42. w
    .BUFSJBM
    JT
    UIF
    NFUBQIPS
    w
    #PME
    HSBQIJD
    JOUFOUJPOBM
    w
    .PUJPO
    QSPWJEFT
    NFBOJOH
    w
    'MFYJCMF
    GPVOEBUJPO
    w
    $SPTTQMBUGPSN
    .BUFSJBM
    %FTJHO
44. )*(ɺ.BUFSJBM
    %FTJHO
    Ͱ͍͍ͷͰ ͸ͳ͍͔ʁ
46. αʔϏε
    ಛ༗ͷԿ͔͸ͳ͍ ͔ߟ࡯͢Δ
47. αʔϏεಛ༗ͷԿ͔ w
    ϒϥϯσΟϯά
    w
    Ͳ͏ݟΒΕ͍͔ͨ
    w
    ϢʔβʔετʔϦʔ
    w
    ԿΛղܾ͍ͤͨ͞ͷ͔
    w
    νʔϜͷՁ஋؍
48. αʔϏεʹ͓͚Δ
    σβΠϯݪଇ ϓϥοτϑΥʔ Ϝʹ͓͚Δσβ Πϯݪଇ
49. ελΠϧΨΠυ
50. ελΠϧΨΠυ w
    5ZQPHSBQIZ
    w
    $PMPS
    w
    4QBDF
    w
    (SJE
    w
    &UD
51. ελΠϧΨΠυ w
    ͲͷΑ͏ʹ؅ཧ͢Δ͔
    w
    ໋໊͢Δ
    w
    ҙຯΛ࣋ͨͤΔ
52. ελΠϧΨΠυ w
    ͲͷΑ͏ʹ؅ཧ͢Δ͔
    w
    ໋໊͢Δ
    w
    ҙຯΛ࣋ͨͤΔ
55. ύλʔϯϥΠϒϥϦ
56. ύλʔϯϥΠϒϥϦ w
    σβΠϯύλʔϯͷηοτ
57. ύλʔϯϥΠϒϥϦ w
    #VUUPO
    w
    "MFSU
    w
    /BWJHBUJPO
    w
    -JTU
    w
    &UD
58. ύλʔϯϥΠϒϥϦ w
    ॏཁͳ΋ͷ͔Βநग़
    w
    ࢹೝੑͷߴ͍৔ॴΛ༻ҙ
60. 1PDPDIBʹ͓͚Δ %FTJHO
    4ZTUFN
62. 1PDPDIB w
    ιʔγϟϧϥΠϒ഑৴ΞϓϦ
    w
    d
    w
    ଟ࠼ͳΠϕϯτاըΛ࣮ࢪ
    w
    ϨϕϧʹԠͨ͡ԋग़ΪϛοΫ
63. 1PDPDIB w
    ̎೥͕ܦա͠ϓϩδΣΫτͷن໛֦େ
    w
    ΑΓେ͖͍νʔϜͰϓϩδΣΫτӡ༻͢ Δస׵ظ
65. ϓϩμΫτ࡞Γͷ ೝࣝͷҧ͍
66. ݴޠԽ
67. ݴޠԽͷඞཁੑ w
    ཧղ౓ͷڧԽ
    w
    ྆ϓϥοτϑΥʔϜͷඍົͳҧ͍ΛΧόʔ w
    αʔϏεಛ༗ͷ֓೦
68. ݴޠԽͷඞཁੑ w
    ཧղ౓ͷڧԽ
    w
    ྆ϓϥοτϑΥʔϜͷඍົͳҧ͍ΛΧόʔ w
    αʔϏεಛ༗ͷ֓೦ ཧ૝͸ϨϏϡʔ͠ͳͯ͘΋6*ઃܭ࣌ʹߟྀ ࣮ͯ͠ߦ͕Ͱ͖͍ͯΔ
69. %PDVNFOU
70. %PDVNFOU w
    ݱঢ়
    w
    ղܾࡦ
    w
    ͳͥͳͷ͔Λهड़
    w
    ۩ମྫ
    
71. %PDVNFOU w
    ཧղ౓ΛਂΊͯ΋Β͏
    w
    ͦΕΛԠ༻֤ͯࣗ͠Ͱద࣮ٓ૷͕Ͱ͖Δ
    
72. ൣғ w
    ϧʔϧɿΏΔ͍
    w
    ෦඼ɿϞδϡʔϧܕ
    w
    ૊৫ɿ෼ࢄܕ
73. σβΠϯݪଇ
74. σβΠϯݪଇ w
    ࢹௌɾ഑৴ը໘
    w
    ͦΕҎ֎
75. σβΠϯݪଇ w
    ࢹௌɾ഑৴ը໘
    w
    ָ͠͞ɾײಈΛલ໘ʹ
    w
    ͦΕҎ֎
    w
    γϯϓϧɺ؆୯ɺΘ͔Γ΍͍͢
76. σβΠϯݪଇ w
    ࢹௌɾ഑৴ը໘
    w
    ָ͠͞ɾײಈΛલ໘ʹ
    w
    ͦΕҎ֎
    w
    γϯϓϧɺ؆୯ɺΘ͔Γ΍͍͢
77. վળ
78. σβΠϯݪଇ w
    Ϣʔβಉ࢜ʹ͸ͱ͜ͱΜָ͠ΜͰ΋Β͏
    w
    ੣࣮ͳͱ͜Ζ͸੣࣮ʹ
80. .BUFSJBM
    
    %FTJHO )*(
81. αʔϏεʹ͓͚Δ
    σβΠϯݪଇ ϓϥοτϑΥʔϜ ʹ͓͚ΔσβΠϯ ݪଇ 1PDPDIBΒ͠͞Λ ౿ऻͤ͞Δ
82. ֤ཁૉʹ
    མͱ͠ࠐΉ
83. σβΠϯݪଇ
84. σβΠϯݪଇ w
    ΠϯλϥΫγϣϯ
    w
    ϥΠςΟϯά
    
85. ΠϯλϥΫγϣϯ w
    5SBOTJUJPO
    w
    7BMJEBUJPO
    w
    /FUXPSLJOH
86. 5SBOTJUJPO w
    .PEBM
    w
    ೚ҙͷ࡞ۀʹूத
    w
    .PEBM
    PO
    .PEBM
    w
    /BWJHBUJPO
    w
    ֊૚తͳ৘ใ ॏཁͳ৘ใ
87. 5SBOTJUJPO w
    .PEBM
    w
    ೚ҙͷ࡞ۀʹूத
    w
    .PEBM
    PO
    .PEBM
    w
    /BWJHBUJPO
    w
    ֊૚తͳ৘ใ ίϯςΩετҡ࣋
88. 7BMJEBUJPO w
    'FFECBDL͸ϦΞϧλΠϜʹ
    w
    Ϣʔβʹબ୒ࢶΛ༩͑ͳ͍
    w
    ԿΛೖྗ͢Δͷ͔໌֬ʹ͢Δ
    w
    Τϥʔ͸දࣔͤͣ͞ʹࣄલʹࢭΊΔ
    
89. /FUXPSLJOH w
    ݪଇ௨৴͸ҙࣝͤ͞ͳ͍
    w
    ඇಉظͳͷ͔ಉظͳͷ͔ΛݟۃΊΔ
    w
    ௨৴தͷදݱ͸͞Γ͛ͳ͘
90. ϥΠςΟϯά w
    5POF
    w
    .FTTBHF
    w
    "MFSU
    w
    &SSPS
    
91. ελΠϧΨΠυ
92. ελΠϧΨΠυ w
    5ZQPHSBQIZ
    w
    $PMPS
    w
    4QBDF
    w
    &UD
93. ίʔυԽ
    ͱ
    ࢹ֮Խ
94. ελΠϧΨΠυ w
    ໊લͰཧղɾ࣮૷Մೳʹ͢Δ
    w
    ੜ੒͸ࣗಈԽ
    w
    GSBNFXPSLΛผʹͯ͠؅ཧ
    
95. w
    ໊લͰཧղɾ࣮૷Մೳʹ͢Δ
    w
    ੜ੒͸ࣗಈԽ
    w
    GSBNFXPSLΛผʹͯ͠؅ཧ
    ελΠϧΨΠυ 4XJGU(FO
96. w
    ໊લͰཧղɾ࣮૷Մೳʹ͢Δ
    w
    ੜ੒͸ࣗಈԽ
    w
    GSBNFXPSLΛผʹͯ͠؅ཧ
    ελΠϧΨΠυ
97. ύλʔϯϥΠϒϥϦ
98. ύλʔϯϥΠϒϥϦ w
    #VUUPO
    w
    "MFSU
    w
    /BWJHBUJPO
    w
    -JTU FUD
99. ίʔυԽ
    ͱ
    ࢹ֮Խ
100. ύλʔϯϥΠϒϥϦ w
     ໊લͰཧղɾ࣮૷Մೳʹ͢Δ
     w
     GSBNFXPSLΛผʹͯ͠؅ཧ
     w
     ՄࢹԽ
     w
     ֬ೝ༻ͷεΩʔϚΛ࡞੒
     
102. ·ͱΊ
103. %FTJHO
     4ZTUFN w
     σβΠϯݪଇɺϒϥϯυɺελΠϧΨΠ υɺύλʔϯϥΠϒϥϦͳͲʹΑͬͯߏ੒ ͞Εͨ΋ͷ
     w
     །Ұͷࢦ਑Ͱ͋Γ૊৫શମʹ͓͚Δσβ Πϯͷڞ௨ݴޠ
     
104. %FTJHO
     4ZTUFN w
     σβΠϯݪଇ͔ΒܾΊ͍ͯ͘
     w
     ϞόΠϧ͸ϓϥοτϑΥʔϜͷ%FTJHO
     4ZTUFNΛ౿ऻͤ͞Δ
105. %FTJHO
     4ZTUFN w
     ͲΜͳϑΣʔζɺνʔϜن໛Ͱ͋Εɺେ খ͋ΕͲݴޠԽɾࢹ֮Խ͢Δ͜ͱ͸Ұ؏͠ ͨϓϩμΫτ࡞Γʹେ੾ͳ໾ׂΛՌͨͯ͠ ͘ΕΔ
106. %FBJHO0QT
107. 5IBOLT
108. &OKPZ