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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

WebσβΠφʔ 15 years ago…

Slide 5

Slide 5 text

ϑϩϯτΤϯυΤϯδχΞ CyberAgent, Inc.

Slide 6

Slide 6 text

৘ใઃܭ, UXσβΠϯ, LP, Ϣʔβʔςετ, UIઃܭ, όφʔ, ϒϥϯσΟϯά, ϩΰ , ϥΠςΟϯά, ΞΫηγϏϦςΟ… HTML, CSS, JavaScript, Π ϯϑϥ, Ϗϧυ؀ڥ, ΞʔΩ ςΫνϟ, ύϑΥʔϚϯε, ηΩϡϦςΟ, ΞΫηγϏ ϦςΟ… DESIGNER ENGINEER

Slide 7

Slide 7 text

S I U

Slide 8

Slide 8 text

σβΠϯͰࢦఆͨ͠৭ͱҧ͏ Ϙλϯͷҧ͍͕Θ͔Βͳ͍ 0݅ͷͱ͖ͷදࣔ͸Ͳ͏ͳΔͷʁ ʢ Popup | Dialog ʣίϯϙʔωϯτ͕…

Slide 9

Slide 9 text

ڞ௨ݴޠΛ࣋ͭ σβΠϯͷݴޠԽɾ໌จԽ

Slide 10

Slide 10 text

https://www.slideshare.net/johnmaeda/design-in-tech-report-2018

Slide 11

Slide 11 text

https://www.slideshare.net/johnmaeda/design-in-tech-report-2018 3. ίϯϐϡʔςʔγϣφϧσβΠϯ 2. σβΠϯγϯΩϯά 1. ΫϥγΧϧσβΠϯ

Slide 12

Slide 12 text

https://store.google.com/jp/product/google_home

Slide 13

Slide 13 text

γεςϜࢥߟ σβΠϯࢥߟ

Slide 14

Slide 14 text

σβΠϯ BUSINESS DESIGNER ENGINEER

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

OPS Design Ops SYSTEM Design System Design Language LANGUAGE

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Design Language

Slide 19

Slide 19 text

σβΠϯͷݪଇ

Slide 20

Slide 20 text

https://polaris.shopify.com/patterns-and-guides/product-experience-principles

Slide 21

Slide 21 text

Build a cohesive experience. Empower but don’t overwhelm. Put merchants ﬁrst. Be polished but not ornamental. PRODUCT EXPERIENCE PRINCIPLES Shopify Polaris https://polaris.shopify.com/patterns-and-guides/product-experience-principles

Slide 22

Slide 22 text

ຊ࣭తͰ͋Δ ༏ΕͨʮσβΠϯͷݪଇʯ ࣮ߦ͠΍͍͢ ֮͑΍͍͢ ࢹ఺͕͋Δ

Slide 23

Slide 23 text

#00CAA5 ? ੨ ? ྘ ? Primary Color ? ΩʔΧϥʔ ?

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

WHAT HOW WHY ͳͥ͜ͷ৭ͳͷ͔ ͲͷΑ͏ʹ࢖͏ͷ͔ Ͳ͏͍͏৭ͳͷ͔

Slide 26

Slide 26 text

https://atlaskit.atlassian.com/

Slide 27

Slide 27 text

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 conﬁdence and optimism. ATLASSIAN DESIGN Atlassian HOW WHAT WHY

Slide 28

Slide 28 text

https://www.lightningdesignsystem.com

Slide 29

Slide 29 text

https://www.lightningdesignsystem.com/design-tokens/

Slide 30

Slide 30 text

γεςϜࢥߟ σβΠϯࢥߟ

Slide 31

Slide 31 text

Design System

Slide 32

Slide 32 text

https://adele.uxpin.com

Slide 33

Slide 33 text

䁟ଟʷ ಺ٙൖ㵩 6*㗮ɓ஫׌ 㘦㙒㙘㘾㘤㖽㘪㙚㙦

Slide 34

Slide 34 text

㙉㙜㙦㘼 ̮ٙൖ㵩 69㗮ɓ஫׌

Slide 35

Slide 35 text

Ͳ͏΍ͬͯӡ༻͢Δͷ͔ ʁ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Design Ops

Slide 38

Slide 38 text

ණʕɾණݖۨ DESIGN-OPS TEAM PRODUCT A PRODUCT B PRODUCT C

Slide 39

Slide 39 text

ʱ౳ɾஹΥۨ DESIGN-OPS TEAM PRODUCT A PRODUCT B PRODUCT C

Slide 40

Slide 40 text

ණʕɾණݖۨ ʱ౳ɾஹΥۨ

Slide 41

Slide 41 text

ණʕɾණݖۨ ʱ౳ɾஹΥۨ

Slide 42

Slide 42 text

ණʕɾණݖۨ ʱ౳ɾஹΥۨ

Slide 43

Slide 43 text

ණʕɾණݖۨ ʱ౳ɾஹΥۨ

Slide 44

Slide 44 text

https://www.designbetter.co/designops-handbook

Slide 45

Slide 45 text

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 ूதͤ͞ΔΑ͏ʹ͢Δ͜ͱ

Slide 46

Slide 46 text

Slide 47

Slide 47 text

DESIGNER ENGINEER DESIGN TECHNOLOGIST

Slide 48

Slide 48 text

㙊㙠㘻㘲㘗㙇㙦㘣 Design Technologist 69㘺㘩㘗㙦㘷㖽㙞㗮ක䜅㘺㘩㘗㙦㘪㘬㘹㙓

Slide 49

Slide 49 text

https://airbnb.design/lottie/

Slide 50

Slide 50 text

͜Μͳʹ׬ᘳͳ΋ͷΛ ͸͡Ί͔Βͭ͘Δඞཁ͕͋Δͷ͔ʁ

Slide 51

Slide 51 text

No.

Slide 52

Slide 52 text

খ͞ͳ੒ޭΛੵΈ্͛Δ খ͞ͳࣦഊΛ܁Γฦ͢ ݪଇ͔Β͸͡ΊΔ

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

ࣦഊ…

Slide 55

Slide 55 text

ઐ೚Ͱ͸ͳ͍ = ػೳ։ൃΛ༏ઌ γεςϜ͕ΏΔ͍ = ͍͋·͍ͳ໋໊ͱ෼ྨ ݪଇ͕ͳ͍ = ൑அج४͕ͳ͍

Slide 56

Slide 56 text

https://www.youtube.com/watch?v=10WzJTSY6wA ࣦഊ͸ࢹ఺Ͱ͋Δ FAILURE IS A PERSPECTIVE Travis Neilson | Designer, Google