半年間の開発ですべてを刷新したメジャーアップデートのUIUX / AWA UIUX Update

サイバーエージェントの技術者（エンジニア・クリエイター）向けカンファレンス『CA BASE CAMP 2019』

半年間の開発ですべてを刷新したメジャーアップデートのUIUX
冨樫 晃己 / 室橋 秀俊

Transcript

1. [ 2.0 Major Update ] ൒೥ͷ։ൃͰ͢΂ͯΛ࡮৽ͨ͠ ϝδϟʔΞοϓσʔτͷUI/UX
2. ෌ֽ ߊݾ Koki Togashi AWA Co. Ltd. 2013 ౦ژ౎ࢢେֶ ஌ࣝ޻ֶ෦ଔ 2013 CyberAgent ೖࣾ / ΤϯδχΞ 2014 AWA্ཱͪ͛ ΦʔΫγϣϯαʔϏε ωΨςΟϒSNS ςΟʔϯ޲͚SNS औక໾ CXO
3. ϝδϟʔΞοϓσʔτ 2019.1.25
4. 2.0
5. എܠ
6. 1. ࢢ৔ͷ੒௕ 2. ٕज़ͷൃల 3. ػೳͷॆ࣮
7. 1. ࢢ৔ͷ੒௕ 2. ٕज़ͷൃల 3. ػೳͷॆ࣮
8. ετϦʔϛϯάαʔϏε͕޿·Γ ͋ΒΏΔΞʔςΟετ͕഑৴͢ΔΑ͏ʹͳͬͨ  ສۂ഑৴͸ੈքඪ४
   ࠓޙ΋ͬͱ૿͍͑ͯ͘ • • 1. ࢢ৔ͷ੒௕
9. 㱺 ίϯςϯπʹ͕ࠩͳ͘ͳ͖ͬͯͨ ετϦʔϛϯάαʔϏε͕޿·Γ ͋ΒΏΔΞʔςΟετ͕഑৴͢ΔΑ͏ʹͳͬͨ  ສۂ഑৴͸ੈքඪ४
   ࠓޙ΋ͬͱ૿͍͑ͯ͘ • • 㱺 ޷͖ͳԻָΛݟ͚ͭΔͷ͕େม 1. ࢢ৔ͷ੒௕
10. 㱺 ίϯςϯπʹ͕ࠩͳ͘ͳ͖ͬͯͨ 㱺 ޷͖ͳԻָΛݟ͚ͭΔͷ͕େม "ମݧ"ͷՁ஋্͕͕Δ "࣌ؒ"ͷՁ஋্͕͕Δ ͦͷ৔ͳΒͰ͸ͷ ૉૣ͘Իָʹग़ձ͏ͨΊͷ 1. ࢢ৔ͷ੒௕
11. AWAͳΒͰ͸ͷମݧ ͻͱ͕ԻָΛྲྀ௨ͤ͞Δੈք ΑΓૉૣ͘Իָͱग़ձ͏ Ϣʔβʔͷߟ͑ΔྔΛগͳ͘ 1. ࢢ৔ͷ੒௕
12. AWAͳΒͰ͸ͷମݧͷͨΊͷ ΑΓૉૣ͘Իָͱग़ձ͏ͨΊͷ ౔୆Λͭ͘Δ 1. ࢢ৔ͷ੒௕
13. 1. ࢢ৔ͷ੒௕ 2. ٕज़ͷൃల 3. ػೳͷॆ࣮
14. 1. ࢢ৔ͷ੒௕ 2. ٕज़ͷൃల 3. ػೳͷॆ࣮
15. 2. ٕज़ͷൃల Ҿ༻ݩ
    IUUQTRJJUBDPNI@JUFNTCGBFEBE
