Slide 1

Slide 1 text

ΤϯδχΞ͕UXϦαʔνϟʔΛ ݉೚͢Δʹࢸͬͨϫέ UX MILK Fest 2019 pixiv Inc. Yosuke Morita

Slide 2

Slide 2 text

2015೥ϐΫγϒೖࣾ pixivӡӦຊ෦ + σʔλۦಈਪਐࣨ ΤϯδχΞ + UXϦαʔνϟʔ ྖҬԣஅతͳಈ͖ํΛ͢Δ͜ͱ͕ଟ͍ @minamitary / ৿ా༸հ

Slide 3

Slide 3 text

ϐΫγϒגࣜձࣾ ૑࡞׆ಈ͕΋ͬͱָ͘͠ͳΔ ৔ॴΛ૑Δ ϐΫγϒͰ͸͜ͷཧ೦ͷ΋ͱɺ pixivΛ͸͡Ίͱ͢ΔΫϦΤΠλʔΛαϙʔτ͢ΔͨΊͷαʔϏεΛɺ ଟ਺ల։͍ͯ͠·͢ɻ

Slide 4

Slide 4 text

ొஃऀͷ͓࢓ࣄ಺༰ • ʮpixivʯͷϢʔβʔΛର৅ͱͨ͠UXϦαʔν • ͦͷखஈͱͯ͠ͷσʔλ׆༻ج൫ͷվળ • ͦΕΒʹ·ͭΘΔશࣾతͳαϙʔτۀ

Slide 5

Slide 5 text

https://speakerdeck.com/minamitary/20190305

Slide 6

Slide 6 text

ϐΫγϒʹ͓͚ΔUXϦαʔν •σʔλυϦϒϯͳҙࢥܾఆ͕ϝδϟʔ •ԾઆݕূαΠΫϧΛߴ଎Ͱ܁Γฦ͢ •·ͣ͸࡞ͬͯఏڙˠޮՌଌఆΛ௨ͯ͡஌ݟΛಘΔ •ʮఆྔϦαʔνʯͷఆٛ͸͜ͷ͋ͨΓ

Slide 7

Slide 7 text

ϐΫγϒʹ͓͚ΔUXϦαʔν •ఆੑϦαʔν͸ཁॴͰɺPdM΍σβΠφʔ͕ϓϩμΫτϨϕϧͷҙࢥܾఆΛ Լ͢ࡍʹ࣮ࢪ͢Δ͜ͱ͕ଟ͍ •։ൃऀࣗ਎͕ϢʔβʔͰ͋Δ͜ͱ΋ଟ͘ɺࣾ಺Ϧαʔν͕׆ൃ

Slide 8

Slide 8 text

1. ࠓʹࢸΔ·Ͱͷࢼߦࡨޡ 2. ఆྔɾఆੑϦαʔνͷϚογϡΞοϓͷεεϝ

Slide 9

Slide 9 text

1. ࠓʹࢸΔ·Ͱͷࢼߦࡨޡ 2. ఆྔɾఆੑϦαʔνͷϚογϡΞοϓͷεεϝ

Slide 10

Slide 10 text

WebΤϯδχΞظ ͳΜͰ΋԰ظ UXϦαʔνϟʔظ ࠓʹࢸΔ·ͰͷܦҢ

Slide 11

Slide 11 text

WebΤϯδχΞظ(~ 2016) डୗ։ൃͷձࣾΛܦͯWebΤϯδχΞͱͯ͠ϐΫγϒೖࣾ ೖࣾ௚ޙɺ৽نαʔϏεͷϝΠϯ։ൃऀͱͯ͠ΞαΠϯ શ৬छؚΊ4~5ਓͱ͍͏௒গਓ਺Ͱͷ։ൃͩͬͨͨΊɺ ϦϦʔεޙΞΫηεղੳΛ݉೚͢Δ͜ͱʹ

Slide 12

Slide 12 text

ͳΜͰ΋԰ظᶃ(2016) pixivΛ։ൃ͢Δ෦ॺʹҟಈ ΤϯδχΞͱͯ͠A/Bςετͷج൫Λ੔͑ͭͭɺ ԾઆݕূΞϓϩʔνͰͻͨ͢ΒUIվળ ޮՌଌఆͱͦΕʹجͮ͘։ൃσΟϨΫγϣϯ͕ϝΠϯۀ຿

Slide 13

Slide 13 text

ͳΜͰ΋԰ظᶄ(2017 ~ 2018) ౤ߘମݧվળϓϩδΣΫτΛ୲౰͢Δ͜ͱʹ ఆྔΞϓϩʔνͷݶքʹ௚໘͠ɺ ϢʔβʔΠϯλϏϡʔ౳ͷఆੑϦαʔνʹணख ಉ࣌ʹσʔλ׆༻ج൫ͷվળ΋୲౰ ࣗݾ঺հͷࡍʹʮ৭ʑ΍ͬͯ·͢ʯҎ֎ͷઆ໌͕ࠔ೉ʹ…

