Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

A4c8177aa00623c9593f10be748b3861?s=128

usagimaru

May 25, 2018
Tweet

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/ /FX1SJODJQMFT

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

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

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

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

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

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

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

  14. .BUFSJBM5IFNJOH 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$PNQPOFOUTGPSJ04 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