直感的な検索体験のための設計

こんにちは Robです Apple Designチームのデザイナーです。 今日お話しするのは アプリに直感的な検索体験を デザインする方法についてです。 検索は、コンテンツを見つけ ナビゲートし 発見するための最も重要なツールの1つです。 アプリが提供するコンテンツや 体験の幅が広がる中で 検索はユーザーに強力な力を与えます。 必要なものへ 正確にたどり着ける 探し続けるというストレスなしに。 また、アプリを開いたとき 真っ先に検索を探す方も多くいます。 Pagesでドキュメントに戻ったり Apple TVで映画を探したり Apple Musicで新しいアーティストや ジャンルを探したり 検索はこれらの操作を スムーズにする重要な役割を担います。 だからこそ、優れた検索体験の デザインは アプリにとって重要な要素です。

Liquid Glassでは 新しいパターンが導入されました。 iOS上でより快適に使える検索と iPadとMacの大きなディスプレイを 最大限に活用した検索です。 このセッションでは まず検索フィールドを紹介し その主要な動作と 操作について説明します。 次に、利用可能な さまざまな検索パターンの 概要をお伝えします。 そして、アプリの中で検索を どこに配置するのが最善かについても。 最後に、一般的なベストプラクティスを いくつか紹介します。 テキストの入力や検索結果の フィルタリングといった一般的な操作を 直感的でシームレスにする方法です。

まず検索フィールドを 見てみましょう。 Appleはデベロッパ向けに 検索コンポーネントを提供しています。 これには主要な要素が含まれており ユーザーが検索時に期待する 操作が備わっています。 例えば、先頭の検索アイコンは そのUIが検索フィールドであることを 視覚的に示します。 プレースホルダーテキストは 検索語句を入力する場所を伝えます。 クリアボタンは テキストが入力されると表示されます。 iOSでは、検索がフォーカスされると 追加のボタンが表示されます。 検索を終了しながら キーボードを閉じることができます。 検索フィールドの配置場所によって 適切な表示スタイルが 自動的に適用されます。 ツールバーに配置した場合は ガラス素材を使用し アプリのスクロール領域に配置した場合は 標準のコンテンツスタイルが適用されます。 アプリ固有のブランドや アイコンセットがある場合も 検索フィールドの主要な要素は そのまま維持してください。 カスタムアイコンは 置き換えるシンボルに近いものにし 虫めがねのようなシンボルは 検索として広く認識されています。

では、利用可能なさまざまな 検索パターンを見ていきましょう。 アプリに合った アプローチの選び方についてです。 まずiOSから始めます。 iOSでは、検索をツールバーに フィールドまたはボタンとして配置できます。 タブバーのタブとして。 またはトップツールバーの下や アプリのコンテンツ領域内にも。 検索をどこに配置するかは アクティブ時にフィールドが どこへアニメーションするかに直接影響します。 検索をボトムツールバーに 配置した場合 フィールドがキーボードの上へ スムーズにアニメーションし リーチビリティと キーボード入力が最適化されます。 検索をフィールドとして インラインに配置すると アクティブ時も上部に留まり アプリの下部にUIが表示されません。 検索の配置場所を決める際には 2つの重要な問いがあります。 1つ目は ユーザーはアプリをどう移動するか？ これにより タブバーなどの特定のコンポーネントに 対応が必要かを判断できます。 2つ目は 検索のスコープは何か？ 配置によっては ユーザーの認識に影響します。 どのコンテンツを検索するかという。 Appleのアプリを例に 実践してみましょう。 Mailアプリでは ナビゲーションの 多くがメールリストで行われ 各ビューにはコンテキストに応じた ツールバーが表示されます。 これは検索をボトムツールバーに 配置する好例です。 最も使いやすい位置であり アプリの他の主要な操作の 隣にあります。 この配置はアクティブにすると メールを検索することを 明確に伝えます。 ツールバー内の隣接アイテム数に応じて フィールドの幅が 自動的に調整されます。 先頭と末尾の両方の アクションに対応します。 ツールバーに他のアイテムが 2つ以上必要な場合 検索はボタンとして表示しタップで フィールドにアニメーションできます。