Slide 14

Slide 14 text

UXϦαʔνϟʔظ(2019 ~) ༷ʑͳखஈͷཪʹɺ ʮUXϦαʔνʯͱ͍͏ڞ௨ͷ໨త͕͋Δ͜ͱʹؾͮ͘ ࣾ಺ௐ੔ͷ্ɺࣾ಺ͰҰਓ໨ͷʮUXϦαʔνϟʔʯΛ໊৐Δ͜ͱʹ ʮϢʔβʔʹؔ͢ΔinputʯΛ޿͘୲౰͍ͯ͠Δ

Slide 15

Slide 15 text

ʮϢʔβʔʹؔ͢Δinputʯ

Slide 16

Slide 16 text

1. ࠓʹࢸΔ·Ͱͷࢼߦࡨޡ 2. ఆྔɾఆੑϦαʔνͷϚογϡΞοϓͷεεϝ

Slide 17

Slide 17 text

ͳͥϚογϡΞοϓʁ ఆੑͱఆྔɺͦΕͧΕʹ޲͖ෆ޲͖͕͋Δ ໨తϕʔεͰΞϓϩʔνΛબఆ͢Δࡍɺ ຊ࣭Λಥ͖٧ΊΕ͹ಥ͖٧ΊΔ΄ͲͦΕͧΕͷนʹͿ͔ͭΓ΍͘͢ͳΔ ʮ࢖͍෼͚ΔʯͰ͸ͳ͘ʮࠜຊతʹ͸ಉ͡΋ͷʯͩͱߟ͑Δ

Slide 18

Slide 18 text

ʮϩάͷนʯͱہॴ࠷దԽͷ᠘ ͲΕ͚ͩσʔλΛௐ΂ͯ΋ϩάʹ࢒͍ͬͯͳ͍͜ͱ͸෼͔Βͳ͍ ϢʔβʔՁ஋ͷຊ࣭͸େ఍ʮϩάͷนʯͷ޲͜͏ʹ͋Δ • αʔϏε֎ɾσόΠε֎ͷߦಈɺϞνϕʔγϣϯɺաڈͷܦݧ • ྫɿʮͳͥ౤ߘ͢Δͷ͔ʁʯͰ͸ͳ͘ʮͳͥ͜ͷ࡞඼Λ࡞͔ͬͨʁʯ

Slide 19

Slide 19 text

ʮϩάͷนʯͱہॴ࠷దԽͷ᠘ ୯ҰͷKPIΛਾ͑ͯվળΛॏͶ͍ͯ͘৔߹ɺ खஈʹ੍ݶ͕ͳ͚Ε͹ہॴ࠷దԽ͕ਐΈ͔Ͷͳ͍ ఆੑతΞϓϩʔνΛซ༻͢Δ͜ͱͰ ʮϩάͷนʯͷ޲͜͏ʹ͋ΔϢʔβʔՁ஋Λ௫Έɺ ຊ࣭తͳվળΛॏͶ͍ͯ͘͜ͱ͕Մೳʹʂ

Slide 20

Slide 20 text

ఆੑϦαʔνͷऑ఺ ҙࢥܾఆऀʮͰ΋ͦΕͬͯҰਓͷϢʔβʔ͕ݴͬͯΔ͚ͩͰ͠ΐʁʯ Ϧαʔνʹ͔͔Δίετ͕ਹΈ͕ͪ ఆྔతΞϓϩʔνΛซ༻͢Δ͜ͱͰɺ ίετΛ࡟ݮͭͭ͠ΑΓ޿͍૚ʹର͢Δઆಘ͕Մೳʹʂ

Slide 21

Slide 21 text

ϓϥΫςΟε

Slide 22

Slide 22 text

1. ࢦඪͷཱͯํ ࢦඪ͸෼ղՄೳ ૯ΞΫγϣϯ਺ × ΞΫγϣϯΛߦͳͬͨϢʔβʔ਺ 1Ϣʔβʔ͋ͨΓͷΞΫγϣϯ਺

Slide 23

Slide 23 text

1. ࢦඪͷཱͯํ ʮΞΫγϣϯΛߦͳͬͨϢʔβʔ਺ʯΛࢦඪʹஔ͘ Ϣʔβʔ୯ҐͰ਺͑Δ͜ͱͰɺఆੑతཧղΛϕʔεͱͨ͠ఆྔత൑அ͕Մೳʹ ʮ˓˓ͳϢʔβʔΛ૿΍͢ʯͱ͍͏Α͏ʹɺ Ϣʔβʔத৺ʹࢪࡦΛӡ༻͍͖ͯ͠΍͘͢ͳΔ

