Pro Yearly is on sale from $80 to $50! »

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

0f9840a3c048e0f0adc2f9411bca91dd?s=47 Yoshinori Kawasaki
February 17, 2019

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

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

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

0f9840a3c048e0f0adc2f9411bca91dd?s=128

Yoshinori Kawasaki

February 17, 2019
Tweet

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ͰϚονϯά͢Δ ʮ8BOUFEMZ7JTJUʯͱɺ໊͔ࢗΒಇ͘ਓಉ͕࢜ͭͳ ͕͍ͬͯ͘͜ͱΛ໨తͱͨ͠ʮ8BOUFEMZ1FPQMFʯɻ

    ొ࿥ձࣾ਺͸ ࣾɺ݄ؒΞΫςΟϒϢʔβ͸ ສਓɻ
  4. ©2019 Wantedly, Inc. ΞϓϦͷ57$.์өͷཪଆ 8BOUFEMZ1FPQMFͷΠϯϑϥࣄྫ

  5. ©2019 Wantedly, Inc.  8BOUFEMZΛࢧ͑Δٕज़ͱ։ൃମ੍ ʙάϧʔϓϝοηʔδػೳ4ZODͷࣄྫʙ  8BOUFEMZ1FPQMF ໊ࢗ؅ཧˍҰׅεΩϟϯΞϓϦ 

    ΞϓϦͷ57$.์өͷཪଆ 8BOUFEMZ1FPQMFͷΠϯϑϥࣄྫ  σβΠϯγεςϜ͕ Ճ଎ͤ͞ΔϓϩμΫτ։ൃ
  6. ©2019 Wantedly, Inc.  ػೳͷෳࡶ͞͸૿Ճɺ૊৫͸ࡉ෼Խ  ৽͍͠σβΠφʔϝϯόʔͷࢀՃͱσβΠϯͷมભ  ෳ਺ΞϓϦؒͰϒϥϯυͱͯ͠ͷҰ؏ੑͷ௿Լ 

    σόΠεɾϝσΟΞؒͷඇҰ؏ੑ ೥ؒͷܧଓ։ൃʹΑΔ໰୊
  7. ©2019 Wantedly, Inc. $POTJTUFODZ4DBMBCJMJUZ 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%FTJHO4ZTUFNTʕσδλϧϓϩμΫτ ͷͨΊͷσβΠϯγεςϜ࣮ફΨΠυz
  9. ©2019 Wantedly, Inc.  Ձ஋؍ͱݪଇ  ϏδϡΞϧΨΠυϥΠϯ  6*ίϯϙʔωϯτ 

    ίʔυʹΑΔ࣮૷ σβΠϯγεςϜͷ୅දతͳߏ੒ཁૉ
  10. ©2019 Wantedly, Inc. Ձ஋؍ͱݪଇ 7BMVFTBOE1SJODJQMFT

  11. Ձ஋؍

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

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

  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. ©2019 Wantedly, Inc. 6*ίϯϙʔωϯτ 6*$PNQPOFOUT

  24. ©2019 Wantedly, Inc.

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

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

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

  34. None
  35. None
  36. None
  37. None
  38. ©2019 Wantedly, Inc. ίʔυʹΑΔ࣮૷ *NQMFNFOUJOH%FTJHO4ZTUFN

  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 OQNQSJWBUFNPEVMFͱͯ͠ఏڙ

  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. ·ͱΊͱ͜Ε͔Β 4VNNBSZBOE'VUVSF8PSL

  49. ©2019 Wantedly, Inc. 4VNNBSZ w σβΠϯγεςϜʹΑͬͯɺҰ؏ੑΛอͪͭͭεέʔϥϒϧͳσβΠϯ͕Մೳʹ w ΤϯδχΞͱσβΠφʔͷؒͰσβΠϯݴޠ͕ڞ༗͞ΕίϥϘϨʔγϣϯ͕ͳΊΒ͔ʹ 'VUVSF8PSL w

    ίϯϙʔωϯτͷൃలͱϝϯςφϯεΛଓ͚Δ w σβΠφʔνʔϜʹ͞ΒʹϝϯόʔΛ૿΍͢ w νʔϜͰͷ4LFUDI-JCSBSZ։ൃͱόʔδϣϯ؅ཧΛߦ͏ "CTUSBDUͷಋೖ  w 8FCJ04"OESPJEͱ֤σόΠεͰͷ࣮૷Λॆ࣮͍ͤͯ͘͞ ·ͱΊͱ͜Ε͔Β