16. 2. ٕज़ͷൃల
17. 2. ٕज़ͷൃల ͲΜͲΜշదʹͳ͍ͬͯ͘ੈͷத ٻΊΒΕΔαʔϏε඼࣭ͷϕʔεϨϕϧ্͕͕͍ͬͯ͘
18. 2. ٕज़ͷൃల ϕʔεϨϕϧΛΞοϓͤ͞Δ
19. 1. ࢢ৔ͷ੒௕ 2. ٕज़ͷൃల 3. ػೳͷॆ࣮
20. 1. ࢢ৔ͷ੒௕ 2. ٕज़ͷൃల 3. ػೳͷॆ࣮
21. 3. ػೳͷॆ࣮ 2015.5 2019.1
22. 3. ػೳͷॆ࣮ 2015.5 2019.1 ΦϑϥΠϯ࠶ੜ ϩʔΧϧԻݯ γΣΞ ϑΥʔΧεϓϨΠϦετ ϓϨΠϦελʔϥϯΩϯά ͓ؾʹೖΓ͞Ε͍ͯΔਓ LiteτϥΠΞϧ ࠶ੜཤྺ Universal Links Google Cast Car Play ؔ࿈ϓϨΠϦετ ಉۂΛؚΉϓϨΠϦετ Android Auto ιʔτ&ϑΟϧλ New Releases New Arrivals Picked Out Playlists Essentials Quick Discovery Android Wear ࠶ੜΩϡʔ QRίʔυϩάΠϯ Media Browser Now Playing Created by Editors Android TV ৽Freeϓϥϯ ϋΠϥΠτ࠶ੜ ւ֎࠶ੜ Music Stories ຒΊࠐΈϓϨΠϠʔ μ΢ϯϩʔυཤྺ ΢ΟδΣοτ ΪϟοϓϨε࠶ੜ ݶఆίϯςϯπ Web՝ۚ Ωϟϯϖʔϯίʔυ Tips Media Style Player Իָೝࣝ ΠίϥΠβ ࣗಈԻָೝࣝ Involuntary Cancelation Notify Fire TV AWAεςʔγϣϯεΩϧ ೥ؒϓϥϯ #ࣸਅͰԻָ͓͑ͯ͠ TikTok࿈ܞ Google Assistant ଞ500Ҏ্ͷػೳ
23. 3. ػೳͷॆ࣮ UXͷ΄͜Ζͼ ػೳ໾ׂͷॏෳ ϑϩʔͷ൥ࡶԽ ৽ػೳͷೖΕͮΒ͞ ։ൃεϐʔυͷಷԽ ࢪࡦͷଧͪͮΒ͞
24. ػೳɾϢʔβʔδϟʔχʔͷ੔ཧ 3. ػೳͷॆ࣮
25. ໾ׂ੔ཧ - ϑΝʔετΞΫγϣϯ 1. ͕͢͞ (डಈ) 2 . ͕͢͞ (ೳಈ) 3. ࢿ࢈ 4.ΞΫςΟϏςΟ 5. ؅ཧ / ͦͷଞ Իָʹडಈతʹ৮ΕΒΕΔ৔ॴɻ ࣗ෼޷ΈͷԻָ͕ࣗಈతʹදࣔ͞ΕͨΓɺAWAΤσΟ λʔ͕͓͢͢Ί͢ΔԻָʹ৮ΕͨΓɺੈؒͰྲྀߦͬͯ ͍ΔԻָΛ஌Δ͜ͱ͕Ͱ͖ɺ৽͍͠޷͖ͳԻָʹࣗવ ͱग़ձ͑Δɻ ԻָΛೳಈతʹ୳͢৔ॴɻ ΩʔϫʔυɺԻɺδϟϯϧɺγνϡΤʔγϣϯͳͲΛ ݩʹԻָΛൃݟ͠ʹ͍͘͜ͱ͕Ͱ͖Δɻ ࣗ෼ͷ޷͖ͳԻָΛௌ͘৔ॴɻ AWAͰཷΊࠐΜͩԻָ͸΋ͪΖΜɺ୺຤಺ʹೖ͍ͬͯ Δָۂ΋͜ͷ৔ॴ͔Β࠶ੜͰ͖Δɻ ࣗ෼޲͚ͷԻָͷؾ෇͖ΛಘΔ৔ॴɻ ࣗ෼ʹର͢ΔଞਓͷΞΫςΟϏςΟʢ͓ؾʹೖΓ͞Ε ͨɺϥϯΫΠϯͨ͠ʣΛத৺ʹɺ͓ؾʹೖΓΞʔςΟ ετͷ৽ේ഑৴৘ใ΍͓ؾʹೖΓϢʔβʔͷϓϨΠϦ ετެ։৘ใΛ஌Δ͜ͱ͕Ͱ͖Δɻ ݸਓͷઃఆΛ؅ཧ͢Δ৔ॴɻ ϓϩϑΟʔϧ΍ΞΧ΢ϯτɺԻ࣭΍ϓογϡ௨஌ͳͲ ͷࣗ෼ͷઃఆΛ؅ཧͰ͖Δɻ ͓஌ΒͤɺϔϧϓͷӾཡ΍ɺ໰͍߹ΘͤͳͲ΋Մೳɻ ؔ࿈ػೳɿDISCOVERY, BROWSING ؔ࿈ػೳɿSearch, Music Identification, GENRE, MOOD ؔ࿈ػೳɿFavorites, Downloaded Music, My Playlists, My Music ؔ࿈ػೳɿNotifications ؔ࿈ػೳɿProfile, Settings ओཁͳ໾ׂΛ5ͭʹߜΔ ੔ཧྫ
26. BROWSING Focus Playlists New Releases New Arrivals Now Playing Created by Editors Picked Out Playlists Official Playlisters Playlister Charts Playlist Charts Top Hits Tracks Focus Playlists Created by Editors Picked Out Playlists Official Playlisters New Releases New Arrivals Now Playing Playlister Charts Playlist Charts Top Hits Tracks ϐοΫΞοϓܥ ৽ணܥ τϨϯυܥ FOCUS TRENDS Focus Playlists New Releases Official Playlisters Picked Out Playlists Top Hits Tracks Playlist Charts Playlister Charts ੔ཧྫ
27. RADIO Search Statations My Stations Recommended Stations Genre Stations τϥοΫεςʔγϣϯ Track Action Menu ΞʔςΟετεςʔγϣϯ Artist Action Menu γʔυݕࡧ Search ύʔιφϥΠζγʔυ DISCOVERY ཤྺ Play History δϟϯϧεςʔγϣϯ GENRE ੔ཧྫ
28. 1. ࢢ৔ͷ੒௕ 2. ٕज़ͷൃల 3. ػೳͷॆ࣮
29. 2016೥12݄ ϝδϟʔΞοϓσʔτͷاըɾߏ૝ αʔϏεϦϦʔε2೥໨ 2017೥1݄ UI/UXͷେ࿮ઃܭ 2017೥8݄ νʔϜ΁ͷࠎࢠઆ໌
30. શମͷߏ଄͸ͦͷ··ʹ ΑΓΘ͔Γ΍͘͢ɻΑΓ࢖͍΍͘͢ɻ طʹѪ༻͍͍ͨͩͯΔํ͕ಥવͷมԽʹ໎ͬͯ͠·Θͳ͍Α͏ʹ ΞϓϦશମͷߏ଄͸ͦͷ··ʹɺ୭΋͕εϜʔζʹ࢖͍͜ͳͤΔઃܭΛ໨ࢦ͠·ͨ͠ɻ
31. ۩ମతͳUI
32. ࣨڮ लढ़ [ Hidetoshi Murohashi ] σβΠφʔͱͯ͠WEBγεςϜձࣾɺ૯߹޿ࠂ୅ཧళͳͲΛܦͯɺ 2012೥αΠόʔΤʔδΣϯτʹೖࣾɻ ෳ਺ͷAmebaίϛϡχςΟαʔϏεΛ୲౰ͨ͠ͷͪɺ ݱࡏͰ͸AWAʹॴଐɻ Ver.2.0Ͱ͸શମઃܭͱͱ΋ʹओʹiOSσβΠϯΛ୲౰ɻ ART DIRECTOR / DESIGNER
33. σβΠφʔ͸Ͳ͏ߟ͍͑ͯͨͷ͔
34. ΋ͱ΋ͱײ͍ͯͨ͡՝୊఺ͱܦӦਞͷཁ๬ ʻ΋ͱ΋ͱͷ՝୊఺ʼ σόΠεղ૾౓͕େ͖͘ͳΔʹͭΕͯφϏήʔγϣϯ໰୊ ड͚਎ͰͲΜͲΜԻָ͕ௌ͚Δঢ়ଶΛͭ͘Ε͍ͯΔ͔ ʻཁ๬ʼ ϙʔλϧαΠτͷΑ͏ʹೳಈతʹԻָΛఏڙ͢Δ΂͖Ͱ͸ͳ͍ ೳಈతͳ͜ͱ͸൱ఆ͠ͳ͍͕ɺཧ೦ͱͯ͠͸ࣗવʹԻָͱग़ձ͏͜ͱ
35. ػೳ΍ը໘Λ௥Ճ͢Δʹ͋ͨΓ ʮ༨നʯ͕଍Γͳ͔ͬͨ શମతͳߏ੒ͱͯ͠
36. ࠓճͷΞοϓσʔτͰҙࣝͨ͜͠ͱ͸ ۩ମతͳσβΠϯΛ͠ͳ͍͜ͱ
37. σβΠϯ͔ΒఏҊ͢ΔͱɺͦͷΞΠσΞ͔Β཭Εʹ͘͘ͳͬͯ͠·͏ͨΊ ࠓճͷΞοϓσʔτͰҙࣝͨ͜͠ͱ͸ ۩ମతͳσβΠϯΛ͠ͳ͍͜ͱ ʮࡐྉʯͱʮ໨తʯͷ੔ཧΛ࣠ͱͯ͠ ϥϑεέονΛϝΠϯʹ ίϛϡχέʔγϣϯΛ͠·ͨ͠
38. ࣮͸ver. 1.0Ͱ͸ٯͰͨ͠
39. ver. 1.0: σβΠϯͷΠϯύΫτʹΑΔ࿩୊ੑͱ ࢖͍উखͷࢍ൱྆࿦ ver. 2.0: ҹ৅Λͦͷ··ʹ ͍͔ʹͯ͠໨తΛՌͨ͢ͷ͔
40. σβΠϯʹ͍ͭͯҰ෦঺հ
42. DISCOVERY ϝΠϯը໘ɻ Ϧίϝϯυཧ༝ΛηΫγϣϯλΠτϧͱ͢Δ͜ͱͰԻ ָͷൃݟΤϯδϯͱਐԽɻ ͨͩ͠ɺ·ͩൃల్্Ͱ͋Γɺࠓޙ͞ΒʹਐԽΛͯ͠ ͍͘༧ఆͰ͢ɻ
43. FOCUS ver. 2.0 ͔Β৽ొ৔ͷը໘ɻ ΤσΟλʔ͕ݫબ͢Δ͓͢͢ΊԻָΛ࣠ʹɺγʔζϯʹ ߹ͬͨۂ΍৽ۂɺ·ͩ஌ΒΕ͍ͯͳ͍ΞʔςΟετͳͲ Λ঺հɻ ͪ͜Βͷը໘΋ɺ·ͩਐԽ༧ఆ͋Γɻ
44. TRENDS ΞϓϦॳظʹଘࡏͨ͠ʮTRENDINGʯͷਐԽ൛ɻ ͍·೔ຊͰྲྀߦ͍ͬͯΔۂ΍ɺੈքͰௌ͔Ε͍ͯΔۂΛ ൃݟͰ͖Δ΄͔ɺδϟϯϧ΍ϢʔβʔͳͲɺ༷ʑͳνϟʔ τ͔ΒԻָΛݟ͚ͭΔ͜ͱ͕Ͱ͖Δɻ
45. GENRE / MOOD ͢Ͱʹଘࡏ͍ͯͨ͠δϟϯϧͱϜʔυͷը໘Λ౷߹ɻ ͞Βʹλά͔Β΋Իָ͕ൃݟͰ͖Δɻ ֤δϟϯϧ΍Ϝʔυͷৄࡉը໘Ͱ͸ɺΦϑΟγϟϧϓϨ ΠϦετͷ΄͔ਓؾϓϨΠϦετɺϢʔβʔɺϥδΦػ ೳ͕ଘࡏ͢Δɻ
47. New Player ࠶ੜۂͷલۂͱ࣍ۂͷ ΞʔτϫʔΫ͕ݟ͑ΔΑ͏ʹɻ ՎࢺػೳΛ໌ࣔ ϑϧ࠶ੜͱϋΠϥΠτ࠶ੜΛ ΑΓ࢖͍΍͘͢ɻ
49. Bottom-Up Navigation λϒϝχϡʔ͸ʮී௨ʯͩɻͱ͍͏৴೦ͷ΋ͱɺ ৽͍͠ΞΠσΞͱͯ͠ͷφϏήʔγϣϯΛઃܭɻ
50. ͜ͷଞʹ΋ɺਐԽ͍ͯ͠Δը໘͸ͨ͘͞Μ͋Γ·͢ ͥͻΞοϓσʔτͯࣗ͠͝਎ͷ໨Ͱ͝ཡ͍ͩ͘͞
51. Thank You ຊ೔͸͋Γ͕ͱ͏͍͟͝·ͨ͠