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

Material Themingとは何か / material theming overview

konifar
January 17, 2019

Material Themingとは何か / material theming overview

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

konifar

January 17, 2019
Tweet

More Decks by konifar

Other Decks in Programming

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