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༷ͷҖΛआΓͯԺศʹࡁ·ͤΒΕΔ