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

「Material Design の設計思想を探る」
Google I/O Extended 2018 Shibuya #io2018md
https://goodpatch.connpass.com/event/87400/
https://twitter.com/hashtag/io2018md

Transcript

1. 2018.5.25 © 2018 Satori MARU. @usagimaruma Google I/O Extended 2018 Shibuya ͷઃܭࢥ૝Λ୳Δ #io2018md https://goodpatch.connpass.com/event/87400/ Material Design
2. @usagimaruma ؙ
   ྯཬ · Δ ͞ ͱ Γ גࣜձࣾάουύον Application Designer / Interface Developer / iOS Developer macOS Developer / Sketch Plugin Developer #io2018md
3. https://note.designing.jp/n/n088e4834c392 #io2018md
4. iOS #io2018md
5. https://material.io/
6. #io2018md https://material.io/ /FX
   1SJODJQMFT
7. Principles .BUFSJBM
   JT
   UIF
   NFUBQIPS
   #PME
   HSBQIJD
   JOUFOUJPOBM
   .PUJPO
   QSPWJEFT
   NFBOJOH
   'MFYJCMF
   GPVOEBUJPO
   $SPTTQMBUGPSN #io2018md
8. σβΠϯݪଇ ϝλϑΝʔදݱ
   େ୾ɺੜ͖ੜ͖ɺҙਤత
   Ϟʔγϣϯ͸ҙຯΛ༩͑Δ
   ॊೈͳج൫
   ΫϩεϓϥοτϑΥʔϜ #io2018md
9. σβΠϯݪଇ ϝλϑΝʔදݱ
   େ୾ɺੜ͖ੜ͖ɺҙਤత
   Ϟʔγϣϯ͸ҙຯΛ༩͑Δ
   ॊೈͳج൫
   ΫϩεϓϥοτϑΥʔϜ #io2018md
10. .BUFSJBM
    $PNQPOFOUT
    GPS
    J04 https://material.io/ #io2018md
11. Goals ମݧͷ౷Ұ
    ࢹ֮ݴޠͱͯ͠ͷσβΠϯ
    ϏδϡΞϧͷॊೈੑ #io2018md
12. Goals ମݧͷ౷Ұ
    ࢹ֮ݴޠͱͯ͠ͷσβΠϯ
    ϏδϡΞϧͷॊೈੑ #io2018md
13. #io2018md https://material.io/ ʮॊೈੑʯ
14. .BUFSJBM
    5IFNJOH https://material.io/ #io2018md
15. #io2018md https://material.io/
16. ද૚ ࠎ֨ ߏ଄ ཁ݅ ઓུ UX ͷ5ஈ֊Ϟσϧ ϏδωεʗαʔϏεઃܭ ΠϯλʔϑΣΠεͷߏ଄ઃܭ ΠϯλʔϑΣΠεͷϏδϡΞϧઃܭ #io2018md
17. ද૚ ࠎ֨ ߏ଄ ཁ݅ ઓུ ϏδωεʗαʔϏεઃܭ ΠϯλʔϑΣΠεͷߏ଄ઃܭ UX ͷ5ஈ֊Ϟσϧ ΠϯλʔϑΣΠεͷϏδϡΞϧઃܭ ද૚Λૠ͛ସ͑ͯ΋ͦͷԼ૚͸มΘΒͳ͍ #io2018md Material Theming
18. ද૚ ࠎ֨ ߏ଄ ཁ݅ ઓུ ϏδωεʗαʔϏεઃܭ ΠϯλʔϑΣΠεͷߏ଄ઃܭ UX ͷ5ஈ֊Ϟσϧ ΠϯλʔϑΣΠεͷϏδϡΞϧઃܭ ද૚Λૠ͛ସ͑ͯ΋ͦͷԼ૚͸มΘΒͳ͍ #io2018md Material Theming
19. ද૚ ࠎ֨ ߏ଄ ཁ݅ ઓུ ϏδωεʗαʔϏεઃܭ ΠϯλʔϑΣΠεͷߏ଄ઃܭ UX ͷ5ஈ֊Ϟσϧ ΠϯλʔϑΣΠεͷϏδϡΞϧઃܭ ද૚Λૠ͛ସ͑ͯ΋ͦͷԼ૚͸มΘΒͳ͍ #io2018md Material Theming
20. https://material.io/
21. #io2018md 'MPBUJOH
    "DUJPO
    #VUUPO
22. σβΠϯΨΠυϥΠϯͷղऍ ίϯςΫετͰ΋ͬͱ΋ओཁͳΞΫγϣϯΛఏڙ
    εΫϦʔϯ಺ʹઃஔ͢Δ
    '"#
    ͸ͳΔ΂͘ͻͱͭ
    '"#
    ͔ΒϝχϡʔͳͲΛల։Ͱ͖Δ #io2018md
