ユーザー数10万人規模のアプリで挑んだトップ画面のUI刷新

by Toshiya Kobayashi (とち)

Slide 1

Slide 1 text

೥݄೔J04%$EBZ5SBDL$ Ϣʔβʔ਺ສਓن໛ͷΞϓϦ Ͱ௅Μͩτοϓը໘ͷ6*࡮৽ ɹɹɹখྛढ़࠸ ͱͪ ɹɹɹ!UPDIJ@

Slide 2

Slide 2 text

w খྛढ़࠸ ͱͪ !UPDIJ@ w J04ΞϓϦ։ൃ೥Ҏ্ w αΠϘ΢ζ೥݄ʙ w ௕໺ݝࡏॅʢϦϞʔτϫʔΫʣ w ޷͖ͳ΋ͷ w ήʔϜɺಈ෺ɺԹઘɺδϜ ࣗݾ঺հ

Slide 3

Slide 3 text

໨࣍ w ձࣾͱ੡඼ͷ঺հ w ैདྷͷτοϓը໘ͷ՝୊ w ৽͍͠τοϓը໘ͷ։ൃ w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू w ϦϦʔεޙͷରԠ w ·ͱΊ

Slide 4

Slide 4 text

໨࣍ w ձࣾͱ੡඼ͷ঺հ w ैདྷͷτοϓը໘ͷ՝୊ w ৽͍͠τοϓը໘ͷ։ൃ w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू w ϦϦʔεޙͷରԠ w ·ͱΊ

Slide 5

Slide 5 text

αΠϘ΢ζʹ͍ͭͯ

Slide 6

Slide 6 text

