Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

nakajijapan
September 04, 2019

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

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

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

nakajijapan

September 04, 2019
Tweet

More Decks by nakajijapan

Other Decks in Design

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