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

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

Transcript

1. © DeNA Co., Ltd. 1 個人開発の iOS アプリで UI/UX を標準に寄せてみた 2023/09/19 (火) 18:00 - 19:00 プロダクト開発部勉強会 〜桜花極彩大蛇斬〜 技術統括部 プロダクト開発部 モバイルグループ 川口 真央 / uhooi
2. © DeNA Co., Ltd. 2 自己紹介
3. © DeNA Co., Ltd. 3 個人 iOS アプリ「Loki」1.7.0 リリース🚀 https://x.com/the_uhooi/status/1703778381026963524 App Store で「uhooi」と 検索してインストールしよう！
4. © DeNA Co., Ltd. 4 個人 iOS アプリの UI/UX で 標準に寄せたところを 3 つ紹介するよ
5. © DeNA Co., Ltd. 5 1 サ活（サウナ活動）一覧画面の下部の UI を更新した
6. © DeNA Co., Ltd. 6 1 標準のメモやリマインダーを参考にした
7. © DeNA Co., Ltd. 7 1 SwiftUI で簡単に実装できる 「簡単に実装できる ⇒ 推奨されている」 と考えられる
8. © DeNA Co., Ltd. 8 2 サ活登録画面の閉じるボタンを「×」→「キャンセル」にした
9. © DeNA Co., Ltd. 9 （WWDC のビデオのキャプチャ） 2 「×」だとアクション（何が起きるか）が不明瞭なため 引用: https://developer.apple.com/videos/play/wwdc2022/10001
10. © DeNA Co., Ltd. 10 （WWDC のビデオのキャプチャ） 2 「×」はユーザー入力がない画面に使うのが望ましい 引用: https://developer.apple.com/videos/play/wwdc2022/10001 没入型のコンテンツに 有効だよ！
11. © DeNA Co., Ltd. 11 3 設定画面への遷移をモーダルからプッシュに変更した
12. © DeNA Co., Ltd. 12 （HIG の「シート」ページのスクリーンショット） 3 モーダルを2つ以上重ねるのを避けるため 引用: https://developer.apple.com/jp/design/human-interface-guidelines/sheets
13. © DeNA Co., Ltd. 13 3 ライセンス画面をシートで表示したかった 入力がないので 「×」で閉じている
14. © DeNA Co., Ltd. 14 1. Apple が提供しているアプリを参考にしよう ← 全員 2. HIG を読もう ← 全員 3. SwiftUI を素直に使おう ← エンジニア 4. WWDC でデザインに関するビデオを観よう ← エンジニア まとめ 〜標準っぽい UI/UX にするには〜
15. © DeNA Co., Ltd. 15 1. Apple が提供しているアプリを参考にしよう ← 全員 2. HIG を読もう ← 全員 3. SwiftUI を素直に使おう ← エンジニア 4. WWDC でデザインに関するビデオを観よう ← エンジニア まとめ 〜標準っぽい UI/UX にするには〜 みんなで協力して 使いやすい UI/UX にしよう！
16. © DeNA Co., Ltd. 16 • https://github.com/uhooi/Loki/pull/187 • https://github.com/uhooi/Loki/pull/189 対応 PR
17. © DeNA Co., Ltd. 17