制作側とユーザーの温度差、そしてペルソナのズレ-プロゲーマーと高校生から学んだ例-

5月14日「WebデザインとUX について考える」関西フロントエンドUGで発表したスライドです。

Transcript

1. ੍ ࡞ ଆ ͱ Ϣ ʔ β ʔ ͷ Թ ౓ ࠩ ͦ ͯ͠ ϖ ϧι φ ͷ ζ Ϩ 1 4 . M AY 2 0 1 6 M A I K O S O B A - ϓ ϩ ήʔ Ϛʔ ͱ ߴ ߍ ੜ ͔ Β ֶ Μ ͩ ྫ -
2. About me
3. ๺ւಓˠ౦ژʢ໿12೥ʣˠେࡕʢ2015೥͔Βʣ ޷͖ɿ๺ւಓɺѴࢁಈ෺Ԃɺண෺ɺδϣδϣʢ4෦ɾ5෦ʣɻ࠷ۙ౦༸ҩֶ ͷษڧΛ͸͡Ί·ͨ͠ɻ ϑϦʔϥϯεͰ͕ͨ͠ݱࡏ͸ALAKIגࣜձࣾͰσβΠφʔͱָͯ͘͠͠ಇ ͍͍ͯ·͢ɻ খڶ ຑҥʢίιό ϚΠʣ @sobameshi_m
4. ɾλʔήοτͷબఆʹ͍ͭͯ ɾαΠτͷઃܭ ɾαΠτͷσβΠϯ ࠓ೔͓࿩͢Δ͜ͱ
5. ࢖͍΍͍͢αΠτͬͯʁ
6. ϓϩήʔϚʔ޲͚αΠτ Example1
7. ߟ͑ͨϖϧιφ ɾϓϩήʔϚʔͷஉੑɺe-sportsʹܞΘ͍ͬͯΔɻ ɾࢼ߹ͷݚڀΛͨ͠Γɺ஌ࣝΛ૿΍ͨ͢ΊʹσʔλΛूΊ ͍ͨͱ೔ࠒ͔Βւ֎αΠτؚΊ༷ʑͳαΠτΛݟ͍ͯΔɻ ɾීஈ͔ΒPCͷલʹ͍ΔͷͰɺ͋Δఔ౓αΠτΛૢ࡞͢Δ ͷʹෆศ͸ײ͡ͳ͍ɻ ɾ ͋·Γ৯ࣄʹ͸ڵຯ͕ͳ͘ɺήʔϜΛ͠ͳ͕ΒԿ͔Λ͢ Δ͜ͱ͕ଟ͍ɻ ʢ؆ུ൛ʣ
8. ૝૾ͨ͠σβΠϯɾߏ੒ ɾήʔϜͷը໘ͷΑ͏ͳײ͡Ͱ೐΍͔Ͱը૾͕ͨ͘͞Μͳײ͡ͱ ͔͍͍͔΋ͳɻ ɾ৘ใ͕ͪ͝Όͪ͝Ό͍ͯͦ͠͏͔ͩΒɺݟ΍͘͢·ͱΊͯ৭Μ ͳϖʔδʹભҠ͠΍͍͢ߏ੒͕ྑ͍͔ͳɻ ɾe-sports͸ւ֎ͷํ͕੝Μ͔ͩΒɺ֎ࠃͷήʔϜͷαΠτΛྑ ͘ݟΔͩΖ͏ͳ͋ɻશମతͳUI͸ͦΕʹ͍ۙํ͕͍͍ͷ͔ͳɻ ɾ͋Ε΋Α͘ݟ͍ͤͯ͋͛ͨɺ͜Ε΋Α͘ݟ͍ͤͯ͋͛ͨɻ
9. ϓϩήʔϚʔͷ੠Λฉ͍ͯΈͨ
10. ɾήʔϜ͠ͳ͕ΒݟΔ͔Βɺ͋·Γͪ͝Ό ͪ͝Ό͍ͯ͠ͳͯ͘ݟ΍͍͢΋ͷ͕͍͍ɻ ɾήʔϜΛ͠ͳ͕Βը໘෯Λڱͯ͘͠ݟΔ ͜ͱ͕ଟ͍͔Βɺίϯςϯπ͕ը໘αΠζ ʹΑͬͯมΘΔ΋ͷ͕͍͍ɻ
11. ɾΫϦοΫ͢Δ౓ʹϖʔδ͕ભҠ͢Δͷ͸ ޷͖Ͱ͸ͳ͍ɻϔομʔ΋ݻఆ͞Ε͍ͯͯ ཉ͍͠ɻϗόʔେ޷͖ɻ ɾίϯςϯπ͸ͨ͘͞Μ͍Βͳ͍ɻݟͨ͘ ͳ͍΋ͷ΋͋ΔͷͰΦϑػೳ͕ཉ͍͘͠Β ͍ɻ
12. ༧૝֎ͷղ౴ͩͬͨɻ
13. अຐͤͣʹݟक͍ͬͯͯ͘Εͯɺ ඞཁͳͱ͖ʹ͸ॿ͚ͯ͘ΕΔଘ ࡏͷΑ͏ͳαΠτ… ٻΊ͍ͯͨͷ͸…
14. ੠༏ɾΞχϝɾe-sportsؔ܎ ͷઐ໳ֶߍαΠτ Example2
15. ߟ͑ͨϖϧιφ ɾΞχϝɾήʔϜɾ੠༏͕޷͖ͳߴߍੜɻ ɾεϚʔτϑΥϯ΋࢖͏͕ɺීஈ͔ΒPCͷૢ࡞ʹ͸׳Ε͍ͯΔͷ ͰαΠτΛPCͰͷૢ࡞΋೉ͳ͘͜ͳ͢ɻ ɾझຯ͸ΞχϝΛݟͨΓήʔϜΛ͢Δ͜ͱɻٳΈͷ೔ʹ͸੠༏ͷ ΠϕϯτʹߦͬͨΓɺ༑ୡͱ੟஍८ྱɻ ʢ؆ུ൛ʣ
16. ૝૾ͨ͠σβΠϯɾߏ੒ʢҰ෦ʣ ɾ͔Θ͍͍ΩϟϥΫλʔ͕͍ͬͺ͍Ͱɺ৭Μͳಈ͖͕͋ͬͯʮָ ͦ͠͏ͳֶߍʯͬͯ఻ΘΔͷ͕ྑ͍ͳ͋ɻ ɾ΍΍͍͜͠࡞ΓͩͬͨΓจࣈ͕ଟ͍ͱ཭୤ͯ͠͠·͍ͦ͏͔ͩ ΒɺͰ͖Δ͚ͩը૾ʹจࣈΛೖΕͨΓɺΘ͔Γ΍͘͢આ໌͢Δจ ষΛ௥Ճ͠Α͏ɻ ɾTwitterʹ޿ࠂͳͲ΋ग़͢Έ͍ͨͩ͠ɺTwitter→αΠτ→ਃ͠ ࠐΈͳͲͷྲྀΕΛखؒʹײͤ͡͞ͳ͍Α͏ͳϘϦϡʔϜʹ͠Α͏ɻ
17. ࣮ࡍʹӡ༻ͯ͠Έͨ݁Ռ
18. ɾLINEɺTwitterͰ޿ࠂɾࠂ஌Λͨ͠Βɺ LINEɺTwitter͔Βͷ໰͍߹Θͤ΋ͪΐ͜ ͪΐ͜ͱɻ ɾ༧૝֎ͷ෦෼ͰTwitterͷτϨϯυೖΓ ɾͪΐͪ͜ΐ͜TwitterͰ࿩୊ʹ͸ग़Δɻ
19. ৭ʑͱ༧૝֎ͳ͜ͱ͕ɻ
20. ͍ۙ໨ઢͰ෺ࣄΛݟΔ͜ͱ͕Ͱ ͖Δ͚Ͳɺ໘౗ݟͷ͍͍͓࢞͞ ΜతଘࡏͷΑ͏ͳαΠτɻ ٻΊ͍ͯͨͷ͸…
21. Կނϖϧιφ͸ζϨͨͷ͔ʁ
22. ɾλʔήοτͷ͜ͱΛྑ͘஌Βͳ͍͔Βɻ ௐࠪͨͭ͠΋ΓͰ΋ෆे෼ɻ ɾͨͩɺ͍ۙਓ΍ຊਓʹ࿩Λฉ͔ͳ͍ͱɺ ௐ͚ࠪͩ͡ΌΘ͔Βͳ͍෦෼͸͋Δʢಛʹ ࠓճͷྫͷΑ͏ͳ৔߹ʣɻ σʔλ͚ͩͩͱʮԿނͦ͏ࢥ͏ͷ͔ʁʯͱ ͍͏ͷ͕Θ͔Βͳ͍ɻ
23. ɾௐࠪ࣌ʹʮΈΜͳͦ͏ݴͬͯΔʯͱ͍͏ ҙݟΛݟ͔͚ͨ৔߹Ͱ΋ʮੈؒ͡Όͳ͍ɻ ͋ͳͨͰ͠ΐ͏ʁʯͱ͍͏ߟ͑͸࣋ͭΑ͏ ʹ͢Δʢଠ࠻ϝιουʣɻ
24. ղܾɾվળํ๏͸ʁ
25. ɾීஈͲ͏͍ͬͨαΠτΛݟ͍ͯΔͷ͔ʁ ͸΋ͪΖΜେࣄɻͲΜͳϢʔβʔͰ΋ଞͷ αΠτͰطʹֶशɾௐڭ͞Ε͍ͯΔ͜ͱΛ ೦಄ʹஔ͘ɻ
26. ɾλʔήοτ૚͕޷ΉαΠτˠͦͷλʔήο τ͕ྑ͘ݟ͍ͯΔδϟϯϧͷαΠτͰΑ͘ ࠾༻͞Ε͍ͯΔUI→Կނ࠾༻͞Εͨͷ͔ʁ Λਂ͘ߟ͑Δɻ ɾζϨͯ΋࠶ߟ͢Δɻ
27. ɾߴߍੜͷ৔߹ɺLINEɺTwitterͷ࢖͍ํ ΍ҙ͕ࣝ࡞Γखͷ૝૾ͱগ͠ҧ͏ɻ ɾ10୅ͩͱ໰͍߹ΘͤϑΥʔϜΑΓ TwitterͷDM΍LINEͰͷ໰͍߹Θͤͷํ ͕ؾָͩͬͨΓ͢Δɻ →αΠτ͚ͩʹରͯ͠Կ͔͢ΔΑΓ΋ߦಈ Λશ෦ͻͬ͘ΔΊͯߟ͑ͯΈΔ΂͖Ͱ͸ʁ
28. ɾήʔϚʔͷ৔߹͸ݶΓͳ͘ήʔϜ಺ʹۙ ͍UIΛ޷Ή܏޲͕͋ͬͨɻ ɾͦΕ͸ࢲ͕ͨͪࢥ͏ʮ࢖͍΍͍͢ʯͰ͸ ͳ͍ɻύϯ͕ͣ͘ͳ͍ɺࣗ෼͕ࠓ͍Δϖʔ δ͕Θ͔Γʹ͍͘ɺ໭ΔϘλϯͰ໭Εͳ͍ɻ ը໘ભҠ͠ͳ͍ϙοϓΞοϓɺϗόʔࡇɻ ϖʔδભҠͤͣʹλϒ੾Γସ͕͑ଟ ͍ɻɻɻ
29. ࠜຊతͳUI͸͋ΕͲɺࢲͨͪ͸ௐڭ͞Εͯ ͍ΔɻٯʹϢʔβʔΛௐڭ͢Δ͜ͱ΋Մೳ Ͱ͋Δɻ ͍Θ͹श׳ͷੵΈॏͶɻ
30. ·ͱΊ
31. Ϣʔβʔ͸طʹֶशɾௐڭ͞Ε͍ͯ Δɻ޷Έͱ͸ɺֶशɾௐڭʹΑΔ ΋ͷ΋େ͖͍ɻҭ͖ͬͯͨ؀ڥ͕ҧ ͏͔ΒεϨҧ͍͸൱Ίͳ͍ɻʢՆ ͕ͩΊͩͬͨΓɺηϩϦ͕޷͖ͩͬ ͨΓ…ʣ
32. Ұൠతʹྑ͘ͳ͍UIͰ΋ɺඞͣ͠ ΋ੈքதͷશһʹྑ͘ͳ͍ͱ͸ݶ Βͳ͍ɻٯ΋ͦ͏ɻ
33. ීวతͳ΋ͷɺຊ౰ͷ࠷௿ݶ͸͋ Δ͚ͲɺϢʔβʔʹదͨ͠αΠτ ઃܭ͸େࣄɻ
34. ͜Ε͔Β͸SNSͳͲɺαΠτ͚ͩͰ ؆ܿ͠ͳ͍෦෼΋ߟ͍͑ͯ͘͜ͱ͕ ඞཁɻ
35. END ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ὑ