エンジニアのための UI/UX入門

Combmofにて発表させていただいたスライドです。ITエンジニアのためのUI/UXの解説を行いました。

Transcript

1. Combmof 2018.12.23 @ Supporters Shibuya Of Shibuya Square A, Shibuya, Tokyo Tsubasa SEKIGUCHI LEA-3645969186565158903 ΤϯδχΞͷͨΊͷ 6*69ೖ໳
   UI/UX Design for IT Engineer
2. TinyKitten @tinykitten8 Freelance Frontend Engineer/Designer
3. ؔޱ
   ཌྷ
   Tsubasa SEKIGUCHI
4. σβΠϯͱ͸Կ͔ʁ
5. ۩ମతͳ໰୊Λղ͖໌͔ͨ͢Ίͷࢥߟɾ֓೦Λ
   ૊Έཱͯɺ༷ʑͳഔମʹදݱ͢Δ͜ͱɻ
6. σβΠϯ͸ͨͩͷ͓ֆඳ͖Ͱ͸ͳ͍ɻ
7. ͢΂ͯͷσβΠϯ͸ԾઆͰ͋Δɻ
   σβΠϯΛݕূ͢ΔͨΊʹ࣮ݧΛ͢ Δɻ
8. σβΠϯʹ͸໨త͕͋Δ
10. Πϕϯτʹདྷͯ΄͍͠
    ઌਐ͞Λײͯ͡΄͍͠
    ܈അͷΠϕϯτͰ͋Δ͜ͱΛ஌ͬͯ΄͍͠
11. ঢ়گʹΑͬͯʮ໨తʯ͸มԽ͠
    ໨తʹΑͬͯʮσβΠϯʯมԽ͢Δ
12. ໨తʹԊͬͨσβΠϯ͕ඞཁ
13. UI
14. UI User Interface Ϣʔβʔͱιϑτ΢ΣΞΛͭͳ͙
    ࢹ֮తΠϯλʔϑΣΠε
15. UX
16. UX User Experience ιϑτ΢ΣΞɺαʔϏεΛ࢖ͬͨͱ͖ͷ
    Ϣʔβʔͷମݧ
17. UX UI ʴ ηοτͰޠΒΕΔ͜ͱ͕ଟ͍
18. UI Ϣʔβʔ͸ Λ໨తͱ͍ͯ͠Δʁ
19. UI Ϣʔβʔ͸ Λ໨తͱ͍ͯ͠Δʁ ҧ͍·͢ΑͶ
20. Ϣʔβʔ͸ Λ໨తͱ͍ͯ͠Δ UX
21. ༏Εͨ6*͸
    ༏Εͨ69ͷҰ෦Ͱ͋Δɻ
22. Ͳ͏͢Ε͹
    ༏Εͨ69
    Λ࣮ݱͰ͖Δ͔ʁ
23. Ϣʔβʔͷཱ৔ʹཱͭ
24. Ξϯνύλʔϯ
25. Ξϯνύλʔϯ ඇͷଧͪॴ͕ͳ͍͘Β͍
    Ϋι6*
26. Ξϯνύλʔϯ ͋͑ͯྻڍ͢Δͱ
    ΍ͨΒࣦྱ
    ϑΥʔϜ͕ଟ͗͢Δ
    ొ࿥ͷ৭͕ϝΠϯΧϥʔͰ͸ͳ͍
    Ϧηοτ͕ӈͩͱεϚϗͰ
    ޡλοϓ͢Δ
27. Ξϯνύλʔϯͷଓ͖
28. Ξϯνύλʔϯͷଓ͖
29. ଟগϚγͳ6*
30. ଟগϚγͳ6* ͋͑ͯྻڍ͢Δͱ
    ೖྗ͕࠷খݶ
    ແବͳ֬ೝ͕ͳ͍
    ϦηοτϘλϯ͕ͦ΋ͦ΋
    ͍Βͳ͍
31. ଟগϚγͳ6*
32. ϨΠΞ΢τͷݪଇ
33. ۙ઀
    ੔ྻ
    ίϯτϥετ
    ൓෮
34. ۙ઀
    ৘ใͷޮՌΛࢹ֮Խ͢Δʢݟ΍͘͢͢Δʣ
37. ཁૉ͕͙ͪΌ͙ͪΌʹ഑ஔ͞Ε͍ͯΔͨΊɺ
    ؔ࿈ੑ͕Θ͔Βͳ͍
39. ۙ઀ͱ͸
    ؔ࿈ཁૉΛ͚ۙͮɺ
    ͦ͏Ͱͳ͚Ε͹཭͢
41. ੔ྻ
    ཁૉΛ૊৫తʹߏ଄Խ͢Δʢݟ΍͘͢͢Δʣ
46. ίϯτϥετ
    ҟͳΔཁૉͷࠩҟΛڧΊΔʢ஫ҙΛҾ͘ʣ
48. ۙ઀ͱ͸
    ཁૉͱཁૉΛ
    ໌Β͔ʹҟͳΔܗʹ͢Δ
49. ৭ɾେ͖͞ɾϚʔδϯʹϝϦϋϦ͕͖ͭ
    ৘ใͷߏ଄͕Θ͔Γ΍͘͢
    ը໘ͷϨΠΞ΢τʹັྗ͕ੜ·ΕΔ
50. ൓෮
    ϨΠΞ΢τͷݪଇΛ܁Γฦ͢͜ͱ
51. ܗͷҰ؏ੑ ؙ֯͸ɺαΠτ಺ͰͲͪΒ͔ʹҰ؏ͤ͞Δɻ
    ࠞࡏͤͯ͞͸͍͚·ͤΜɻ
52. ৭ͷҰ؏ੑ ͓໰͍߹Θͤ͸੨ͱܾΊͨΒ੨Λ࢖͍·͠ΐ͏ɻ
53. ͜ͷ̐ݪଇΛकΔͱ
    Ϛγͳ69
    Λ࣮ݱͰ͖Δ
54. ,JUUFO-5ͱ͍͏ΠϕϯτΛ
    ߴ࡚Ͱ΍Γ·͢
59. Combmof 2018.12.23 @ Supporters Shibuya Of Shibuya Square A, Shibuya, Tokyo Tsubasa SEKIGUCHI LEA-3645969186565158903 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    Thank you for listening!