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

iOSDC JAPAN 2025, day1 (9/20)

サイボウズの大規模組織向けグループウェア製品『Garoon』のiOSアプリは、初回リリースから約2年が経ち、10万人を超えるユーザーに利用されており、現在も活発に機能追加や改善が進められています。
そのような中で、リリース当初から親しまれてきたトップ画面が、だんだんとアプリ進化のスピードについていくことができなくなってきました。
WebViewで特定機能のページを表示する形になっていたため、他の機能まで遷移するのに手間がかかったり、ネイティブで新たな機能を追加しても導線の実装に苦慮したりといった課題を抱えていました。

そこで私たちは、ネイティブで作成した新しいデザインのトップ画面に置き換えることを決定しました。
今までの操作感や体験を損なうことなく、ユーザーがスムーズに移行できるような仕様を考えながら、段階的に移行を進めていきました。
最終的には、ロールバック率5%未満という数字で、多くのユーザーに受け入れられた状態で移行することができました。

このトークでは、Garoonモバイルチームが取り組んできた以下のトピックを紹介します。

- チーム体制と意思決定
- デザイン検討
- 採用技術要素
- ユーザーからのフィードバック収集と対応

このトークが、今後皆さんが大規模なUI刷新を行う際の助けとなれば幸いです。

Transcript

1. ೥݄೔
   J04%$
   EBZ
   5SBDL
   $ Ϣʔβʔ਺ສਓن໛ͷΞϓϦ
   Ͱ௅Μͩτοϓը໘ͷ6*࡮৽ ɹɹɹখྛ
   ढ़࠸
   ͱͪ
   ɹɹɹ!UPDIJ@ 
2. w খྛ
   ढ़࠸
   ͱͪ
   !UPDIJ@
   w J04ΞϓϦ։ൃ
   ೥Ҏ্
   w αΠϘ΢ζ
   ೥݄ʙ
   w ௕໺ݝࡏॅʢϦϞʔτϫʔΫʣ
   w ޷͖ͳ΋ͷ
   w ήʔϜɺಈ෺ɺԹઘɺδϜ ࣗݾ঺հ 
3. ໨࣍ w ձࣾͱ੡඼ͷ঺հ
   w ैདྷͷτοϓը໘ͷ՝୊
   w ৽͍͠τοϓը໘ͷ։ൃ
   w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू
   w ϦϦʔεޙͷରԠ
   w ·ͱΊ 
4. ໨࣍ w ձࣾͱ੡඼ͷ঺հ
   w ैདྷͷτοϓը໘ͷ՝୊
   w ৽͍͠τοϓը໘ͷ։ൃ
   w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू
   w ϦϦʔεޙͷରԠ
   w ·ͱΊ 