23. #io2018md '"#
    ͸ٵண͢ΔαʔϑΣΠεͱͷؔ࿈Λอͭ σβΠϯΨΠυϥΠϯͷղऍ
24. ΠϯλϥΫγϣϯϞσϧ #io2018md αʔϑΣΠε Ϙλϯ બ୒͞ΕͨΦϒδΣΫτ ΦϒδΣΫτʹର͢ΔΞΫγϣϯ ʪ໊ࢺʫ ʪಈࢺʫ ೝ஌ ݁Ռ
25. iOS ͱൺֱ͠ͳ͕Βઃܭࢥ૝Λ୳Δ #io2018md
26. iOS #io2018md
27. iOS iOS Ͱ͸ɺφϏήʔγϣϯόʔӈ୺ʹ ͦͷίϯςΫετͰ΋ͬͱ΋ॏཁͳ ΞΫγϣϯ͕ઃஔ͞ΕΔ͜ͱ͕ଟ͍ #io2018md
28. iOS ňબ୒ʯ͸Ϟʔυ͕ͩɺ ίϯςϯπΤϦΞΛΦϒδΣΫτͱݟཱͯͨ ͱ͖ɺ҉໧తʹϑΥʔΧε͕౰͍ͨͬͯΔ ίϯςϯπΤϦΞʹର͢ΔΞΫγϣϯͱ΋ ղऍͰ͖ͳ͘͸ͳ͍ #io2018md
29. iOS #io2018md
30. iOS φϏήʔγϣϯόʔӈ୺ͷςΩετϘλϯ͸ ॳݟͰ͸ؾ෇͖ʹ͍͘ ʢҰ౓ֶशͯ͠͠·͑͹໰୊Ͱ͸ͳ͍͕ʣ #io2018md
31. iOS FAB ͷಠࣗղऍɾಠ࣮ࣗ૷ #io2018md
32. #io2018md #PUUPN
    "QQ
    #BS
    
    0WFSMBQQJOH
    '"#
33. #io2018md #PUUPN
    "QQ
    #BS
    
    *OTFU
    '"#
34. #io2018md #PUUPN
    "QQ
    #BS
    
    *OTFU
    '"# !
35. #io2018md https://material.io/ &MFWBUJPO
    )JFSBSDIZ
36. #io2018md https://material.io/ Ԟߦ͖
37. #io2018md https://material.io/ खલʹ͋Δ΄ͲϢʔβʔʹ͍ۙ
38. #io2018md iOS ϞʔμϧϏϡʔ͸खલʹల։͞ΕΔ ݱࡏͷϞʔυ͕ϢʔβʔʹΑΓۙ͘ͳΔ
39. #io2018md https://material.io/ #BDLESPQ
40. https://material.io/ #io2018md ैɿഎܠϨΠϠʔ ओɿલܠϨΠϠʔ ΦϓγϣϯɺϑΟϧλʔઃఆɺφϏήʔγϣϯ ϝΠϯίϯςϯπྖҬ લܠϨΠϠʔ ϑΥʔΧε എܠϨΠϠʔ
41. https://material.io/ #io2018md લܠɿϑΥʔΧε͕͋Δ എܠͷଘࡏΛೝ஌ͭͭ͠ɺ લܠͷϞʔυʹ͍Δঢ়ଶ લܠϨΠϠʔ എܠϨΠϠʔ ϑΥʔΧε
42. https://material.io/ #io2018md എܠɿϑΥʔΧε͕͋Δ લܠɿҰ࣌ୀආ Ұ࣌తʹഎܠͷϞʔυʹભҠ͍ͯ͠Δ දࣔ͸ҡ࣋͞Ε͍ͯΔͷͰɺ લܠͷঢ়ଶ΋ಉ࣌ʹ஌Δ͜ͱ͕Ͱ͖Δ લܠϨΠϠʔ എܠϨΠϠʔ ϑΥʔΧε
43. Backdrop ʹ͓͚ΔϑΥʔΧεͷભҠաఔ https://material.io/ #io2018md എܠϨΠϠʔ લܠϨΠϠʔ
44. ηϛϞʔμϧϏϡʔʹ͓͚ΔϑΥʔΧεͷભҠաఔ #io2018md എܠ എܠʗલܠ લܠ iOS
45. https://material.io/ #io2018md Backdrop iOS: ηϛϞʔμϧϏϡʔ ओɿഎܠϨΠϠʔ ैɿલܠϨΠϠʔ ϝΠϯίϯςϯπྖҬ ৄࡉ৘ใɺΦϓγϣϯ౳ ैɿഎܠϨΠϠʔ ओɿલܠϨΠϠʔ Φϓγϣϯ ϑΟϧλʔઃఆ φϏήʔγϣϯ౳ ϝΠϯίϯςϯπྖҬ ओ ै ै ओ iOS
46. ࢹ֮ݴޠͱͯ͠ͷ Material Design #io2018md
47. https://material.io/ #io2018md ཁૉಉ࢜ͷؔ܎ੑ iOS
48. https://material.io/ #io2018md ཁૉಉ࢜ͷؔ܎ੑ iOS
49. https://material.io/ #io2018md ঢ়ଶભҠͷ࿈ଓੑ iOS
50. https://material.io/ #io2018md ঢ়ଶભҠͷ࿈ଓੑ iOS
51. https://material.io/ #io2018md iOS ݁ՌͷϑΟʔυόοΫ
52. https://material.io/ #io2018md iOS ݁ՌͷϑΟʔυόοΫ
53. https://material.io/ #io2018md ΞΫγϣϯͷࣔࠦ iOS
54. https://material.io/ #io2018md ΞΫγϣϯͷࣔࠦ iOS
55. https://medium.com/ux-in-motion/a87a4584ddc #io2018md
56. Ϟʔγϣϯ͕΋ͨΒ͢Ձ஋ ඇจࣈݴޠͰͷ
    ର࿩
    ಈ͖ʹΑͬͯ
    ҙຯ
    Λ༩͑Δ
    ࣌ؒ࣠ʹԊͬͨ
    ঢ়ଶ
    Λදݱ
    ະདྷΛ
    ࣔࠦ #io2018md
