よりアプリらしさを出すために

2024年12月13日(金)に主催したイベント『mobile.stmn』での登壇資料です。

Transcript

1. 「このアプリ、アプリっぽい！！！」 よりアプリらしさを出すために おしん(@38Punkd)
2. 前提 01
3. 前提 これから話すことは、あくまでモバイルアプリというハードウェアと その利用用途から考えた時に最適ではないUIUXがあるという話であって、 モバイルの方がWebよりも優れているという話ではないです モバイルもWebも、それぞれに長所短所があります モバイルアプリの長所を最大限活かす上で 「もっと改善できる」点を話していきます
4. 『このアプリ、使いにくいな』 と思ったことはありませんか？ 『このアプリ、 Webっぽいな』
5. 理由があるんです
6. ・画面が大きい ・座って操作 パソコン スマホ ・画面が小さい ・移動時に操作
7. ・網羅性 ・閲覧性 ・画面が大きい ・座って操作 パソコン スマホ ・画面が小さい ・移動時に操作
8. ・簡便性 ・即効性 ・網羅性 ・閲覧性 ・画面が大きい ・座って操作 パソコン スマホ ・画面が小さい ・移動時に操作
9. モバイルアプリケーション Webアプリケーション
10. ・簡便性 ・即効性 ・網羅性 ・閲覧性 ・画面が大きい ・座って操作 モバイルアプリケーション Webアプリケーション パソコン スマホ ・画面が小さい ・移動時に操作
11. ・簡便性 ・即効性 モバイルアプリケーション スマホ ・画面が小さい ・移動時に操作 モバイルアプリの 「体験」には 繰り返し行う行為 (=Task)を 素早く楽に操作できることが 求められる
12. 『このアプリ、使いにくいな』 と思ったことはありませんか？ 『このアプリ、 Webっぽいな』
13. 『このアプリ、使いにくいな』 と思ったことはありませんか？ 『このアプリ、 Webっぽいな』 繰り返し行う行為 (=Task)を 素早く楽に操作でき ...ない！！！
14. 素早く楽な操作を 実現するための方法 ・アクセシビリティ ・ユーザビリティ https://developer.apple.com/design/human-interface-guidelines/accessibility
15. ・アクセシビリティ 　・Interactions 　　・Gesture 　　・Buttons and controls 　　・... 　・VoiceOver 　　・... 　・Text Display 　・Color an effects 素早く楽な操作を 実現するための方法 https://developer.apple.com/design/human-interface-guidelines/accessibility
16. 素早く楽に操作を実現するための 『画面遷移』 02
17. 画面遷移
18. 画面遷移
19. 画面遷移
20. 画面遷移 ・スワイプバック ・戻るボタン
21. 画面遷移 投稿の一覧 (≒タイムライン ) →投稿の詳細 という階層が存在
22. 画面遷移 投稿の一覧 (≒タイムライン ) →投稿の詳細 という階層が存在 ユーザーはこの操作を 繰り返し行っている ユーザーにとって自然な流れは 一覧→詳細の前後関係が 存在していること
23. Before
24. Before
25. Before
26. Before
27. Before ？？？
28. After
29. After
30. After
31. After
32. After
33. 🥳
34. 素早く楽に操作を実現するための 『タブバー』 03
35. Before
36. Before
37. Before
38. After
39. After
40. After
41. After
42. 最後に 04
43. 「アプリっぽい」 「アプリっぽくない」 と感じる嗅覚はだいじ メッセージ 原因になっているUIUXを一つずつ改善していくことで アプリらしさが増していく
44. ありがとうございました！