スタディサプリにおけるアプリデザイン改善の取り組み

https://hirelink.connpass.com/event/44321/
hireLink vol.29【スタディサプリにおけるアプリデザイン改善の取り組み】で発表した登壇資料になります。

-「アプリの質を上げる」とはどういうこと？実際に何をしたら良-いの？
- アプリの質を上げたいけど、どこから手を付けて良いのか解らない。

全国25万人が利用する「スタディサプリ」で実践した、「エンジニアと協力してアプリの質をあげるために、実際に行っているフロー」 をご紹介します。

【議題】
- デザインの質を上げたい、でも一人ではできない
- エンジニアによってマージンや文字サイズがバラバラ…
- 実際に使う人（エンジニア）のユースケースに合わなかった話

-------------------------
登壇者
【@meyco】
教育系UX/UIデザイナー。スタディサプリとQuipperのモバイルアプリのUX/UIデザインを担当しています。趣味は絵をかくこと。
twitterリンク
https://twitter.com/meyco

【@konifar】
2016年6月にQuipperにjoin。Androidアプリの開発を担当。普段はブログを書いたりOSS活動したりしています。
twitterリンク
https://twitter.com/konifar

Transcript

1. ελσΟαϓϦʹ͓͚ΔΞϓ ϦσβΠϯվળͷऔΓ૊Έ For mobile app team
2. ࣗݾ঺հ
3. MEYCO ήʔϜ։ൃʹڵͯ͡ϞόΠϧ ͷੈք΁ UXσβΠφʔ twitter@meyco MEYCOU.COM
4. KONIFAR ࠓ͸AndroidΛϝΠϯͰ͕Μ ͹ͬͯ·͢ ANDROID ENGINEER twitter@konifar KONIFAR.HATENABLOG.COM
5. We aim to create a world where every child is given the opportunity to learn what they want to, with no boundaries nor challenges. We believe that learning is a right, not a privilege.
7. Available in 3 countries 1,700+ hours of quality video tutorials 5,300+ topics 34,000+quizzes and prediction tests (as of Oct 2016) 250,000+ Paid usersNo.1 customer satisfaction among all e-learning services Adopted in 960 schools out of 5,000 high schools Available in 6 countries No.1 e-learning service for schools in Indonesia and the Philippines Used by 200,000+ teachers Used by 3,000,000 students DISTRIBUTORS OF WISDOM StudySapuri
9. ΞϓϦ։ൃਓ਺ •Android : ೔ຊ5ਓɺϚχϥ2ਓ •iOS : ೔ຊ3ਓ •Design : ೔ຊ1ਓ
15. 25ສਓɺ960ߍʗ5000ߍɹ
 क़ɾ௨৴ڭҭΑΓ΋ѹ౗తʹ͓τΫͳֹ݄980ԁʢ੫ൈʣ
 શࠃ140େֶҎ্ͷաڈ໰࠷৽3೥෼ܝࡌ IOS,Androidಉ࣌։ൃ
 Android͸Global൛ Quipperͱத਎͕ಉ͡ 
 iOS͸೔ຊࠃ಺ͷΈ
