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

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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. View Slide

5. ͖͔͚ͬ
   

   View Slide

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

   View Slide

7. View Slide

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

   View Slide

9. View Slide

10. %FTJHO4ZTUFN
    

    View Slide

11. View Slide

12. %FTJHO4ZTUFN
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. ࣄྫ
    

    View Slide

17. View Slide

18. View Slide

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

    View Slide

20. View Slide

21. View Slide

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

    View Slide

23. #PPUTUSBQ
    

    View Slide

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

    View Slide

25. )*(
    

    View Slide

26. .BUFSJBM%FTJHO
    

    View Slide

27. ✍
    

    View Slide

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

    View Slide

29. View Slide

30. ࢥ૝
    

    View Slide

31. σβΠϯݪଇ
    

    View Slide

32. ڧऑ
    ۙ઀ ൓෮
    ੔ྻ
    

    View Slide

33. ڧऑ
    ۙ઀ ൓෮
    ੔ྻ T
    

    View Slide

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

    View Slide

35. 
    %FTJHO4ZTUFN ελΠϧΨΠυ
    ίϯϙʔωϯτϥΠϒϥϦ
    ϓ
    ϩ
    μ
    Ϋ
    τ
    σβΠϯݪଇ
    ϒϥϯσΟϯά
    ΨΠυϥΠϯ
    ৘ใઃܭ
    5ZQPHSBQIZ
    $PMPS
    4QBDJOH
    (SJE
    /BWJHBUJPO
    "MFSU
    *UFNMJTU
    *DPO
    *NBHF
    #VUUPO
    

    View Slide

36. σβΠϯݪଇͷಛ௃
    wγϯϓϧͰΘ͔Γ΍͍͢
    wͦΕ͕આ໌Ͱ͖Δ
    wͲ͕͜༏ઌ͞Ε͍ͯΔͷ͔͕Θ͔Δ
    wؔ࿈෇͚΍͘͢ɺ֮͑΍͍͢
    

    View Slide

37. T
    IUUQTQSJODJQMFTEFTJHO
    

    View Slide

38. "QQMF
    

    View Slide

39. &TTFOUJBM%FTJHO
    1SJODJQMFT
    IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    

    View Slide

40. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
    

    View Slide

41. (PPHMF
    

    View Slide

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

    View Slide

43. View Slide

44. )*(ɺ.BUFSJBM
    %FTJHOͰ͍͍ͷͰ
    ͸ͳ͍͔ʁ
    

    View Slide

45. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

49. ελΠϧΨΠυ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. View Slide

54. View Slide

55. ύλʔϯϥΠϒϥϦ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

59. View Slide

60. 1PDPDIBʹ͓͚Δ
    %FTJHO4ZTUFN
    

    View Slide

61. View Slide

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

    View Slide

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

    View Slide

64. View Slide

65. ϓϩμΫτ࡞Γͷ
    ೝࣝͷҧ͍
    

    View Slide

66. ݴޠԽ
    

    View Slide

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

    View Slide

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

    View Slide

69. %PDVNFOU
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

73. σβΠϯݪଇ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

77. վળ
    

    View Slide

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

    View Slide

79. View Slide

80. .BUFSJBM
    %FTJHO
    )*(
    

    View Slide

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

    View Slide

82. ֤ཁૉʹ
    མͱ͠ࠐΉ
    

    View Slide

83. σβΠϯݪଇ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

91. ελΠϧΨΠυ
    

    View Slide

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

    View Slide

93. ίʔυԽ
    ͱ
    ࢹ֮Խ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

97. ύλʔϯϥΠϒϥϦ
    

    View Slide

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

    View Slide

99. ίʔυԽ
    ͱ
    ࢹ֮Խ
    

    View Slide

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

     View Slide

101. View Slide

102. ·ͱΊ
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

106. %FBJHO0QT
     

     View Slide

107. 5IBOLT
     
     

     View Slide

108. &OKPZ
     

     View Slide