Material Design の設計思想を探る / Thinking Material Design

Slide 1

Slide 1 text

Slide 2

Slide 2 text

@usagimaruma ؙྯཬ · Δ ͞ ͱ Γ גࣜձࣾάουύον Application Designer / Interface Developer / iOS Developer macOS Developer / Sketch Plugin Developer #io2018md

Slide 3

Slide 3 text

https://note.designing.jp/n/n088e4834c392 #io2018md

Slide 4

Slide 4 text

iOS #io2018md

Slide 5

Slide 5 text

https://material.io/

Slide 6

Slide 6 text

#io2018md https://material.io/ /FX1SJODJQMFT

Slide 7

Slide 7 text

Principles .BUFSJBMJTUIFNFUBQIPS #PME HSBQIJD JOUFOUJPOBM .PUJPOQSPWJEFTNFBOJOH 'MFYJCMFGPVOEBUJPO $SPTTQMBUGPSN #io2018md

Slide 8

Slide 8 text

σβΠϯݪଇ ϝλϑΝʔදݱ େ୾ɺੜ͖ੜ͖ɺҙਤత Ϟʔγϣϯ͸ҙຯΛ༩͑Δ ॊೈͳج൫ ΫϩεϓϥοτϑΥʔϜ #io2018md

Slide 9

Slide 9 text

σβΠϯݪଇ ϝλϑΝʔදݱ େ୾ɺੜ͖ੜ͖ɺҙਤత Ϟʔγϣϯ͸ҙຯΛ༩͑Δ ॊೈͳج൫ ΫϩεϓϥοτϑΥʔϜ #io2018md

Slide 10

Slide 10 text

.BUFSJBM$PNQPOFOUTGPSJ04 https://material.io/ #io2018md

Slide 11

Slide 11 text

Goals ମݧͷ౷Ұ ࢹ֮ݴޠͱͯ͠ͷσβΠϯ ϏδϡΞϧͷॊೈੑ #io2018md

Slide 12

Slide 12 text

Goals ମݧͷ౷Ұ ࢹ֮ݴޠͱͯ͠ͷσβΠϯ ϏδϡΞϧͷॊೈੑ #io2018md

Slide 13

Slide 13 text

#io2018md https://material.io/ ʮॊೈੑʯ

Slide 14

Slide 14 text

.BUFSJBM5IFNJOH https://material.io/ #io2018md

Slide 15

Slide 15 text

#io2018md https://material.io/

Slide 16

Slide 16 text

ද૚ ࠎ֨ ߏ଄ ཁ݅ ઓུ UX ͷ5ஈ֊Ϟσϧ ϏδωεʗαʔϏεઃܭ ΠϯλʔϑΣΠεͷߏ଄ઃܭ ΠϯλʔϑΣΠεͷϏδϡΞϧઃܭ #io2018md

Slide 17

Slide 17 text

ද૚ ࠎ֨ ߏ଄ ཁ݅ ઓུ ϏδωεʗαʔϏεઃܭ ΠϯλʔϑΣΠεͷߏ଄ઃܭ UX ͷ5ஈ֊Ϟσϧ ΠϯλʔϑΣΠεͷϏδϡΞϧઃܭ ද૚Λૠ͛ସ͑ͯ΋ͦͷԼ૚͸มΘΒͳ͍ #io2018md Material Theming

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

https://material.io/

Slide 21

Slide 21 text

#io2018md 'MPBUJOH"DUJPO#VUUPO

Slide 22

Slide 22 text

σβΠϯΨΠυϥΠϯͷղऍ ίϯςΫετͰ΋ͬͱ΋ओཁͳΞΫγϣϯΛఏڙ εΫϦʔϯ಺ʹઃஔ͢Δ'"#͸ͳΔ΂͘ͻͱͭ '"#͔ΒϝχϡʔͳͲΛల։Ͱ͖Δ #io2018md

Slide 23

Slide 23 text

#io2018md '"#͸ٵண͢ΔαʔϑΣΠεͱͷؔ࿈Λอͭ σβΠϯΨΠυϥΠϯͷղऍ

Slide 24

Slide 24 text

ΠϯλϥΫγϣϯϞσϧ #io2018md αʔϑΣΠε Ϙλϯ બ୒͞ΕͨΦϒδΣΫτ ΦϒδΣΫτʹର͢ΔΞΫγϣϯ ʪ໊ࢺʫ ʪಈࢺʫ ೝ஌ ݁Ռ

Slide 25

Slide 25 text

iOS ͱൺֱ͠ͳ͕Βઃܭࢥ૝Λ୳Δ #io2018md

Slide 26

Slide 26 text

iOS #io2018md

Slide 27

