検索フィールド

検索フィールドは、検索アイコン、消去ボタン、ユーザが検索する文字列を入力できるプレースホルダテキストから構成される、編集可能なテキストフィールドです。検索フィールドでスコープコントロールやトークンを使用すれば、検索範囲を簡単にフィルタリングして絞り込めます。どのプラットフォームにも、アプリの目的や設計に基づいて検索機能を利用するためのさまざまなパターンが存在します。

デベロッパ向けのガイダンスは、アプリに検索インターフェイスを追加する（英語）を参照してください。システム全体にわたる検索に関連するガイダンスは、検索を参照してください。

ベストプラクティス

検索できる情報の種類を説明したプレースホルダテキストを表示する。例えば、TVアプリには「番組、映画、その他」というプレースホルダテキストが含まれます。プレースホルダテキストに、検索のような参考にならない語句は使用しないでください。

可能な限り、ユーザがタイピングし始めたらすぐに検索を開始する。ユーザのタイピング内容に合わせて検索を実行すると、検索する文字列が長くなるにつれて検索結果が絞り込まれていくので、検索機能を実際に動かしているという操作感が得られます。

検索を開始する前に、またはユーザのタイピングに合わせて、検索語句の候補を表示することを検討する。よくある検索候補を表示した方が、ユーザがタイピングをすぐに始めるよりも検索操作全体を短時間で完了できる場合があります。

検索結果はシンプルにする。最も関連性が高い検索結果を最初に表示して、ユーザが探しているものを見つけるために行うスクロール操作を最小化します。最も可能性の高い検索結果を優先しますが、それに加えて、ユーザが目的の項目を見つけやすいように検索結果を分類することをおすすめします。

ユーザが検索結果を絞り込めるようにする。例えば、検索結果のコンテンツ領域にスコープコントロールを含めると、ユーザは素早く簡単に検索結果を絞り込めます。

スコープコントロールとトークン

スコープコントロールとトークンは、検索の実行前/実行後を問わず、ユーザが検索パラメータを絞り込めるコンポーネントです。

• スコープコントロールはセグメントコントロールのように動作し、検索のカテゴリを選択できます。

• トークンは検索語句を視覚的に表現したもので、ユーザが選択して編集できるコンポーネントです。トークンはフィルタのように動作し、検索操作に任意の語句を追加できます。

スコープコントロールは、明確に定義された検索カテゴリで絞り込む場合に使う。ユーザはスコープコントロールを使って、検索範囲を簡単に広げたり狭めたりできます。例えばiPhoneの「メール」で、ユーザはスコープコントロールを使って、メールボックス全体を検索範囲にするのか、現在表示されている特定のメールボックスだけを検索範囲にするのかを簡単に切り替えられます。デベロッパ向けのガイダンスは、検索動作の範囲を設定する（英語）を参照してください。

最初は広い範囲に設定し、必要に応じてユーザが絞り込んでいくようにする。広い範囲を設定すると、利用できるあらゆる検索結果に基づいてコンテキストを読み取り、効果的に範囲を絞り込んでいくための方向性が得られます。

よくある検索語句や項目で絞り込む場合はトークンを使う。トークンを定義すると、トークンが表す語句がカプセル化されて視覚処理が施されます。このような見た目は、ユーザがそのトークンを単一の項目として選択して、編集できることを示しています。トークンを使えば、「メール」の特定の連絡先のように検索語句を明確にして絞り込んだり、「メッセージ」の写真のように特定の属性の集合だけに検索を限定したりできます。関連するmacOSコンポーネントについては、トークンフィールドを参照してください。

トークンを検索候補と組み合わせることを検討する。どんなトークンが使えるのかをユーザが知らない場合もあるので、トークンを検索候補と組み合わせると、ユーザがトークンの使用に慣れる助けになります。

プラットフォームの考慮事項

visionOSに追加の考慮事項はありません。

iOS

検索機能は、以下の3つの主要な場所に配置できます:

• 画面下部のタブバー

• 画面下部または上部のツールバー

• コンテンツに直接（インライン）

どこに検索機能を配置するのが最も合理的かは、アプリのレイアウト、コンテンツ、ナビゲーション設計によって決まります。