17. ͜͏ͳΔલͷ ೰Έ
18. σβΠϯ͕ ΨλΨλ
19. webଆͷ࠷৽ΨΠυϥΠϯ=CSS͕ ϝΠϯͩͬͨ ̒ϲ݄͙Β͍ͰϦϦʔε͠ͳ͚Ε͹ ͳΒͳ͔ͬͨ ΤϯδχΞ͸Android 3໊ɺiOS 1໊ Կނͦ͏ͳͬͨͷ͔
20. ݸਓͰ࡞ͬͨΨΠυϥΠϯ
21. ͳΜ͔ΨλΨλ
22. Ͳ͕ͩ͜Ίͳͷʁ
23. Ͳ͕ͩ͜Ίͳͷʁ
24. Ͳ͕ͩ͜Ίͳͷʁ
25. Ͳ͕ͩ͜Ίͳͷʁ
26. ͭΒ͍
27. ͦ͜ʹ෣͍߱Γͨ ࢖ె(৽ࣾһ)ͨͪ
28. ਓख͕૿͑ͯɺΨΠυ ϥΠϯΛ࡞࣭ͬͯΛ ͋͛Α͏ɻ
29. BEFORE AFTER
30. BEFORE AFTER
31. BEFORE AFTER
32. BEFORE AFTER
33. BEFORE AFTER
34. BEFORE AFTER
35. BEFORE
36. Colors primary Primary button color Submitted neutral warning To-do due, Ribbons for Smart Assignments white Quiz Button grey1 List Line #18B3D C #0F83AE #EF9537 #FAFAF A #F0F0F 0 Background for incomings of news & Message blue-lighter success Finished, checked fine Mastered grey3(default) To-do progress,list’s label, Placeholders for Input #C9EFF 7 #73C73D #E8C700 #B4B4B 4 Button for ADs Premium Movie Icon strong-blue green-darker Result 1st time grey4 To-do default date #2A86D 1 #35831D #96969 6 selected Used for multiple grey5(grey-darker) Secondary Button Text #F2F6B7 #60606 0 danger To-do expired, validation grey2 To-do default cycle #E86242 #DCDC DC #FFFFF F pure-white Panel Background, Card Background, Primary Button’s Text, White Text, #00000 0 pure black alpha12% Covered when button is tapped on Android #00000 0 pure black alpha8ˋ Background #00000 0 pure black alpha35% Android Default Background Cover, #00000 0 pure black alpha24% Button drop shadow NOTE: For any text, pure black (#000000) must NOT be used in the application. #FFFFF F pure-whiteɹalphaɹ Background of Animation for Answer In case both of alphabets and numbers are in same sentence, apply same font style to all characters. 
 For special cases such as Date of ToDo, it’s gonna be specified in the feature proposal. Color names are defined in English-English. (e.g. “Grey”) #32323 2 black Text Input #00000 0 pure black alpha50% VideoUI Base Color AFTER
37. ͜ΕΛͲ͏΍ͬͯ ࣮ݱͨ͠ͷ͔ʁ
38. ՝୊ problem Photo by pushthisbutton
39. SKETCHΨΠυϥΠϯͷ՝୊ •ݩʑσβΠϯΨΠυϥΠϯ͕͚͋ͬͨͲ࿦ཧ ཱͬͯͳ͍ˍsketch͕buggyͳͷͰ͋·Γػ ೳͯ͠ͳ͔ͬͨ •݁ہɺ࣭໰ͱ֬ೝ͕ଟ͘ͳΓ։ൃʹ͕͔࣌ؒ ͔ͬͨ •ΊͬͪΌࡉ͍࢓༷΍ΓऔΓͰΤϯδχΞͱޱ ࿦ʹͳͬͯΩϨͨ
40. ετϨ εϑϧʂ sketchΨΠυϥΠϯ ྑ͘ͳ͍ʂ
41. ͳͷͰ
42. ΨΠυϥΠϯΛ ৽͘͠࡞ͬͨ
43. WHY? •ϒϥϯυΛ౷Ұ͢Δҝɺઃܭ্ͷෆ੔߹Λݮ Β͢ҝ •։ൃʹ໎͍͕ͳ͘ͳΓੜ࢈ੑͷ޲্Λ໨ࢦ͢ •ຊདྷ಄Λ࢖͏ॴʹ಄Λ࢖͏Α͏ʹ͢Δ
44. HOW? ίϯϙʔωϯτ͝ͱ ʹͱʹ͔͘·ͱΊΔ
 2ि͙ؒΒ͍ ΤϯδχΞ͸1ϲ݄͙ Β͍࣮ࡍʹ࣮૷͠ͳ ͕ΒɺOS͝ͱʹ߹͏ ͔νΣοΫˠमਖ਼Λ ͘Γ͔͍͑ͯͬͨ͠ɻ ͦΕͧΕͷOS͔ΒUI ಘҙͳਓ̍ਓΛ Guidelineཁһͱͯ͠ ܴ͑ͯνʔϜΛ࡞ͬͨ UI leadΛத৺ͱͯ͠ ࣮ࡍʹ֤ϝϯόʔʹ࡞ ۀΛׂΓৼͬͨ (Android͚ͩ) 2ϲ݄൒͘Β͍ 01. 02. 03. 04.
