柔軟性のあるUIで、多くの環境でアプリを活躍させる/iOSDC26

Transcript

2. noppe ‣ DAWN for Mastodon ‣ Pococha at DeNA 2
4. iOSDCでUIの話をする 4
5. UIについて考えていること 5
6. UIについて考えていること 6
7. ライフステージの変化とUIの柔軟性 7
8. UIの柔軟性とは？ 状況を問わずに価値を提供すること 8
12. アプリの前提が変わっている 単一の画面サイズを前提にできなくなっている 12
17. 環境の変化が前提になった ‣ ウィンドウサイズが変わる ‣ 同じアプリが異なる環境に表示される ‣ 画面の形そのものも変わる → OSは「どの環境でも柔軟に見た目を変えてくれるもの」として 扱うように。 17
19. UIを観察する 19
22. 目的 ユーザーが実現したいこと ‣ 例： 音楽を再生したい、写真を撮りたい 22
23. コンテキスト ユーザーが置かれている状況 ‣ iPadを使っている ‣ 怪我をしている ‣ 車を運転している ‣ 周囲が暗い など 23
24. インターフェース 最終的にユーザーが目的を実現するための手段 ‣ ボタンがある ‣ 音声で呼び出せる ‣ 画面をスワイプできる ‣ など 24
25. 例：ホーム画面 ‣ 目的：アプリを起動する ‣ コンテキスト：iPhoneを使っている ‣ インターフェース：アプリアイコンのボタンが並ぶ 25
26. Q.３つの要素のうち、何を柔軟にするのか 26
27. 目的とインターフェー スが固定 コンテキストを変える必要がある ‣ 目的：アプリを起動する ‣ インターフェース：グリッドにアプリ ‣ コンテキスト：車を運転している → 車を止めて、スマホを操作する 27 のボタンが並ぶ
28. 目的とコンテキストが 固定 インターフェースを変える必要がある ‣ 目的：アプリを起動する ‣ コンテキスト：車を運転している ‣ インターフェース：ボイスコマンドで アプリを起動できる 28
29. コンテキストとインタ ーフェースが固定 目的を変える必要がある ‣ コンテキスト：車を運転している ‣ インターフェース：グリッドにアプリ ‣ 目的：アプリを起動する → 断念・延 期する 29 のボタンが並ぶ
30. 固定する要素 柔軟性が求められる要素 目的とインターフェース コンテキスト 目的とコンテキスト インターフェース インターフェースとコンテキス 目的 ト 30
31. A.インターフェースを柔軟にする 31
32. 同じ目的に、複数のインターフェースを持て る 32
36. 36 p=purpose
37. デザインデータは「ある条件での正解」 （余談1） 37
40. インターフェースは目的とコンテキストによって決 定する ‣ 現実世界のコンテキスト ‣ 車を運転している ‣ 老眼である ‣ ソフトウェアのコンテキスト ‣ ウィンドウのサイズ ‣ ダークモードなど 40
44. 全部のパターンを用意する？ 44
46. コンテキストの変化にどう応答するか ‣ 連続的な適応 ‣ 段階的な適応 46
47. 連続的な適応 47
48. 段階的な適応 48
51. ブレークポイントの見つけ方 ‣ 増えすぎると実装パターンが増えてしまう ‣ 少なすぎるとインターフェースが十分に適応できない ‣ 同じインターフェースのまま、目的を十分に達成できるかどうか 51
52. 休憩 52
53. 実際のレイアウトでの活用 53
54. コンポーネント境界を見極める 54
58. 連続的レイアウトと段階的レイアウト 58
61. 連続的なレイアウトのパターン 枠のサイズが変化する時の対応 1. 枠にサイズを合わせる 2. ビューのサイズを優先する 61
62. 枠のサイズに合わせる 62
63. 枠に合わせたスクロールビューを挟む 63
64. 固定サイズは問題が起きやすい 64
65. ビュー自身のサイズを優先する 65
67. 段階的なレイアウト 67
68. 段階的なレイアウトのパターン 境界に応じて、構造や表現そのものを切り替える 1. 表示する情報を増やす・減らす 2. 情報をまとめる・展開する 3. レイアウトの構造を組み替える 68
69. 1.表示する情報を増やす・減らす 69
70. 1.表示する情報を増やす・減らす ‣ 優先度の高いプロパティを残す ‣ 優先度は目的から逆算する 70
71. 1.表示する情報を増やす・減らす 71
72. 2.情報をまとめる・展開する ‣ セクション化して、格納・展開できるようにする。 72
73. 2.情報をまとめる・展開する 73
74. AIによる新しい段階的レイアウトのパターン （余談2） 74
77. 連続的レイアウトと段階的レイアウトを 組み合わせて柔軟性を実現する 77
78. 段階的レイアウトの発展系 段階的なレイアウトはビュー内で完結するものに限らない ナビゲーションを含む構造の切り替えにも活用できる 78
80. コンテナビューコントローラ UIKitやSwiftUIでは、このような高度な段階的レイアウトを持たせ たコンテナビューコントローラーを標準で提供している。 80
84. 標準UIは柔軟性においてベストプラクティス ‣ 複雑なコンテキストの変化に対応するためには、標準APIを使う のがベストプラクティス ‣ カスタム実装は、作り手が意識したコンテキストにしか対応で きない ‣ 標準APIと同レベルの柔軟性を自作するなら、それなりの覚悟が 必要 84
85. まとめ 85
86. 絵としてのUIを作るのではなく、ユーザーの 目的とコンテキストから導出されるUIを作る 86
87. コンテキストをどこまで考慮できるかの勝負 自分以外の経験、異なる視点のユーザーの声 に耳を傾ける 87
88. 無限に存在するコンテキストの組み合わせに 対して、作るべきものを見抜く 88
89. ご清聴ありがとうございました 89
90. Q&A 90