$30 off During Our Annual Pro Sale. View Details »

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

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

usagimaru

May 25, 2018
Tweet

More Decks by usagimaru

Other Decks in Design

Transcript

  1. 2018.5.25
    © 2018 Satori MARU. @usagimaruma
    Google I/O Extended 2018 Shibuya
    ͷઃܭࢥ૝Λ୳Δ
    #io2018md
    https://goodpatch.connpass.com/event/87400/
    Material Design

    View Slide

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

    View Slide

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

    View Slide

  4. iOS
    #io2018md

    View Slide

  5. https://material.io/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. https://material.io/

    View Slide

  21. #io2018md
    'MPBUJOH"DUJPO#VUUPO

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. iOS
    #io2018md

    View Slide

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

    View Slide

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

    View Slide

  29. iOS
    #io2018md

    View Slide

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

    View Slide

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

    View Slide

  32. #io2018md
    #PUUPN"QQ#BS0WFSMBQQJOH'"#

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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




    iOS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  59. #io2018md
    iOS

    View Slide

  60. #io2018md
    iOS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  72. #io2018md
    https://developer.apple.com/design/

    View Slide

  73. https://material.io/

    View Slide

  74. 2018.5.25
    © 2018 Satori MARU. @usagimaruma
    Google I/O Extended 2018 Shibuya
    ͷઃܭࢥ૝Λ୳Δ
    #io2018md
    https://goodpatch.connpass.com/event/87400/
    Material Design

    View Slide