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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. %FTJHO4ZTUFN

    View full-size slide

  7. %FTJHO4ZTUFN

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. .BUFSJBM%FTJHO

    View full-size slide

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

    View full-size slide

  16. σβΠϯݪଇ

    View full-size slide

  17. ڧऑ
    ۙ઀ ൓෮
    ੔ྻ

    View full-size slide

  18. ڧऑ
    ۙ઀ ൓෮
    ੔ྻ T

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  22. T
    IUUQTQSJODJQMFTEFTJHO

    View full-size slide

  23. &TTFOUJBM%FTJHO
    1SJODJQMFT
    IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

    View full-size slide

  24. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. ελΠϧΨΠυ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. ύλʔϯϥΠϒϥϦ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. 1PDPDIBʹ͓͚Δ
    %FTJHO4ZTUFN

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. σβΠϯݪଇ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. .BUFSJBM
    %FTJHO
    )*(

    View full-size slide

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

    View full-size slide

  54. ֤ཁૉʹ
    མͱ͠ࠐΉ

    View full-size slide

  55. σβΠϯݪଇ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. ελΠϧΨΠυ

    View full-size slide

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

    View full-size slide

  65. ίʔυԽ
    ͱ
    ࢹ֮Խ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. ύλʔϯϥΠϒϥϦ

    View full-size slide

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

    View full-size slide

  71. ίʔυԽ
    ͱ
    ࢹ֮Խ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide