デザインシステムが加速させるプロダクト開発 / 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
2. ©2019 Wantedly, Inc. Yoshinori Kawasaki CTO at Wantedly, Inc. ೥݄ΑΓϏδωε4/4ʮ8BOUFEMZʯͷ։ൃɾӡӦʹࢀըɻ։ൃɺ Ϛʔέɺ࠾༻ɾҭ੒ͳͲɺϓϩμΫτͱ૊৫ͮ͘Γʹ෯޿͘ܞΘΔɻ࠷ ۙ͸ΤϯδχΞɺσβΠφʔɺฤूऀɺਓࣄͷνʔϜΛ୲౰ɻ github.com/luvtechno twitter.com/kawasy
3. ©2019 Wantedly, Inc. ձࣾ঺հ Ϗδωε4/4ʮ8BOUFEMZʯ
   ձࣾͱಇ͘ਓɺ·ͨ͸ಇ͘ਓಉ࢜Λͭͳ͛Δϓϥο τϑΥʔϜɻओཁαʔϏε͸ɺձࣾͱಇ͘ਓ͕ϛο γϣϯ΍Ϗδϣϯ΁ͷlڞײzͰϚονϯά͢Δ ʮ8BOUFEMZ
   7JTJUʯͱɺ໊͔ࢗΒಇ͘ਓಉ͕࢜ͭͳ ͕͍ͬͯ͘͜ͱΛ໨తͱͨ͠ʮ8BOUFEMZ
   1FPQMFʯɻ ొ࿥ձࣾ਺͸ ࣾɺ݄ؒΞΫςΟϒϢʔβ͸ ສਓɻ
4. ©2019 Wantedly, Inc. 
   ΞϓϦͷ57$.์өͷཪଆ 8BOUFEMZ
   1FPQMFͷΠϯϑϥࣄྫ
5. ©2019 Wantedly, Inc.  8BOUFEMZΛࢧ͑Δٕज़ͱ։ൃମ੍
   ʙάϧʔϓϝοηʔδػೳ4ZODͷࣄྫʙ  8BOUFEMZ
   1FPQMF
   
   ໊ࢗ؅ཧˍҰׅεΩϟϯΞϓϦ  ΞϓϦͷ57$.์өͷཪଆ 8BOUFEMZ
   1FPQMFͷΠϯϑϥࣄྫ  σβΠϯγεςϜ͕
   Ճ଎ͤ͞ΔϓϩμΫτ։ൃ
6. ©2019 Wantedly, Inc.  ػೳͷෳࡶ͞͸૿Ճɺ૊৫͸ࡉ෼Խ
    ৽͍͠σβΠφʔϝϯόʔͷࢀՃͱσβΠϯͷมભ
    ෳ਺ΞϓϦؒͰϒϥϯυͱͯ͠ͷҰ؏ੑͷ௿Լ
    σόΠεɾϝσΟΞؒͷඇҰ؏ੑ ೥ؒͷܧଓ։ൃʹΑΔ໰୊
7. ©2019 Wantedly, Inc. $POTJTUFODZ
   
   4DBMBCJMJUZ
   w ϓϩμΫτ΍σόΠεΛ·͍ͨͰ΋69͕Ұ؏͢Δ
   w ༏लͳσβΠφʔͰ͋Δ͜ͱΛલఏʹ ୭Ͱ΋ϒϥϯυͱͯ͠ͷҰ؏ੑ͕อͯΔ
   7FMPDJUZ
   
   $PMMBCPSBUJPO
   w ࠣ຤ͳ6*Ͱ͸ͳ͘ɺ69ཁٻΛຬͨ͢ମݧઃܭʹϑΥʔΧεͰ͖Δ
   w σβΠφʔͱΤϯδχΞͷؒͷڠྗͱίϛϡχέʔγϣϯ͕؆୯ʹͳΔ
   w Ϣʔβʹಧ͘·Ͱͷ͕࣌ؒ୹ॖ͞ΕΔ ͦͷΑ͏ͳ໰୊΁ͷղͱͯ͠ͷσβΠϯγεςϜ
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%FTJHO
   4ZTUFNTʕσδλϧϓϩμΫτ ͷͨΊͷσβΠϯγεςϜ࣮ફΨΠυz
9. ©2019 Wantedly, Inc.  Ձ஋؍ͱݪଇ
    ϏδϡΞϧΨΠυϥΠϯ
    6*ίϯϙʔωϯτ
    ίʔυʹΑΔ࣮૷ σβΠϯγεςϜͷ୅දతͳߏ੒ཁૉ
10. ©2019 Wantedly, Inc. Ձ஋؍ͱݪଇ 7BMVFT
    BOE
    1SJODJQMFT
11. Ձ஋؍
12. ݪଇ %FTJHO
    4ZTUFNϓϩδΣΫτॳ ظͷϊʔτΑΓൈਮ
13. ©2019 Wantedly, Inc. ϏδϡΞϧΨΠυϥΠϯ 7JTVBM
    (VJEFMJOFT
23. ©2019 Wantedly, Inc. 6*ίϯϙʔωϯτ
    6*
    $PNQPOFOUT
24. ©2019 Wantedly, Inc.
25. ©2019 Wantedly, Inc. -FWFM
    
    'PVOEBUJPOT σβΠϯύϥϝʔλ
29. ©2019 Wantedly, Inc. -FWFM
    
    
    ૢ࡞ཁૉ TVSGBDF
    ܗͱߴ͞ͱ൓Ԡͷఆٛͱ৭
    
    DPOUFOUT
33. ©2019 Wantedly, Inc. -FWFM
    
    ૊Έ߹Θͤ -FWFM
    ͷཁૉΛ࢖ͬͯ
38. ©2019 Wantedly, Inc. ίʔυʹΑΔ࣮૷ *NQMFNFOUJOH
    %FTJHO
    4ZTUFN
39. ©2019 Wantedly, Inc. 4LFUDI ;FQMJO 3FBDU ▶ ▶
40. 4LFUDI -JCSBSZ
    ͱͯ͠ఏڙ
41. 4LFUDI -JCSBSZͰఆٛ͞Ε͍ͯΔ
    TZNCPM ʹର͠ɺTIBQF΍TUBUFɺDPMPSɺ FMFWBUJPOͱ͍ͬͨύϥϝʔλΛ બͿ
42. ;FQMJO &YQPSUFE
    "SUCPBSE
43. ;FQMJO $PNQPOFOU
    -JTU
44. 3FBDU OQN
    QSJWBUF
    NPEVMF
    ͱͯ͠ఏڙ
    
45. 3FBDU ϒϥ΢β͔Β֬ೝͰ͖ΔΧλϩά EPD[
46. 3FBDU ΠϯλϥΫςΟϒʹ+49ͷίʔυΛมߋͰ͖ΔϓϨΠάϥ΢ϯυ
47. ©2019 Wantedly, Inc. XBOUFEMZEFTJHO
    ΞΠίϯूͷ4LFUDIϑΝΠϧ͔Β8FCJ04"OESPJE༻ͷϦιʔεΛࣗಈੜ੒
    XBOUFEMZDPMPST
    ڞ௨ͷΧϥʔύϨοτఆٛ ZNM ͔Β8FCJ04"OESPJE༻ͷϦιʔεΛࣗಈੜ੒
    XBOUFEMZVJ
    3FBDU༻σβΠϯγεςϜ OQN
    XBOUFEMZVJJPT
    J04༻σβΠϯγεςϜ DPDPBQPE
    XBOUFEMZVJBOESPJE
    "OESPJE༻σβΠϯγεςϜ NBWFO σβΠϯγεςϜͷίʔυԽ %FTJHO0QT
    ͍҃͸
    %FTJHO
    &OHJOFFSJOH
    ͷऔΓ૊Έ
48. ©2019 Wantedly, Inc. ·ͱΊͱ͜Ε͔Β 4VNNBSZ
    BOE
    'VUVSF
    8PSL
49. ©2019 Wantedly, Inc. 4VNNBSZ
    w σβΠϯγεςϜʹΑͬͯɺҰ؏ੑΛอͪͭͭεέʔϥϒϧͳσβΠϯ͕Մೳʹ
    w ΤϯδχΞͱσβΠφʔͷؒͰσβΠϯݴޠ͕ڞ༗͞ΕίϥϘϨʔγϣϯ͕ͳΊΒ͔ʹ
    'VUVSF
    8PSL
    w ίϯϙʔωϯτͷൃలͱϝϯςφϯεΛଓ͚Δ
    w σβΠφʔνʔϜʹ͞ΒʹϝϯόʔΛ૿΍͢
    w νʔϜͰͷ4LFUDI
    -JCSBSZ։ൃͱόʔδϣϯ؅ཧΛߦ͏ "CTUSBDUͷಋೖ
    w 8FCJ04"OESPJEͱ֤σόΠεͰͷ࣮૷Λॆ࣮͍ͤͯ͘͞ ·ͱΊͱ͜Ε͔Β