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

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

Transcript

1. 10෼Ͱ׬શʹཧղ͢Δ ϚςϦΞϧσβΠϯ γʔαʔגࣜձࣾɹItuski Aoyagi (@yagi2) 2018-04-20(Fri) Kyoto.LT #20
2. ࣗݾ঺հ ɾ੨༄ थʢ͓͋΍͗ ͍͖ͭʣ a.k.a ΍͗ʹ͍ ɾAndroidΞϓϦΤϯδχΞ ʢ✨2೥໨✨ʣ ɾσβΠϯͳΜʹ΋Θ͔ΒΜϚϯ
3. ϚςϦΞϧσβΠϯ ஌ͬͯΔਓ
4. –from Wikipedia “ϚςϦΞϧσβΠϯʢMaterial Designʣ͸ɺ ΞϝϦΧ߹ऺࠃͷGoogle͕ࣾఏএͨ͠Ϣʔβʔ ΤΫεϖϦΤϯεσβΠϯͷମܥɺ͓ΑͼͦΕ Λ࣮ݱ͢Δ։ൃٕज़΍ख๏ɺσβΠϯɺࢼΈͳ Ͳͷแׅతݺশɻ”
6. ϚςϦΞϧσβΠϯ ΨΠυϥΠϯ ΛಡΜͩ͜ͱ͋Δਓ
8. 10෼Ͱ׬શʹཧղ͢Δ ϚςϦΞϧσβΠϯ
9. 10෼Ͱ׬શʹཧղ͢Δ ϚςϦΞϧσβΠϯ 10෼ޙͷ໨ඪ →
10. ࠓ೔͸ϚςϦΞϧσβΠϯΨΠυϥΠϯͷද໘Λ ;ΜΘΓͳͧͬͯงғؾΛཧղ͠·͠ΐ͏
11. 10෼ͰงғؾΛཧղ͢Δ ϚςϦΞϧσβΠϯ γʔαʔגࣜձࣾɹItuski Aoyagi (@yagi2) 2018-04-20(Fri) Kyoto.LT #20
12. ʮݹయతͳ͍͍σβΠϯͷݪଇʯ + ʮٕज़΍ՊֶͷՄೳੑͱֵ৽ʯ ↓ ࢹ֮తͳݴޠͷ࡞੒ ϚςϦΞϧσβΠϯͷΰʔϧ
13. ϚςϦΞϧ͸ϝλϑΝʔ େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
14. ϚςϦΞϧ͸ݱ࣮ੈքʹج͍ͮ ͍ͯΔ ਓؒʹͱͬͯೃછΈͷ͋Δײ֮ ΛऔΓೖΕΔ ࢴͱΠϯΫͷॏͳΓɾ࡞༻ ϚςϦΞϧ͸ϝλϑΝʔ
15. Ϣʔβʔͷૢ࡞Λڧௐͯ͠ɺॏ ཁͳػೳ͕͙͢Θ͔Δʢಓඪʣ େ୾Ͱੜ͖ੜ͖ͱͨ͠Πϯλʔ ϑΣʔεʢσβΠϯʣ͸Ϣʔβʔ Λເதʹͤ͞Δ େ୾Ͱੜ͖ੜ͖ͱͨ͠ɺҙࣝతͳσβΠϯ
16. ಈ͖Λ༩͑ͯɺಈ࡞ͷओମ͕Ϣʔβʔ Ͱ͋Δ͜ͱͷڧௐ มܗɾ࠶ߏ੒͢Δͱ͖΋Ϣʔβʔମ ݧͷ࿈ଓੑΛଛͳΘͳ͍Α͏ʹ͢Δ ಈ͖ʹ͸ҙຯ͕͋Δ ҙຯͷ͋ΔϞʔγϣϯ
18. ͳΜ͔͍Ζ͍Ζ೉͍͠
19. ϚςϦΞϧ͸ϝλϑΝʔ େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
20. ϚςϦΞϧ͸ϝλϑΝʔ େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
21. ݱ࣮ੈքͷҹ࡮෺͸ࢴͱΠϯΫ ͰσβΠϯ͞Ε͍ͯΔ ͦΕΛൺᄻͱ͍ͯ࣋ͬͯ͘͠ → ෺ཧతʹ͋Γ͑ͳ͍σβΠϯ͸͠ͳ͍ ϚςϦΞϧ͸ϝλϑΝʔ
22. ϘλϯͳͲͷUIύʔπ͸ࢴͰͰ ͖͍ͯΔͱߟ͑Δɻ 1dpͷް͞Λ͍࣋ͬͯΔ ݱ࣮ੈքͱಉ͘͡ɺॏͶΒΕΔ ࢴͱΠϯΫ
26. ϚςϦΞϧ͸ϝλϑΝʔ େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
27. ϚςϦΞϧ͸ϝλϑΝʔ େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
28. Ϣʔβʔͷૢ࡞ΛσβΠϯͱͯ͠ දݱ͢Δ ૢ࡞Λڧௐͯ͠ૢ࡞͢Δ্Ͱͷ ಓඪΛͭ͘Δ ҙࣝతͳσβΠϯ
30. ϚςϦΞϧ͸ϝλϑΝʔ େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
31. ϚςϦΞϧ͸ϝλϑΝʔ େ୾Ͱ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
32. ύʔπ͸෺࣭ɺͭ·Γ࣭ྔΛ࣋ͭͷͰ ෺ཧ๏ଇʹै͏ Ϣʔβʔʹ࿈ଓੑΛࣦΘͤͳ͍Α͏ʹ ΞχϝʔγϣϯΛͤͯ͞αϙʔτ͢Δ ҙຯͷ͋ΔϞʔγϣϯ
34. Do Don’t
35. ݱ࣮ੈքͷϧʔϧΛऔΓೖΕͯ ௚ײతͳૢ࡞Λ࣮ݱ Ϣʔβʔͷૢ࡞ʹඥ෇͘ҙຯ ͷ͋ΔϞʔγϣϯͰྑ͍ମݧ Λ༩͑Δ ·ͱΊ
36. ͓·͚
37. Material Design Guideline Twitter : @materialdesign Material Icons Design Templates ϚςϦΞϧσβΠϯ͜ͱ͸͡Ί