移動空間での心地よい体験につながるUIデザイン

2019年1月16日に行われた『Bonfire Design #4』のスライドです。
次世代配車アプリMOV《モブ》の後部座席タブレットのUIデザインを行なった上で気をつけたポイントについてお話しします。

Transcript

1. ҠಈۭؒͰͷ
   ৺஍ྑ͍ମݧʹͭͳ͕Δ6*σβΠϯ גࣜձࣾσΟʔɾΤψɾΤʔɹঃѪྞ Copyright ©DeNA Co., Ltd. All rights reserved.
2. גࣜձࣾσΟʔɾΤψɾΤʔ
   
   c
   σβΠφʔ ঃѪྞ ೔ຊͱ୆࿷ͷϋʔϑɻ୆࿷ͷେֶΛଔۀޙɺ෱Ԭͷ੍࡞ձࣾͰά ϥϑΟοΫσβΠϯ΍8FCσβΠϯΛܦݧɻ
   
   ೥ʹגࣜձࣾσΟʔɾΤψɾΤʔʹೖࣾɻ
   
   ݱࡏ͸ओʹ࣍ੈ୅഑ंΞϓϦʮ.07ʬϞϒʭʯͷ696*σβΠϯ Λ୲౰ɻ AIRI JO
3. ࣍ੈ୅λΫγʔ഑ंΞϓϦMOVʬϞϒʭ
   ͬͯͳʹʁ
5. ޙ෦࠲੮λϒϨοτ Backseat Tablet ৐຿һΞϓϦ Crew App λΫγʔϞχλʔ Taxi Monitor ϢʔβʔΞϓϦ User App
6. Taxi Monitor ϢʔβʔΞϓϦ ৐຿һΞϓϦ λΫγʔϞχλʔ ޙ෦࠲੮λϒϨοτ Backseat Tablet Crew App Taxi Monitor User App
7. Copyright ©DeNA Co., Ltd. All rights reserved.
8. Copyright ©DeNA Co., Ltd. All rights reserved. ޿ࠂɾχϡʔεɾ
   ަ௨৘ใͷ഑৴ ֎ࠃਓͷํʑͷͨΊͷ
   ଟݴޠରԠ ߱ं࣌ͷӡ௞ͷදࣔ΍
   ྉۚදͷ֬ೝ
9. ंͷதͰར༻͢ΔσόΠε
10. 01 03 02 ϦΞϧͱͭͳ͛ΔσβΠϯͰؾΛ͚ͭͨϙΠϯτ ঢ়گ Өڹ ؀ڥ
11. ϦΞϧͱͭͳ͛ΔσβΠϯͰؾΛ͚ͭͨϙΠϯτ 01 03 02 ঢ়گ Өڹ ؀ڥ
12. λΫγʔʹ৐Δָ͠ΈΛ૿΍͠
    ΋ͬͱྑ࣭ͳҠಈ࣌ؒΛఏڙ VISION
13. ͨͩͷɺ޿ࠂ΍ίϯςϯπΛྲྀͯ͠Δ
    ը໘ʹͳͬͯ΄͘͠ͳ͍
15. ͓΋ͯͳ͠ͷ৺
16. ͍͖ͳΓ޿ࠂ͕ྲྀΕΔͷͰ͸ͳ͘ɺ
    ৐٬ͷߦಈʹ߹Θͤͯը໘Λදࣔ
19. ৐ं࣌ ৐ंத ߱ं࣌ ޿ࠂɾίϯςϯπͷ഑৴ ͓΍͢ΈϞʔυ ΢ΣϧΧϜը໘ ྉۚදࣔ ͓ࢧ෷͍׬ྃ
20. ը໘ʹ৮ΕͯΔ࣌Ҏ֎ͰͷମݧΛݟམͱ͕ͪ͠
21. ը໘ͷ֎ͰϢʔβʔ͕ͲͷΑ͏ͳঢ়گʹ͍Δͷ͔ɺ
    ৗʹ޿͘ߟ͑Δ
22. ϦΞϧͱͭͳ͛ΔσβΠϯͰؾΛ͚ͭͨϙΠϯτ 01 03 02 ঢ়گ Өڹ ؀ڥ
23. ͜ͷޙ෦࠲੮λϒϨοτͷλʔήοτ͸
    λΫγʔͷ৐٬