45. ίϯϙʔωϯτ͝ͱ ʹͱʹ͔͘·ͱΊΔ
 2ि͙ؒΒ͍ ΤϯδχΞ͸1ϲ݄͙ Β͍࣮ࡍʹ࣮૷͠ͳ ͕ΒɺOS͝ͱʹ߹͏ ͔νΣοΫˠमਖ਼Λ ͘Γ͔͍͑ͯͬͨ͠ɻ ͦΕͧΕͷOS͔ΒUI ಘҙͳਓ̍ਓΛ Guidelineཁһͱͯ͠ ܴ͑ͯνʔϜΛ࡞ͬͨ UI leadΛத৺ͱͯ͠ ࣮ࡍʹ֤ϝϯόʔʹ࡞ ۀΛׂΓৼͬͨ (Android͚ͩ) 01. 02. 03. 04. σβΠφʔλʔϯ ΤϯδχΞλʔϯ
46. ࠷ॳ͸1ਓͰΨΠυϥΠϯΛ࡞͍͕͍ͬͯͨͭͷ ؒʹ͔࢓༷ॻΛ࡞͍ͬͯͨ ΤϯδχΞʹڠྗ͠ͳ͕ΒσβΠϯΨΠυϥΠ ϯʹ໭͍ͯͬͨ͠ ໋໊نଇͷमਖ਼ʢ͜͜·Ͱ޻ఔ1.2ʣ Πϯελόάಋೖͯ͠΋Βͬͨ(޻ఔ3Ͱ׆༂) σβΠφʔ͕ߦͬͨ͜ͱ
47. Πϯελόάͷ εεϝ
48. Πϯελόάͱ͸ •γΣΠΫ΋͘͠͸ϑϩʔτ ϘλϯͰόάϨϙʔτΛૹ ΕΔαʔϏε •खॻ͖͕ग़དྷΔ •༗ྉձһ͸؅ཧը໘͔Β githubʹ௚઀issueΛݐͯ Δ͜ͱ͕Ͱ͖ΔΒ͍͠
49. Կ͕ྑ͔ͬͨͷ͔ • ϝϞతʹ࢖͑Δ •ͦ͜Ͱ͙͢ʹؾʹͳͬͨ͜ͱΛ͙͢ه࿥Ͱ ͖Δͷ͕ૉ੖Β͍͠ •ଞͷ։ൃͱͷ੔߹ੑͱΓ΍͍͢ •ϦϦʔεςετͰ΋όά͡Όͳ͍͔ΒใࠂͰ ͖ͳ͍ɾɾͱ͍͏࣌Ͱ΋͙͢ϝϞ͢Δ͜ͱ͕ Ͱ͖Δ
55. ͦͷޙ΋׆༂த
56. ඍົ͔ͩͬͨ΋ͱࢥͬͨ͜ͱ •͓΋ͬͨΑΓΨπΨπ࢖͍͑ͯͳ͍ɾɾɾ •֬ೝˠissueཱͯΔϑϩʔ͕Ұ൪େࣄɻ̍೔ 15෼ूதͯ͠ΈΔ࣌ؒΛͭ͘ΔΑ͏ʹͯ͠Δ •ϝϞతʹ࢖͍ͬͯΔͷͰɺ͋Δఔ౓·ͱ·ͬ ͔ͯΒݟΔͱɺࣗ෼ͷߟ͑ͷ੔߹ੑ͕ͱΕͯ ͳ͍͜ͱ͕͋ΔͷͰஏ͔͍ͣ͠
57. ͱʹ͔͘खΛಈ͔ͯ͠ΈΔ PullRequestʹ͸ஸೡʹεΫγϣΛషΔ ։ൃ࣌ͷϧʔϧΛwikiʹ·ͱΊΔ ؆୯ͳSketchमਖ਼͸ΤϯδχΞ͕΍Δ ΤϯδχΞ͕ߦͬͨ͜ͱ
58. ͱʹ͔͘खΛಈ͔ͯ͠ΈΔ
59. ͱʹ͔͘खΛಈ͔ͯ͠ΈΔ
60. ͱʹ͔͘खΛಈ͔ͯ͠ΈΔ •ΨΠυϥΠϯΛ׬੒͔ͤͯ͞Β࣮૷͠Α͏ ͱ͢Δͱ͕͔͔࣌ؒΔ •·࣮ͣ૷ͯ͠Έͯɺ໎ͬͨΒͲ͏ΨΠυϥ Πϯʹམͱ͔ٞ͢࿦ͨ͠ํ͕ૣ͍ •ٙ໰΍ఏҊ͸Slackʹ౤͓͍͛ͯͯɺिʹҰ ౓࿩ͯ͠ΨΠυϥΠϯΛमਖ਼
61. PRͰͷஸೡͳεΫγϣ
62. PRͰͷஸೡͳεΫγϣ
63. PRͰͷஸೡͳεΫγϣ •σβΠϯϨϏϡʔΛPRςϯϓϨʔτʹ௥Ճ •Ͳ͏ͯ͠΋diff͕Ͱ͔͘ͳΔ͠ϨϏϡʔίε τ͕େ͖͘ͳΓ͕ͪ •εΫγϣ໘౗͚ͩͲɺશମͱͯ͠͸ίετ ͕Լ͕Δ
64. ϧʔϧΛWIKIʹ·ͱΊΔ
65. ← ͜ΕΛ࡞Δ৔߹ <Button
 android:layout_width="match_parent"
 android:layout_height="48dp"
 android:background="@drawable/btn_primary"
 android:ellipsize="end"
 android:gravity="center"
 android:lines="1"
 android:paddingEnd="16dp"
 android:paddingLeft="16dp"
 android:paddingRight="16dp"
 android:paddingStart="16dp"
 android:text="։࢝"
 android:textAllCaps="false"
 android:textColor="#FFFFFF"
 android:textSize="@dimen/text_subheading"/> layouts/hoge.xml
