アプリをもっと"iOSアプリっぽく"する小さな工夫 / Small Touches That Make Your App Feel More Like an iOS App

アプリのUIをデザイン/実装する時、iOSのデザイン言語は重要です。
ユーザーはiOSのホーム画面を起点に、他のアプリを使う流れの中で、みなさんのアプリを使います。
この時、みなさんのアプリがiOSのデザイン言語と異なるデザイン言語でデザイン/実装されていたら、ユーザーは使い方を理解できなかったり、コンテキストスイッチングが必要だったりします。そういった小さな摩擦を避けるために、プラットフォーム内での一定の調和は重要です。

Appleが提供する標準のAPIを使えば、何も考えなくても、ある程度の品質のものにはなります。
しかしだからと言って、開発者が何も考えなくてよいかと言われるとそういうわけではありません。APIにも使い所があります。きめ細やかな使い分けをすることで、より洗練された印象をユーザーに与え、結果としてアプリの信頼感に繋がります。

このトークではそういった"iOSアプリっぽさ"を出すための小さな工夫を紹介します。例えばSF Symbolsの選び方、Liquid Glassの使い所、インタラクションの設計など、既存のデザインを大きく変更しない程度の少しの変更でより"iOSアプリっぽさ"を出す方法を紹介します。

AIによって多くの人が素早く一定の品質でアプリを作れるようになった時代、細部へのこだわりはより差を生むようになります。
このトークを通じて、少しでもみなさんのアプリがより"iOSアプリっぽく"できることを目指します。

https://fortee.jp/iosdc-japan-2026/proposal/7d8bec41-6b1a-4343-9e7f-3f65abdf596c

Transcript

1. アプリを もっと "iOSアプリっぽく" する 小さな工夫 まつじ
5. コマ送り
6. コマ送り
7. コマ送り
8. コマ送り
11. 行きすぎている
13. 「iOSアプリっぽく」する必要はあるのか？
14. ユーザーは複数のアプリを絶え間なく使用する
15. 天気アプリで天気を確認 SNSを確認 メッセージを送信 タイマーをつける 電車の運行情報を確認 漫画アプリで漫画を読む
16. 天気アプリで天気を確認 SNSを確認 メッセージを送信 タイマーをつける 電車の運行情報を確認 漫画アプリで漫画を読む
17. Liquid Glass Toolbars Interactions
18. Liquid Glass Toolbars Interactions
19. Liquid Glassを ここでは使わない Liquid Glassは ここで使う https://developer.apple.com/videos/play/wwdc2026/251
22. インタラクティブではない要素にLiquid Glassは使わない
23. Liquid Glass Liquid Glass Blur これだけ インタラクティブはない
24. Liquid Glass Toolbars Interactions
25. テキスト vs アイコン テキスト アイコン
26. シンボルではうまく表すことができない編集のようなアクションを除き、 テキストよりもシンプルで認識しやすいシンボルを優先して使用してください。 ツールバー | Apple Developer Documentation https://developer.apple.com/jp/design/human-interface-guidelines/toolbars
27. ! " ツールバー | Apple Developer Documentation https://developer.apple.com/jp/design/human-interface-guidelines/toolbars
29. シンボルではうまく表すことができない編集のようなアクションを除き、 テキストよりもシンプルで認識しやすいシンボルを優先して使用してください。 ツールバー | Apple Developer Documentation https://developer.apple.com/jp/design/human-interface-guidelines/toolbars
30. テキストとアイコンはグループを分ける 1つのボタンに見える テキストのボタンと シンボルのボタンは分ける
31. ツールバーの識別子 let barButtonItem = UIBarButtonItem(...) barButtonItem.identifier = "plus"
32. 識別子を設定していない場合 不要なアニメーションがある
33. 識別子を設定した場合 アニメーションがない
34. iOS 26 グループ全体に アニメーションがある
35. iOS 27
36. Liquid Glass Toolbars Interactions
37. 直感的？
38. 物理法則に基づいたインタラクション 「直感的なUI」は決して何もしなくても使い方がわかる魔法ではない
39. 物理法則に基づいたインタラクション 「直感的なUI」は決して何もしなくても使い方がわかる魔法ではない 日常生活をするうえで学んできた経験に基づいて次の予測が立てられるUI
40. 物理法則に基づいたインタラクション 「直感的なUI」は決して何もしなくても使い方がわかる魔法ではない 日常生活をするうえで学んできた経験に基づいて次の予測が立てられるUI Appleは学習済み経験として 物理法則 に基づくインタラクションが多い
43. 漕ぐのをやめる 自転車を漕ぐ 8 km/h 自転車を漕がない 8 km/h 13 km/h 漕ぐのをやめた瞬間 逆に早くなるのはありえない
44. 漕ぐのをやめる 自転車を漕ぐ 13 km/h 自転車を漕がない 13 km/h 5 km/h 漕ぐのをやめた瞬間 突然遅くなるのも不自然
45. ユーザーのジェスチャーの初速を正しく引き継ぐ
46. ユーザーのジェスチャーの初速を正しく引き継ぐ シートのdismiss ピクチャーインピクチャー
47. タップによるリサイズ
48. グラバー タップによるリサイズ
49. パンジェスチャーによるリサイズ
50. iOSのインタラクションの原則 基本：バウンス / オーバーシュートなし 例外：パンジェスチャーなど 推進力のあるジェスチャー には バウンス / オーバーシュートをつける
51. 力 UI 進行方向の力がない時に ピッタリ止まる 画面 タップなど推進力のないジェスチャーによるアニメーション UI 進行方向の力がある分 余分に進む 力 画面 推進力のあるジェスチャーによるアニメーション
52. 力 UI 進行方向の力がない時に ピッタリ止まる 画面 タップなど推進力のないジェスチャーによるアニメーション UI バウンスして戻る 力 画面 推進力のあるジェスチャーによるアニメーション
53. バウンスなし 推進力のないタップ バウンスあり 推進力のあるジェスチャー
54. バウンスなし バウンスあり 推進力のないタップ 推進力のあるジェスチャー
55. ラバーバンド効果 限界値を示すための効果 限界値を超えると反発して戻る力が加わる ユーザーの入力は正しく受けつけていることを 伝える側面もある
58. 横に引き伸ばされて 縦に短くなる 限界を超えて進む
61. WWDC18 | Designing Fluid Interfaces https://developer.apple.com/la/videos/play/wwdc2018/803/
62. Liquid Glass Toolbars Interactions
63. できていないとダメという話ではない 90点を91点や92点に押し上げる話
64. 把握できていないのは良くないかも？ 問題に気付いている / 気付いていない とでは大きな違い
65. 把握できていれば AI で素早く対応できる 問題に気づく審美眼 / それを言語化する能力が必要
66. まとめ • Liquid Glass / Toolbar / Interactionsを中心に iOSらしくする工夫を紹介しました。 • AIのおかげで実装のコストはかなり減りました 気付けるか / こだわれるか が差になる時代です。 • まだまだ紹介できていない工夫は多数あります。 是非Ask the Speakerで尋ねてください！