24. ं಺ʹ͍Δͷ͸ɺ৐٬͚ͩͰ͸͋Γ·ͤΜ
25. ৐຿һ͞Μ͸ۈ຿தͣͬͱं಺ʹ͍·͢
26. Copyright ©DeNA Co., Ltd. All rights reserved.
27. Copyright ©DeNA Co., Ltd. All rights reserved.
28. Copyright ©DeNA Co., Ltd. All rights reserved.
29. ۭं εΫϦʔϯηʔόʔ λΫγʔͷϝʔλʔͷঢ়ଶʹΑͬͯը໘Λมߋ ΢ΣϧΧϜը໘ˠ޿ࠂ ࣮ं ӡ௞දࣔը໘ ࢧ෷
30. ۭं εΫϦʔϯηʔόʔ ΢ΣϧΧϜը໘ˠ޿ࠂ ӡ௞දࣔը໘ λΫγʔͷϝʔλʔͷঢ়ଶʹΑͬͯը໘Λมߋ ࣮ं ࢧ෷
31. ۭं εΫϦʔϯηʔόʔ ΢ΣϧΧϜը໘ˠ޿ࠂ ӡ௞දࣔը໘ λΫγʔͷϝʔλʔͷঢ়ଶʹΑͬͯը໘Λมߋ ࣮ं ࢧ෷
32. ۭं εΫϦʔϯηʔόʔ ΢ΣϧΧϜը໘ˠ޿ࠂ ӡ௞දࣔը໘ λΫγʔͷϝʔλʔͷঢ়ଶʹΑͬͯը໘Λมߋ ࣮ं ࢧ෷
33. λʔήοτͱͯ͠ΔϢʔβʔҎ֎ʹ΋
34. ͜ͷϓϩμΫτΛ௨ͯ͠Өڹ͞ΕΔ
    ଞͷਓ΋ߟྀͨ͠ઃܭ
35. ϦΞϧͱͭͳ͛ΔσβΠϯͰؾΛ͚ͭͨϙΠϯτ 01 03 02 ঢ়گ Өڹ ؀ڥ
37. σβΠϯΛ͸ΊࠐΜͩλϒϨοτΛ࣋ͬͯɺ
    ࣮ࡍʹλΫγʔʹ৐͖ͬͯͨ
38. ं಺͸௨ৗͷࣨ಺ͱҧͬͯɺ
    ֎෦ͷ؀ڥͷӨڹΛड͚΍͍͢
39. ໷ʹͳΔͱഎܠ͕໌Δͯ͘ɺ
    ໨͕νΧνΧͯ͠ർΕΔ
41. ؀ڥͷӨڹ͸૝ఆ͖͠Εͳ͍෦෼͕͋Δ
42. ࣮ࡍͷݱ৔ʹߦ͖໰୊఺Λચ͍ग़͢͜ͱ
43. ·ͱΊ
44. 01 ঢ়گ ը໘ͷ֎ͰϢʔβʔ͕ͲͷΑ͏ͳঢ়گʹ͍Δͷ͔ɺ
    ৗʹ޿͘ߟ͑Δ 02 Өڹ λʔήοτͱͯ͠ΔϢʔβʔҎ֎ʹ΋ɺ
    ͜ͷϓϩμΫτΛ௨ͯ͠Өڹ͞ΕΔଞͷਓ΋ߟྀͨ͠ઃܭ 03 ؀ڥ ؀ڥͷӨڹ͸૝ఆ͖͠Εͳ͍෦෼͕͋ΔͷͰɺ
    ࣮ࡍͷݱ৔ʹߦ͖໰୊఺Λચ͍ग़͢͜ͱ
45. 01 ঢ়گ ը໘ͷ֎ͰϢʔβʔ͕ͲͷΑ͏ͳঢ়گʹ͍Δͷ͔ɺ
    ৗʹ޿͘ߟ͑Δ 02 Өڹ 03 ؀ڥ ؀ڥͷӨڹ͸૝ఆ͖͠Εͳ͍෦෼͕͋ΔͷͰɺ
    ࣮ࡍͷݱ৔ʹߦ͖໰୊఺Λચ͍ग़͢͜ͱ λʔήοτͱͯ͠ΔϢʔβʔҎ֎ʹ΋ɺ
    ͜ͷϓϩμΫτΛ௨ͯ͠Өڹ͞ΕΔଞͷਓ΋ߟྀͨ͠ઃܭ
46. 01 ঢ়گ ը໘ͷ֎ͰϢʔβʔ͕ͲͷΑ͏ͳঢ়گʹ͍Δͷ͔ɺ
    ৗʹ޿͘ߟ͑Δ 02 Өڹ 03 ؀ڥ ؀ڥͷӨڹ͸૝ఆ͖͠Εͳ͍෦෼͕͋ΔͷͰɺ
    ࣮ࡍͷݱ৔ʹߦ͖໰୊఺Λચ͍ग़͢͜ͱ λʔήοτͱͯ͠ΔϢʔβʔҎ֎ʹ΋ɺ
    ͜ͷϓϩμΫτΛ௨ͯ͠Өڹ͞ΕΔଞͷਓ΋ߟྀͨ͠ઃܭ
47. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