Introduction of MaterialDesign for engineer

Transcript

1. ΤϯδχΞͷͨΊͷ ϚςϦΞϧσβΠϯೖ໳ @yashims85
2. ୭ • ԰୅ণ໵ @yashims85 • ྑ͍ϓϩμΫτΛ࡞Γ͍ͨΤϯδχΞ • ؾ࣋ͪ͸20୅த൫
3. օ͞Μ͜Μͳࣄܦݧ͋Γ·ͤΜ ͔ʁ
4. σβΠφ: ͜ΕͰ࣮૷͓ئ͍͠·͢ʔʂ ΅͘: Αͬ͠Όʂ࣮૷͕Μ͹Δ͍ͧʂ ΅͘: Μʔʁ ΅͘: ΜΜΜʔʁ ΅͘: ͏ʔΜɻɻඍົͳσβΠϯͳؾ͕͢Δ͚ͲɺσβΠ φ্͕͖͛ͯͨ΋ͷͩ͠ͳ͊ɻɻ ΅͘: ·͊ɺ͍͍͔ɻɻ
5. ͋Δ͍͸͜Μͳࣄ
6. ΅͘: UI࣮૷Ͱ͖ͨͷͰಈ͔ͯ͠ΈΔ͍ͧɻ ΅͘: …Ξχϝʔγϣϯཉ͍͍ͧ͠ɻɻ ΅͘: ͍͍ײ͡ʹͪΐͪΐ͍ͱ΍ͬͯΈΔ͔(^o^) σβΠφ: ͏ʔΜඍົ͍ɻ ΅͘: (´ɾωɾʆ)
7. ͋Δ͍͸͜Μͳࣄ
8. σβΠφ: UI࣮૷͓ئ͍͠·ʔ͢ʂ ΅͘: ͕Μ͹Δ͍ͧʂ ΅͘: ͳΜ͔৽ن࣮૷ଟ͍ͧɻɻ ΅͘: ͓ΘΒͳ͍ɻɻ ΅͘: ͓ΘΒͳ͍ɻɻ
9. ͦΕɺ΋͔ͨ͠͠ΒϚςϦΞϧσβΠ ϯΛ֮͑Δ͜ͱͰղܾͰ͖Δ͔΋͠Ε ·ͤΜ
10. ϚςϦΞϧσβΠϯͷ3ݪଇ
11. ϚςϦΞϧσβΠϯͷ3ݪଇ • ϚςϦΞϧσβΠϯ͸ϝλϑΝʔͰ͋Δ • ϚςϦΞϧσβΠϯ͸ࢴͷϝλϑΝʔΛ࣋ͭ(λϯδϒ ϧUI)
12. ϚςϦΞϧσβΠϯͷ3ݪଇ • େ୾ɺੜ͖ੜ͖ɺҙਤత • ࢴͷσβΠϯͱಉ͡Α͏ߟ͑Δ • typography΍༨നɺΧϥʔ౳େ୾ʹ࢖͓͏
13. ϚςϦΞϧσβΠϯͷ3ݪଇ • Ϟʔγϣϯ͸ҙຯΛఏڙ͢Δ • Կʹ஫໨͢Ε͹Α͍͔༠ಋͰ͖Δ • ਖ਼͍͠ϞʔϑΟϯά͸ϢʔβͷମݧΛ࿈ଓతͳ΋ͷʹ ͢Δ
14. Ͱ΋ɺ΅͘σβΠϯηϯεແ͍ ͠ɻɻ
15. ͦΜͳਓͷͨΊͷϚςϦΞϧσ βΠϯͰ͢ʂʂ
16. ΅͘σβΠϯηϯεແ͍͠ • υΩϡϝϯτ͕੔උ͞Ε͍ͯΔ • https://design.google.com/ • https://material.google.com/ • σβΠϯͷઃܭࢥ૝͕͋Δ • σβΠϯύλʔϯ͕๛෋ • ύλʔϯͱϩδοΫͰ͢΂ͯޠΕ͍ͯΔ
17. ύλʔϯͱϩδοΫͰޠΒΕ͍ͯΔͳΒɺ ΤϯδχΞతࢥߟͰσβΠϯͷྑ͠ѱ͠ Λ൑அͰ͖Δ
18. ϚςϦΞϧσβΠϯΛ͓΅͑Δ ͱͲ͏ͳΔ͔
19. σβΠφ: ͜ΕͰ࣮૷͓ئ͍͠·͢ʔʂ ΅͘: Αͬ͠Όʂ࣮૷͕Μ͹Δ͍ͧʂ ΅͘: Μʔʁ ΅͘: ͏ʔΜɻɻσβύλతʹඍົͳͷͰɺͲ͏͍͏ઃܭ ҙਤͳͷ͔֬ೝͯ͠ΈΑ͏ɻ σβΠφ: ·͊ɺGoogle༷͕ݴ͏ͳΒ͠ΐ͏͕ͳ͍ΑͶɻ ΅͘: ʢʈνʈʣχοίϦ Google༷͕ݴ͏ͳΒ͠ΐ͏͕ͳ͍
20. ͋Δ͍͸͜͏ͳΔ
21. ΅͘: UI࣮૷Ͱ͖ͨͷͰಈ͔ͯ͠ΈΔ͍ͧɻ ΅͘: …Ξχϝʔγϣϯཉ͍͍ͧ͠ɻɻ ΅͘: ϚςϦΞϧσβΠϯతߟ͑ํऔΓೖΕͯͪΐͪΐ͍ ͱ΍ͬͯΈΔ͔ɻ σβΠφ: ѱ͘ͳ͍ ΅͘: ʢʈνʈʣχοίϦ
22. ͋Δ͍͸͜͏ͳΔ
23. σβΠφ: UI࣮૷͓ئ͍͠·ʔ͢ʂ ΅͘: ͳΜ͔৽ن࣮૷ଟ͍ͧɻɻ ΅͘: ࣅͨUI͕͢Ͱʹ͋ΔΘ͚Ͱ͕͢ɺ৽ͨʹ࣮૷͢Δҙ ਤͱ͸ʁ σβΠφ: ಛʹແ͍ ΅͘: ʢʈνʈʣχοίϦ
24. MFͰ΍ͬͯΔษڧ๏
25. MFͰ΍ͬͯΔษڧ๏ • ͍͏ͯυΩϡϝϯτ͸શ෦ӳޠ • ҰਓͰಡΉͷ͸ਏ͍ͷͰɺΈΜͳͰಡΈ߹Θͤ • UIຖʹಡΜͰҙݟަ׵͋͠͏ • Googleͷϖʔδ຋༁Ͱେମҙਤ఻ΘΔ
26. ·ͱΊ • σβΠϯηϯε͕ແͯ͘΋ϚςϦΞϧσβΠϯ͸ޠΕΔ • ϚςϦΞϧσβΠϯ͸ύλʔϯͱϩδοΫ • ύλʔϯͱϩδοΫͳΒΤϯδχΞ΋ಘҙ • Google༷ͷҖΛआΓͯԺศʹࡁ·ͤΒΕΔ