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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. © TSURUOKA Hideki. All Rights Reserved. 4
   01 ࣗݾ঺հ
   Material Design 3 ֓گ
   Material YouͰֶͿύʔιφϥΠζ
   ·ͱΊ
   02
   03
   04
   ※౤ӨͷΈ
   

   View Slide

5. Chapter 01
   ࣗݾ঺հ
   Chapter 01
   ౤ӨͷΈ
   

   View Slide

6. Chapter 02
   Material Design 3 ֓گ
   

   View Slide

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

   View Slide

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/
   

   View Slide

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

   View Slide

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

    View Slide

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 ؚ͕·ΕΔ͜ͱ΋͠͹͠͹͋Γɺͦͷڥք͸ίϯςΩετʹΑͬͯόϥόϥ
    

    View Slide

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/
    

    View Slide

13. Chapter 03
    Material YouͰֶͿύʔιφϥΠζ
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

18. © TSURUOKA Hideki. All Rights Reserved. 18
    Harmonized
    

    View Slide

19. © TSURUOKA Hideki. All Rights Reserved.
    • Android 13 Ͱొ৔ͨ͠ɺΞϓϦΞΠίϯΛนࢴςʔϚʹ౷Ұͤ͞Δػೳ
    
    
    • Dynamic ColorͰ͸ΞϓϦέʔγϣϯͷத਎ʹ͍͕ͭͯͩͬͨɺΞϓϦΞΠίϯ΁΋ύʔιφϥΠζԽ͕ਐΜͩ
    19
    Themed App Icons
    

    View Slide

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
    

    View Slide

21. © TSURUOKA Hideki. All Rights Reserved. 21
    https://www.android.com/intl/ja_jp/android-12/
    Android OS 12’s copy
    

    View Slide

22. © TSURUOKA Hideki. All Rights Reserved. 22
    • iOS 16 ϩοΫը໘ͷΧελϚΠζ͕ՄೳʹͳΔ
    
    
    • σβΠϯͷ܏޲͸ؒҧ͍ͳ͘ύʔιφϥΠζʢN1࠷దԽʣʹγϑτ͍ͯ͠Δ
    iOS 16 Customization
    

    View Slide

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
    

    View Slide

24. Chapter 04
    ·ͱΊ
    

    View Slide

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

    View Slide

26. © TSURUOKA Hideki. All Rights Reserved. 26
    Engineering with UI Design
    • ҰൠͷUIσβΠφʔͰ͸౸ఈ౸ୡͰ͖ͦ͏ʹແ͍ڥ஍ʹ Google ͷσβΠϯγεςϜ͕ଘࡏ͠ɺUI Design ͷ໾ׂ͕ࣦΘΕ͔͚͍ͯΔʁ
    
    
    • ॴҦσβΠφʔ͚ͩͰ͸ͳ͘ɺΞϓϦ։ൃΛ͢ΔਓؒʢϚωδϝϯτϩʔϧ΋ؚΉʣ͸͜ͷลΓͷཧղ͕ඞਢͱͳΔ͸ͣ
    
    
    • ΤϯδχΞϦϯάͱσβΠϯͷྖҬ͕ʢྑ͍ҙຯͰʣӹʑᐆດʹͳ͖͍ͬͯͯΔͳͱײ͍ͯ͡·͢
    

    View Slide

27. © TSURUOKA Hideki. All Rights Reserved. 27
    • ࢲͨͪ͸ͲͷΑ͏ʹࣗ෼ͨͪͷϓϩμΫτΛϒϥϯσΟϯά͠Ϣʔβʔʹಧ͚͍ͯ͘΂͖ͳͷ͔
    
    
    • ΧϥʔͳͲʹΑΔද૚తͳϏδϡΞϧʹΑΔσβΠϯ͸ແ͘ͳ͍ͬͯ͘ʁ
    
    
    • ྫ͑͹ɺʰΧϥʔ͸ઈରʓʓʱʰʓʓͳΩϟϥΫλʔ͸ઈର͜͜ʹ഑ஔ͢Δʱͱ͍ͬͨఏڙଆ໨ઢʹΑΔԡ͠෇͚͸࣌୅ͷྲྀΕʹԊΘͳ͍
    
    
    • ૢ࡞ੑ΍ମݧՁ஋ͷఏڙͳͲɺΑΓUXʹدͬͨํ޲Ͱސ٬ʹࣗ෼ͨͪͷΞϓϦͷՁ஋Λಧ͚ͯຬ଍ͯ͠΋Β͏ඞཁ͕͋Δ
    Future App Designs
    

    View Slide

28. © TSURUOKA Hideki. All Rights Reserved. 28
    #all-zp_hands
    ࣾһΤϯδχΞνʔϜʰhandsʱͷϝϯόʔΛத৺ʹ
    
    
    ΤϯδχΞϦϯά΍σβΠϯʹ͍ͭͯɺ஌ݟΛڞ༗͢ΔνϟϯωϧͰ͢ɻ
    ࠓճͷΑ͏ͳυϝΠϯʹڵຯ͕͋Δํ͸ͥͻ͓ؾܰʹ͝ࢀՃ͍ͩ͘͞ 🙌
    

    View Slide

29. Chapter 01
    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    Thank You!
    օ༷ͷͳʹ͔ͷώϯτʹͳΕ͹޾͍Ͱ͢
    

    View Slide

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
    

    View Slide