5. αΠϘ΢ζʹ͍ͭͯ 
6. (BSPPOʹ͍ͭͯ w தݎɺେاۀ޲͚ͷάϧʔϓ΢ΣΞ
   w  ࣾ
   ສਓͷಋೖ࣮੷
   w ৘ใڞ༗ʹඞཁͳػೳΛϫϯύοέʔδʹ
   w ༧ఆ؅ཧ
   w શࣾ࿈བྷ
   w ίϛϡχέʔγϣϯ 
7. (BSPPOϞόΠϧʹ͍ͭͯ w ೥݄
   ϩʔϯν
   w ."6
   ໿ສਓ
   w ࠾༻ٕज़
   w 4XJGU6*
   w 4XJGU
   $PODVSSFODZʢ4XJGU
   ରԠࡁʣ
   w 5$"ʢ5IF
   $PNQPTBCMF
   "SDIJUFDUVSFʣ 
8. ໨࣍ w ձࣾͱ੡඼ͷ঺հ
   w ैདྷͷτοϓը໘ͷ՝୊
   w ৽͍͠τοϓը໘ͷ։ൃ
   w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू
   w ϦϦʔεޙͷରԠ
   w ·ͱΊ 
9. ैདྷͷτοϓը໘ 8FC7JFXͰεέδϡʔϧػೳͷ8FCϖʔδΛද͍ࣔͯͨ͠ ωΠςΟϒͷφϏήʔγϣϯόʔ 8FC7JFX
   ʢࠓ೔͔Βिؒઌ·Ͱͷ༧ఆΛදࣔʣ 
10. ैདྷͷτοϓը໘ͷ՝୊ ֤ػೳ΁ͷಋઢ͕෼ࢄ͓ͯ͠Γɺ೺Ѳ͢Δ·Ͱʹ׳Ε͕ඞཁ ωΠςΟϒͰ࣮૷͞Εͨػೳ΁ 8FCͰ࣮૷͞Εͨ
    ػೳ΁ 
11. ࠓճ͓࿩͢͠Δࣄྫ 8FC7JFXͰ࣮૷͞Ε͍ͯͨτοϓը໘ΛɺωΠςΟϒ࣮૷ͷ6*ʹ࡮৽ 
12. ໨࣍ w ձࣾͱ੡඼ͷ঺հ
    w ैདྷͷτοϓը໘ͷ՝୊
    w ৽͍͠τοϓը໘ͷ։ൃ
    w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू
    w ϦϦʔεޙͷରԠ
    w ·ͱΊ 
13. νʔϜମ੍ σϡΞϧτϥοΫΞδϟΠϧ ৽τοϓը໘։ൃͷΦʔφʔ ʢผͷػೳ։ൃͷΦʔφʔʣ w σβΠφʔͱΤϯδχΞ͕
    σΟεΧόϦʔΛ݉೚͠ɺ
    ೋਓҰ૊ͰΦʔφʔγοϓ
    w ϓϩτ࡞੒ɺ࢓༷ݕ౼ɺ
    νʔϜ͔ΒҙݟΛूΊͯ
    ҙࢥܾఆ 
14. ։ൃͷਐΊํ μϒϧμΠϠϞϯυɾϞσϧ ՝୊ൃݟϑΣʔζ ՝୊ղܾϑΣʔζ ։ൃϑΣʔζ ൃࢄ ऩଋ ൃࢄ ऩଋ σΟεΧόϦʔ σΟεΧόϦʔσϦόϦʔ σϦόϦʔ  બ୒ࢶ ࣌ؒܦա ࣮૷ ՝୊ ιϦϡʔγϣϯ
15. ৽τοϓը໘ͷσβΠϯҊݕ౼ ϞόΠϧΞϓϦͱͯ͠Α͘ݟ͔͚ΔɺλϒόʔΛར༻͢ΔҊ 
16. λϒόʔΛར༻͢Δ৔߹ͷݒ೦ࣄ߲ w ࠷ॳ͔Βଟ͘ͷػೳΛఏڙ͢Δඞཁ͕͋Δ
    w ௨஌ը໘ͳͲ
    w طʹλϒΛͭ࢖༻͓ͯ͠Γɺকདྷͷ֦ுੑΛࣦ͏
    w 8FCϖʔδͷϘτϜόʔͱ6*తʹ૬ੑ͕ྑ͘ͳ͍ ωΠςΟϒͷλϒόʔ 8FCϖʔδͷϘτϜόʔ 
17. λϒόʔΛར༻͠ͳ͍Ҋ ը໘ʹू໿ 
18. αΠϘ΢ζࣾ಺Ϣʔβʔ͔ΒͷϑΟʔυόοΫ w ۮવʹ΋ࣾ಺ͷର໘Πϕϯτ։࠵೔͕͔ۙͬͨ
    w αΠϘ΢ζࣾһ͸(BSPPOΛීஈͷۀ຿Ͱར༻
    w Ϣʔβʔͱͯ͠ͷ཰௚ͳҙݟ͕ฉ͚ͦ͏
    w 'JHNBͰ࡞੒ͨ͠ϓϩτλΠϓΛ৮ͬͯ΋Βͬͨ
    w λϒόʔΛར༻͠ͳ͍Ҋ͕ɺ΄΅ຬ৔ҰகͰ޷ධ
    w ࣗ৴Λ࣋ͬͯσβΠϯҊΛ࠾༻Ͱ͖ͨ 
19. w ୈஈ֊
    w ৽چ
    ੾Γସ͑ՄೳɺσϑΥϧτ͸چτοϓը໘
    w ୈஈ֊
    w ৽چ
    ੾Γସ͑ՄೳɺσϑΥϧτ͸৽τοϓը໘
    w ୈஈ֊
    w ৽τοϓը໘ͷΈར༻Մೳ ৽τοϓը໘΁ͷҠߦΛஈ֊తʹਐΊΔ ஈ֊ͷҠߦϑΣʔζΛ༻ҙ ʮ৽ػೳΛࢼ͢ʯը໘Ͱ
    ৽چ
    6*Λ੾Γସ͑Δ 
20. ໨࣍ w ձࣾͱ੡඼ͷ঺հ
    w ैདྷͷτοϓը໘ͷ՝୊
    w ৽͍͠τοϓը໘ͷ։ൃ
    w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू
    w ϦϦʔεޙͷରԠ
    w ·ͱΊ 
21. Ξϯέʔτ w ΞϓϦ಺ʹͭͷΞϯέʔτಋઢΛ഑ஔ
    w ʮ৽ػೳΛࢼ͢ʯը໘ʹৗઃ
    w ৽τοϓը໘Λ೔ؒҎ্࢖͍ͬͯΔϢʔβʔ޲͚
    w ৽τοϓը໘ͷར༻Λ΍ΊͨϢʔβʔ޲͚
    w Ξϯέʔτूܭͷ࢓૊ΈΛߏங 
22. ʮ৽ػೳΛࢼ͢ʯը໘ʹৗઃ 
23. ৽τοϓը໘Λ೔ؒҎ্࢖͍ͬͯΔϢʔβʔ޲͚ 
24. ৽τοϓը໘ͷར༻Λ΍ΊͨϢʔβʔ޲͚  چτοϓʹ໭͢ͱ
25. Ξϯέʔτूܭͷ࢓૊Έ τϤΫϞࣾ੡ͷLJOUPOF࿈ܞπʔϧʮϑΥʔϜϒϦοδʯΛར༻ Ϣʔβʔ͕Ξϯέʔτʹճ౴͢Δͱɺ
    αΠϘ΢ζࣾ಺ͷLJOUPOFʹࣗಈͰొ࿥͞Εɺ
    νʔϜϝϯόʔʹ΋௨஌͕ಧ͘ ˞
    αΠϘ΢ζͷϒʔεͰମݧͰ͖·͢ 
26. ߦಈ෼ੳʢ(PPHMF
    "OBMZUJDTʣ w ܭଌ͍ͨ͠ࢦඪΛఆٛ
    w ৽τοϓը໘ͷར༻཰
    w چτοϓը໘ʹ໭ͨ͠ϩʔϧόοΫ཰
    w FUDʢಋઢվળͷޮՌͳͲʣ
    w ܭଌͷͨΊʹඞཁͳσʔλΛಛఆ 
27. ৽τοϓը໘ͷར༻཰ w ɹ৽τοϓը໘Λར༻தͷΞΫςΟϒϢʔβʔ਺
    ɹɹ౰֘όʔδϣϯͷΞΫςΟϒϢʔβʔ਺
    w ʮCFUBʯͱ͍͏໊લͷϢʔβʔϓϩύςΟΛ৽ͨʹ༻ҙ
    w ৽چ
    ੾Γସ͑ΒΕͨλΠϛϯάͰʮCFUBʯͷ஋Λߋ৽
    w ৽τοϓʹ੾Γସ͑ΒΕͨɿlOFX@UPQ@POz
    w چτοϓʹ੾Γସ͑ΒΕͨɿlOFX@UPQ@P ff z  ˞ϑϥά؅ཧͷ౎߹্ɺҠߦϑΣʔζʹԠͯ͡গ͚ͩ͠ܭࢉ͕ࣜมΘΓ·͢
28. چτοϓը໘ʹ໭ͨ͠ϩʔϧόοΫ཰ w Ұ౓Ͱ΋৽چΛ੾Γସ͑ͨ͜ͱ͕͋Γɺݱࡏ͸چΛར༻͍ͯ͠ΔϢʔβʔ਺
    ɹɹɹɹɹҰ౓Ͱ΋৽چΛ੾Γସ͑ͨ͜ͱ͕͋ΔϢʔβʔ਺
    w Ұ౓΋৽چΛ੾Γସ͑ͨ͜ͱ͕ͳ͍ঢ়ଶͰ͸ʮCFUBʯͷ஋ΛlOVMMzͱ͢Δ
    w ෼ࢠɿCFUB
    
    lOFX@UPQ@P ff z
    w ෼฼ɿCFUB
    
    lOFX@UPQ@P ff z
    
    lOFX@UPQ@POz  ˞ϑϥά؅ཧͷ౎߹্ɺҠߦϑΣʔζʹԠͯ͡গ͚ͩ͠ܭࢉ͕ࣜมΘΓ·͢
29. ໨࣍ w ձࣾͱ੡඼ͷ঺հ
    w ैདྷͷτοϓը໘ͷ՝୊
    w ৽͍͠τοϓը໘ͷ։ൃ
    w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू
    w ϦϦʔεޙͷରԠ
    w ·ͱΊ 
30. ϦϦʔε࣮੷ ໿ϲִ݄ؒͰϑΣʔζΛҠߦͰ͖ͨ w ݄೔
    WϦϦʔε
    w ৽چ
    ੾Γସ͑ՄೳɺσϑΥϧτ͸چτοϓը໘
    w ݄೔
    WϦϦʔε
    w ৽چ
    ੾Γସ͑ՄೳɺσϑΥϧτ͸৽τοϓը໘
    w ݄೔
    WϦϦʔε
    w ৽τοϓը໘ͷΈར༻Մೳ 
31. ݄೔
    WϦϦʔε ৽چ
    ੾Γସ͑ՄೳɺσϑΥϧτ͸چτοϓը໘ w ഑৴։͔࢝ΒिؒͰɺ݅Ҏ্ͷΞϯέʔτճ౴
    w ৽τοϓͷར༻Λ΍ΊͨϢʔβʔ͔Βͷճ౴ଟ਺
    w ΫϦςΟΧϧͳ໰୊఺͕Θ͔Δ💰ๅͷࢁ
    w ਓʹਓ͕৽τοϓΛ࢖ͬͯ͘Ε͍ͯΔ
    w ਓʹਓ͕৽τοϓΛ΍Ίͯچτοϓʹ໭͍ͯ͠Δ
    w ૝૾Ҏ্ͷ൓ڹʹɺνʔϜͷ࢜ؾ΋ߴ·ͬͨ ⤴︎ 
32. ϑΟʔυόοΫ಺༰Λ෼ྨɾ༏ઌॱҐ͚ͮ 
33. க໋తͳ໰୊ͷղফ J1BEͰ͸γʔτද͕ࣔখ͗ͯ͢͞࢖͍෺ʹͳΒͳ͍ TIFFU
    ˣ
    GVMM4DSFFO$PWFS 
34. ཁ๬͕ଟ͔ͬͨػೳͷ࣮૷ ཌ೔Ҏ߱ͷ༧ఆ΋ݟΒΕΔΑ͏ʹɺεέδϡʔϧදࣔΛ֦ு ࠓ೔͔Βिؒઌ·Ͱͷ
    ༧ఆΛදࣔ 
35. ݄೔
    WϦϦʔε ৽چ
    ੾Γସ͑ՄೳɺσϑΥϧτ͸৽τοϓը໘ w େ͖ͳ໰୊఺Λ͋Δఔ౓ղফͰ͖ͨͱ൑அ͠ɺσϑΥϧτදࣔΛ੾Γସ͑
    w ഑৴։͔࢝ΒिؒͰɺ݅Ҏ্ͷΞϯέʔτճ౴
    w େ͖ͳࠞཚ͸ൃੜ͠ͳ͔ͬͨ
    w ਓʹਓ͕৽τοϓΛ΍Ίͯچτοϓʹ໭͍ͯ͠Δ
    w ϩʔϧόοΫ཰͸ҎԼ
    👏
    w ༏ઌॱҐͷߴ͍վળͷΈߦ͍ɺچτοϓը໘ͷഇࢭʹಈ͘ 
36. ཁ๬͕ଟ͔ͬͨػೳͷ࣮૷ τοϓϖʔδʹදࣔ͢ΔػೳΛฤूՄೳʹ 
37. 8FC7JFXͷφϏήʔγϣϯମݧͷվળ ໭Ζ͏ͱͯ͠ɺࠨ্ͷʮด͡ΔʯΛԡͯ͠͠·͏ਓ͕ଟ͔ͬͨ ໭ΔϘλϯΛࠨ্ʹ഑ஔ  TIFFU
    
    GVMM4DSFFO$PWFS
    ˣ
    OBWJHBUJPO%FTUJOBUJPO
38. ݄೔
    WϦϦʔε ৽τοϓը໘ͷΈར༻Մೳ w چτοϓը໘Λ࢖͍ͬͯΔϢʔβʔʹࣄલΞφ΢ϯε
    ˠ
    w 3FNPUF$PO fi HΛܦ༝ͯ͠ର৅ϢʔβʔͷΈදࣔ
    w چτοϓഇࢭͷϲ݄લͱिؒલʹ഑৴
    w ໿ϲ݄ؒͰྦྷܭ ݅Ҏ্ͷΞϯέʔτճ౴
    w Ϣʔβʔ͔Βͷخ͍͠੠
    ˠ 
39. ໨࣍ w ձࣾͱ੡඼ͷ঺հ
    w ैདྷͷτοϓը໘ͷ՝୊
    w ৽͍͠τοϓը໘ͷ։ൃ
    w Ϣʔβʔ͔ΒͷϑΟʔυόοΫऩू
    w ϦϦʔεޙͷରԠ
    w ·ͱΊ 
40. ·ͱΊ w (BSPPOϞόΠϧ։ൃνʔϜͰ൒೥ؒ΄Ͳ͔͚ͯऔΓ૊ΜͰ͖ͨɺ
    ΞϓϦͷτοϓը໘6*ͷ࡮৽ࣄྫΛ঺հ͠·ͨ͠
    w Ϣʔβʔ͔ΒͷϑΟʔυόοΫΛूΊͳ͕ΒվળΛ܁Γฦ͍ͯ͘͜͠ͱͰɺ
    ࠷ऴతʹ͸ଟ͘ͷϢʔβʔʹड͚ೖΕΒΕͨঢ়ଶͰҠߦΛ׬ྃ͠·ͨ͠
    w ͜Ε͔Β΋Ϣʔβʔͱͷର࿩Λେ੾ʹ͠ͳ͕ΒՁ஋Λఏڙ͠ଓ͚͍͖ͯ·͢
    w օ͞Μͷࠓޙͷ։ൃʹࢀߟͱͳΔ෦෼͕͋Ε͹޾͍Ͱ͢ʂ 
41. એ఻ w αΠϘ΢ζϒʔε΍͍ͬͯ·͢ʂ
    w ʮαΠϘ΢αΪϯνϟΫ͍ͩ͘͞ʯͱ࿩͔͚͠Δͱ
    ݶఆάοζʢۊணγϣϧμʔόοάʣΛϓϨθϯτ
    w J04%$ΞϑλʔΠϕϯτΛ։࠵͠·͢ʂ
    w  ۚ
    ʙ
    w ΦϯϥΠϯࢀՃՄೳ 
42. ͋Γ͕ͱ͏͍͟͝·ͨ͠ 
43. 2"