Slide 27 text

iOS iOS Ͱ͸ɺφϏήʔγϣϯόʔӈ୺ʹ ͦͷίϯςΫετͰ΋ͬͱ΋ॏཁͳ ΞΫγϣϯ͕ઃஔ͞ΕΔ͜ͱ͕ଟ͍ #io2018md

Slide 28

Slide 28 text

iOS ňબ୒ʯ͸Ϟʔυ͕ͩɺ ίϯςϯπΤϦΞΛΦϒδΣΫτͱݟཱͯͨ ͱ͖ɺ҉໧తʹϑΥʔΧε͕౰͍ͨͬͯΔ ίϯςϯπΤϦΞʹର͢ΔΞΫγϣϯͱ΋ ղऍͰ͖ͳ͘͸ͳ͍ #io2018md

Slide 29

Slide 29 text

iOS #io2018md

Slide 30

Slide 30 text

iOS φϏήʔγϣϯόʔӈ୺ͷςΩετϘλϯ͸ ॳݟͰ͸ؾ෇͖ʹ͍͘ ʢҰ౓ֶशͯ͠͠·͑͹໰୊Ͱ͸ͳ͍͕ʣ #io2018md

Slide 31

Slide 31 text

iOS FAB ͷಠࣗղऍɾಠ࣮ࣗ૷ #io2018md

Slide 32

Slide 32 text

#io2018md #PUUPN"QQ#BS0WFSMBQQJOH'"#

Slide 33

Slide 33 text

#io2018md #PUUPN"QQ#BS*OTFU'"#

Slide 34

Slide 34 text

#io2018md #PUUPN"QQ#BS*OTFU'"# !

Slide 35

Slide 35 text

#io2018md https://material.io/ &MFWBUJPO)JFSBSDIZ

Slide 36

Slide 36 text

#io2018md https://material.io/ Ԟߦ͖

Slide 37

Slide 37 text

#io2018md https://material.io/ खલʹ͋Δ΄ͲϢʔβʔʹ͍ۙ

Slide 38

Slide 38 text

#io2018md iOS ϞʔμϧϏϡʔ͸खલʹల։͞ΕΔ ݱࡏͷϞʔυ͕ϢʔβʔʹΑΓۙ͘ͳΔ

Slide 39

Slide 39 text

#io2018md https://material.io/ #BDLESPQ

Slide 40

Slide 40 text

https://material.io/ #io2018md ैɿഎܠϨΠϠʔ ओɿલܠϨΠϠʔ ΦϓγϣϯɺϑΟϧλʔઃఆɺφϏήʔγϣϯ ϝΠϯίϯςϯπྖҬ લܠϨΠϠʔ ϑΥʔΧε എܠϨΠϠʔ

Slide 41

Slide 41 text

https://material.io/ #io2018md લܠɿϑΥʔΧε͕͋Δ എܠͷଘࡏΛೝ஌ͭͭ͠ɺ લܠͷϞʔυʹ͍Δঢ়ଶ લܠϨΠϠʔ എܠϨΠϠʔ ϑΥʔΧε

Slide 42

Slide 42 text

https://material.io/ #io2018md എܠɿϑΥʔΧε͕͋Δ લܠɿҰ࣌ୀආ Ұ࣌తʹഎܠͷϞʔυʹભҠ͍ͯ͠Δ දࣔ͸ҡ࣋͞Ε͍ͯΔͷͰɺ લܠͷঢ়ଶ΋ಉ࣌ʹ஌Δ͜ͱ͕Ͱ͖Δ લܠϨΠϠʔ എܠϨΠϠʔ ϑΥʔΧε

Slide 43

Slide 43 text

Backdrop ʹ͓͚ΔϑΥʔΧεͷભҠաఔ https://material.io/ #io2018md എܠϨΠϠʔ લܠϨΠϠʔ

Slide 44

Slide 44 text

ηϛϞʔμϧϏϡʔʹ͓͚ΔϑΥʔΧεͷભҠաఔ #io2018md എܠ എܠʗલܠ લܠ iOS

Slide 45

Slide 45 text

https://material.io/ #io2018md Backdrop iOS: ηϛϞʔμϧϏϡʔ ओɿഎܠϨΠϠʔ ैɿલܠϨΠϠʔ ϝΠϯίϯςϯπྖҬ ৄࡉ৘ใɺΦϓγϣϯ౳ ैɿഎܠϨΠϠʔ ओɿલܠϨΠϠʔ Φϓγϣϯ ϑΟϧλʔઃఆ φϏήʔγϣϯ౳ ϝΠϯίϯςϯπྖҬ ओ ै ै ओ iOS

Slide 46

Slide 46 text

