望みを叶えるUIデザイン

2016/1/25 クラスメソッド×RoomClip×ネイルブック 共催 『Design Night』発表資料です。

Transcript

1. ๬ΈΛ׎͑ΔUIσβΠϯ 1
2. ࣗݾ঺հ Α͜΍· Ώ͏͍ͩ @udaiadu ུྺ σβΠϯνʔϜϦʔμʔ ΞϓϦέʔγϣϯΤϯδχΞ / σβΠφʔ • ߴઐͰݐஙֶΛֶΜͩޙɺݐங಺૷޻ࣄͷઃܭɺࢪ޻؅ཧΛߦ͏ • ҿ৯ళͷళ௕ͱͯ͠ళฮӡӦΛߦ͏ • ৬ۀ܇࿅ͰJavaΛֶͼAndroid ΤϯδχΞͱͯ͠Ϋϥεϝιου ʹJoin • ΞϓϦέʔγϣϯΤϯδχΞɺϓϩδΣΫτϦʔμʔΛܦݧ͠ɺ UXσβΠϯʹ৺ୣΘΕͯσβΠφʔʹస਎ʢͱ͍͏͔݉೚ʣ 2
3. 3 ࠓ೔ͷ͓͸ͳ͠ • UIͷ໾ׂ • UIσβΠϯʹඞཁͳࡐྉ • ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ • ·ͱΊ
4. 4 UIͷ໾ׂ
5. 5 UIͷ໾ׂ Ϣʔβʔ UI αʔϏε ϢʔβʔͱαʔϏε͕ ૬ޓʹ΍ΓͱΓ͢ΔखஈΛఏڙ͢Δ
6. 6 UIσβΠϯʹඞཁͳࡐྉ
7. UIσβΠϯʹඞཁͳࡐྉ UIσβΠϯͷϓϩηε ࡐྉ Πϯϓοτ UI Ξ΢τϓοτ UIσβΠϯʹඞཁͳࡐྉΛΠϯϓοτͯ͠ UIͱͯ͠Ξ΢τϓοτ͢Δ 7
8. UIσβΠϯʹඞཁͳࡐྉ ࡐྉͷ಺༁ ࡐྉ • ੍໿ࣄ߲ʢελΠϧ౳ʣ • ΞϓϦશମͷػೳ͕Θ͔Δ΋ͷ • ػೳ͕ଘࡏ͢Δ໨త • ػೳ͕ͲͷΑ͏ʹར༻͞ΕΔͷ͔ • ػೳ͕ར༻͞Εͨ݁ՌͲ͏ͳΔ͔ 8
9. UIσβΠϯʹඞཁͳࡐྉ UIσβΠϯͷϓϩηε Πϯϓοτ UI Ξ΢τϓοτ UIσβΠϯʹඞཁͳࡐྉΛΠϯϓοτͯ͠ UIͱͯ͠Ξ΢τϓοτ͢Δ ࡐྉ OKʂ 9
10. UIσβΠϯʹඞཁͳࡐྉ ΋͠΋ɺࡐྉ͕଍Γͳ͔ͬͨΒʁ ࡐྉ ࡐྉ 10
11. UIσβΠϯʹඞཁͳࡐྉ ࡐྉͷ಺༁ • ੍໿ࣄ߲ʢελΠϧ౳ʣ • ΞϓϦશମͷػೳ͕Θ͔Δ΋ͷ • ػೳ͕ଘࡏ͢Δ໨త • ػೳ͕ͲͷΑ͏ʹར༻͞ΕΔͷ͔ • ػೳ͕ར༻͞Εͨ݁ՌͲ͏ͳΔ͔ ࡐྉ ݱ৔͋Δ͋Δ 11
12. ࡐྉ UIσβΠϯʹඞཁͳࡐྉ UIσβΠϯͷϓϩηε Πϯϓοτ UI Ξ΢τϓοτ UI Ͱ͖ͳ͍!? 12
13. UIσβΠϯʹඞཁͳࡐྉ ͦΜͳ͜ͱͳ͍ 13
14. UIσβΠϯʹඞཁͳࡐྉ UIσβΠϯͷϓϩηε ࡐྉ Πϯϓοτ Ξ΢τϓοτ UI UIσβΠϯʹඞཁͳࡐྉ͕ἧ͍ͬͯͳͯ͘΋ UI͸Ͱ͖Δ ũƄŝŧŒřŹƃŮ!! 14
15. UIσβΠϯʹඞཁͳࡐྉ ػೳ ػೳ ػೳ ػ ೳ ػೳ ੍໿ࣄ߲ΛकΓͳ͕Βɺ ϦετΞοϓ͞ΕͨػೳΛ ը໘ʹ٧ΊࠐΉ͚ͩͰ΋UI ͸Ͱ͖Δɻ 15
16. UIσβΠϯʹඞཁͳࡐྉ ͨͩ͠ɺ 16
17. UIσβΠϯʹඞཁͳࡐྉ ๬Έ͸׎Θͳ͍ ťŊťƃū… 17
18. ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ 18
19. ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ ࠓճѻ͏ʮ๬Έʯͱ͸ ͦ͏ͳΕ͹Α͍ɺͦ͏͍ͨ͠ͱࢥ͏͜ͱɻئ͍ɻر๬ɻ ఏڙ ϝϦοτ αʔϏεఏڙऀ Ϣʔβʔ 19
20. ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ ࠓճѻ͏ʮ๬Έʯͱ͸ αʔϏεఏڙऀͷ΍Γ͍ͨ͜ͱʂ αʔϏεఏڙऀ ྫ͑͹… • ਓʑͷੜ׆Λ๛͔ʹ͍ͨ͠ • αʔϏεΛ޿͘ར༻ͯ͠΋Βͬͯ རӹΛಘ͍ͨ • ͓ళͷചΓ্͛Λ͍͋͛ͨ ͳͲ 20
21. ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ ๬Έ͕׎͏ͬͯʁ αʔϏεΛఏڙ͢Δ͜ͱͰɺظ଴͢Δརӹ͕ಘΒΕΔ͜ͱ ఏڙ ϝϦοτ αʔϏεఏڙऀ Ϣʔβʔ 21
22. ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ ඞཁͳ͜ͱ ͔ͭͬͯ΋Β͏͜ͱʂ ఏڙ ϝϦοτ αʔϏεఏڙऀ Ϣʔβʔ 22
23. ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ ๬Έ͕׎Θͳ͍έʔε ͔ͭͬͯ΋Β͑ͳ͍ɻɻ ఏڙ ফࣦʂ αʔϏεఏڙऀ Ϣʔβʔ 23
24. ๬ΈΛ׎͑ΔͨΊʹ ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ 24
25. ͔ͭͬͯ΋Β͑ΔUIσβΠϯΛ ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ 25
26. • ૢ࡞ͮ͠Β͍ • ࢖͍ํ͕Θ͔Βͳ͍ • ཉ͍͠৘ใΛಘΔ·Ͱʹ͕͔͔࣌ؒΔ • ͔ͬ͜Α͘ͳ͍ • ͳͲͳͲ ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ Ϣʔβʔͷؾ࣋ͪ ŗŴŞš 26
27. ͜ΕΒͷ໰୊Λղܾ͢ΔͨΊʹ ඞཁͳ΋ͷ ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ 27
28. ࡐྉͷ಺༁ ࡐྉ • ੍໿ࣄ߲ʢελΠϧ౳ʣ • ΞϓϦશମͷػೳ͕Θ͔Δ΋ͷ • ػೳ͕ଘࡏ͢Δ໨త • ػೳ͕ͲͷΑ͏ʹར༻͞ΕΔͷ͔ • ػೳ͕ར༻͞Εͨ݁ՌͲ͏ͳΔ͔ ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ 28
29. ࡐྉͷ಺༁ ࡐྉ • ੍໿ࣄ߲ʢελΠϧ౳ʣ • ΞϓϦશମͷػೳ͕Θ͔Δ΋ͷ • ػೳ͕ଘࡏ͢Δ໨త • ػೳ͕ͲͷΑ͏ʹར༻͞ΕΔͷ͔ • ػೳ͕ར༻͞Εͨ݁ՌͲ͏ͳΔ͔ ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ 29
30. ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ ໨తΛୡ੒͢ΔͨΊʹɺ ػೳ͕ͲͷΑ͏ʹར༻͞ΕΕ͹ ظ଴͢ΔޮՌ͕ग़ΔͩΖ͏͔ʁ ৗʹҙࣝ͢Δ͜ͱ ࢥߟΛ܁Γฦ͢ʂ 30
31. ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ UIΛσβΠϯ͢Δ UIσβΠϯͱ͸ Ұ࣌తͳϢʔβʔମݧΛઃܭ͢Δͱ͍͏͜ͱ Ұ࣌తͰ͋ΔͨΊʹ ͲͷΑ͏ʹར༻͞ΕΔ͔ͷઃܭ͕ͱͯ΋ॏཁ ʢ͍ͭɺͲ͜Ͱʁ ԿΛ͠ͳ͕Βʁͱ͔ͱ͔ʣ 31
32. ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ UIΛσβΠϯ͢Δ • ಉ໊͡લͷػೳͰ΋ɺαʔϏεʹΑͬͯҙਤ͢ Δ͜ͱ͸ҧ͏ • ૝ఆ͢ΔϢʔβʔͷੜ׆ʹࣗવʹͱ͚ࠐΉΑ ͏ʹઃܭ͢Δ • ͦͷ݁ՌɺԿΛ΋ͨΒ͢ͷ͔ʁ๬Έ௨ΓͷޮՌ ͕ಘΒΕͦ͏͔ʁݕূ͠ɺ࠶ઃܭΛ܁Γฦ͢ 32
33. ͜Ε͕ ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ 33
34. • ૢ࡞͠΍͍͢ • ࢖͍ํ͕؆୯ • ஌Γ͍ͨ৘ใ͕͙͢खʹೖΔ • ͔͍͍ͬ͜ • ͳͲͳͲ ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ Ϣʔβʔͷؾ࣋ͪ 34
35. ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ ͔ͭͬͯ΋Β͑ΔUIσβΠϯ 35
36. ๬ΈΛ׎͑ΔUIσβΠϯ 36 ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ
37. ͩʂ 37 ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ
38. ͜ΕΒ͕ͳ͍ͱ… ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ 38
39. ࡐྉͷ಺༁ • ੍໿ࣄ߲ʢελΠϧ౳ʣ • ΞϓϦશମͷػೳ͕Θ͔Δ΋ͷ • ػೳ͕ଘࡏ͢Δ໨త • ػೳ͕ͲͷΑ͏ʹར༻͞ΕΔͷ͔ • ػೳ͕ར༻͞Εͨ݁ՌͲ͏ͳΔ͔ ࡐྉ ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ 39
40. ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ ػೳ ػೳ ػೳ ػ ೳ ػೳ 40
41. ๬ΈΛ׎͑ΔUIσβΠϯͱ͸ʁ źŖŸŦ 41
42. ·ͱΊ 42
43. 43 ·ͱΊ • ػೳΛ៉ྷʹฒ΂Δ͜ͱ͕UIσβΠϯ͡Όͳ͍ • ࣮ࡍʹαʔϏεΛ࢖͍ͬͯΔਓΛ૝૾ʢΠϯλ Ϗϡʔͱ͔Ͱ͖Δͱ΋ͬͱ͍͍ʣͯ͠σβΠϯ͢ Δͷ͕͍͍UIΛ࡞Δίπ͔΋ • ๬ΈΛ׎͍͑ͨͳΒɺػೳΛม͑ΔͷͰ͸ͳ͘ ࢥߟϓϩηεΛม͑Δ