66. ᶃ αΠζͷ੾Γग़͠ <Button
 android:id="@+id/signup_B"
 android:layout_width="match_parent"
 android:layout_height="@dimen/btn_height"
 android:background="@drawable/btn_primary"
 android:ellipsize="end"
 android:gravity="center"
 android:lines="1"
 android:paddingEnd="@dimen/space_16dp"
 android:paddingLeft="@dimen/space_16dp"
 android:paddingRight="@dimen/space_16dp"
 android:paddingStart="@dimen/space_16dp"
 android:text="։࢝"
 android:textAllCaps="false"
 android:textColor="#FFFFFF"
 android:textSize="@dimen/text_subheading"/> layouts/hoge.xml dimens.xml <dimen name="btn_height">48dp</dimen> <dimen name="space_16dp">16dp</dimen> <Button
 android:layout_width="match_parent"
 android:layout_height="48dp"
 android:background="@drawable/btn_primary"
 android:ellipsize="end"
 android:gravity="center"
 android:lines="1"
 android:paddingEnd="16dp"
 android:paddingLeft="16dp"
 android:paddingRight="16dp"
 android:paddingStart="16dp"
 android:text="։࢝"
 android:textAllCaps="false"
 android:textColor="#FFFFFF"
 android:textSize="@dimen/text_subheading"/> layouts/hoge.xml
67. ᶄ ৭ͷ੾Γग़͠ <Button
 android:id="@+id/signup_B"
 android:layout_width="match_parent"
 android:layout_height="@dimen/btn_height"
 android:background="@drawable/btn_primary"
 android:ellipsize="end"
 android:gravity="center"
 android:lines="1"
 android:paddingEnd="@dimen/space_16dp"
 android:paddingLeft="@dimen/space_16dp"
 android:paddingRight="@dimen/space_16dp"
 android:paddingStart="@dimen/space_16dp"
 android:text="։࢝"
 android:textAllCaps="false"
 android:textColor="@color/pure_white"
 android:textSize="@dimen/text_subheading"/> layouts/hoge.xml colors.xml <color name="pure_white">#ffffff</color> <Button
 android:layout_width="match_parent"
 android:layout_height="48dp"
 android:background="@drawable/btn_primary"
 android:ellipsize="end"
 android:gravity="center"
 android:lines="1"
 android:paddingEnd="16dp"
 android:paddingLeft="16dp"
 android:paddingRight="16dp"
 android:paddingStart="16dp"
 android:text="։࢝"
 android:textAllCaps="false"
 android:textColor="#FFFFFF"
 android:textSize="@dimen/text_subheading"/> layouts/hoge.xml
