Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction of MaterialDesign for engineer

Introduction of MaterialDesign for engineer

6b37e5c21ba723dacede78124b25d5a8?s=128

Masaya Yashiro

August 29, 2016
Tweet

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