Introduction of MaterialDesign for engineer

Transcript

1. ΤϯδχΞͷͨΊͷ
   ϚςϦΞϧσβΠϯೖ໳
   @yashims85
   

   View Slide

2. ୭
   • ԰୅ণ໵ @yashims85
   • ྑ͍ϓϩμΫτΛ࡞Γ͍ͨΤϯδχΞ
   • ؾ࣋ͪ͸20୅த൫
   

   View Slide

3. օ͞Μ͜Μͳࣄܦݧ͋Γ·ͤΜ
   ͔ʁ
   

   View Slide

4. σβΠφ: ͜ΕͰ࣮૷͓ئ͍͠·͢ʔʂ
   ΅͘: Αͬ͠Όʂ࣮૷͕Μ͹Δ͍ͧʂ
   ΅͘: Μʔʁ
   ΅͘: ΜΜΜʔʁ
   ΅͘: ͏ʔΜɻɻඍົͳσβΠϯͳؾ͕͢Δ͚ͲɺσβΠ
   φ্͕͖͛ͯͨ΋ͷͩ͠ͳ͊ɻɻ
   ΅͘: ·͊ɺ͍͍͔ɻɻ
   

   View Slide

5. ͋Δ͍͸͜Μͳࣄ
   

   View Slide

6. ΅͘: UI࣮૷Ͱ͖ͨͷͰಈ͔ͯ͠ΈΔ͍ͧɻ
   ΅͘: …Ξχϝʔγϣϯཉ͍͍ͧ͠ɻɻ
   ΅͘: ͍͍ײ͡ʹͪΐͪΐ͍ͱ΍ͬͯΈΔ͔(^o^)
   σβΠφ: ͏ʔΜඍົ͍ɻ
   ΅͘: (´ɾωɾʆ)
   

   View Slide

7. ͋Δ͍͸͜Μͳࣄ
   

   View Slide

8. σβΠφ: UI࣮૷͓ئ͍͠·ʔ͢ʂ
   ΅͘: ͕Μ͹Δ͍ͧʂ
   ΅͘: ͳΜ͔৽ن࣮૷ଟ͍ͧɻɻ
   ΅͘: ͓ΘΒͳ͍ɻɻ
   ΅͘: ͓ΘΒͳ͍ɻɻ
   

   View Slide

9. ͦΕɺ΋͔ͨ͠͠ΒϚςϦΞϧσβΠ
   ϯΛ֮͑Δ͜ͱͰղܾͰ͖Δ͔΋͠Ε
   ·ͤΜ
   

   View Slide

10. ϚςϦΞϧσβΠϯͷ3ݪଇ
    

    View Slide

11. ϚςϦΞϧσβΠϯͷ3ݪଇ
    • ϚςϦΞϧσβΠϯ͸ϝλϑΝʔͰ͋Δ
    • ϚςϦΞϧσβΠϯ͸ࢴͷϝλϑΝʔΛ࣋ͭ(λϯδϒ
    ϧUI)
    

    View Slide

12. ϚςϦΞϧσβΠϯͷ3ݪଇ
    • େ୾ɺੜ͖ੜ͖ɺҙਤత
    • ࢴͷσβΠϯͱಉ͡Α͏ߟ͑Δ
    • typography΍༨നɺΧϥʔ౳େ୾ʹ࢖͓͏
    

    View Slide

13. ϚςϦΞϧσβΠϯͷ3ݪଇ
    • Ϟʔγϣϯ͸ҙຯΛఏڙ͢Δ
    • Կʹ஫໨͢Ε͹Α͍͔༠ಋͰ͖Δ
    • ਖ਼͍͠ϞʔϑΟϯά͸ϢʔβͷମݧΛ࿈ଓతͳ΋ͷʹ
    ͢Δ
    

    View Slide

14. Ͱ΋ɺ΅͘σβΠϯηϯεແ͍
    ͠ɻɻ
    

    View Slide