68. ᶅ ελΠϧͷ੾Γग़͠ <Button
 style="@style/Button.Primary"
 android:layout_width="match_parent"
 android:text="։࢝"/> layouts/hoge.xml colors.xml <Button
 android:layout_width="match_parent"
 android:layout_height="48dp"
 android:background="@drawable/btn_primary"
 android:ellipsize="end"
 android:gravity="center"
 android:lines="1"
 android:paddingEnd="16dp"
 android:paddingLeft="16dp"
 android:paddingRight="16dp"
 android:paddingStart="16dp"
 android:text="։࢝"
 android:textAllCaps="false"
 android:textColor="#FFFFFF"
 android:textSize="@dimen/text_subheading"/> layouts/hoge.xml <style name="Button">
 <item name="android:gravity">center</item>
 <item name=“android:lines">1</item> …ུ…
 <item name="android:ellipsize">end</item>
 <item name="android:textAllCaps">false</item>
 </style>
 
 <style name="Button.Primary">
 <item name="android:textColor">@color/pure_white</item>
 <item name="android:background">@drawable/btn_primary</ite </style> styles.xml
69. ϧʔϧΛWIKIʹ·ͱΊΔ •ΨΠυϥΠϯΛίʔυͰදݱ͢Δ࣌ͷϧʔ ϧΛwikiʹ·ͱΊͯڞ༗ •ϑΝΠϧ໋໊نଇ΍ɺstyle(ڞ௨σβΠϯ)ͷ ద༻ͷ࢓ํ·Ͱࡉ͔͘ࢦఆ •·ͣڞ༗͢Δͷ͕େࣄɻڞ༗ޙʹྫ֎Λࢦ ఠ͞ΕͨΒߋ৽͢Ε͹Α͍
70. ΤϯδχΞ΋SKETCHमਖ਼
71. •ґཔͯ͠΍ͬͯ΋Β͏ΑΓΤϯδχΞ͕Ͱ ͖ΔΑ͏ʹͳͬͨํ͕ૣ͍ •ͦͷ෼ɺσβΠφʔ͞Μ͸σβΠφʔ͞Μʹ ͔͠Ͱ͖ͳ͍࢓ࣄʹूதͰ͖Δ •ίϛϡχέʔγϣϯίετΛݮΒͯ͠ޮ཰ Ξοϓ ΤϯδχΞ΋SKETCHमਖ਼
72. ଞʹ΋৭ʑ •Sketch͔Βͷ੾Γग़͠ΛࣗಈԽ •σβΠϯϨϏϡʔͷ։࠵ •ίϛϡχέʔγϣϯίετΛԼ͛Δ͜ͱΛ ҙ͍ࣝͯͨ͠
73. ͜͏ͯ͠Ͱ͖·ͨ͠
74. ڭ܇ Lesson Photo by djandyw.com
75. ڭ܇ •ʮ͜ΕΛ΍Γ·͢ʂʯͱએݴͯ͠ڠྗͯ͠΋ Β͏ •࣮ࡍʹΤϯδχΞͱίϛϡχέʔγϣϯΛऔ Γͭͭ࡞ͬͨ΄͏͕ྑ͍ •σβΠφʔ͚ͩͰ࡞Δͱɺ໋໊نଇͳͲͷ ϧʔϧ͕ΊͪΌͪ͘ΌʹͳΓ͕ͪ • ୹ظؒͰҰؾʹ΍ͬͨ΄͏͕ྑ͍ʢ̍ϲ݄ʙ ̍ϲ݄൒͘Β͍ʣ
76. ఏҊ Proposal Photo by Christopher.Michel
77. ΨΠυϥΠϯ͸ϓϩδΣΫτॳΊ͔Β࡞Δ͜ ͱʢಛʹϑΥϯτؔ܎͸/ϞοΫΛ࡞Δલ͔Β ਺छྨܾΊΔɻʣ օ͕मਖ਼Ͱ͖ΔϑϩʔΛ࡞Βͳ͍ͱGuideline ͕ݹ͍ঢ়ଶʹͳΔʢӡ༻·Ͱߟྀ͢Δʣ ΠϯελόάΊͬͪΌΑ͍Ͱ͢ σβΠφʔ͔ΒͷఏҊ
78. MEDIUM BRAND DEVELOPMENT Medium-Brand-Development
79. MEDIUM BRAND DEVELOPMENT Medium-Brand-Development
80. ͜Ε͕͋Ε͹ΧόʔͰ͖Δ UFYU UFYU UFYU UFYU UFYU UFYU UFYU Size Headline Button text Subheading Body Title Caption Display Name ON Bold OFF Bold
81. ΤϯδχΞͷதͰσβΠϯ൪௕Λ ܾΊΑ͏ ٞ࿦͢Δ৔ॴΛ࡞Ζ͏ ৭ => αΠζ => ελΠϧ => ը໘ ద༻ͷॱͰ΍͍ͬͯ͜͏ ΤϯδχΞ͔ΒͷఏҊ
82. ΍ͬͯΑ͔ͬͨ͜ͱ
83. σβΠϯ൪௕੍౓ •શһͰ࿩͢ͱܾ·Βͳ͍ •ΤϯδχΞͷதʹ΋ɺσβΠϯʹରͯ͠޷͖/ ݏ͍ɺಘҙ/ෆಘҙ͸͋Δ •AndroidɺiOSͰͦΕͧΕ൪௕࡞Δͱٞ࿦΋ ద༻΋ָͰૣ͔ͬͨ •൪௕͸σβΠφʔ͞ΜͱΤϯδχΞͷڮ౉͠ తͳ໾ׂͰಈ͘
85. ٞ࿦͢Δ৔ॴΛ࡞Δ •Slackνϟωϧ
 㱺 ͍ͭͰ΋ॻ͖ࠐΊΔ৔ॴ •ि1ϛʔςΟϯά
 㱺 ਐḿใࠂˍSlackͰͷ࿩ͷ্͍͛͘͢ •ϦϦʔεલϨϏϡʔ
 㱺 ਺ਓͰ20෼৮ͬͯϑΟʔυόοΫ
