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

2022.09.12に開催された 社内端末機能SWG にて登壇

Transcript

1. © TSURUOKA Hideki. All Rights Reserved. 2022.09.12 Design Material Design 3 で ֶ ぶ ύʔιφϧͳσβΠϯ
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. © TSURUOKA Hideki. All Rights Reserved. 28 #all-zp_hands ࣾһΤϯδχΞνʔϜʰhandsʱͷϝϯόʔΛத৺ʹ ΤϯδχΞϦϯά΍σβΠϯʹ͍ͭͯɺ஌ݟΛڞ༗͢ΔνϟϯωϧͰ͢ɻ ࠓճͷΑ͏ͳυϝΠϯʹڵຯ͕͋Δํ͸ͥͻ͓ؾܰʹ͝ࢀՃ͍ͩ͘͞ 🙌
29. Chapter 01 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Thank You! օ༷ͷͳʹ͔ͷώϯτʹͳΕ͹޾͍Ͱ͢
30. © NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Con fi dential. 30 • [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