デザインシステムが加速させるプロダクト開発 / Design System and Scalable Product Development

クリエータと創作支援研究者を中心に年一度集まる会「第8回名状しがたいお茶会」での発表資料です。
https://junkato.jp/ja/teaparty/

Wantedly で1年間取り組んできたデザインシステムについて紹介しました。

Transcript

1. ©2019 Wantedly, Inc.
   σβΠϯγεςϜ͕
   Ճ଎ͤ͞ΔϓϩμΫτ։ൃ
   Design System and Scalable Product Development
   ୈճ໊ঢ়͕͍͓ͨ͠஡ձ
   17.Feb.2019 - Yoshinori Kawasaki
   

   View Slide

2. ©2019 Wantedly, Inc.
   Yoshinori Kawasaki
   CTO at Wantedly, Inc.
   ೥݄ΑΓϏδωε4/4ʮ8BOUFEMZʯͷ։ൃɾӡӦʹࢀըɻ։ൃɺ
   Ϛʔέɺ࠾༻ɾҭ੒ͳͲɺϓϩμΫτͱ૊৫ͮ͘Γʹ෯޿͘ܞΘΔɻ࠷
   ۙ͸ΤϯδχΞɺσβΠφʔɺฤूऀɺਓࣄͷνʔϜΛ୲౰ɻ
   github.com/luvtechno
   twitter.com/kawasy
   

   View Slide

3. ©2019 Wantedly, Inc.
   ձࣾ঺հ
   Ϗδωε4/4ʮ8BOUFEMZʯ
   ձࣾͱಇ͘ਓɺ·ͨ͸ಇ͘ਓಉ࢜Λͭͳ͛Δϓϥο
   τϑΥʔϜɻओཁαʔϏε͸ɺձࣾͱಇ͘ਓ͕ϛο
   γϣϯ΍Ϗδϣϯ΁ͷlڞײzͰϚονϯά͢Δ
   ʮ8BOUFEMZ7JTJUʯͱɺ໊͔ࢗΒಇ͘ਓಉ͕࢜ͭͳ
   ͕͍ͬͯ͘͜ͱΛ໨తͱͨ͠ʮ8BOUFEMZ1FPQMFʯɻ
   ొ࿥ձࣾ਺͸ ࣾɺ݄ؒΞΫςΟϒϢʔβ͸
   ສਓɻ
   

   View Slide

4. ©2019 Wantedly, Inc.
   ΞϓϦͷ57$.์өͷཪଆ
   8BOUFEMZ1FPQMFͷΠϯϑϥࣄྫ
   

   View Slide

5. ©2019 Wantedly, Inc.
   8BOUFEMZΛࢧ͑Δٕज़ͱ։ൃମ੍
   ʙάϧʔϓϝοηʔδػೳ4ZODͷࣄྫʙ
   8BOUFEMZ1FPQMF
   ໊ࢗ؅ཧˍҰׅεΩϟϯΞϓϦ
   ΞϓϦͷ57$.์өͷཪଆ
   8BOUFEMZ1FPQMFͷΠϯϑϥࣄྫ
   σβΠϯγεςϜ͕
   Ճ଎ͤ͞ΔϓϩμΫτ։ൃ
   

   View Slide

6. ©2019 Wantedly, Inc.
   ػೳͷෳࡶ͞͸૿Ճɺ૊৫͸ࡉ෼Խ
   ৽͍͠σβΠφʔϝϯόʔͷࢀՃͱσβΠϯͷมભ
   ෳ਺ΞϓϦؒͰϒϥϯυͱͯ͠ͷҰ؏ੑͷ௿Լ
   σόΠεɾϝσΟΞؒͷඇҰ؏ੑ
   ೥ؒͷܧଓ։ൃʹΑΔ໰୊
   

   View Slide

7. ©2019 Wantedly, Inc.
   $POTJTUFODZ4DBMBCJMJUZ
   w ϓϩμΫτ΍σόΠεΛ·͍ͨͰ΋69͕Ұ؏͢Δ
   w ༏लͳσβΠφʔͰ͋Δ͜ͱΛલఏʹ
   ୭Ͱ΋ϒϥϯυͱͯ͠ͷҰ؏ੑ͕อͯΔ
   7FMPDJUZ$PMMBCPSBUJPO
   w ࠣ຤ͳ6*Ͱ͸ͳ͘ɺ69ཁٻΛຬͨ͢ମݧઃܭʹϑΥʔΧεͰ͖Δ
   w σβΠφʔͱΤϯδχΞͷؒͷڠྗͱίϛϡχέʔγϣϯ͕؆୯ʹͳΔ
   w Ϣʔβʹಧ͘·Ͱͷ͕࣌ؒ୹ॖ͞ΕΔ
   ͦͷΑ͏ͳ໰୊΁ͷղͱͯ͠ͷσβΠϯγεςϜ
   

   View Slide

8. ©2019 Wantedly, Inc.
   “Building a Visual Language – Airbnb Design”
   https://airbnb.design/building-a-visual-language/
   “Rebrand 2018 | Case studies | Design at Uber”
   https://www.uber.design/case-studies/rebrand-2018
   “Atlassian Design”
   https://atlassian.design/
   “Design - Material Design”
   https://material.io/design/
   “Adele – Design Systems and Pattern Libraries Repository”
   https://adele.uxpin.com/
   ༗໊ͳσβΠϯγεςϜࣄྫ
   l%FTJHO4ZTUFNTʕσδλϧϓϩμΫτ
   ͷͨΊͷσβΠϯγεςϜ࣮ફΨΠυz
   

   View Slide

