アプリの検索フィールド、どこに配置するか問題

集まれSwift好き！Swift愛好会スピンオフ WWDC26セッション要約会
https://love-swift.connpass.com/event/390480/

直感的な検索体験のための設計
https://developer.apple.com/jp/videos/play/wwdc2026/292/

Transcript

1. アプリの検索フィールド、どこに配置するか問題 2026/06/26 Swift愛好会スピンオフ WWDC26セッション要約会 矢﨑 雄人 / Yazaki Yuto
2. 自己紹介 😎 • 矢﨑 雄人 / Yazaki Yuto • REALITY株式会社 • iOSエンジニア 今年は現地参加しました！
3. 検索フィールド、どこに配置するか問題
4. iOS 26 で「検索」の導線が変わった 引用: https://developer.apple.com/videos/play/wwdc2025/356/
5. Appleの標準アプリでも、様々な「検索」の配置パターンがある 一見バラバラ…!? ちゃんと区別があるよ！
6. WWDC26: 直感的な検索体験のための設計 引用: https://developer.apple.com/videos/play/wwdc2026/292/
7. セッションの概要 1. 検索フィールドの基本 2. iOSでの配置 3. iPadOS / MacOSでの配置 4. 検索体験のベストプラクティス
8. 配置を決める2つの判断軸 • ユーザーがアプリ内をどう移動するか？ • タブバー、ツールバー、リスト/コンテンツ • 検索のスコープは何か？ • アプリ全体、今見ている画面内、特定のカテゴリ/スコープ
9. iOSにおける3つの検索配置パターン Toolbar 引用: https://developer.apple.com/videos/play/wwdc2025/356/ Tab Inline
10. iOSにおける 3つ 5つの検索配置パターン Top Toolbar Bottom Toolbar TabBar Inline Standard / Prominent Tab 引用: https://developer.apple.com/videos/play/wwdc2025/356/
11. Bottom Toolbar • 主要な操作が画面下部に集まり、片手操作しやすい • 今見ているリストやコンテンツを検索する場合に適している • 例: 設定、Message、メールアプリ 引用: https://developer.apple.com/videos/play/wwdc2025/356/
12. Top Toolbar • シートなどがあり、Bottom Toolbarに置けない場合 • 例: 株価アプリ 引用: https://developer.apple.com/videos/play/wwdc2025/356/
13. TabBar - Standard Tab • タップするとランディングページに移動し、上部に検索フィールドが表示される • 検索を開始する前に、役立つコンテンツや提案を表示する • 多種多様なコンテンツを持つアプリに適している 引用: https://developer.apple.com/videos/play/wwdc2025/356/
14. TabBar - Prominent Tab • タップするとキーボードが表示されてすぐに検索できる • 検索を終えると直前のタブに戻る • 検索を素早くシームレスに完了させたい場合に適している 引用: https://developer.apple.com/videos/play/wwdc2025/356/
15. Inline • アプリ全体ではなく、特定のコンテンツを対象として検索する • アプリ内に複数の検索フィールドがある場合に適している • 例: ミュージックアプリ 引用: https://developer.apple.com/videos/play/wwdc2025/356/
16. 検索フィールド、どこに配置するか問題
17. Human Interface Guidelines 更新されている （※現在は英語版のみ） • 今年の更新でTabの使い分けがより明確化された • iOS 26/27で標準アプリの配置に若干変化あり • 見比べてみると面白い fi 引用: https://developer.apple.com/design/human-interface-guidelines/search- elds
18. ありがとうございました！