15. ͦΜͳਓͷͨΊͷϚςϦΞϧσ
    βΠϯͰ͢ʂʂ
    

    View Slide

16. ΅͘σβΠϯηϯεແ͍͠
    • υΩϡϝϯτ͕੔උ͞Ε͍ͯΔ
    • https://design.google.com/
    • https://material.google.com/
    • σβΠϯͷઃܭࢥ૝͕͋Δ
    • σβΠϯύλʔϯ͕๛෋
    • ύλʔϯͱϩδοΫͰ͢΂ͯޠΕ͍ͯΔ
    

    View Slide

17. ύλʔϯͱϩδοΫͰޠΒΕ͍ͯΔͳΒɺ
    ΤϯδχΞతࢥߟͰσβΠϯͷྑ͠ѱ͠
    Λ൑அͰ͖Δ
    

    View Slide

18. ϚςϦΞϧσβΠϯΛ͓΅͑Δ
    ͱͲ͏ͳΔ͔
    

    View Slide

19. σβΠφ: ͜ΕͰ࣮૷͓ئ͍͠·͢ʔʂ
    ΅͘: Αͬ͠Όʂ࣮૷͕Μ͹Δ͍ͧʂ
    ΅͘: Μʔʁ
    ΅͘: ͏ʔΜɻɻσβύλతʹඍົͳͷͰɺͲ͏͍͏ઃܭ
    ҙਤͳͷ͔֬ೝͯ͠ΈΑ͏ɻ
    σβΠφ: ·͊ɺGoogle༷͕ݴ͏ͳΒ͠ΐ͏͕ͳ͍ΑͶɻ
    ΅͘: ʢʈνʈʣχοίϦ
    Google༷͕ݴ͏ͳΒ͠ΐ͏͕ͳ͍
    

    View Slide

20. ͋Δ͍͸͜͏ͳΔ
    

    View Slide

21. ΅͘: UI࣮૷Ͱ͖ͨͷͰಈ͔ͯ͠ΈΔ͍ͧɻ
    ΅͘: …Ξχϝʔγϣϯཉ͍͍ͧ͠ɻɻ
    ΅͘: ϚςϦΞϧσβΠϯతߟ͑ํऔΓೖΕͯͪΐͪΐ͍
    ͱ΍ͬͯΈΔ͔ɻ
    σβΠφ: ѱ͘ͳ͍
    ΅͘: ʢʈνʈʣχοίϦ
    

    View Slide

22. ͋Δ͍͸͜͏ͳΔ
    

    View Slide

23. σβΠφ: UI࣮૷͓ئ͍͠·ʔ͢ʂ
    ΅͘: ͳΜ͔৽ن࣮૷ଟ͍ͧɻɻ
    ΅͘: ࣅͨUI͕͢Ͱʹ͋ΔΘ͚Ͱ͕͢ɺ৽ͨʹ࣮૷͢Δҙ
    ਤͱ͸ʁ
    σβΠφ: ಛʹແ͍
    ΅͘: ʢʈνʈʣχοίϦ
    

    View Slide

24. MFͰ΍ͬͯΔษڧ๏
    

    View Slide

25. MFͰ΍ͬͯΔษڧ๏
    • ͍͏ͯυΩϡϝϯτ͸શ෦ӳޠ
    • ҰਓͰಡΉͷ͸ਏ͍ͷͰɺΈΜͳͰಡΈ߹Θͤ
    • UIຖʹಡΜͰҙݟަ׵͋͠͏
    • Googleͷϖʔδ຋༁Ͱେମҙਤ఻ΘΔ
    

    View Slide

26. ·ͱΊ
    • σβΠϯηϯε͕ແͯ͘΋ϚςϦΞϧσβΠϯ͸ޠΕΔ
    • ϚςϦΞϧσβΠϯ͸ύλʔϯͱϩδοΫ
    • ύλʔϯͱϩδοΫͳΒΤϯδχΞ΋ಘҙ
    • Google༷ͷҖΛआΓͯԺศʹࡁ·ͤΒΕΔ
    

    View Slide