$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

Yoshinori Kawasaki

February 17, 2019
Tweet

More Decks by Yoshinori Kawasaki

Other Decks in Design

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