ボトムツールバーへの配置が 推奨されますが 検索をトップツールバーに 配置することも可能です。 Stocksアプリは これが有効な好例です。 Stocksリストの下部には シートが表示されており ボトムツールバーや フィールドの配置ができません。 そのため検索は トップツールバーに配置されています。 タップするとフィールドが キーボードの上へ引き上がります。 次に、別のナビゲーション形式を 見てみましょう。 タブ型アプリです。 タブバーを使うとアプリのトップレベル セクションを素早く切り替えられます。 タブ型アプリには多様で リッチなコンテンツがあり 検索対象にできるビューが多くあります。 この場合、検索の主要なエントリポイント を作ることが一般的に推奨されます。 1つの場所で、ユーザーがアプリ内の 関連コンテンツすべてを 見つけられるようにします。 検索タブを作ることでこれが実現できます。 検索タブには2つの選択肢があります。 1つ目は標準タブを使用する方法で バーの他のタブと統一感を保ちます。 タブをタップするとランディングページに 移動し 上部に検索フィールドが 表示されます。 コンテンツやサジェストを 表示するスペースが確保でき 検索前に役立つ情報を提示できます。 2つ目の選択肢は ボタン外観を使う方法です。 検索をプロミネントタブにします。 タップすると検索がすぐに アクティブになることを伝え キーボードが表示されます。 1つ目のアプローチは、アプリに 豊富なコンテンツがある場合に有効です。 検索時にユーザーが 探索的な気持ちでいる場合です。 例えばApple TVでは検索タブを使って さまざまなジャンルを提示します。 検索前に利用可能なカテゴリが 表示されます。 ユーザーが何が使えるかを 把握するのに役立ちます。 一般的に何を探しているか 分かっている場合や 検索に素早くアクセスしたい場合には 2つ目のアプローチを推奨します。 検索をプロミネントタブにする方法です。 良い例がPhoneアプリです。 ここでは最近の通話や連絡先に 素早く戻りたいだけなので 検索をタップするとすぐに キーボードが表示されます。 この配置により、検索は常に表示され タップ1回でアクセスできます。 専用の検索タブはアプリ内で より統一された グローバル検索を提供するのに最適ですが 特定のタブだけを検索する方が 有効な場合もあります。 Apple Musicライブラリが 良い例です。 ここでは検索がコンテンツとタイトルの 直下にインラインで配置されています。 タイトルと検索フィールドの 説明的なプレースホルダーテキストにより ミュージックライブラリのアルバムのみを 検索することが明確に伝わります。 アプリ全体ではなく。

このパターンはアプリに複数の 検索フィールドがある場合に特に有効です。 また検索スコープにおいて 場所が重要な役割を果たす場合にも。 次にiPadとMacを見てみましょう。 両プラットフォームとも 広いディスプレイを持ち アプリのナビゲーションモデルも 共通しています。 そのため検索のアプローチも 一般的に似ています。 iPadとMacの検索体験は できるだけ 近い形で揃えることをお勧めします。 両プラットフォームで、アプリの 主要な検索フィールドを配置できる場所は ツールバーの末尾の位置

サイドバーの上部 または専用の検索タブや セクションの上部です。 いくつか例を見てみましょう。 アプリに最適な選択の 参考にしてください。 複数の情報カラムをまたいで検索する スプリットビューアプリでは Mailのように検索を ツールバーの末尾に配置します。 スペースを有効活用でき 検索結果をナビゲートしながら 選択したコンテンツを 詳細ビューで表示し続けられます。 これはユーザーにとって最もよく知られた 検索パターンの1つでもあります。 NotesやFilesなどのアプリでも 採用されています。 検索結果がアプリの 詳細ビューに表示される場合も ツールバーに検索を配置することを 検討してください。 例えばFreeformでは 検索が直接ボードをフィルタリングします。 ツールバーに複数のアイテムや グループがある場合 検索フィールドはスペースに応じて 縮小またはボタンに折りたたまれます。

アクティブにすると検索はテキスト入力に 最適化された幅に広がり はみ出たアイテムはメニューに移動します。 もう1つの一般的なパターンは 検索をサイドバーに配置することです。 例えばSettingsアプリのように。 サイドバー内のコンテンツや ナビゲーションをフィルタリングしたい場合に ここへの配置を推奨します。 アプリに豊富な詳細ビューがある場合に 特に有効です。 検索しているリストと 隣接するビューの間に 明確な境界が必要な場合です。 良い例として Stocksアプリを見てみましょう。 ここでは検索を使って 銘柄を見つけ株式リストに追加できます。 サイドバーへの配置により 何を検索しているかが明確になります。 検索をTop Storiesセクションの 上に配置したとすると ニュースや記事を検索するものと 誤解される可能性があります。 iOSと同様に、iPadとMacでも 検索を専用タブにしたり サイドバーのアイテムにできます。 Apple Musicのようなリッチな マルチセクションアプリでは 1か所でまとめて検索できる場所を 提供するのに役立ちます。 アプリ内の全コンテンツを 対象にして。 このよりイマーシブなアプローチは 検索結果を表示するための より広いキャンバスも提供します。