Slide 24

Slide 24 text

2. User Ladder

Slide 25

Slide 25 text

3. Ϣʔβʔϖϧιφ࡞Γ ΫϦΤΠλʔʹର͠ϢʔβʔΠϯλϏϡʔΛ࣮ࢪ →ɹ݁Ռ͕ଟ༷Ͱɺ෼ྨ͖͠Εͣஅ೦ →ɹΞϯέʔτϕʔεͰ෼ྨ࣠ΛఆྔσʔλԽ ෼ྨ࣠ྫɿʮ૑࡞׆ಈͷ໨తʯʮকདྷͲͷΑ͏ʹͳΓ͍͔ͨʯ

Slide 26

Slide 26 text

3. Ϣʔβʔϖϧιφ࡞Γ Ξϯέʔτ͸ೋ౓࣮ࢪ 1. ࣗ༝ೖྗΦϯϦʔͰΞϯέʔτΛ࣮ࢪ 2. ਓྗͰάϧʔϐϯάɾબ୒ࢶԽͯ͠ΞϯέʔτΛ࠶࣮ࢪ ݁ՌΛػցతʹ෼ྨ͠ɺΫϥελ͝ͱͷಛ௃Λൺֱ͢Δ͜ͱͰ ൒ࣗಈతʹϖϧιφΛཱͯΔ͜ͱʹ੒ޭ

Slide 27

Slide 27 text

ʮϢʔβʔʹؔ͢Δinputʯ ΛͳͥٻΊΔ͔ʁ

Slide 28

Slide 28 text

ந৅Խͯ͠ߟ͑Δͱ…… • ͦ΋ͦ΋ͷϞνϕʔγϣϯɿ ʮϢʔβʔʹର͢Δղ૾౓ΛߴΊΔʯ • ݁Ռͱͯ͠ಘΒΕΔ΋ͷɿ ʮࢪࡦͷਫ਼౓޲্ʯ ʮΑΓૉૣ͘ΑΓߴ͍Ձ஋ΛϢʔβʔʹఏڙʯ

Slide 29

Slide 29 text

input / output αΠΫϧ input outputʹجͮ͘ ޮՌଌఆ + ௥ՃͷϦαʔν output UIมߋ ػೳϦϦʔε A/B ςετ ਫ਼౓ΛߴΊΔ ݁ՌΛಘΔ

Slide 30

Slide 30 text

inputͷ2ϑΣʔζ 1. ʮજΔʯɿ஌ݟΛಘΔɾࣗ෼ͷதͰͷղ૾౓ΛߴΊΔ 2. ʮු্͢ΔʯɿಘΒΕͨ৘ใΛଞऀʹ఻ୡՄೳͳܗʹม׵͢Δ • ਂ͘જΔͨΊʹ͸҉໧஌ʹ੾ΓࠐΉඞཁ͕͋Δ • ු্͢ΔͨΊʹ͸٬؍తͳ৘ใ͕ඞཁͱͳΔ

Slide 31

Slide 31 text

ఆੑతΞϓϩʔνɿਂ͘જΔࡍʹ໾ʹཱͭ ఆྔతΞϓϩʔνɿු্͢Δࡍʹ໾ʹཱͭ

Slide 32

Slide 32 text

นΛऔΓ෷͏ͨΊʹ ͋ͷख͜ͷखͰϋʔυϧΛԼ͛Δඞཁ͕͋Δ • ఆྔతΞϓϩʔνʮσʔλͷຽओԽʯ • ఆੑతΞϓϩʔνʮʁʁʁʯ

Slide 33

Slide 33 text

นΛऔΓ෷͏ͨΊʹ ҰਓͰ΍Δʹ͸Ͳ͏ͯ͠΋ݶք͕͋Δ ͦΕͰ΋νʔϜ΍ձࣾͱ͍͏୯ҐͰ͸ ʮϢʔβʔʹؔ͢Δinputʯͱ͍͏ ͻͱͭͷྖҬΛ։ൃͷͳ͔ͰͲ͏ѻ͍͔ͬͯ͘ʁ ͱ͍͏ࢹ఺Ͱߟ͍͑ͯ͘΂͖

Slide 34

Slide 34 text

σΟεΧογϣϯ͍ͨ͠ʂ • Ϣʔβʔʹؔ͢ΔinputΛͲͷΑ͏ʹѻ͍ͬͯΔ͔ʁ • ఆੑϦαʔνͱఆྔϦαʔνΛͲͷΑ͏ʹ࢖͍෼͚͍ͯΔ͔ʁ • ૊৫ମ੍΍৬छͷ۠෼͚ɾਓ਺ن໛ ʮ΢νͰ͸͜͏΍ͬͯΔΑʯΈ͍ͨͳࣄྫ͕͋Ε͹ͥͻʂ