(BSPPOʹ͍ͭͯ w தݎɺେاۀ޲͚ͷάϧʔϓ΢ΣΞ w ࣾສਓͷಋೖ࣮੷ w ৘ใڞ༗ʹඞཁͳػೳΛϫϯύοέʔδʹ w ༧ఆ؅ཧ w શࣾ࿈བྷ w ίϛϡχέʔγϣϯ

Slide 7

Slide 7 text

(BSPPOϞόΠϧʹ͍ͭͯ w ೥݄ϩʔϯν w ."6໿ສਓ w ࠾༻ٕज़ w 4XJGU6* w 4XJGU$PODVSSFODZʢ4XJGUରԠࡁʣ w 5$"ʢ5IF$PNQPTBCMF"SDIJUFDUVSFʣ

Slide 8

Slide 8 text

໨࣍ w ձࣾͱ੡඼ͷ঺հ w ैདྷͷτοϓը໘ͷ՝୊ w ৽͍͠τοϓը໘ͷ։ൃ w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू w ϦϦʔεޙͷରԠ w ·ͱΊ

Slide 9

Slide 9 text

ैདྷͷτοϓը໘ 8FC7JFXͰεέδϡʔϧػೳͷ8FCϖʔδΛද͍ࣔͯͨ͠ ωΠςΟϒͷφϏήʔγϣϯόʔ 8FC7JFX ʢࠓ೔͔Βिؒઌ·Ͱͷ༧ఆΛදࣔʣ

Slide 10

Slide 10 text

ैདྷͷτοϓը໘ͷ՝୊ ֤ػೳ΁ͷಋઢ͕෼ࢄ͓ͯ͠Γɺ೺Ѳ͢Δ·Ͱʹ׳Ε͕ඞཁ ωΠςΟϒͰ࣮૷͞Εͨػೳ΁ 8FCͰ࣮૷͞Εͨ ػೳ΁

Slide 11

Slide 11 text

ࠓճ͓࿩͢͠Δࣄྫ 8FC7JFXͰ࣮૷͞Ε͍ͯͨτοϓը໘ΛɺωΠςΟϒ࣮૷ͷ6*ʹ࡮৽

Slide 12

Slide 12 text

໨࣍ w ձࣾͱ੡඼ͷ঺հ w ैདྷͷτοϓը໘ͷ՝୊ w ৽͍͠τοϓը໘ͷ։ൃ w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू w ϦϦʔεޙͷରԠ w ·ͱΊ

Slide 13

Slide 13 text

νʔϜମ੍ σϡΞϧτϥοΫΞδϟΠϧ ৽τοϓը໘։ൃͷΦʔφʔ ʢผͷػೳ։ൃͷΦʔφʔʣ w σβΠφʔͱΤϯδχΞ͕ σΟεΧόϦʔΛ݉೚͠ɺ ೋਓҰ૊ͰΦʔφʔγοϓ w ϓϩτ࡞੒ɺ࢓༷ݕ౼ɺ νʔϜ͔ΒҙݟΛूΊͯ ҙࢥܾఆ

Slide 14

Slide 14 text

։ൃͷਐΊํ μϒϧμΠϠϞϯυɾϞσϧ ՝୊ൃݟϑΣʔζ ՝୊ղܾϑΣʔζ ։ൃϑΣʔζ ൃࢄ ऩଋ ൃࢄ ऩଋ σΟεΧόϦʔ σΟεΧόϦʔσϦόϦʔ σϦόϦʔ બ୒ࢶ ࣌ؒܦա ࣮૷ ՝୊ ιϦϡʔγϣϯ

Slide 15

Slide 15 text

৽τοϓը໘ͷσβΠϯҊݕ౼ ϞόΠϧΞϓϦͱͯ͠Α͘ݟ͔͚ΔɺλϒόʔΛར༻͢ΔҊ

Slide 16

Slide 16 text

λϒόʔΛར༻͢Δ৔߹ͷݒ೦ࣄ߲ w ࠷ॳ͔Βଟ͘ͷػೳΛఏڙ͢Δඞཁ͕͋Δ w ௨஌ը໘ͳͲ w طʹλϒΛͭ࢖༻͓ͯ͠Γɺকདྷͷ֦ுੑΛࣦ͏ w 8FCϖʔδͷϘτϜόʔͱ6*తʹ૬ੑ͕ྑ͘ͳ͍ ωΠςΟϒͷλϒόʔ 8FCϖʔδͷϘτϜόʔ

Slide 17

Slide 17 text

λϒόʔΛར༻͠ͳ͍Ҋ ը໘ʹू໿

Slide 18

Slide 18 text

αΠϘ΢ζࣾ಺Ϣʔβʔ͔ΒͷϑΟʔυόοΫ w ۮવʹ΋ࣾ಺ͷର໘Πϕϯτ։࠵೔͕͔ۙͬͨ w αΠϘ΢ζࣾһ͸(BSPPOΛීஈͷۀ຿Ͱར༻ w Ϣʔβʔͱͯ͠ͷ཰௚ͳҙݟ͕ฉ͚ͦ͏ w 'JHNBͰ࡞੒ͨ͠ϓϩτλΠϓΛ৮ͬͯ΋Βͬͨ w λϒόʔΛར༻͠ͳ͍Ҋ͕ɺ΄΅ຬ৔ҰகͰ޷ධ w ࣗ৴Λ࣋ͬͯσβΠϯҊΛ࠾༻Ͱ͖ͨ

Slide 19

Slide 19 text

w ୈஈ֊ w ৽چ੾Γସ͑ՄೳɺσϑΥϧτ͸چτοϓը໘ w ୈஈ֊ w ৽چ੾Γସ͑ՄೳɺσϑΥϧτ͸৽τοϓը໘ w ୈஈ֊ w ৽τοϓը໘ͷΈར༻Մೳ ৽τοϓը໘΁ͷҠߦΛஈ֊తʹਐΊΔ ஈ֊ͷҠߦϑΣʔζΛ༻ҙ ʮ৽ػೳΛࢼ͢ʯը໘Ͱ ৽چ6*Λ੾Γସ͑Δ

Slide 20

Slide 20 text

໨࣍ w ձࣾͱ੡඼ͷ঺հ w ैདྷͷτοϓը໘ͷ՝୊ w ৽͍͠τοϓը໘ͷ։ൃ w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू w ϦϦʔεޙͷରԠ w ·ͱΊ

Slide 21

Slide 21 text

Ξϯέʔτ w ΞϓϦ಺ʹͭͷΞϯέʔτಋઢΛ഑ஔ w ʮ৽ػೳΛࢼ͢ʯը໘ʹৗઃ w ৽τοϓը໘Λ೔ؒҎ্࢖͍ͬͯΔϢʔβʔ޲͚ w ৽τοϓը໘ͷར༻Λ΍ΊͨϢʔβʔ޲͚ w Ξϯέʔτूܭͷ࢓૊ΈΛߏங

Slide 22

Slide 22 text

ʮ৽ػೳΛࢼ͢ʯը໘ʹৗઃ

Slide 23

Slide 23 text

৽τοϓը໘Λ೔ؒҎ্࢖͍ͬͯΔϢʔβʔ޲͚

Slide 24

Slide 24 text

৽τοϓը໘ͷར༻Λ΍ΊͨϢʔβʔ޲͚ چτοϓʹ໭͢ͱ

Slide 25

Slide 25 text

Ξϯέʔτूܭͷ࢓૊Έ τϤΫϞࣾ੡ͷLJOUPOF࿈ܞπʔϧʮϑΥʔϜϒϦοδʯΛར༻ Ϣʔβʔ͕Ξϯέʔτʹճ౴͢Δͱɺ αΠϘ΢ζࣾ಺ͷLJOUPOFʹࣗಈͰొ࿥͞Εɺ νʔϜϝϯόʔʹ΋௨஌͕ಧ͘ ˞αΠϘ΢ζͷϒʔεͰମݧͰ͖·͢

Slide 26

Slide 26 text

ߦಈ෼ੳʢ(PPHMF"OBMZUJDTʣ w ܭଌ͍ͨ͠ࢦඪΛఆٛ w ৽τοϓը໘ͷར༻཰ w چτοϓը໘ʹ໭ͨ͠ϩʔϧόοΫ཰ w FUDʢಋઢվળͷޮՌͳͲʣ w ܭଌͷͨΊʹඞཁͳσʔλΛಛఆ

Slide 27

Slide 27 text

৽τοϓը໘ͷར༻཰ w ɹ৽τοϓը໘Λར༻தͷΞΫςΟϒϢʔβʔ਺ ɹɹ౰֘όʔδϣϯͷΞΫςΟϒϢʔβʔ਺ w ʮCFUBʯͱ͍͏໊લͷϢʔβʔϓϩύςΟΛ৽ͨʹ༻ҙ w ৽چ੾Γସ͑ΒΕͨλΠϛϯάͰʮCFUBʯͷ஋Λߋ৽ w ৽τοϓʹ੾Γସ͑ΒΕͨɿlOFX@UPQ@POz w چτοϓʹ੾Γସ͑ΒΕͨɿlOFX@UPQ@P ff z ˞ϑϥά؅ཧͷ౎߹্ɺҠߦϑΣʔζʹԠͯ͡গ͚ͩ͠ܭࢉ͕ࣜมΘΓ·͢

Slide 28

Slide 28 text

چτοϓը໘ʹ໭ͨ͠ϩʔϧόοΫ཰ w Ұ౓Ͱ΋৽چΛ੾Γସ͑ͨ͜ͱ͕͋Γɺݱࡏ͸چΛར༻͍ͯ͠ΔϢʔβʔ਺ ɹɹɹɹɹҰ౓Ͱ΋৽چΛ੾Γସ͑ͨ͜ͱ͕͋ΔϢʔβʔ਺ w Ұ౓΋৽چΛ੾Γସ͑ͨ͜ͱ͕ͳ͍ঢ়ଶͰ͸ʮCFUBʯͷ஋ΛlOVMMzͱ͢Δ w ෼ࢠɿCFUBlOFX@UPQ@P ff z w ෼฼ɿCFUBlOFX@UPQ@P ff zlOFX@UPQ@POz ˞ϑϥά؅ཧͷ౎߹্ɺҠߦϑΣʔζʹԠͯ͡গ͚ͩ͠ܭࢉ͕ࣜมΘΓ·͢

Slide 29

Slide 29 text

໨࣍ w ձࣾͱ੡඼ͷ঺հ w ैདྷͷτοϓը໘ͷ՝୊ w ৽͍͠τοϓը໘ͷ։ൃ w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू w ϦϦʔεޙͷରԠ w ·ͱΊ

Slide 30

Slide 30 text

ϦϦʔε࣮੷ ໿ϲִ݄ؒͰϑΣʔζΛҠߦͰ͖ͨ w ݄೔WϦϦʔε w ৽چ੾Γସ͑ՄೳɺσϑΥϧτ͸چτοϓը໘ w ݄೔WϦϦʔε w ৽چ੾Γସ͑ՄೳɺσϑΥϧτ͸৽τοϓը໘ w ݄೔WϦϦʔε w ৽τοϓը໘ͷΈར༻Մೳ

Slide 31

Slide 31 text

݄೔WϦϦʔε ৽چ੾Γସ͑ՄೳɺσϑΥϧτ͸چτοϓը໘ w ഑৴։͔࢝ΒिؒͰɺ݅Ҏ্ͷΞϯέʔτճ౴ w ৽τοϓͷར༻Λ΍ΊͨϢʔβʔ͔Βͷճ౴ଟ਺ w ΫϦςΟΧϧͳ໰୊఺͕Θ͔Δ💰ๅͷࢁ w ਓʹਓ͕৽τοϓΛ࢖ͬͯ͘Ε͍ͯΔ w ਓʹਓ͕৽τοϓΛ΍Ίͯچτοϓʹ໭͍ͯ͠Δ w ૝૾Ҏ্ͷ൓ڹʹɺνʔϜͷ࢜ؾ΋ߴ·ͬͨ ⤴︎

Slide 32

Slide 32 text

ϑΟʔυόοΫ಺༰Λ෼ྨɾ༏ઌॱҐ͚ͮ

Slide 33

Slide 33 text

க໋తͳ໰୊ͷղফ J1BEͰ͸γʔτද͕ࣔখ͗ͯ͢͞࢖͍෺ʹͳΒͳ͍ TIFFU ˣ GVMM4DSFFO$PWFS

Slide 34

Slide 34 text

ཁ๬͕ଟ͔ͬͨػೳͷ࣮૷ ཌ೔Ҏ߱ͷ༧ఆ΋ݟΒΕΔΑ͏ʹɺεέδϡʔϧදࣔΛ֦ு ࠓ೔͔Βिؒઌ·Ͱͷ ༧ఆΛදࣔ

Slide 35

Slide 35 text

݄೔WϦϦʔε ৽چ੾Γସ͑ՄೳɺσϑΥϧτ͸৽τοϓը໘ w େ͖ͳ໰୊఺Λ͋Δఔ౓ղফͰ͖ͨͱ൑அ͠ɺσϑΥϧτදࣔΛ੾Γସ͑ w ഑৴։͔࢝ΒिؒͰɺ݅Ҏ্ͷΞϯέʔτճ౴ w େ͖ͳࠞཚ͸ൃੜ͠ͳ͔ͬͨ w ਓʹਓ͕৽τοϓΛ΍Ίͯچτοϓʹ໭͍ͯ͠Δ w ϩʔϧόοΫ཰͸ҎԼ👏 w ༏ઌॱҐͷߴ͍վળͷΈߦ͍ɺچτοϓը໘ͷഇࢭʹಈ͘

Slide 36

Slide 36 text

ཁ๬͕ଟ͔ͬͨػೳͷ࣮૷ τοϓϖʔδʹදࣔ͢ΔػೳΛฤूՄೳʹ

Slide 37

Slide 37 text

8FC7JFXͷφϏήʔγϣϯମݧͷվળ ໭Ζ͏ͱͯ͠ɺࠨ্ͷʮด͡ΔʯΛԡͯ͠͠·͏ਓ͕ଟ͔ͬͨ ໭ΔϘλϯΛࠨ্ʹ഑ஔ TIFFUGVMM4DSFFO$PWFS ˣ OBWJHBUJPO%FTUJOBUJPO

Slide 38

Slide 38 text

݄೔WϦϦʔε ৽τοϓը໘ͷΈར༻Մೳ w چτοϓը໘Λ࢖͍ͬͯΔϢʔβʔʹࣄલΞφ΢ϯεˠ w 3FNPUF$PO fi HΛܦ༝ͯ͠ର৅ϢʔβʔͷΈදࣔ w چτοϓഇࢭͷϲ݄લͱिؒલʹ഑৴ w ໿ϲ݄ؒͰྦྷܭ ݅Ҏ্ͷΞϯέʔτճ౴ w Ϣʔβʔ͔Βͷخ͍͠੠ˠ

Slide 39

Slide 39 text

໨࣍ w ձࣾͱ੡඼ͷ঺հ w ैདྷͷτοϓը໘ͷ՝୊ w ৽͍͠τοϓը໘ͷ։ൃ w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू w ϦϦʔεޙͷରԠ w ·ͱΊ

Slide 40

Slide 40 text

·ͱΊ w (BSPPOϞόΠϧ։ൃνʔϜͰ൒೥ؒ΄Ͳ͔͚ͯऔΓ૊ΜͰ͖ͨɺ ΞϓϦͷτοϓը໘6*ͷ࡮৽ࣄྫΛ঺հ͠·ͨ͠ w Ϣʔβʔ͔ΒͷϑΟʔυόοΫΛूΊͳ͕ΒվળΛ܁Γฦ͍ͯ͘͜͠ͱͰɺ ࠷ऴతʹ͸ଟ͘ͷϢʔβʔʹड͚ೖΕΒΕͨঢ়ଶͰҠߦΛ׬ྃ͠·ͨ͠ w ͜Ε͔Β΋Ϣʔβʔͱͷର࿩Λେ੾ʹ͠ͳ͕ΒՁ஋Λఏڙ͠ଓ͚͍͖ͯ·͢ w օ͞Μͷࠓޙͷ։ൃʹࢀߟͱͳΔ෦෼͕͋Ε͹޾͍Ͱ͢ʂ

Slide 41

Slide 41 text

એ఻ w αΠϘ΢ζϒʔε΍͍ͬͯ·͢ʂ w ʮαΠϘ΢αΪϯνϟΫ͍ͩ͘͞ʯͱ࿩͔͚͠Δͱ ݶఆάοζʢۊணγϣϧμʔόοάʣΛϓϨθϯτ w J04%$ΞϑλʔΠϕϯτΛ։࠵͠·͢ʂ w ۚ ʙ w ΦϯϥΠϯࢀՃՄೳ