この最後のセクションでは いくつかの 重要なベストプラクティスを紹介します。 検索体験をさらに高めるための ものです。 まず、検索サジェストの 活用方法から始めます。 ユーザーがアプリで検索に頼るとき 最初に求めるものが 見つからなかった可能性があります。 だからこそ、求める結果に 辿り着くまでを できるだけ簡単でスムーズに することが重要です。 多くの場合、以前に検索したものに 再度アクセスしたいこともあります。 最近の検索履歴を表示することで ユーザーが前の結果に戻りやすくなります。 入力を始めなくても。 iOSでは、最近の検索履歴は フィールドがフォーカスされたとき インラインで直接表示します。 iPadとMacでは、検索フィールドが ツールバーやサイドバーにある場合 最近の検索をメニューで表示できます。 検索タブがある場合は ページ上の他のコンテンツ候補と 合わせて表示できます。 表示する最近の検索は 選択的にすることを検討してください。 アプリによっては、ユーザーが 実際に閲覧したり 操作した特定の結果のみを 表示すると効果的です。 アプリのユーザーにとって 最も役立つことを考えることが重要です。 また、ユーザーが最近の検索を 削除できるようにすることも重要です。 個々のアイテムには スワイプジェスチャーが使えます。 セクションヘッダーのボタンで すべての検索をクリアすることも。 入力が始まったら できるだけ速く関連する結果を 表示することが重要です。 結果と合わせて、予測候補を 統合することができます。 クエリ全体を入力する手間を 省くためのものです。 これらの候補はユーザーの入力に 直接対応したもので 検索の自然な補完として 感じられるべきです。 ユーザーが把握しやすいよう ユーザーの入力と 候補の予測部分を 視覚的に区別してください。 また表示する候補の数を 絞ることもお勧めします。 検索結果が前面に 感じられるように。 結果と候補が効率的に ランク付けされていれば 通常ユーザーは検索全体を 入力する必要はありません。 検索のもう1つの重要な側面は 結果の 絞り込みやフィルタリングを助けることです。 これは複数の場所やカテゴリ またはアカウントをまたいで 検索する場合に特に重要です。 アプリの主要な検索フィールドでは まず広い検索から始め 必要に応じてユーザーが結果を絞り込める ようにすることが一般的に推奨されます。 軽量なフィルタリングには スコープバー というコントロールを提供しています。 Mailアプリでは、スコープバーで すべてのメールボックスの結果と 現在のメールボックスの結果を 切り替えられます。 Mailのように複数のメールボックスや 場所をナビゲートする場合 求める結果のみを表示しながら どこを検索しているかを 明確にする優れた方法です。 複数のカテゴリをまたいで 検索するアプリでは 結果を絞り込む幅広い選択肢を 提供すると役立つ場合があります。 ユーザーを圧倒しないよう 関連性があり ユーザーが探しているものに 適したフィルターのみ表示してください。 良い例がMapsアプリです。 ここではフィルターが さまざまな場所の種類に対応しています。 レストランからハイキングコースまで。 検索を絞り込むもう1つの方法が 検索トークンです。 トークンは入力中に表示される特定の キーワードで結果をフィルタリングします。 適用されると、トークンは検索フィールド内 のハイライトテキストとして表示され ユーザーは検索を 続けて追加できます。 これにより特定の人物や 場所、またはコンテンツの種類で 簡単に結果を絞れます。 トークンは検索フィールド内の テキストとして存在するため より自然な言語で フィルターを適用できます。 Photosのようなアプリでは 組み合わせて パーソナライズドフィルターも作れます。 例えば2021年のJoshua Treeの写真を 表示するなど。 強力ですが、トークンは 発見されにくい場合があります。 そのためアプリ内の見えやすいフィルタ リングUIの代わりに使わないでください。 実際、トークンはスコープバーと 組み合わせると効果的です。 または他のフィルターコントロールと。 最後に、グレースフルな 失敗の対処について説明します。 検索で結果が返らない場合は 適切に設計された空の状態や 結果なしビューを表示するのが最善です。 完全に空白のビューでは 検索が通ったのか疑問に思うことがあります。 このためAppleはデベロッパ向けにコンテンツ が利用できないビューを提供しています。 検索用に設定すると 検索シンボルが表示されます。 タイトルとサブタイトルで 結果がなかったことを伝えます。 このビューに現在の検索テキストを 表示することも検討してください。 タイポやエラーに 素早く気づけるよう。

以上で、本日のセッションは終わりです。 今日お伝えしたことを活かして アプリの中の機会について 考えてみてください。 例えば、検索をボトムに移動して リーチビリティを改善できる 場所はあるでしょうか？ または検索タブが有効な タブ型アプリはありますか？ そして最後に、サジェストや フィルターといったツールを活用して 検索をできるだけ スムーズにしていますか？ 本日の内容についての詳細はHIGを ご確認ください。 スタートに役立つツールは デザインリソースをご覧ください。 デザインシステムをさらに深く学ぶには 過去のWWDCセッションを 参照することをお勧めします。

これらのアップデートとガイドラインを 皆さんのアプリに活かす姿が 楽しみです。 ご視聴ありがとうございました。