ࢹ֮ݴޠͱͯ͠ͷ Material Design #io2018md

Slide 47

Slide 47 text

https://material.io/ #io2018md ཁૉಉ࢜ͷؔ܎ੑ iOS

Slide 48

Slide 48 text

https://material.io/ #io2018md ཁૉಉ࢜ͷؔ܎ੑ iOS

Slide 49

Slide 49 text

https://material.io/ #io2018md ঢ়ଶભҠͷ࿈ଓੑ iOS

Slide 50

Slide 50 text

https://material.io/ #io2018md ঢ়ଶભҠͷ࿈ଓੑ iOS

Slide 51

Slide 51 text

https://material.io/ #io2018md iOS ݁ՌͷϑΟʔυόοΫ

Slide 52

Slide 52 text

https://material.io/ #io2018md iOS ݁ՌͷϑΟʔυόοΫ

Slide 53

Slide 53 text

https://material.io/ #io2018md ΞΫγϣϯͷࣔࠦ iOS

Slide 54

Slide 54 text

https://material.io/ #io2018md ΞΫγϣϯͷࣔࠦ iOS

Slide 55

Slide 55 text

https://medium.com/ux-in-motion/a87a4584ddc #io2018md

Slide 56

Slide 56 text

Ϟʔγϣϯ͕΋ͨΒ͢Ձ஋ ඇจࣈݴޠͰͷର࿩ ಈ͖ʹΑͬͯҙຯΛ༩͑Δ ࣌ؒ࣠ʹԊͬͨঢ়ଶΛදݱ ະདྷΛࣔࠦ #io2018md

Slide 57

Slide 57 text

https://material.io/design/motion/understanding-motion.html #io2018md

Slide 58

Slide 58 text

https://medium.com/ux-in-motion/a87a4584ddc #io2018md https://material.io/

Slide 59

Slide 59 text

#io2018md iOS

Slide 60

Slide 60 text

#io2018md iOS

Slide 61

Slide 61 text

#io2018md https://play.google.com/store/apps/details?id=com.apple.android.music&hl=ja

Slide 62

Slide 62 text

#io2018md ද૚ ࠎ֨ ߏ଄ ཁ݅ ઓུ UX ͷ5ஈ֊Ϟσϧ αʔϏεج൫ ϢʔβʔΠϯλʔϑΣΠε

Slide 63

Slide 63 text

#io2018md UX ͷ5ஈ֊Ϟσϧ ද૚ ࠎ֨ ߏ଄ ཁ݅ ઓུ αʔϏεج൫ ϢʔβʔΠϯλʔϑΣΠε Android iOS

Slide 64

Slide 64 text

https://material.io/ #hashtag https://medium.com/ux-in-motion/a87a4584ddc

Slide 65

Slide 65 text

Material Design ͷίϯηϓτͷղऍ σδλϧੈքʹ࠶ݱ͞ΕͨʮࢴʯͱʮΠϯΫŉ αʔϑΣΠεͷߴ౓΍ӄӨʹΑͬͯ৘ใͷ֊૚ߏ଄Λදݱ ҙຯͷ͋ΔϞʔγϣϯ όϥόϥͩͬͨੈքͷ౷Ұ #io2018md

Slide 66

Slide 66 text

#io2018md https://material.io/ ʮॊೈੑʯ

Slide 67

Slide 67 text

#io2018md https://material.io/

Slide 68

Slide 68 text

ද૚ ࠎ֨ ߏ଄ ཁ݅ ઓུ ϏδωεʗαʔϏεઃܭ ΠϯλʔϑΣΠεͷߏ଄ઃܭ UX ͷ5ஈ֊Ϟσϧ ΠϯλʔϑΣΠεͷϏδϡΞϧઃܭ Material Theming ද૚Λૠ͛ସ͑ͯ΋ͦͷԼ૚͸มΘΒͳ͍ #io2018md

Slide 69

Slide 69 text

.BUFSJBM$PNQPOFOUTGPSJ04 https://material.io/ #io2018md

Slide 70

Slide 70 text

ΠϯλϥΫγϣϯϞσϧ #io2018md αʔϑΣΠε Ϙλϯ બ୒͞ΕͨΦϒδΣΫτ ΦϒδΣΫτʹର͢ΔΞΫγϣϯ ʪ໊ࢺʫ ʪಈࢺʫ ೝ஌ ݁Ռ

Slide 71

Slide 71 text

https://material.io/ #io2018md ैɿഎܠϨΠϠʔ ओɿલܠϨΠϠʔ ΦϓγϣϯɺϑΟϧλʔઃఆɺφϏήʔγϣϯ ϝΠϯίϯςϯπྖҬ