デザインとエンジニアリングの狭間で/ design-engineering

サイバーエージェントの技術者（エンジニア・クリエイター）向けカンファレンス『CA BASE CAMP 2019』
デザインとエンジニアリングの狭間で
谷拓樹

Transcript

1. ڱؒͰ ΤϯδχΞϦϯάͷ σβΠϯͱ CA BASECAMP / F-01 / HIROKI TANI 2019.02.22
2. ৽ن։ൃہ / CATS ϑϩϯτΤϯυΤϯδχΞ ? ୩ ୓थ αΠόʔΤʔδΣϯτ 2प໨
4. WebσβΠφʔ 15 years ago…
5. ϑϩϯτΤϯυΤϯδχΞ CyberAgent, Inc.
6. ৘ใઃܭ, UXσβΠϯ, LP, Ϣʔβʔςετ, UIઃܭ, όφʔ, ϒϥϯσΟϯά, ϩΰ , ϥΠςΟϯά, ΞΫηγϏϦςΟ… HTML, CSS, JavaScript, Π ϯϑϥ, Ϗϧυ؀ڥ, ΞʔΩ ςΫνϟ, ύϑΥʔϚϯε, ηΩϡϦςΟ, ΞΫηγϏ ϦςΟ… DESIGNER ENGINEER
7. S I U
8. σβΠϯͰࢦఆͨ͠৭ͱҧ͏ Ϙλϯͷҧ͍͕Θ͔Βͳ͍ 0݅ͷͱ͖ͷදࣔ͸Ͳ͏ͳΔͷʁ ʢ Popup | Dialog ʣίϯϙʔωϯτ͕…
9. ڞ௨ݴޠΛ࣋ͭ σβΠϯͷݴޠԽɾ໌จԽ
10. https://www.slideshare.net/johnmaeda/design-in-tech-report-2018
11. https://www.slideshare.net/johnmaeda/design-in-tech-report-2018 3. ίϯϐϡʔςʔγϣφϧσβΠϯ 2. σβΠϯγϯΩϯά 1. ΫϥγΧϧσβΠϯ
12. https://store.google.com/jp/product/google_home
13. γεςϜࢥߟ σβΠϯࢥߟ €
14. σβΠϯ BUSINESS DESIGNER ENGINEER
15. https://www.ted.com/talks/tim_brown_urges_designers_to_think_big ॏཁա͗Δ σβΠφʔ͚ͩʹ೚ͤΔʹ͸ σβΠϯ͸ DESIGN’S TOO IMPORTANT TO BE LEFT TO DESIGNERS Tim Brown | CEO, IDEO
16. OPS Design Ops SYSTEM Design System Design Language LANGUAGE
18. Design Language
19. σβΠϯͷݪଇ
20. https://polaris.shopify.com/patterns-and-guides/product-experience-principles
21. Build a cohesive experience. Empower but don’t overwhelm. Put merchants first. Be polished but not ornamental. PRODUCT EXPERIENCE PRINCIPLES Shopify Polaris https://polaris.shopify.com/patterns-and-guides/product-experience-principles
22. ຊ࣭తͰ͋Δ ༏ΕͨʮσβΠϯͷݪଇʯ ࣮ߦ͠΍͍͢ ֮͑΍͍͢ ࢹ఺͕͋Δ
23. #00CAA5 ? ੨ ? ྘ ? Primary Color ? ΩʔΧϥʔ ?
25. WHAT HOW WHY ͳͥ͜ͷ৭ͳͷ͔ ͲͷΑ͏ʹ࢖͏ͷ͔ Ͳ͏͍͏৭ͳͷ͔
26. https://atlaskit.atlassian.com/
27. https://atlassian.design/guidelines/brand/color Primary palette Primary paletteOur primary palette uses bright colors to bring a boldness to our brand, and is used in logical ways throughout product and marketing to guide the eye and highlight the important bits. We pepper warmer, secondary palette colors throughout to soften the experience and to impart confidence and optimism. ATLASSIAN DESIGN Atlassian HOW WHAT WHY
28. https://www.lightningdesignsystem.com
29. https://www.lightningdesignsystem.com/design-tokens/
30. γεςϜࢥߟ σβΠϯࢥߟ €
31. Design System
32. https://adele.uxpin.com
33. 䁟ଟʷ ಺ٙൖ㵩 6*㗮ɓ஫׌ 㘦㙒㙘㘾㘤㖽㘪㙚㙦
34. 㙉㙜㙦㘼 ̮ٙൖ㵩 69㗮ɓ஫׌
35. Ͳ͏΍ͬͯӡ༻͢Δͷ͔ ʁ
36. https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935 㙊㙠㘳㘢㘻㘒౤Զ㗙㘋㙊㙠㘳㘢㘻㗧㗂㘋 㘺㘩㘗㙦㘪㘬㘹㙓㗯㙊㙠㘫㘚㘢㘻㗧㗯㗪㗄 A DESIGN SYSTEM ISN’T A PROJECT. IT’S A PRODUCT, SERVING PRODUCTS. Nathan Curtis | Founder, EightShapes
37. Design Ops
38. ණʕɾණݖۨ DESIGN-OPS TEAM PRODUCT A PRODUCT B PRODUCT C
39. ʱ౳ɾஹΥۨ DESIGN-OPS TEAM PRODUCT A PRODUCT B PRODUCT C
40. ණʕɾණݖۨ ʱ౳ɾஹΥۨ
41. ණʕɾණݖۨ ʱ౳ɾஹΥۨ
42. ණʕɾණݖۨ ʱ౳ɾஹΥۨ
43. ණʕɾණݖۨ ʱ౳ɾஹΥۨ
44. https://www.designbetter.co/designops-handbook
45. https://www.designbetter.co/designops-handbook/designops-scenarios-models ֤ʑͷઐ໳ྖҬͷ࢓ࣄʹ σβΠϯʹؔΘΔօͷ࣌ؒͱ༨༟Λͭ͘Γ THE JOB OF THE DESIGNOPS TEAM IS TO PROTECT THE TIME AND HEADSPACE OF EVERYONE WITHIN THE DESIGN ORGANIZATION, WHICH ALLOWS EVERYONE TO FOCUS ON THEIR RESPECTIVE CRAFT. Collin Whitehead | Dropbox ूதͤ͞ΔΑ͏ʹ͢Δ͜ͱ
46. ৘ใઃܭ, UXσβΠϯ, LP, Ϣʔβʔςετ, UIઃܭ, όφʔ, ϒϥϯσΟϯά, ϩΰ , ϥΠςΟϯά, ΞΫηγϏϦςΟ… HTML, CSS, JavaScript, Π ϯϑϥ, Ϗϧυ؀ڥ, ΞʔΩ ςΫνϟ, ύϑΥʔϚϯε, ηΩϡϦςΟ, ΞΫηγϏ ϦςΟ… DESIGNER ENGINEER
47. DESIGNER ENGINEER DESIGN TECHNOLOGIST
48. 㙊㙠㘻㘲㘗㙇㙦㘣 Design Technologist 69㘺㘩㘗㙦 㘷㖽㙞㗮ක䜅 㘺㘩㘗㙦㘪㘬㘹㙓
49. https://airbnb.design/lottie/
50. ͜Μͳʹ׬ᘳͳ΋ͷΛ ͸͡Ί͔Βͭ͘Δඞཁ͕͋Δͷ͔ʁ
51. No.
52. খ͞ͳ੒ޭΛੵΈ্͛Δ খ͞ͳࣦഊΛ܁Γฦ͢ ݪଇ͔Β͸͡ΊΔ
54. ࣦഊ…
55. ઐ೚Ͱ͸ͳ͍ = ػೳ։ൃΛ༏ઌ γεςϜ͕ΏΔ͍ = ͍͋·͍ͳ໋໊ͱ෼ྨ ݪଇ͕ͳ͍ = ൑அج४͕ͳ͍
56. https://www.youtube.com/watch?v=10WzJTSY6wA ࣦഊ͸ࢹ఺Ͱ͋Δ FAILURE IS A PERSPECTIVE Travis Neilson | Designer, Google
57. Design Ops Design System Design Language Design Culture
58. DESIGN ENGINEERING DESIGNER ENGINEER
59. Thank you @hiloki @shiba_mamehiko