タブバーから検索する

検索機能を独立したタブのような見た目でタブバーの末尾に配置できます。ユーザがアプリのセクションを切り替えても検索機能は表示されたままなので、いつでも利用できます。

ユーザがこの検索タブを操作すると、検索フィールドが、フォーカスされているまたはフォーカスされていない状態で表示されます。

ユーザがすぐに検索操作に移行できるようにする場合は、フォーカスされた検索フィールドで始める。フォーカスされた検索フィールドで始めると、検索フィールド付きのキーボードがすぐに上に表示されて、ユーザはそのまま検索操作を続行できます。さらに、検索が終了したら直前のタブに直接戻ることができるので、スムーズな操作感となります。検索機能をユーザが問題を素早くシームレスに解決できる手段として提供したいなら、これが理想的な設計です。

発見や探索も重視したい場合は、フォーカスされていない検索フィールドで始める。フォーカスされていない検索フィールドで始めると、画面の下部で検索タブが検索フィールドに拡大されますが、フォーカスは検索フィールドには移りません。画面の残りの部分は、ユーザが検索フィールドをタップして実際に検索を開始するまで、新たな発見やナビゲーションを行うためのスペースとなります。「ミュージック」や「TV」のように、コンテンツのさまざまなコレクションを紹介したいアプリの場合は、これが適切な設計です。

ツールバーから検索する

画面の上部または下部で、タブバーではなくツールバーに検索機能を配置することもできます。

• 下のツールバーには、検索フィールドまたはツールバーボタンとして検索機能を配置できます。どちらにするかは、利用できるスペースの広さと、アプリにとって検索機能がどれほど重要かによります。ユーザがタップすると、上に検索フィールドが付いたキーボードが表示され、タイピングを開始できます。

• ナビゲーションバーとも呼ばれる上のツールバーには、ツールバーボタンとして検索機能を配置できます。ユーザがタップすると、上に検索フィールドが付いたキーボードが表示されます。画面の下に十分なスペースがない場合は、上の方にインラインで表示されます。

スペースがある場合は、検索機能を下の方に配置する。検索フィールドを既存のツールバーに追加しても、ツールバーを新規に作成して「検索」をその唯一の項目としてもかまいません。検索が優先される状況では、下のツールバーに配置する方が便利です。検索機能を手の届きやすい場所に維持できるからです。さまざまなツールバーレイアウトで検索機能を下部に配置するアプリの例には「設定」があり、ここでは検索機能が唯一の項目です。「メール」と「メモ」では、ほかの重要なコントロールに合わせて表示されます。

画面下部のコンテンツを優先することが重要な場合、または下部にツールバーがない場合は、検索を上部に配置する。コンテンツが隠れるとアプリの主要な機能が妨げられるおそれがある場合は、検索機能を上部に配置します。例えば、ウォレットアプリは画面の下部のスタックにイベントのパスを表示して、ひと目で分かる操作のしやすさを実現しています。

インラインフィールドから検索する

状況によっては、検索フィールドをアプリのコンテンツに直接（インラインで）配置することをおすすめします。

検索範囲となるコンテンツに合わせたインラインフィールドから検索した方が、その関係性を強調できる場合がある。1つのビューの中で絞り込んだり検索したりする必要がある場合、コンテンツのすぐ横に検索機能を表示した方が、当該検索が全体にではなくその特定のコンテンツに適用されることを、ユーザに分かりやすく伝えられる可能性があります。例えば、ミュージックアプリの主要な検索はタブバーから行いますが、ユーザはライブラリに移動したあと、インライン検索フィールドを使って曲やアルバムを絞り込めます。

検索機能はなるべく下の方に配置する。原則として、アプリの特定のコンテンツにのみ適用される検索機能であっても、ユーザが操作しやすい場所に配置することをおすすめします。例えば、設定アプリでは、トップレベルの検索と個々のアプリのセクション内の検索の両方で、画面の一番下に検索機能が表示されます。タブバーやほかの重要なUIが表示されているなど、画面の下に十分なスペースがない場合は、検索機能を画面上部にインラインで配置してもかまいません。