9. ©2019 Wantedly, Inc.
   Ձ஋؍ͱݪଇ
   ϏδϡΞϧΨΠυϥΠϯ
   6*ίϯϙʔωϯτ
   ίʔυʹΑΔ࣮૷
   σβΠϯγεςϜͷ୅දతͳߏ੒ཁૉ
   

   View Slide

10. ©2019 Wantedly, Inc.
    Ձ஋؍ͱݪଇ
    7BMVFTBOE1SJODJQMFT
    

    View Slide

11. Ձ஋؍
    

    View Slide

12. ݪଇ
    %FTJHO4ZTUFNϓϩδΣΫτॳ
    ظͷϊʔτΑΓൈਮ
    

    View Slide

13. ©2019 Wantedly, Inc.
    ϏδϡΞϧΨΠυϥΠϯ
    7JTVBM(VJEFMJOFT
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. ©2019 Wantedly, Inc.
    6*ίϯϙʔωϯτ
    6*$PNQPOFOUT
    

    View Slide

24. ©2019 Wantedly, Inc.
    

    View Slide

25. ©2019 Wantedly, Inc.
    -FWFM'PVOEBUJPOT
    σβΠϯύϥϝʔλ
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. ©2019 Wantedly, Inc.
    -FWFMૢ࡞ཁૉ
    TVSGBDF ܗͱߴ͞ͱ൓Ԡͷఆٛͱ৭
    DPOUFOUT
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. ©2019 Wantedly, Inc.
    -FWFM૊Έ߹Θͤ
    -FWFMͷཁૉΛ࢖ͬͯ
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. ©2019 Wantedly, Inc.
    ίʔυʹΑΔ࣮૷
    *NQMFNFOUJOH%FTJHO4ZTUFN
    

    View Slide

39. ©2019 Wantedly, Inc.
    4LFUDI ;FQMJO 3FBDU
    ▶
    ▶
    

    View Slide

40. 4LFUDI -JCSBSZͱͯ͠ఏڙ
    

    View Slide

41. 4LFUDI
    -JCSBSZͰఆٛ͞Ε͍ͯΔTZNCPM
    ʹର͠ɺTIBQF΍TUBUFɺDPMPSɺ
    FMFWBUJPOͱ͍ͬͨύϥϝʔλΛ
    બͿ
    

    View Slide

42. ;FQMJO &YQPSUFE"SUCPBSE
    

    View Slide

43. ;FQMJO $PNQPOFOU-JTU
    

    View Slide

44. 3FBDU OQNQSJWBUFNPEVMFͱͯ͠ఏڙ
    

    View Slide

45. 3FBDU ϒϥ΢β͔Β֬ೝͰ͖ΔΧλϩά EPD[
    
    

    View Slide

46. 3FBDU ΠϯλϥΫςΟϒʹ+49ͷίʔυΛมߋͰ͖ΔϓϨΠάϥ΢ϯυ
    

    View Slide

47. ©2019 Wantedly, Inc.
    XBOUFEMZEFTJHO
    ΞΠίϯूͷ4LFUDIϑΝΠϧ͔Β8FCJ04"OESPJE༻ͷϦιʔεΛࣗಈੜ੒
    XBOUFEMZDPMPST
    ڞ௨ͷΧϥʔύϨοτఆٛ ZNM
    ͔Β8FCJ04"OESPJE༻ͷϦιʔεΛࣗಈੜ੒
    XBOUFEMZVJ
    3FBDU༻σβΠϯγεςϜ OQN
    
    XBOUFEMZVJJPT
    J04༻σβΠϯγεςϜ DPDPBQPE
    
    XBOUFEMZVJBOESPJE
    "OESPJE༻σβΠϯγεςϜ NBWFO
    
    σβΠϯγεςϜͷίʔυԽ %FTJHO0QT͍҃͸%FTJHO&OHJOFFSJOHͷऔΓ૊Έ
    

    View Slide

48. ©2019 Wantedly, Inc.
    ·ͱΊͱ͜Ε͔Β
    4VNNBSZBOE'VUVSF8PSL
    

    View Slide

49. ©2019 Wantedly, Inc.
    4VNNBSZ
    w σβΠϯγεςϜʹΑͬͯɺҰ؏ੑΛอͪͭͭεέʔϥϒϧͳσβΠϯ͕Մೳʹ
    w ΤϯδχΞͱσβΠφʔͷؒͰσβΠϯݴޠ͕ڞ༗͞ΕίϥϘϨʔγϣϯ͕ͳΊΒ͔ʹ
    'VUVSF8PSL
    w ίϯϙʔωϯτͷൃలͱϝϯςφϯεΛଓ͚Δ
    w σβΠφʔνʔϜʹ͞ΒʹϝϯόʔΛ૿΍͢
    w νʔϜͰͷ4LFUDI-JCSBSZ։ൃͱόʔδϣϯ؅ཧΛߦ͏ "CTUSBDUͷಋೖ
    
    w 8FCJ04"OESPJEͱ֤σόΠεͰͷ࣮૷Λॆ࣮͍ͤͯ͘͞
    ·ͱΊͱ͜Ε͔Β
    

    View Slide