86. SLACKνϟωϧ
87. ϦϦʔεલϨϏϡʔ
88. ϦϦʔεલϨϏϡʔ
89. ͪΐͬͱࣦഊͨ͜͠ͱ
90. ը૾ϑΝΠϧ໋໊نଇ •ic_໊લ_৭_αΠζ.png
 ྫ : ic_arrow_white_24.png •img_໊લ.png
 ྫ : img_signup_background.png •৭͸ϑΝΠϧ໊ʹೖΕͳ͍ํ͕Α͔͔ͬͨ΋ •࠷ॳʹܾΊ͓͔ͯͳ͔ͬͨͷͰมߋ͕݁ߏͨ ͍΁Μͩͬͨ
91. ϑΝΠϧ໊มߋͨ࣌͠ͷϩά
92. ΨΠυϥΠϯ͸ϚʔΫμ΢ϯͰ •keynoteͰ࡞ͬͯGoogleDriveʹ͍͋͛ͯͨ ͕ɺߋ৽ͮ͠Β͍ɺdiff͕ݟͮΒ͍ͳͲͷ໰ ୊͕͋ͬͨ •΍͸ΓPullRequestͰमਖ਼Ͱ͖ΔΑ͏ʹ͍ͨ͠ •ϚʔΫμ΢ϯϑΝΠϧԽΛਐΊ͍ͯΔ
94. ࠓޙͷల๬ Future prospects Photo by GU / ݹఱ೤
95. ࠓޙ͸Ͳ͏͢Δͷ͔ʁ •ਵ࣌Ξχϝʔγϣϯ΍ΞϥʔτͳͲɺಈతͳ ಈ͖Λ௥Ճ͢Δ •ʮελσΟαϓϦʯϒϥϯυͷ࿈ܞͱ࡮৽
96. Thank you!