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

Material Design 3 で学ぶパーソナルなデザイン

ツルオカ
December 04, 2022

Material Design 3 で学ぶパーソナルなデザイン

ツルオカ

December 04, 2022
Tweet

Other Decks in Design

Transcript

  1. Material Design 3 で ֶ ぶ ύʔιφϧͳσβΠϯ © TSURUOKA Hideki.

    All Rights Reserved. 2022.09.12 Design
  2. © TSURUOKA Hideki. All Rights Reserved. 2 Google I/O 2021

    ͷجௐߨԋͰ Material You ͕ൃද͞ΕɺAndroid 12 ͔Βਖ਼ࣜʹ Material Design 3 ͱͯ͠ఏڙ͕։࢝͞Ε·ͨ͠ɻࠓճ͸ɺMaterial Design 3 ͷ ΩʔϫʔυͷҰͭͰ͋ΔʰύʔιφϥΠζʱΛத৺ʹɺͦͷ֓گ΍σβΠϯγ εςϜɺࢲ͕ͨͪ͜Ε͔Βఏڙ͢Δ΂͖σβΠϯʹ͍͓ͭͯ࿩͠·͢ɻ Today’s Talk ຊ೔͓࿩͢Δ͜ͱ
  3. © TSURUOKA Hideki. All Rights Reserved. 3 ͜Μͳํʹ͓͢͢Ί • Material

    Design 3ͷ֓گɾ৘ใΛΩϟονΞοϓ͍ͨ͠ํ • ΞϓϦσβΠϯͷτϨϯυ΍܏޲Λ೺Ѳ͓͖͍ͯͨ͠ํ • ػೳ։ൃΛ༏ઌͯ͠μʔΫϞʔυରԠͳͲΛޙճ͠ʹ͍ͯ͠Δํ ʢ΋ͪΖΜɺ͜ΕʹݶΓ·ͤΜʣ Recommend
  4. © TSURUOKA Hideki. All Rights Reserved. 4 01 ࣗݾ঺հ Material

    Design 3 ֓گ Material YouͰֶͿύʔιφϥΠζ ·ͱΊ 02 03 04 ※౤ӨͷΈ
  5. Chapter 01 ࣗݾ঺հ Chapter 01 ౤ӨͷΈ

  6. Chapter 02 Material Design 3 ֓گ

  7. © TSURUOKA Hideki. All Rights Reserved. 7 What is Material

    Design? “ϢʔβʔΠϯλʔϑΣΠεઃܭͷϕετϓϥΫςΟεΛ αϙʔτ͢Δ ΨΠυϥΠϯɺίϯϙʔωϯτɺπʔϧ શମΛࣔ͢ॊೈੑΛ݉Ͷඋ͑ͨσβΠϯγεςϜ
  8. © TSURUOKA Hideki. All Rights Reserved. 8 What is Material

    Design? AppleʢiOS, macOSʣ GoogleʢAndroidʣ • ΞϓϦ։ൃʹ͓͚Δ UI ΨΠυϥΠϯͱͯ͠ɺApple ͷ Human Inte rf ace GuidelinesʢHIGʣͱηοτͰޠΒΕΔ͜ͱ͕ଟ͍ • ނʹɺAndroid ͸ Material DesignɺiOS ͸ HIG Λݩʹߏங͢Δͷ͕ఆੴͰ͋Γ४ڌ͢Δ͚ͩͰҰఆ඼࣭ͷϓϩμΫτΛ࡞Δ͜ͱ͕Ͱ͖Δ • ࠷ۙͰ͸ React ͳͲͷ Web ΞϓϦέʔγϣϯͰ΋࢖ΘΕΔػձ͕૿͍͑ͯΔ https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/ https://m3.material.io/
  9. © TSURUOKA Hideki. All Rights Reserved. 9 Material Design’s History

    • Material Design͸2014ʹొ৔͠ࠓ೥Ͱ8೥໨Λܴ͑ΔσβΠϯγεςϜ • Material Design 3ͷొ৔ʹ൐͍ɺچੈ୅ͷωʔϛϯά͕ M1, M2 ͱশ͞ΕΔܗͱͳͬͨ
  10. © TSURUOKA Hideki. All Rights Reserved. 10 What is features

    of M3 ? • Material Youͷొ৔: Ϣʔβʔ୺຤ͷนࢴςʔϚ͔Β৭Λநग़͠ɺͦͷ৭Λϕʔεʹ΢ΟδΣοτ΍ΞϓϦͷ഑৭͕มΘΔػೳΛ౥ࡌ • Design Tokenͷಋೖ: ฏͨ͘ݴ͏ͱσβΠϯ͔Β։ൃ·ͰҰ؏ͨ͠ڞ௨ݴޠͷΑ͏ͳ΋ͷ • ͦͷଞίϯϙωϯτͷൈຊతͳΞοϓσʔτ
  11. © TSURUOKA Hideki. All Rights Reserved. 11 Material You Material

    Design 3 Material You Material Design 3 ≠ Material You • Google I/O 2021 ͷجௐߨԋͰൃද͞ΕͨύʔιφϥΠζ΍ϢʔβʔͷදݱΛଚॏ͢Δ Material Design 3 ͷ৽͍֓͠೦ • Α͋͘Δޡղͱͯ͠ݫີʹ͸ Material Design 3 ≠ Material You Ͱ͋ΓػೳͷҰ෦ • ͨͩ͠ɺMaterial Design 3 ͱͯ͠ Material You ؚ͕·ΕΔ͜ͱ΋͠͹͠͹͋Γɺͦͷڥք͸ίϯςΩετʹΑͬͯόϥόϥ
  12. © TSURUOKA Hideki. All Rights Reserved. 12 ex. Gmail Web

    App • 2022೥7݄ɺGmail Web ΞϓϦʹ Material Design 3 ͕ঃʑʹద༻͞ΕΔͱ͍͏Ξφ΢ϯε͕͋Γ࿩୊ʹ • ͜ͷ Gmail ͷྫΛ࢝Ί Material Design 3 ͕ঃʑʹੈͷதʹਁಁ͍ͯ͠Δ࣮ײ͕ಘΒΕΔ https://blog.google/products/gmail/gmail-design-update/
  13. Chapter 03 Material YouͰֶͿύʔιφϥΠζ

  14. © TSURUOKA Hideki. All Rights Reserved. 14 Why is Material

    You needed ? ػೳ systematic ମݧ experience
  15. © TSURUOKA Hideki. All Rights Reserved. 15 Why is Material

    You needed ? • M1ͷ໨త͸ʮςΫϊϩδʔΛશͯͷਓʹͱͬͯඒ͘͠γϯϓϧͳ΋ͷʹ͢Δ͜ͱɾϞόΠϧͱ΢ΣϒͷΤΫεϖϦΤϯεΛ߹ཧԽ͢Δ͜ͱʯ • ίϯϐϡʔςΟϯάͷ੒௕ͱڞʹਓʑͷੜ׆ͷதʹଘࡏ͢ΔσΟεϓϨΠͷ਺͸૿͑ଓ͚͖ͯͨ • Ϣʔβʔ͸ࣗ෼༻ͷσόΠεʹରͯ͠ΑΓදݱྗͱ੍ޚΛཁٻ͍ͯ͠ΔͨΊɺΑΓ࣮༻త͔ͭػೳతͰ͋Δ͚ͩͰͳ͘ɺʮײ৘Λݺͼى͜͢Α ͏ͳΤΫεϖϦΤϯεΛਓʑ͸ٻΊ͍ͯΔʯͱGoogle͸ݴٴ͍ͯ͠Δ M1 M2 M3 σβΠϯͷ౷ҰԽɾ߹ཧੑͷ௥ٻ Ϣʔβʔͷझຯᅂ޷Λଚॏͨ͠ ώϡʔϚχεςΟοΫͷ୳ٻ ϚςϦΞϧςʔϚͷొ৔ ϢχʔΫͳελΠϧͷҰ؏ੑɾදݱྗͷڧԽ 2014೥ 2018೥ 2021೥
  16. © TSURUOKA Hideki. All Rights Reserved. 16 Dynamic Color •

    Android 12Ͱొ৔ͨ͠ɺMaterial Youͷ໨ۄͱ΋͍͑ΔػೳͰ୺຤Ͱઃఆͨ͠นࢴςʔϚ͕ΞϓϦʹ൓ө͞ΕΔػೳ • ΧϥʔΛத৺ʹΞΠίϯͳͲ΋μΠφϛοΫʹมԽ͠ɺϢʔβʔͷझ޲ʹԊͬͨงғؾʹͳΔ • ۩ମతʹ͸ɺPrimary / SecondaryͷΑ͏ͳ Material Design ʹఆٛ͞Εͨ Color Scheme ͕นࢴςʔϚʹಈతʹࠩ͠ସ͑ΒΕΔ https://m3.material.io/styles/color/dynamic-color/overview
  17. © TSURUOKA Hideki. All Rights Reserved. 17 Harmonized • Dynamic

    ColorΛߏ੒͢ΔΞϧΰϦζϜతͳ֓೦ͰɺCustom Color Λ User Color ʹॱԠͤ͞ΔͨΊͷΞϓϩʔν • ฏͨ͘ड़΂ΔͱɺCustom ColorʢಠࣗΧϥʔʣΛ User Color ʢนࢴςʔϚʣͷ৭૬ʹඍົʹدͤΔ͜ͱͰ౷ҰੑΛੜΈग़͍ͯ͠Δ • Harmonizedͷ֓೦ʹΑΓεϚʔτϑΥϯશମʹରͯ͠นࢴςʔϚΛਁಁ͢Δ͜ͱ͕Ͱ͖ɺύʔιφϧͳΞϓϦΛϢʔβʔ͸ڗडͰ͖Δ
  18. © TSURUOKA Hideki. All Rights Reserved. 18 Harmonized

  19. © TSURUOKA Hideki. All Rights Reserved. • Android 13 Ͱొ৔ͨ͠ɺΞϓϦΞΠίϯΛนࢴςʔϚʹ౷Ұͤ͞Δػೳ

    • Dynamic ColorͰ͸ΞϓϦέʔγϣϯͷத਎ʹ͍͕ͭͯͩͬͨɺΞϓϦΞΠίϯ΁΋ύʔιφϥΠζԽ͕ਐΜͩ 19 Themed App Icons
  20. © TSURUOKA Hideki. All Rights Reserved. 20 Unveiling Material You

    • ։ൃऀ͸ΞϓϦέʔγϣϯΛɺϢʔβʔ͸นࢴςʔϚΛͦΕͧΕσβΠϯ͠༥߹͍ͯ͠Δ • ͭ·ΓɺMaterial You ͸ڞಉΫϦΤΠλʔͱͯ͠ϢʔβʔΛؚΈɺڞʹ࡞͍ͬͯ͘σβΠϯͱݴ͑Δ • ͦΕ͸෇ਵతʹଟ༷ͳσόΠεʹ΋ϑΟοτ͠ɺࣗͣͱΞΫηγϏϦςΟʹ഑ྀ͞Εͨ΋ͷʹ΋ͳ͍ͬͯ͘ 􀉪 􀉪 􀉪 􀉪 Developer User All Design Developer User Wallpaper Theme ʢColor Pale tt eʣ Application ʢComponentʣ Material You Material Design 2 Designed by developer Designed with developer and user
  21. © TSURUOKA Hideki. All Rights Reserved. 21 https://www.android.com/intl/ja_jp/android-12/ Android OS

    12’s copy
  22. © TSURUOKA Hideki. All Rights Reserved. 22 • iOS 16

    ϩοΫը໘ͷΧελϚΠζ͕ՄೳʹͳΔ • σβΠϯͷ܏޲͸ؒҧ͍ͳ͘ύʔιφϥΠζʢN1࠷దԽʣʹγϑτ͍ͯ͠Δ iOS 16 Customization
  23. © TSURUOKA Hideki. All Rights Reserved. 23 • μʔΫςʔϚࣗମ͸2019೥9݄ʹਖ਼ࣜఏڙ͞ΕͨɺAndroid 10

    (API Ϩϕϧ 29) Ҏ্Ͱར༻Մೳͳػೳ • ެ։͔Β3೥͕ܦա͠ Google ެࣜΞϓϦ͸΋ͪΖΜɺσβΠϯΛॏࢹ͍ͯ͠ΔΞϓϦέʔγϣϯ͸ݢฒΈରԠ͍ͯ͠Δঢ়گ • ϝϦοτͱͯ͠ൃ৭΍ి஑࣋ͪͳͲ৭ʑݴΘΕΔ͕ɺલड़ͷύʔιφϥΠζͷ؍఺͔Βߟ͑ΔͱͦͷରԠ͸΍ͬͯવΔ΂͖ͩͱ͸ࢥ͏ • ఆྔతͳϏδωεϝϦοτΛઆ໌Ͱ͖ͣܟԕ͞Ε͕͕ͪͩɺ࠷΋جຊత͔ͭޮՌతͳύʔιφϥΠζͱ΋ݴ͑Δ Dark Theme ͜ͷঢ়گ͕ϢʔβʔͷύʔιφϦςΟΛଚॏ ͍ͯ͠Δͱݴ͑ΔͷͩΖ͏͔ https://material.io/design/color/dark-theme.html
  24. Chapter 04 ·ͱΊ

  25. © TSURUOKA Hideki. All Rights Reserved. 25 Summary •Material Design

    3ʢMaterial YouʣͷύʔιφϥΠζԽͷऔΓ૊Έ͸ Dynamic Color ͱ͍͏ϏδϡΞϧ໘Ͱ෼ ͔Γ΍͍͢఺͔Β Harmonized ͳͲࡉ෦·Ͱ៛ີʹઃܭ͞Ε͓ͯΓɺͦͷදݱ΍ Google ͷຊؾ౓Λ஌ͬͯ ͓͘͜ͱ͸ॏཁ •Ϣʔβʔͷझຯɾझ޲Λଚॏ͢Δ͜ͱ͕ॏཁͰɺ൓ͯ͠ఏڙऀ໨ઢͷσβΠϯΛ͍ͯ͠Δ৔߹͸ͦͷߟ͑Λ վΊΔඞཁ͕͋Γͦ͏ •Material Design ͕໨ࢦ͢ετϦʔϜʹ৐Γɺఏڙ͞Ε͍ͯΔػೳΛՄೳͳݶΓڗड͢Δ͜ͱ͕ϢʔβʔϑϨ ϯυϦʔͳϓϩμΫτ։ൃʹ௚݁͢Δ͸ͣʢ౰વɺݚڀऀ͸ผ͕ͩڊਓͷݞʹ৐Δଆͷਓ͕ؒେ൒ͷ͸ͣʣ •Material You ͷొ৔΋૬·ͬͯɺۙ೥ͷσβΠϯτϨϯυ͸ύʔιφϥΠζʹ͋Δ ͋ΔσβΠφʔ͞ΜʹΑΔίϝϯτ
  26. © TSURUOKA Hideki. All Rights Reserved. 26 Engineering with UI

    Design ʢগ͠ڧΊͷදݱͩͱ͸ࢥ͍·͕͢…ʣ • ҰൠͷUIσβΠφʔͰ͸౸ఈ౸ୡͰ͖ͦ͏ʹແ͍ڥ஍ʹ Google ͷσβΠϯγεςϜ͕ଘࡏ͠ɺUI Design ͷ໾ׂ͕ࣦΘΕ͔͚͍ͯΔʁ • ॴҦσβΠφʔ͚ͩͰ͸ͳ͘ɺΞϓϦ։ൃΛ͢ΔਓؒʢϚωδϝϯτϩʔϧ΋ؚΉʣ͸͜ͷลΓͷཧղ͕ඞਢͱͳΔ͸ͣ • ΤϯδχΞϦϯάͱσβΠϯͷྖҬ͕ʢྑ͍ҙຯͰʣӹʑᐆດʹͳ͖͍ͬͯͯΔͳͱײ͍ͯ͡·͢
  27. © TSURUOKA Hideki. All Rights Reserved. 27 • ࢲͨͪ͸ͲͷΑ͏ʹࣗ෼ͨͪͷϓϩμΫτΛϒϥϯσΟϯά͠Ϣʔβʔʹಧ͚͍ͯ͘΂͖ͳͷ͔ •

    ΧϥʔͳͲʹΑΔද૚తͳϏδϡΞϧʹΑΔσβΠϯ͸ແ͘ͳ͍ͬͯ͘ʁ • ྫ͑͹ɺʰΧϥʔ͸ઈରʓʓʱʰʓʓͳΩϟϥΫλʔ͸ઈର͜͜ʹ഑ஔ͢Δʱͱ͍ͬͨఏڙଆ໨ઢʹΑΔԡ͠෇͚͸࣌୅ͷྲྀΕʹԊΘͳ͍ • ૢ࡞ੑ΍ମݧՁ஋ͷఏڙͳͲɺΑΓUXʹدͬͨํ޲Ͱސ٬ʹࣗ෼ͨͪͷΞϓϦͷՁ஋Λಧ͚ͯຬ଍ͯ͠΋Β͏ඞཁ͕͋Δ Future App Designs
  28. Chapter 01 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Thank You! օ༷ͷͳʹ͔ͷώϯτʹͳΕ͹޾͍Ͱ͢

  29. © NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Con

    fi dential. 29 • [Material Design 3](h tt ps://m3.material.io/) • [Material You ͱ͸ͳΜͳͷ͔ʁɹσβΠφʔ͕ಡΈղ͘Googleͷ͋ͨΒ͍͠σβΠϯʛSatoshi Omiyaʛnote](h tt ps://note.com/satoshiomiya/n/ nb5e271 fb 5aa9) • [Material Design 3ΨΠυϥΠϯ֓ཁ - Qiita](h tt ps://qiita.com/mkosuke/items/314242951766e413b4ab) • [σβΠφʔͱ։ൃऀͷ࿈ܞΛޮ཰Խ͢ΔσβΠϯτʔΫϯͱ͸Կ͔ʁ | ΞυϏUXಓ৔ #UXDojo](h tt ps://blog.adobe.com/jp/publish/2021/03/29/ cc-web-what-are-design-tokens#gs.i0xj9t) • [Material DesignΛޠΓͭ͘͢ʂʮGoogle I/O Extended 2018 Shibuyaʯࢿྉ·ͱΊʛGoodpatch Blog άουύονϒϩά](h tt ps://goodpatch.com/ blog/io2018) • [Material Design 1 vs Material Design 2 - DEV Community 👩💻 👨💻 ](h tt ps://dev.to/creativetim_o ff i cial/material-design-1-vs-material-design-2-he3) • [৽͘͠ͳͬͨMaterial Designͷίίʹ஫໨ʂ࠷ۙͷUIཁૉɾίϯϙʔωϯτͷσβΠϯ΍࢖͍ํ͕͔ͬ͠Γֶ΂Δ | ίϦε](h tt ps://coliss.com/ a rt icles/build-websites/operation/design/about-material-design-2018.html) • [iOS 16ͰϩοΫը໘͕ΧελϚΠζՄೳʹɻiPadOS 16͸΢Οϯυ΢ॏͶରԠʹ ʙmacOS Ventura͸iPhoneΛWebΧϝϥ୅ΘΓʹ࢖͑Δ - PC Watch](h tt ps://pc.watch.impress.co.jp/docs/news/1415041.html) • [Unveiling Material You - Material Design](h tt ps://material.io/blog/announcing-material-you) • [Designing Harmony into Dynamic Color - Material Design](h tt ps://material.io/blog/dynamic-color-harmony) • [A uni fi ed Gmail, for all the ways you connect](h tt ps://blog.google/products/gmail/gmail-design-update/) Appendix