個人開発のiOSアプリでUI/UXを標準に寄せてみた / 20230919_orochi

社内勉強会「プロダクト開発部勉強会 〜桜花極彩大蛇斬〜」の資料を公開用に編集したものです。

Transcript

1. © DeNA Co., Ltd. 1
   個人開発の iOS アプリで
   UI/UX を標準に寄せてみた
   2023/09/19 (火) 18:00 - 19:00
   プロダクト開発部勉強会 〜桜花極彩大蛇斬〜
   技術統括部 プロダクト開発部 モバイルグループ
   川口 真央 / uhooi
   

   View Slide

2. © DeNA Co., Ltd. 2
   自己紹介
   

   View Slide

3. © DeNA Co., Ltd. 3
   個人 iOS アプリ「Loki」1.7.0 リリース🚀
   https://x.com/the_uhooi/status/1703778381026963524
   App Store で「uhooi」と
   検索してインストールしよう！
   

   View Slide

4. © DeNA Co., Ltd. 4
   個人 iOS アプリの UI/UX で
   標準に寄せたところを 3 つ紹介するよ
   

   View Slide

5. © DeNA Co., Ltd. 5
   1 サ活（サウナ活動）一覧画面の下部の UI を更新した
   

   View Slide

6. © DeNA Co., Ltd. 6
   1 標準のメモやリマインダーを参考にした
   

   View Slide

7. © DeNA Co., Ltd. 7
   1 SwiftUI で簡単に実装できる 「簡単に実装できる ⇒ 推奨されている」
   と考えられる
   

   View Slide

8. © DeNA Co., Ltd. 8
   2 サ活登録画面の閉じるボタンを「×」→「キャンセル」にした
   

   View Slide

9. © DeNA Co., Ltd. 9
   （WWDC のビデオのキャプチャ）
   2 「×」だとアクション（何が起きるか）が不明瞭なため
   引用: https://developer.apple.com/videos/play/wwdc2022/10001
   

   View Slide

10. © DeNA Co., Ltd. 10
    （WWDC のビデオのキャプチャ）
    2 「×」はユーザー入力がない画面に使うのが望ましい
    引用: https://developer.apple.com/videos/play/wwdc2022/10001
    没入型のコンテンツに
    有効だよ！
    

    View Slide

11. © DeNA Co., Ltd. 11
    3 設定画面への遷移をモーダルからプッシュに変更した
    

    View Slide

12. © DeNA Co., Ltd. 12
    （HIG の「シート」ページのスクリーンショット）
    3 モーダルを2つ以上重ねるのを避けるため
    引用: https://developer.apple.com/jp/design/human-interface-guidelines/sheets
    

    View Slide

13. © DeNA Co., Ltd. 13
    3 ライセンス画面をシートで表示したかった
    入力がないので
    「×」で閉じている
    

    View Slide

14. © DeNA Co., Ltd. 14
    1. Apple が提供しているアプリを参考にしよう ← 全員
    2. HIG を読もう ← 全員
    3. SwiftUI を素直に使おう ← エンジニア
    4. WWDC でデザインに関するビデオを観よう ← エンジニア
    まとめ 〜標準っぽい UI/UX にするには〜
    

    View Slide

15. © DeNA Co., Ltd. 15
    1. Apple が提供しているアプリを参考にしよう ← 全員
    2. HIG を読もう ← 全員
    3. SwiftUI を素直に使おう ← エンジニア
    4. WWDC でデザインに関するビデオを観よう ← エンジニア
    まとめ 〜標準っぽい UI/UX にするには〜
    みんなで協力して
    使いやすい UI/UX にしよう！
    

    View Slide

16. © DeNA Co., Ltd. 16
    ● https://github.com/uhooi/Loki/pull/187
    ● https://github.com/uhooi/Loki/pull/189
    対応 PR
    

    View Slide

17. © DeNA Co., Ltd. 17
    

    View Slide