検索フィールド
検索フィールドを使用すると、人々は入力した特定の用語で一連のコンテンツを検索できます。
検索フィールドは編集可能なテキストフィールドで、多くの場合、[検索] ボタン、[クリア] ボタン、およびオプションのプレースホルダーテキストが表示されます。プラットフォームによっては、検索テキストフィールドでトークンを使用して、人々が入力する検索語句や人々がフィルターとして使用できるアプリ定義の項目を表すことができます。トークン は、用語または項目をカプセル化する視覚的な処理を使用します。これは、トークン内のテキストを選択しなくても、トークンを簡単にコピーまたはドラッグできることを示しています。macOS でのトークンの例については、トークンフィールド を参照してください。
ベストプラクティス
検索をガイドするのに役立つヒントを提供することを検討してください。 たとえば、ミュージック にはプレースホルダーテキスト "アーティスト、曲、歌詞など" が含まれており、人々が検索できる内容を示唆しています。プレースホルダーテキストに "検索" などの用語を使用することは避けてください。有益な情報が得られないためです。
検索フィールドの近くに便利なショートカットやその他のコンテンツを提供することを検討してください。 たとえば、Safari では、人々が検索フィールドをタップまたはクリックするとすぐにブックマークが表示され、ブックマークを選択してすぐに開くことができます。開発者向けガイダンスについては、UISearchSuggestion (UISearchSuggestion) を参照してください。
適切な時に検索を開始します。 人々が入力を開始したらすぐに検索を開始することも、[Return] または [Enter] を選択するまで待つこともできます。人々が入力しながら検索すると、テキストがより具体的になるにつれて継続的に洗練された結果が得られます。人々が入力を終えた後に検索が行われる場合は、入力中にメニューを表示して、最近の検索または提案された用語から選択できるようにすることを検討してください。
クリアボタンを含めます。 現在の検索用語をすばやく削除できるため、人々は [クリア] ボタンを高く評価します。
検索履歴を表示する前に、プライバシーに配慮してください。 他の人が見る可能性のある場所に自分の検索履歴が表示されることを、人々は好みません。別の方法として、人々が結果をすばやく絞り込むのに役立つスコープバーを提供することを検討してください。
スコープバー
iOS、iPadOS、および tvOS では、スコープバーを使用して、人々が検索の範囲を絞り込むのに役立ちます。開発者向けガイダンスについては、UISearchBar (UISearchBar) を参照してください。
スコープバーを含めるよりも、検索結果を改善することを優先します。 スコープバーは、検索のために明確に定義されたカテゴリがある場合に役立ちますが、一般的には検索結果を改善する方がよいため、スコープを指定する必要はありません。
プラットフォームの考慮事項
watchOS ではサポートされていません。
iOS、iPadOS
ナビゲーションバーまたはコンテンツ領域内に検索フィールドを表示できます。システムが提供するコンポーネントを使用してナビゲーションバーに検索フィールドを含めると、自動的に適切な外観を受け取り、人々の期待どおりに動作します。たとえば、検索バーは、人々が下にスワイプして表示するまで非表示にすることができます。
開発者ノート
ナビゲーションバー内の検索フィールドでシステムが提供する外観と動作を利用する場合は、searchController (searchController) を使用します。検索フィールドにカスタムの外観と動作を実装する必要がある場合は、UISearchBar (UISearchBar) を使用してバーに配置するフィールドを作成するか、UISearchTextField (UISearchTextField) を使用してカスタム背景をコンテンツ領域の検索フィールドに適用することを検討してください。
macOS
ウィンドウのツールバーに検索フィールドを含めるのが一般的ですが、本体領域に表示することもできます。
コンテンツ領域内の検索フィールドに紹介ラベルを付けることは避けてください。 人々は検索フィールドの特徴的な外観に慣れているため、ラベルを付ける必要はありません。対照的に、ツールバーに検索フィールドを配置する場合は、"検索" というラベルを付けて、アイコンとテキストまたはテキストのみを表示するように人々がツールバーを構成したときにラベルが表示されるようにします。
適切なベゼルスタイルをスコープボタンに適用します。 使用できるベゼルスタイルは 2 つあります。ボタンがわずかに差し込まれているように見える recessed (凹型) ベゼルは、オンとオフを切り替えて焦点を絞るスコープボタン用です。rounded (丸い) ベゼルは、アクションを開始したり、検索条件を指定したりするスコープ ボタン用です。
必要に応じて、人々にスコープを絞り込んでもらいます。 スコープバーの下に表示されるフィルター行を使用して、補足のスコープ規則を有効にすることができます。たとえば、Finder でファイル名を検索する場合、人々は追加 (+) ボタンをクリックして、拡張子や更新日の範囲などの追加属性を指定できます。フィルター行には、フィルター範囲を指定するためのテキストフィールド、ボタン、およびその他のコントロールを含めることができます。
tvOS
検索スクリーンは、人々が検索テキストを入力するのに役立つ特殊なキーボードスクリーンであり、完全にカスタマイズ可能なビューでキーボードの下に検索結果を表示します。開発者向けガイダンスについては、UISearchController (UISearchController)を参照してください。
最近の検索を表示することを検討してください。 人々は頻繁に tvOS で検索を繰り返すため、人々が入力を開始する前に、キーボードの下の結果領域に人気のある検索または最近の検索を一覧表示することで、テキスト入力の必要を最小限に抑えることができます。
検索を容易にするための提案を提供します。 人々は通常、tvOS で多くの入力をしたくありません。検索体験を向上させるには、利用可能な場合は最近の検索を含む、一般的でコンテキスト固有の検索候補を提供します。開発者向けのガイダンスについては、検索コントローラーで提案された検索を使用する (Using Suggested Searches with a Search Controller) を参照してください。
検索結果を簡素化します。 多くのスクロールを必要とする長い検索結果のリストを提供することは避けてください。最も可能性の高い結果に優先順位を付けることに加えて、それらを分類して、人々が必要なものを見つけやすくすることを検討してください。
人々が検索結果をフィルタリングできるように検討してください。 たとえば、検索結果のコンテンツ領域にスコープバーを含めて、人々が検索結果をすばやく簡単にフィルタリングできるようにできます。
リソース
関連
開発者用文書
searchable — SwiftUI (searchable)
UISearchBar — UIKit (UISearchBar)
UISearchTextField — UIKit (UISearchTextField)
NSSearchField— AppKit (NSSearchField)
ビデオ
発見可能なデザイン
WWDC21
SwiftUI での精密な検索体験
WWDC21