UX MILK Fest 2019 https://uxmilkfest2019.studio.design/ ミニキーノートで使用した発表資料です。
ΤϯδχΞ͕UXϦαʔνϟʔΛ݉͢ΔʹࢸͬͨϫέUX MILK Fest 2019pixiv Inc.Yosuke Morita
View Slide
2015ϐΫγϒೖࣾpixivӡӦຊ෦ + σʔλۦಈਪਐࣨΤϯδχΞ + UXϦαʔνϟʔྖҬԣஅతͳಈ͖ํΛ͢Δ͜ͱ͕ଟ͍@minamitary / ా༸հ
ϐΫγϒגࣜձࣾ࡞׆ಈ͕ͬͱָ͘͠ͳΔॴΛΔϐΫγϒͰ͜ͷཧ೦ͷͱɺpixivΛ͡Ίͱ͢ΔΫϦΤΠλʔΛαϙʔτ͢ΔͨΊͷαʔϏεΛɺଟల։͍ͯ͠·͢ɻ
ొஃऀͷ͓ࣄ༰• ʮpixivʯͷϢʔβʔΛରͱͨ͠UXϦαʔν• ͦͷखஈͱͯ͠ͷσʔλ׆༻ج൫ͷվળ• ͦΕΒʹ·ͭΘΔશࣾతͳαϙʔτۀ
https://speakerdeck.com/minamitary/20190305
ϐΫγϒʹ͓͚ΔUXϦαʔν•σʔλυϦϒϯͳҙࢥܾఆ͕ϝδϟʔ•ԾઆݕূαΠΫϧΛߴͰ܁Γฦ͢•·ͣ࡞ͬͯఏڙˠޮՌଌఆΛ௨ͯ͡ݟΛಘΔ•ʮఆྔϦαʔνʯͷఆٛ͜ͷ͋ͨΓ
ϐΫγϒʹ͓͚ΔUXϦαʔν•ఆੑϦαʔνཁॴͰɺPdMσβΠφʔ͕ϓϩμΫτϨϕϧͷҙࢥܾఆΛԼ͢ࡍʹ࣮ࢪ͢Δ͜ͱ͕ଟ͍•։ൃऀ͕ࣗϢʔβʔͰ͋Δ͜ͱଟ͘ɺࣾϦαʔν͕׆ൃ
1. ࠓʹࢸΔ·Ͱͷࢼߦࡨޡ2. ఆྔɾఆੑϦαʔνͷϚογϡΞοϓͷεεϝ
WebΤϯδχΞظͳΜͰظUXϦαʔνϟʔظࠓʹࢸΔ·ͰͷܦҢ
WebΤϯδχΞظ(~ 2016)डୗ։ൃͷձࣾΛܦͯWebΤϯδχΞͱͯ͠ϐΫγϒೖࣾೖࣾޙɺ৽نαʔϏεͷϝΠϯ։ൃऀͱͯ͠ΞαΠϯશ৬छؚΊ4~5ਓͱ͍͏গਓͰͷ։ൃͩͬͨͨΊɺϦϦʔεޙΞΫηεղੳΛ݉͢Δ͜ͱʹ
ͳΜͰظᶃ(2016)pixivΛ։ൃ͢Δ෦ॺʹҟಈΤϯδχΞͱͯ͠A/Bςετͷج൫Λ͑ͭͭɺԾઆݕূΞϓϩʔνͰͻͨ͢ΒUIվળޮՌଌఆͱͦΕʹجͮ͘։ൃσΟϨΫγϣϯ͕ϝΠϯۀ
ͳΜͰظᶄ(2017 ~ 2018)ߘମݧվળϓϩδΣΫτΛ୲͢Δ͜ͱʹఆྔΞϓϩʔνͷݶքʹ໘͠ɺϢʔβʔΠϯλϏϡʔͷఆੑϦαʔνʹணखಉ࣌ʹσʔλ׆༻ج൫ͷվળ୲ࣗݾհͷࡍʹʮ৭ʑͬͯ·͢ʯҎ֎ͷઆ໌͕ࠔʹ…
UXϦαʔνϟʔظ(2019 ~)༷ʑͳखஈͷཪʹɺʮUXϦαʔνʯͱ͍͏ڞ௨ͷత͕͋Δ͜ͱʹؾͮࣾ͘ௐͷ্ɺࣾͰҰਓͷʮUXϦαʔνϟʔʯΛ໊Δ͜ͱʹʮϢʔβʔʹؔ͢ΔinputʯΛ͘୲͍ͯ͠Δ
ʮϢʔβʔʹؔ͢Δinputʯ
ͳͥϚογϡΞοϓʁఆੑͱఆྔɺͦΕͧΕʹ͖ෆ͖͕͋ΔతϕʔεͰΞϓϩʔνΛબఆ͢Δࡍɺຊ࣭Λಥ͖٧ΊΕಥ͖٧ΊΔ΄ͲͦΕͧΕͷนʹͿ͔ͭΓ͘͢ͳΔʮ͍͚ΔʯͰͳ͘ʮࠜຊతʹಉ͡ͷʯͩͱߟ͑Δ
ʮϩάͷนʯͱہॴ࠷దԽͷ᠘ͲΕ͚ͩσʔλΛௐͯϩάʹ͍ͬͯͳ͍͜ͱ͔Βͳ͍ϢʔβʔՁͷຊ࣭େʮϩάͷนʯͷ͜͏ʹ͋Δ• αʔϏε֎ɾσόΠε֎ͷߦಈɺϞνϕʔγϣϯɺաڈͷܦݧ• ྫɿʮͳͥߘ͢Δͷ͔ʁʯͰͳ͘ʮͳͥ͜ͷ࡞Λ࡞͔ͬͨʁʯ
ʮϩάͷนʯͱہॴ࠷దԽͷ᠘୯ҰͷKPIΛਾ͑ͯվળΛॏͶ͍ͯ͘߹ɺखஈʹ੍ݶ͕ͳ͚Εہॴ࠷దԽ͕ਐΈ͔Ͷͳ͍ఆੑతΞϓϩʔνΛซ༻͢Δ͜ͱͰʮϩάͷนʯͷ͜͏ʹ͋ΔϢʔβʔՁΛ௫Έɺຊ࣭తͳվળΛॏͶ͍ͯ͘͜ͱ͕Մೳʹʂ
ఆੑϦαʔνͷऑҙࢥܾఆऀʮͰͦΕͬͯҰਓͷϢʔβʔ͕ݴͬͯΔ͚ͩͰ͠ΐʁʯϦαʔνʹ͔͔Δίετ͕ਹΈ͕ͪఆྔతΞϓϩʔνΛซ༻͢Δ͜ͱͰɺίετΛݮͭͭ͠ΑΓ͍ʹର͢Δઆಘ͕Մೳʹʂ
ϓϥΫςΟε
1. ࢦඪͷཱͯํࢦඪղՄೳ૯ΞΫγϣϯ×ΞΫγϣϯΛߦͳͬͨϢʔβʔ 1Ϣʔβʔ͋ͨΓͷΞΫγϣϯ
1. ࢦඪͷཱͯํʮΞΫγϣϯΛߦͳͬͨϢʔβʔʯΛࢦඪʹஔ͘Ϣʔβʔ୯ҐͰ͑Δ͜ͱͰɺఆੑతཧղΛϕʔεͱͨ͠ఆྔతஅ͕Մೳʹʮ˓˓ͳϢʔβʔΛ૿͢ʯͱ͍͏Α͏ʹɺϢʔβʔத৺ʹࢪࡦΛӡ༻͍͖ͯ͘͢͠ͳΔ
2. User Ladder
3. Ϣʔβʔϖϧιφ࡞ΓΫϦΤΠλʔʹର͠ϢʔβʔΠϯλϏϡʔΛ࣮ࢪ→ɹ݁Ռ͕ଟ༷Ͱɺྨ͖͠Εͣஅ೦→ɹΞϯέʔτϕʔεͰྨ࣠ΛఆྔσʔλԽྨ࣠ྫɿʮ࡞׆ಈͷతʯʮকདྷͲͷΑ͏ʹͳΓ͍͔ͨʯ
3. Ϣʔβʔϖϧιφ࡞ΓΞϯέʔτೋ࣮ࢪ1. ࣗ༝ೖྗΦϯϦʔͰΞϯέʔτΛ࣮ࢪ2. ਓྗͰάϧʔϐϯάɾબࢶԽͯ͠ΞϯέʔτΛ࠶࣮ࢪ݁ՌΛػցతʹྨ͠ɺΫϥελ͝ͱͷಛΛൺֱ͢Δ͜ͱͰࣗಈతʹϖϧιφΛཱͯΔ͜ͱʹޭ
ʮϢʔβʔʹؔ͢ΔinputʯΛͳͥٻΊΔ͔ʁ
நԽͯ͠ߟ͑Δͱ……• ͦͦͷϞνϕʔγϣϯɿʮϢʔβʔʹର͢Δղ૾ΛߴΊΔʯ• ݁Ռͱͯ͠ಘΒΕΔͷɿʮࢪࡦͷਫ਼্ʯʮΑΓૉૣ͘ΑΓߴ͍ՁΛϢʔβʔʹఏڙʯ
input / output αΠΫϧinputoutputʹجͮ͘ޮՌଌఆ+ՃͷϦαʔνoutputUIมߋػೳϦϦʔεA/B ςετਫ਼ΛߴΊΔ݁ՌΛಘΔ
inputͷ2ϑΣʔζ1. ʮજΔʯɿݟΛಘΔɾࣗͷதͰͷղ૾ΛߴΊΔ2. ʮු্͢ΔʯɿಘΒΕͨใΛଞऀʹୡՄೳͳܗʹม͢Δ• ਂ͘જΔͨΊʹ҉ʹΓࠐΉඞཁ͕͋Δ• ු্͢ΔͨΊʹ٬؍తͳใ͕ඞཁͱͳΔ
ఆੑతΞϓϩʔνɿਂ͘જΔࡍʹʹཱͭఆྔతΞϓϩʔνɿු্͢Δࡍʹʹཱͭ
นΛऔΓ͏ͨΊʹ͋ͷख͜ͷखͰϋʔυϧΛԼ͛Δඞཁ͕͋Δ• ఆྔతΞϓϩʔνʮσʔλͷຽओԽʯ• ఆੑతΞϓϩʔνʮʁʁʁʯ
นΛऔΓ͏ͨΊʹҰਓͰΔʹͲ͏ͯ͠ݶք͕͋ΔͦΕͰνʔϜձࣾͱ͍͏୯ҐͰʮϢʔβʔʹؔ͢Δinputʯͱ͍͏ͻͱͭͷྖҬΛ։ൃͷͳ͔ͰͲ͏ѻ͍͔ͬͯ͘ʁͱ͍͏ࢹͰߟ͍͖͑ͯ͘
σΟεΧογϣϯ͍ͨ͠ʂ• Ϣʔβʔʹؔ͢ΔinputΛͲͷΑ͏ʹѻ͍ͬͯΔ͔ʁ• ఆੑϦαʔνͱఆྔϦαʔνΛͲͷΑ͏ʹ͍͚͍ͯΔ͔ʁ• ৫ମ੍৬छͷ͚۠ɾਓنʮνͰ͜͏ͬͯΔΑʯΈ͍ͨͳࣄྫ͕͋Εͥͻʂ