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

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͕ࣾఏএͨ͠Ϣʔβʔ ΤΫεϖϦΤϯεσβΠϯͷମܥɺ͓ΑͼͦΕ Λ࣮ݱ͢Δ։ൃٕज़΍ख๏ɺσβΠϯɺࢼΈͳ Ͳͷแׅతݺশɻ”

5. None

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

7. None

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

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

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

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

12. ʮݹయతͳ͍͍σβΠϯͷݪଇʯ + ʮٕज़΍ՊֶͷՄೳੑͱֵ৽ʯ ↓ ࢹ֮తͳݴޠͷ࡞੒ ϚςϦΞϧσβΠϯͷΰʔϧ

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

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

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

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

17. None

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

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

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

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

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

23. None
24. None
25. None

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

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

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

29. None

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

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

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

33. None

34. Do Don’t

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

36. ͓·͚

37. Material Design Guideline Twitter : @materialdesign Material Icons Design Templates

    ϚςϦΞϧσβΠϯ͜ͱ͸͡Ί