Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Mai Kosoba
May 26, 2016

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

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

Mai Kosoba

May 26, 2016
Tweet

More Decks by Mai Kosoba

Other Decks in Design

Transcript

  1. ੍ ࡞ ଆ ͱ Ϣ ʔ β ʔ ͷ Թ ౓ ࠩ
    ͦ ͯ͠ ϖ ϧι φ ͷ ζ Ϩ
    1 4 . M AY 2 0 1 6 M A I K O S O B A
    - ϓ ϩ ήʔ Ϛʔ ͱ ߴ ߍ ੜ ͔ Β ֶ Μ ͩ ྫ -

    View full-size slide

  2. ๺ւಓˠ౦ژʢ໿12೥ʣˠେࡕʢ2015೥͔Βʣ
    ޷͖ɿ๺ւಓɺѴࢁಈ෺Ԃɺண෺ɺδϣδϣʢ4෦ɾ5෦ʣɻ࠷ۙ౦༸ҩֶ
    ͷษڧΛ͸͡Ί·ͨ͠ɻ
    ϑϦʔϥϯεͰ͕ͨ͠ݱࡏ͸ALAKIגࣜձࣾͰσβΠφʔͱָͯ͘͠͠ಇ
    ͍͍ͯ·͢ɻ
    খڶ ຑҥʢίιό ϚΠʣ
    @sobameshi_m

    View full-size slide

  3. ɾλʔήοτͷબఆʹ͍ͭͯ
    ɾαΠτͷઃܭ
    ɾαΠτͷσβΠϯ
    ࠓ೔͓࿩͢Δ͜ͱ

    View full-size slide

  4. ࢖͍΍͍͢αΠτͬͯʁ

    View full-size slide

  5. ϓϩήʔϚʔ޲͚αΠτ
    Example1

    View full-size slide

  6. ߟ͑ͨϖϧιφ
    ɾϓϩήʔϚʔͷஉੑɺe-sportsʹܞΘ͍ͬͯΔɻ
    ɾࢼ߹ͷݚڀΛͨ͠Γɺ஌ࣝΛ૿΍ͨ͢ΊʹσʔλΛूΊ
    ͍ͨͱ೔ࠒ͔Βւ֎αΠτؚΊ༷ʑͳαΠτΛݟ͍ͯΔɻ
    ɾීஈ͔ΒPCͷલʹ͍ΔͷͰɺ͋Δఔ౓αΠτΛૢ࡞͢Δ
    ͷʹෆศ͸ײ͡ͳ͍ɻ
    ɾ ͋·Γ৯ࣄʹ͸ڵຯ͕ͳ͘ɺήʔϜΛ͠ͳ͕ΒԿ͔Λ͢
    Δ͜ͱ͕ଟ͍ɻ
    ʢ؆ུ൛ʣ

    View full-size slide

  7. ૝૾ͨ͠σβΠϯɾߏ੒
    ɾήʔϜͷը໘ͷΑ͏ͳײ͡Ͱ೐΍͔Ͱը૾͕ͨ͘͞Μͳײ͡ͱ
    ͔͍͍͔΋ͳɻ
    ɾ৘ใ͕ͪ͝Όͪ͝Ό͍ͯͦ͠͏͔ͩΒɺݟ΍͘͢·ͱΊͯ৭Μ
    ͳϖʔδʹભҠ͠΍͍͢ߏ੒͕ྑ͍͔ͳɻ
    ɾe-sports͸ւ֎ͷํ͕੝Μ͔ͩΒɺ֎ࠃͷήʔϜͷαΠτΛྑ
    ͘ݟΔͩΖ͏ͳ͋ɻશମతͳUI͸ͦΕʹ͍ۙํ͕͍͍ͷ͔ͳɻ
    ɾ͋Ε΋Α͘ݟ͍ͤͯ͋͛ͨɺ͜Ε΋Α͘ݟ͍ͤͯ͋͛ͨɻ

    View full-size slide

  8. ϓϩήʔϚʔͷ੠Λฉ͍ͯΈͨ

    View full-size slide

  9. ɾήʔϜ͠ͳ͕ΒݟΔ͔Βɺ͋·Γͪ͝Ό
    ͪ͝Ό͍ͯ͠ͳͯ͘ݟ΍͍͢΋ͷ͕͍͍ɻ
    ɾήʔϜΛ͠ͳ͕Βը໘෯Λڱͯ͘͠ݟΔ
    ͜ͱ͕ଟ͍͔Βɺίϯςϯπ͕ը໘αΠζ
    ʹΑͬͯมΘΔ΋ͷ͕͍͍ɻ

    View full-size slide

  10. ɾΫϦοΫ͢Δ౓ʹϖʔδ͕ભҠ͢Δͷ͸
    ޷͖Ͱ͸ͳ͍ɻϔομʔ΋ݻఆ͞Ε͍ͯͯ
    ཉ͍͠ɻϗόʔେ޷͖ɻ
    ɾίϯςϯπ͸ͨ͘͞Μ͍Βͳ͍ɻݟͨ͘
    ͳ͍΋ͷ΋͋ΔͷͰΦϑػೳ͕ཉ͍͘͠Β
    ͍ɻ

    View full-size slide

  11. ༧૝֎ͷղ౴ͩͬͨɻ

    View full-size slide

  12. अຐͤͣʹݟक͍ͬͯͯ͘Εͯɺ
    ඞཁͳͱ͖ʹ͸ॿ͚ͯ͘ΕΔଘ
    ࡏͷΑ͏ͳαΠτ…
    ٻΊ͍ͯͨͷ͸…

    View full-size slide

  13. ੠༏ɾΞχϝɾe-sportsؔ܎
    ͷઐ໳ֶߍαΠτ
    Example2

    View full-size slide

  14. ߟ͑ͨϖϧιφ
    ɾΞχϝɾήʔϜɾ੠༏͕޷͖ͳߴߍੜɻ
    ɾεϚʔτϑΥϯ΋࢖͏͕ɺීஈ͔ΒPCͷૢ࡞ʹ͸׳Ε͍ͯΔͷ
    ͰαΠτΛPCͰͷૢ࡞΋೉ͳ͘͜ͳ͢ɻ
    ɾझຯ͸ΞχϝΛݟͨΓήʔϜΛ͢Δ͜ͱɻٳΈͷ೔ʹ͸੠༏ͷ
    ΠϕϯτʹߦͬͨΓɺ༑ୡͱ੟஍८ྱɻ
    ʢ؆ུ൛ʣ

    View full-size slide

  15. ૝૾ͨ͠σβΠϯɾߏ੒ʢҰ෦ʣ
    ɾ͔Θ͍͍ΩϟϥΫλʔ͕͍ͬͺ͍Ͱɺ৭Μͳಈ͖͕͋ͬͯʮָ
    ͦ͠͏ͳֶߍʯͬͯ఻ΘΔͷ͕ྑ͍ͳ͋ɻ
    ɾ΍΍͍͜͠࡞ΓͩͬͨΓจࣈ͕ଟ͍ͱ཭୤ͯ͠͠·͍ͦ͏͔ͩ
    ΒɺͰ͖Δ͚ͩը૾ʹจࣈΛೖΕͨΓɺΘ͔Γ΍͘͢આ໌͢Δจ
    ষΛ௥Ճ͠Α͏ɻ
    ɾTwitterʹ޿ࠂͳͲ΋ग़͢Έ͍ͨͩ͠ɺTwitter→αΠτ→ਃ͠
    ࠐΈͳͲͷྲྀΕΛखؒʹײͤ͡͞ͳ͍Α͏ͳϘϦϡʔϜʹ͠Α͏ɻ

    View full-size slide

  16. ࣮ࡍʹӡ༻ͯ͠Έͨ݁Ռ

    View full-size slide

  17. ɾLINEɺTwitterͰ޿ࠂɾࠂ஌Λͨ͠Βɺ
    LINEɺTwitter͔Βͷ໰͍߹Θͤ΋ͪΐ͜
    ͪΐ͜ͱɻ
    ɾ༧૝֎ͷ෦෼ͰTwitterͷτϨϯυೖΓ
    ɾͪΐͪ͜ΐ͜TwitterͰ࿩୊ʹ͸ग़Δɻ

    View full-size slide

  18. ৭ʑͱ༧૝֎ͳ͜ͱ͕ɻ

    View full-size slide

  19. ͍ۙ໨ઢͰ෺ࣄΛݟΔ͜ͱ͕Ͱ
    ͖Δ͚Ͳɺ໘౗ݟͷ͍͍͓࢞͞
    ΜతଘࡏͷΑ͏ͳαΠτɻ
    ٻΊ͍ͯͨͷ͸…

    View full-size slide

  20. Կނϖϧιφ͸ζϨͨͷ͔ʁ

    View full-size slide

  21. ɾλʔήοτͷ͜ͱΛྑ͘஌Βͳ͍͔Βɻ
    ௐࠪͨͭ͠΋ΓͰ΋ෆे෼ɻ
    ɾͨͩɺ͍ۙਓ΍ຊਓʹ࿩Λฉ͔ͳ͍ͱɺ
    ௐ͚ࠪͩ͡ΌΘ͔Βͳ͍෦෼͸͋Δʢಛʹ
    ࠓճͷྫͷΑ͏ͳ৔߹ʣɻ
    σʔλ͚ͩͩͱʮԿނͦ͏ࢥ͏ͷ͔ʁʯͱ
    ͍͏ͷ͕Θ͔Βͳ͍ɻ

    View full-size slide

  22. ɾௐࠪ࣌ʹʮΈΜͳͦ͏ݴͬͯΔʯͱ͍͏
    ҙݟΛݟ͔͚ͨ৔߹Ͱ΋ʮੈؒ͡Όͳ͍ɻ
    ͋ͳͨͰ͠ΐ͏ʁʯͱ͍͏ߟ͑͸࣋ͭΑ͏
    ʹ͢Δʢଠ࠻ϝιουʣɻ

    View full-size slide

  23. ղܾɾվળํ๏͸ʁ

    View full-size slide

  24. ɾීஈͲ͏͍ͬͨαΠτΛݟ͍ͯΔͷ͔ʁ
    ͸΋ͪΖΜେࣄɻͲΜͳϢʔβʔͰ΋ଞͷ
    αΠτͰطʹֶशɾௐڭ͞Ε͍ͯΔ͜ͱΛ
    ೦಄ʹஔ͘ɻ

    View full-size slide

  25. ɾλʔήοτ૚͕޷ΉαΠτˠͦͷλʔήο
    τ͕ྑ͘ݟ͍ͯΔδϟϯϧͷαΠτͰΑ͘
    ࠾༻͞Ε͍ͯΔUI→Կނ࠾༻͞Εͨͷ͔ʁ
    Λਂ͘ߟ͑Δɻ
    ɾζϨͯ΋࠶ߟ͢Δɻ

    View full-size slide

  26. ɾߴߍੜͷ৔߹ɺLINEɺTwitterͷ࢖͍ํ
    ΍ҙ͕ࣝ࡞Γखͷ૝૾ͱগ͠ҧ͏ɻ
    ɾ10୅ͩͱ໰͍߹ΘͤϑΥʔϜΑΓ
    TwitterͷDM΍LINEͰͷ໰͍߹Θͤͷํ
    ͕ؾָͩͬͨΓ͢Δɻ
    →αΠτ͚ͩʹରͯ͠Կ͔͢ΔΑΓ΋ߦಈ
    Λશ෦ͻͬ͘ΔΊͯߟ͑ͯΈΔ΂͖Ͱ͸ʁ

    View full-size slide

  27. ɾήʔϚʔͷ৔߹͸ݶΓͳ͘ήʔϜ಺ʹۙ
    ͍UIΛ޷Ή܏޲͕͋ͬͨɻ
    ɾͦΕ͸ࢲ͕ͨͪࢥ͏ʮ࢖͍΍͍͢ʯͰ͸
    ͳ͍ɻύϯ͕ͣ͘ͳ͍ɺࣗ෼͕ࠓ͍Δϖʔ
    δ͕Θ͔Γʹ͍͘ɺ໭ΔϘλϯͰ໭Εͳ͍ɻ
    ը໘ભҠ͠ͳ͍ϙοϓΞοϓɺϗόʔࡇɻ
    ϖʔδભҠͤͣʹλϒ੾Γସ͕͑ଟ
    ͍ɻɻɻ

    View full-size slide

  28. ࠜຊతͳUI͸͋ΕͲɺࢲͨͪ͸ௐڭ͞Εͯ
    ͍ΔɻٯʹϢʔβʔΛௐڭ͢Δ͜ͱ΋Մೳ
    Ͱ͋Δɻ
    ͍Θ͹श׳ͷੵΈॏͶɻ

    View full-size slide

  29. Ϣʔβʔ͸طʹֶशɾௐڭ͞Ε͍ͯ
    Δɻ޷Έͱ͸ɺֶशɾௐڭʹΑΔ
    ΋ͷ΋େ͖͍ɻҭ͖ͬͯͨ؀ڥ͕ҧ
    ͏͔ΒεϨҧ͍͸൱Ίͳ͍ɻʢՆ
    ͕ͩΊͩͬͨΓɺηϩϦ͕޷͖ͩͬ
    ͨΓ…ʣ

    View full-size slide

  30. Ұൠతʹྑ͘ͳ͍UIͰ΋ɺඞͣ͠
    ΋ੈքதͷશһʹྑ͘ͳ͍ͱ͸ݶ
    Βͳ͍ɻٯ΋ͦ͏ɻ

    View full-size slide

  31. ීวతͳ΋ͷɺຊ౰ͷ࠷௿ݶ͸͋
    Δ͚ͲɺϢʔβʔʹదͨ͠αΠτ
    ઃܭ͸େࣄɻ

    View full-size slide

  32. ͜Ε͔Β͸SNSͳͲɺαΠτ͚ͩͰ
    ؆ܿ͠ͳ͍෦෼΋ߟ͍͑ͯ͘͜ͱ͕
    ඞཁɻ

    View full-size slide

  33. END
    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ὑ

    View full-size slide