57. https://material.io/design/motion/understanding-motion.html #io2018md
58. https://medium.com/ux-in-motion/a87a4584ddc #io2018md https://material.io/
59. #io2018md iOS
60. #io2018md iOS
61. #io2018md https://play.google.com/store/apps/details?id=com.apple.android.music&hl=ja
62. #io2018md ද૚ ࠎ֨ ߏ଄ ཁ݅ ઓུ UX ͷ5ஈ֊Ϟσϧ αʔϏεج൫ ϢʔβʔΠϯλʔϑΣΠε
63. #io2018md UX ͷ5ஈ֊Ϟσϧ ද૚ ࠎ֨ ߏ଄ ཁ݅ ઓུ αʔϏεج൫ ϢʔβʔΠϯλʔϑΣΠε Android iOS
64. https://material.io/ #hashtag https://medium.com/ux-in-motion/a87a4584ddc
65. Material Design ͷίϯηϓτͷղऍ σδλϧੈքʹ࠶ݱ͞ΕͨʮࢴʯͱʮΠϯΫʼn
    αʔϑΣΠεͷߴ౓΍ӄӨʹΑͬͯ৘ใͷ
    ֊૚ߏ଄
    Λදݱ
    ҙຯͷ͋Δ
    Ϟʔγϣϯ
    όϥόϥͩͬͨੈքͷ
    ౷Ұ #io2018md
66. #io2018md https://material.io/ ʮॊೈੑʯ
67. #io2018md https://material.io/
68. ද૚ ࠎ֨ ߏ଄ ཁ݅ ઓུ ϏδωεʗαʔϏεઃܭ ΠϯλʔϑΣΠεͷߏ଄ઃܭ UX ͷ5ஈ֊Ϟσϧ ΠϯλʔϑΣΠεͷϏδϡΞϧઃܭ Material Theming ද૚Λૠ͛ସ͑ͯ΋ͦͷԼ૚͸มΘΒͳ͍ #io2018md
69. .BUFSJBM
    $PNQPOFOUT
    GPS
    J04 https://material.io/ #io2018md
70. ΠϯλϥΫγϣϯϞσϧ #io2018md αʔϑΣΠε Ϙλϯ બ୒͞ΕͨΦϒδΣΫτ ΦϒδΣΫτʹର͢ΔΞΫγϣϯ ʪ໊ࢺʫ ʪಈࢺʫ ೝ஌ ݁Ռ
71. https://material.io/ #io2018md ैɿഎܠϨΠϠʔ ओɿલܠϨΠϠʔ ΦϓγϣϯɺϑΟϧλʔઃఆɺφϏήʔγϣϯ ϝΠϯίϯςϯπྖҬ
72. #io2018md https://developer.apple.com/design/
73. https://material.io/
74. 2018.5.25 © 2018 Satori MARU. @usagimaruma Google I/O Extended 2018 Shibuya ͷઃܭࢥ૝Λ୳Δ #io2018md https://goodpatch.connpass.com/event/87400/ Material Design