画面の上部では、検索範囲となるリストの上にインラインで検索フィールドを配置し、スクロール時には上のツールバーにピン留めする。これは、ほかの場所に表示される検索機能と明確に区別できる状態を維持するのに役立ちます。

iPadOS、macOS

iPadOSとmacOSの検索フィールドは、配置と動作が似ています。どちらのプラットフォームでも、フィールドの内容を消去すると検索が終了し、表示されているキーボードが（あれば）閉じます。iPadおよびMacで実行できるアプリの場合は、両方のプラットフォーム間で、ユーザが検索したときに感じる一貫性をできる限り高く維持してください。

多くのよくある状況で使えるように、検索フィールドをツールバーの右側に配置する。ツールバーからの検索操作は、ユーザが使い慣れたパターンにすることをおすすめします。特にこれが当てはまるのは、分割ビューを使うアプリやメール、メモ、ボイスメモなど複数のソース間を移動するアプリです。どのツールバーの端にも検索機能を配置しておけば、アプリ内のどこからでも検索が行えます。そのため、一般に最初の検索の範囲をアプリ全体に設定できるようにするのが良い設計です。

サイドバーでコンテンツを絞り込んだり移動したりする場合は、上部に検索機能を含める。「設定」のようなアプリでは、サイドバーを素早く絞り込んで、各セクションの階層の深さが分かる検索機能が有効です。これは、ユーザが目的のセクションや設定を探し、プレビューし、そこに移動するためのシンプルな方法です。

見つける作業専用の領域を設けたい場合は、検索機能をサイドバーまたはタブバーの項目として表示する。検索時に、情報量の多い候補やカテゴリ、大きくスペースを取るコンテンツなどが表示される場合は、そこからさらに目的の項目を見つける作業専用の領域を設けることをおすすめします。これは、閲覧と検索が連携して進行する場合が多い「ミュージック」や「TV」のようなアプリに特に当てはまります。それは、おすすめのコンテンツやカテゴリ、最近の検索履歴などをまとめて分かりやすく整理した場所となります。専用の領域は、アプリのセクション間を移動したり切り替えたりする際に、検索機能を利用できることを保証する役割も果たします。

専用領域内でユーザが検索操作に要する時間を短縮し、検索フィールド自体をもっと簡単に見つけられるように、そのセクションに移動したらすぐに検索フィールドにフォーカスを当てることを検討する。ただし、iPadで仮想キーボードしか利用できない場合は例外です。この場合は、キーボードがビューを隠すという想定外の動きを防止するため、検索フィールドにフォーカスを移動させないことをおすすめします。

ウインドウのサイズ変更を念頭において検索フィールドを配置する。iPadでは、Macと同様に、検索フィールドのサイズがアプリウインドウと連動して滑らかに変化します。さらに、検索が非常に有用なコンテキストでは、iPadのコンパクトビューでも検索機能を利用できるようにすることが大切です。例えば、「メモ」や「メール」をコンパクトビューにサイズ変更すると、検索機能がコンテンツリストの列の上に配置されます。

tvOS

検索画面は、ユーザが検索テキストを入力しやすい特殊なキーボード画面です。キーボードの下にある自由にカスタマイズできるビューに検索結果が表示されます。デベロッパ向けのガイダンスは、UISearchControllerを参照してください。

検索候補を提示して簡単に検索できるようにする。tvOSでは、一般的にテキスト入力はあまり好まれません。検索の操作感を高めるため、人気のある、コンテキストに応じた検索候補を提示してください。可能な場合には、最近の検索履歴を含めます。デベロッパ向けのガイダンスは、検索コントローラで検索候補を使用するを参照してください。

watchOS

検索フィールドがタップされると、画面全体にテキスト入力コントロールが表示されます。アプリが検索フィールドに戻るのは、「キャンセル」または「検索」ボタンがタップされたときのみです。

リソース

関連情報

検索

トークンフィールド

デベロッパ向けドキュメント

アプリに検索インターフェイスを追加する（英語） — SwiftUI

searchable(text:placement:prompt:) — SwiftUI

UISearchBar — UIKit

UISearchTextField — UIKit

NSSearchField — AppKit

ビデオ

新しいデザインシステムの理解

見つけやすいデザイン

SwiftUIで創り上げる検索体験

変更履歴