Material Themingとは何か / material theming overview

Kyash社内でエンジニアチーム向けにLTした話です。

Transcript

1. Material Themingͱ͸Կ͔
   2019/01/17 (໦)
   Kyash Tech lunch @konifar
   

   View Slide

2. AndroidΞϓϦσβΠϯͷྺ࢙
   • ~2.3 ແ๏஍ଳ
   • 4.0~4.4 Holo
   • 5.0~ Material Design
   • 9.0~ Material Design2 <= New
   

   View Slide

3. 4.0~4.4 Holo
   

   View Slide

4. 5.0~ Material Design
   

   View Slide

5. 9.0~ Material Design2
   

   View Slide

6. Not Renewal, it's Update
   

   View Slide

7. ैདྷͷ໰୊఺Λղܾͨ͠
   • ֦ுੑ

   ΨΠυϥΠϯʹࣔ͞ΕͨσβΠϯʹબ୒ࢶ͕
   ͳ͘ɺըҰతͰϒϥϯυ৭͕ग़͠ʹ͍͘
   • ࣮ݱੑ

   ಛʹΞχϝʔγϣϯ·ΘΓͷ࣮૷͸ݸʑͷΤ
   ϯδχΞʹҕͶΒΕ͍ͯΔ
   

   View Slide

8. Material Theming
   • ֦ுੑΛ࣋ͬͨ৽͍͠ϚςϦΞϧσβΠϯͷ
   ࢦ਑ɾࣄྫूͱɺͦΕΛ࣮ݱ͢ΔͨΊͷσβ
   Πϯɾ։ൃͷπʔϧηοτΛGoogle͕ఏڙ
   • https://material.io/design/material-theming/
   overview.html
   

   View Slide

9. ࢦ਑ͷΞοϓσʔτ
   • Shapeɺ৽͍͠ίϯϙʔωϯτ
   • ৭ͷ࢖͍ํΛ۩ମతʹ
   

   View Slide

10. ࣄྫू
    • https://material.io/design/material-studies/
    

    View Slide

11. Sketch plugin
    • https://material.io/tools/theme-editor/
    

    View Slide

12. ։ൃπʔϧ
    • Material Componentsͱ͍͏ϥΠϒϥϦ
    • https://github.com/material-components
    • AndroidɺiOSɺFlutterɺWeb͕͋Δ
    

    View Slide

13. Demo
    

    View Slide

14. Kyashʹ׆͔͢ͱͨ͠Β
    • Χʔυৄࡉ͸Backdrop͔ͭ͏

    https://material.io/design/components/
    backdrop.html
    • ςΩετೖྗ෦෼͸࿮͖ͭʹ͢Δ
    • ؙ֯/Χοτͷେ͖͞΋ϒϥϯυʹ߹Θͤͯݕ
    ౼͢Δ
    

    View Slide

15. ࣮૷ͷΩϟονΞοϓ͸
    Ͱ͖ͨͷͰ΍͍ͬͯͧ͘
    

    View Slide