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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

© DeNA Co., Ltd. 17