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

2016ba6b977a2e6691811fa66d5f4336?s=47 CyberAgent
February 22, 2019

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

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

2016ba6b977a2e6691811fa66d5f4336?s=128

CyberAgent

February 22, 2019
Tweet

Transcript

  1. ڱؒͰ ΤϯδχΞϦϯάͷ σβΠϯͱ CA BASECAMP / F-01 / HIROKI TANI

    2019.02.22
  2. ৽ن։ൃہ / CATS ϑϩϯτΤϯυΤϯδχΞ ? ୩ ୓थ αΠόʔΤʔδΣϯτ 2प໨

  3. None
  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

  17. None
  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 ? ΩʔΧϥʔ

    ?
  24. None
  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. খ͞ͳ੒ޭΛੵΈ্͛Δ খ͞ͳࣦഊΛ܁Γฦ͢ ݪଇ͔Β͸͡ΊΔ

  53. None
  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