Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
制作側とユーザーの温度差、そしてペルソナのズレ-プロゲーマーと高校生から学んだ例-
Search
Mai Kosoba
May 26, 2016
Design
1
1.8k
制作側とユーザーの温度差、そしてペルソナのズレ-プロゲーマーと高校生から学んだ例-
5月14日「WebデザインとUX について考える」関西フロントエンドUGで発表したスライドです。
Mai Kosoba
May 26, 2016
Tweet
Share
More Decks by Mai Kosoba
See All by Mai Kosoba
デザイナーがWordPressと上手くお付き合いしていく方法 / WordCamp Kyoto 2017
marcofabrika
0
1.7k
Wocker -My Recommended WordPress Development Environment to Designers
marcofabrika
1
10k
普遍的な設計思想とモダンなコーディング
marcofabrika
2
1k
こわくないよ!多言語サイト / WordCamp Kansai 2016
marcofabrika
1
710
Other Decks in Design
See All in Design
freee + Product Design FY25Q4
freee
4
15k
harutaka Vision Deck
zenkigenforrecruit
0
170
「UXとUIの違い」v2
shirasu3
0
150
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
2.6k
PF_濵村ひろみ_202503
maru_design78
0
200
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
260
AIで加速するアクセシビリティのこれから
magi1125
3
590
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
890
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
210
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.2k
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
400
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
350
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
Designing Experiences People Love
moore
142
24k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Agile that works and the tools we love
rasmusluckow
329
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Site-Speed That Sticks
csswizardry
10
720
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
੍ ࡞ ଆ ͱ Ϣ ʔ β ʔ ͷ Թ
ࠩ ͦ ͯ͠ ϖ ϧι φ ͷ ζ Ϩ 1 4 . M AY 2 0 1 6 M A I K O S O B A - ϓ ϩ ήʔ Ϛʔ ͱ ߴ ߍ ੜ ͔ Β ֶ Μ ͩ ྫ -
About me
ւಓˠ౦ژʢ12ʣˠେࡕʢ2015͔Βʣ ͖ɿւಓɺѴࢁಈԂɺணɺδϣδϣʢ4෦ɾ5෦ʣɻ࠷ۙ౦༸ҩֶ ͷษڧΛ͡Ί·ͨ͠ɻ ϑϦʔϥϯεͰ͕ͨ͠ݱࡏALAKIגࣜձࣾͰσβΠφʔͱָͯ͘͠͠ಇ ͍͍ͯ·͢ɻ খڶ ຑҥʢίιό ϚΠʣ @sobameshi_m
ɾλʔήοτͷબఆʹ͍ͭͯ ɾαΠτͷઃܭ ɾαΠτͷσβΠϯ ࠓ͓͢Δ͜ͱ
͍͍͢αΠτͬͯʁ
ϓϩήʔϚʔ͚αΠτ Example1
ߟ͑ͨϖϧιφ ɾϓϩήʔϚʔͷஉੑɺe-sportsʹܞΘ͍ͬͯΔɻ ɾࢼ߹ͷݚڀΛͨ͠ΓɺࣝΛ૿ͨ͢ΊʹσʔλΛूΊ ͍ͨͱࠒ͔Βւ֎αΠτؚΊ༷ʑͳαΠτΛݟ͍ͯΔɻ ɾීஈ͔ΒPCͷલʹ͍ΔͷͰɺ͋ΔఔαΠτΛૢ࡞͢Δ ͷʹෆศײ͡ͳ͍ɻ ɾ ͋·Γ৯ࣄʹڵຯ͕ͳ͘ɺήʔϜΛ͠ͳ͕ΒԿ͔Λ͢ Δ͜ͱ͕ଟ͍ɻ ʢ؆ུ൛ʣ
૾ͨ͠σβΠϯɾߏ ɾήʔϜͷը໘ͷΑ͏ͳײ͡Ͱ͔Ͱը૾͕ͨ͘͞Μͳײ͡ͱ ͔͍͍͔ͳɻ ɾใ͕ͪ͝Όͪ͝Ό͍ͯͦ͠͏͔ͩΒɺݟ͘͢·ͱΊͯ৭Μ ͳϖʔδʹભҠ͍͢͠ߏ͕ྑ͍͔ͳɻ ɾe-sportsւ֎ͷํ͕Μ͔ͩΒɺ֎ࠃͷήʔϜͷαΠτΛྑ ͘ݟΔͩΖ͏ͳ͋ɻશମతͳUIͦΕʹ͍ۙํ͕͍͍ͷ͔ͳɻ ɾ͋ΕΑ͘ݟ͍ͤͯ͋͛ͨɺ͜ΕΑ͘ݟ͍ͤͯ͋͛ͨɻ
ϓϩήʔϚʔͷΛฉ͍ͯΈͨ
ɾήʔϜ͠ͳ͕ΒݟΔ͔Βɺ͋·Γͪ͝Ό ͪ͝Ό͍ͯ͠ͳͯ͘ݟ͍͢ͷ͕͍͍ɻ ɾήʔϜΛ͠ͳ͕Βը໘෯Λڱͯ͘͠ݟΔ ͜ͱ͕ଟ͍͔Βɺίϯςϯπ͕ը໘αΠζ ʹΑͬͯมΘΔͷ͕͍͍ɻ
ɾΫϦοΫ͢Δʹϖʔδ͕ભҠ͢Δͷ ͖Ͱͳ͍ɻϔομʔݻఆ͞Ε͍ͯͯ ཉ͍͠ɻϗόʔେ͖ɻ ɾίϯςϯπͨ͘͞Μ͍Βͳ͍ɻݟͨ͘ ͳ͍ͷ͋ΔͷͰΦϑػೳ͕ཉ͍͘͠Β ͍ɻ
༧֎ͷղͩͬͨɻ
अຐͤͣʹݟक͍ͬͯͯ͘Εͯɺ ඞཁͳͱ͖ʹॿ͚ͯ͘ΕΔଘ ࡏͷΑ͏ͳαΠτ… ٻΊ͍ͯͨͷ…
༏ɾΞχϝɾe-sportsؔ ͷઐֶߍαΠτ Example2
ߟ͑ͨϖϧιφ ɾΞχϝɾήʔϜɾ༏͕͖ͳߴߍੜɻ ɾεϚʔτϑΥϯ͏͕ɺීஈ͔ΒPCͷૢ࡞ʹ׳Ε͍ͯΔͷ ͰαΠτΛPCͰͷૢ࡞ͳ͘͜ͳ͢ɻ ɾझຯΞχϝΛݟͨΓήʔϜΛ͢Δ͜ͱɻٳΈͷʹ༏ͷ ΠϕϯτʹߦͬͨΓɺ༑ୡͱ८ྱɻ ʢ؆ུ൛ʣ
૾ͨ͠σβΠϯɾߏʢҰ෦ʣ ɾ͔Θ͍͍ΩϟϥΫλʔ͕͍ͬͺ͍Ͱɺ৭Μͳಈ͖͕͋ͬͯʮָ ͦ͠͏ͳֶߍʯͬͯΘΔͷ͕ྑ͍ͳ͋ɻ ɾ͍͜͠࡞ΓͩͬͨΓจࣈ͕ଟ͍ͱͯ͠͠·͍ͦ͏͔ͩ ΒɺͰ͖Δ͚ͩը૾ʹจࣈΛೖΕͨΓɺΘ͔Γ͘͢આ໌͢Δจ ষΛՃ͠Α͏ɻ ɾTwitterʹࠂͳͲग़͢Έ͍ͨͩ͠ɺTwitter→αΠτ→ਃ͠ ࠐΈͳͲͷྲྀΕΛखؒʹײͤ͡͞ͳ͍Α͏ͳϘϦϡʔϜʹ͠Α͏ɻ
࣮ࡍʹӡ༻ͯ͠Έͨ݁Ռ
ɾLINEɺTwitterͰࠂɾࠂΛͨ͠Βɺ LINEɺTwitter͔Βͷ͍߹Θͤͪΐ͜ ͪΐ͜ͱɻ ɾ༧֎ͷ෦ͰTwitterͷτϨϯυೖΓ ɾͪΐͪ͜ΐ͜TwitterͰʹग़Δɻ
৭ʑͱ༧֎ͳ͜ͱ͕ɻ
͍ۙઢͰࣄΛݟΔ͜ͱ͕Ͱ ͖Δ͚Ͳɺ໘ݟͷ͍͍͓࢞͞ ΜతଘࡏͷΑ͏ͳαΠτɻ ٻΊ͍ͯͨͷ…
ԿނϖϧιφζϨͨͷ͔ʁ
ɾλʔήοτͷ͜ͱΛྑ͘Βͳ͍͔Βɻ ௐࠪͨͭ͠ΓͰෆेɻ ɾͨͩɺ͍ۙਓຊਓʹΛฉ͔ͳ͍ͱɺ ௐ͚ࠪͩ͡ΌΘ͔Βͳ͍෦͋Δʢಛʹ ࠓճͷྫͷΑ͏ͳ߹ʣɻ σʔλ͚ͩͩͱʮԿނͦ͏ࢥ͏ͷ͔ʁʯͱ ͍͏ͷ͕Θ͔Βͳ͍ɻ
ɾௐࠪ࣌ʹʮΈΜͳͦ͏ݴͬͯΔʯͱ͍͏ ҙݟΛݟ͔͚ͨ߹Ͱʮੈؒ͡Όͳ͍ɻ ͋ͳͨͰ͠ΐ͏ʁʯͱ͍͏ߟ͑࣋ͭΑ͏ ʹ͢Δʢଠ࠻ϝιουʣɻ
ղܾɾվળํ๏ʁ
ɾීஈͲ͏͍ͬͨαΠτΛݟ͍ͯΔͷ͔ʁ ͪΖΜେࣄɻͲΜͳϢʔβʔͰଞͷ αΠτͰطʹֶशɾௐڭ͞Ε͍ͯΔ͜ͱΛ ೦಄ʹஔ͘ɻ
ɾλʔήοτ͕ΉαΠτˠͦͷλʔήο τ͕ྑ͘ݟ͍ͯΔδϟϯϧͷαΠτͰΑ͘ ࠾༻͞Ε͍ͯΔUI→Կނ࠾༻͞Εͨͷ͔ʁ Λਂ͘ߟ͑Δɻ ɾζϨͯ࠶ߟ͢Δɻ
ɾߴߍੜͷ߹ɺLINEɺTwitterͷ͍ํ ҙ͕ࣝ࡞Γखͷ૾ͱগ͠ҧ͏ɻ ɾ10ͩͱ͍߹ΘͤϑΥʔϜΑΓ TwitterͷDMLINEͰͷ͍߹Θͤͷํ ͕ؾָͩͬͨΓ͢Δɻ →αΠτ͚ͩʹରͯ͠Կ͔͢ΔΑΓߦಈ Λશ෦ͻͬ͘ΔΊͯߟ͑ͯΈΔ͖Ͱʁ
ɾήʔϚʔͷ߹ݶΓͳ͘ήʔϜʹۙ ͍UIΛΉ͕͋ͬͨɻ ɾͦΕࢲ͕ͨͪࢥ͏ʮ͍͍͢ʯͰ ͳ͍ɻύϯ͕ͣ͘ͳ͍ɺ͕ࣗࠓ͍Δϖʔ δ͕Θ͔Γʹ͍͘ɺΔϘλϯͰΕͳ͍ɻ ը໘ભҠ͠ͳ͍ϙοϓΞοϓɺϗόʔࡇɻ ϖʔδભҠͤͣʹλϒΓସ͕͑ଟ ͍ɻɻɻ
ࠜຊతͳUI͋ΕͲɺࢲͨͪௐڭ͞Εͯ ͍ΔɻٯʹϢʔβʔΛௐڭ͢Δ͜ͱՄೳ Ͱ͋Δɻ ͍Θश׳ͷੵΈॏͶɻ
·ͱΊ
Ϣʔβʔطʹֶशɾௐڭ͞Ε͍ͯ ΔɻΈͱɺֶशɾௐڭʹΑΔ ͷେ͖͍ɻҭ͖ͬͯͨڥ͕ҧ ͏͔ΒεϨҧ͍൱Ίͳ͍ɻʢՆ ͕ͩΊͩͬͨΓɺηϩϦ͕͖ͩͬ ͨΓ…ʣ
Ұൠతʹྑ͘ͳ͍UIͰɺඞͣ͠ ੈքதͷશһʹྑ͘ͳ͍ͱݶ Βͳ͍ɻٯͦ͏ɻ
ීวతͳͷɺຊͷ࠷ݶ͋ Δ͚ͲɺϢʔβʔʹదͨ͠αΠτ ઃܭେࣄɻ
͜Ε͔ΒSNSͳͲɺαΠτ͚ͩͰ ؆ܿ͠ͳ͍෦ߟ͍͑ͯ͘͜ͱ͕ ඞཁɻ
END ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ὑ