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

10分で完全に(雰囲気を)理解するマテリアルデザイン

yagi2
April 20, 2018

 10分で完全に(雰囲気を)理解するマテリアルデザイン

Kyoto.LT 第20回の発表スライドです
https://kyotolt.connpass.com/event/82294/

yagi2

April 20, 2018
Tweet

More Decks by yagi2

Other Decks in Technology

Transcript

  1. 10෼Ͱ׬શʹཧղ͢Δ
    ϚςϦΞϧσβΠϯ
    γʔαʔגࣜձࣾɹItuski Aoyagi (@yagi2)
    2018-04-20(Fri) Kyoto.LT #20

    View full-size slide

  2. ࣗݾ঺հ
    ɾ੨༄ थʢ͓͋΍͗ ͍͖ͭʣ
    a.k.a ΍͗ʹ͍
    ɾAndroidΞϓϦΤϯδχΞ
    ʢ✨2೥໨✨ʣ
    ɾσβΠϯͳΜʹ΋Θ͔ΒΜϚϯ

    View full-size slide

  3. ϚςϦΞϧσβΠϯ
    ஌ͬͯΔਓ

    View full-size slide

  4. –from Wikipedia
    “ϚςϦΞϧσβΠϯʢMaterial Designʣ͸ɺ
    ΞϝϦΧ߹ऺࠃͷGoogle͕ࣾఏএͨ͠Ϣʔβʔ
    ΤΫεϖϦΤϯεσβΠϯͷମܥɺ͓ΑͼͦΕ
    Λ࣮ݱ͢Δ։ൃٕज़΍ख๏ɺσβΠϯɺࢼΈͳ
    Ͳͷแׅతݺশɻ”

    View full-size slide

  5. ϚςϦΞϧσβΠϯ
    ΨΠυϥΠϯ
    ΛಡΜͩ͜ͱ͋Δਓ

    View full-size slide

  6. 10෼Ͱ׬શʹཧղ͢Δ
    ϚςϦΞϧσβΠϯ

    View full-size slide

  7. 10෼Ͱ׬શʹཧղ͢Δ
    ϚςϦΞϧσβΠϯ
    10෼ޙͷ໨ඪ →

    View full-size slide

  8. ࠓ೔͸ϚςϦΞϧσβΠϯΨΠυϥΠϯͷද໘Λ
    ;ΜΘΓͳͧͬͯงғؾΛཧղ͠·͠ΐ͏

    View full-size slide

  9. 10෼ͰงғؾΛཧղ͢Δ
    ϚςϦΞϧσβΠϯ
    γʔαʔגࣜձࣾɹItuski Aoyagi (@yagi2)
    2018-04-20(Fri) Kyoto.LT #20

    View full-size slide

  10. ʮݹయతͳ͍͍σβΠϯͷݪଇʯ
    +
    ʮٕज़΍ՊֶͷՄೳੑͱֵ৽ʯ

    ࢹ֮తͳݴޠͷ࡞੒
    ϚςϦΞϧσβΠϯͷΰʔϧ

    View full-size slide

  11. ϚςϦΞϧ͸ϝλϑΝʔ
    େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ
    ҙຯͷ͋ΔϞʔγϣϯ
    ϚςϦΞϧσβΠϯͷ3ݪଇ

    View full-size slide

  12. ϚςϦΞϧ͸ݱ࣮ੈքʹج͍ͮ
    ͍ͯΔ
    ਓؒʹͱͬͯೃછΈͷ͋Δײ֮
    ΛऔΓೖΕΔ
    ࢴͱΠϯΫͷॏͳΓɾ࡞༻
    ϚςϦΞϧ͸ϝλϑΝʔ

    View full-size slide

  13. Ϣʔβʔͷૢ࡞Λڧௐͯ͠ɺॏ
    ཁͳػೳ͕͙͢Θ͔Δʢಓඪʣ
    େ୾Ͱੜ͖ੜ͖ͱͨ͠Πϯλʔ
    ϑΣʔεʢσβΠϯʣ͸Ϣʔβʔ
    Λເதʹͤ͞Δ
    େ୾Ͱੜ͖ੜ͖ͱͨ͠ɺҙࣝతͳσβΠϯ

    View full-size slide

  14. ಈ͖Λ༩͑ͯɺಈ࡞ͷओମ͕Ϣʔβʔ
    Ͱ͋Δ͜ͱͷڧௐ
    มܗɾ࠶ߏ੒͢Δͱ͖΋Ϣʔβʔମ
    ݧͷ࿈ଓੑΛଛͳΘͳ͍Α͏ʹ͢Δ
    ಈ͖ʹ͸ҙຯ͕͋Δ
    ҙຯͷ͋ΔϞʔγϣϯ

    View full-size slide

  15. ͳΜ͔͍Ζ͍Ζ೉͍͠

    View full-size slide

  16. ϚςϦΞϧ͸ϝλϑΝʔ
    େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ
    ҙຯͷ͋ΔϞʔγϣϯ
    ϚςϦΞϧσβΠϯͷ3ݪଇ

    View full-size slide

  17. ϚςϦΞϧ͸ϝλϑΝʔ
    େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ
    ҙຯͷ͋ΔϞʔγϣϯ
    ϚςϦΞϧσβΠϯͷ3ݪଇ

    View full-size slide

  18. ݱ࣮ੈքͷҹ࡮෺͸ࢴͱΠϯΫ
    ͰσβΠϯ͞Ε͍ͯΔ
    ͦΕΛൺᄻͱ͍ͯ࣋ͬͯ͘͠
    → ෺ཧతʹ͋Γ͑ͳ͍σβΠϯ͸͠ͳ͍
    ϚςϦΞϧ͸ϝλϑΝʔ

    View full-size slide

  19. ϘλϯͳͲͷUIύʔπ͸ࢴͰͰ
    ͖͍ͯΔͱߟ͑Δɻ
    1dpͷް͞Λ͍࣋ͬͯΔ
    ݱ࣮ੈքͱಉ͘͡ɺॏͶΒΕΔ
    ࢴͱΠϯΫ

    View full-size slide

  20. ϚςϦΞϧ͸ϝλϑΝʔ
    େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ
    ҙຯͷ͋ΔϞʔγϣϯ
    ϚςϦΞϧσβΠϯͷ3ݪଇ

    View full-size slide

  21. ϚςϦΞϧ͸ϝλϑΝʔ
    େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ
    ҙຯͷ͋ΔϞʔγϣϯ
    ϚςϦΞϧσβΠϯͷ3ݪଇ

    View full-size slide

  22. Ϣʔβʔͷૢ࡞ΛσβΠϯͱͯ͠
    දݱ͢Δ
    ૢ࡞Λڧௐͯ͠ૢ࡞͢Δ্Ͱͷ
    ಓඪΛͭ͘Δ
    ҙࣝతͳσβΠϯ

    View full-size slide

  23. ϚςϦΞϧ͸ϝλϑΝʔ
    େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ
    ҙຯͷ͋ΔϞʔγϣϯ
    ϚςϦΞϧσβΠϯͷ3ݪଇ

    View full-size slide

  24. ϚςϦΞϧ͸ϝλϑΝʔ
    େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ
    ҙຯͷ͋ΔϞʔγϣϯ
    ϚςϦΞϧσβΠϯͷ3ݪଇ

    View full-size slide

  25. ύʔπ͸෺࣭ɺͭ·Γ࣭ྔΛ࣋ͭͷͰ
    ෺ཧ๏ଇʹै͏
    Ϣʔβʔʹ࿈ଓੑΛࣦΘͤͳ͍Α͏ʹ
    ΞχϝʔγϣϯΛͤͯ͞αϙʔτ͢Δ
    ҙຯͷ͋ΔϞʔγϣϯ

    View full-size slide

  26. ݱ࣮ੈքͷϧʔϧΛऔΓೖΕͯ
    ௚ײతͳૢ࡞Λ࣮ݱ
    Ϣʔβʔͷૢ࡞ʹඥ෇͘ҙຯ
    ͷ͋ΔϞʔγϣϯͰྑ͍ମݧ
    Λ༩͑Δ
    ·ͱΊ

    View full-size slide

  27. Material Design Guideline
    Twitter : @materialdesign
    Material Icons
    Design Templates
    ϚςϦΞϧσβΠϯ͜ͱ͸͡Ί

    View full-size slide