チップ型フィルターとは、タグのような小さな選択肢を押し、検索条件を追加または解除するUIです。商品検索、施設検索、予約サイト、業務システムなどで、用途、特徴、対応環境といった条件を選ぶ場面に使われます。
通常のチェックボックスよりも画面を簡潔に見せやすく、スマートフォンでも選択肢を押しやすい点が特徴です。一方で、見た目だけをチップ型に変更しても、検索条件の意味や選択状態が分かりにくければ、絞り込み機能としては利用しづらいままです。
特に確認が必要なのが、単一選択か複数選択か、複数選択した場合はAND条件かOR条件か、選択をどのように解除するかという点です。画面上の操作と検索結果の動きが一致していないと、利用者は意図した条件で検索できません。
この記事では、チップ型フィルターを検索画面へ導入する際に必要となる、条件の選び方、レイアウト、選択ルール、結果表示、スマートフォン対応、URL連携、アクセシビリティについて解説します。
チップという名称は、主に見た目の形を表しています。同じような外観でも、画面上での役割は複数あります。
この記事で扱うのは、主に検索条件を選ぶフィルターです。ただし、フィルターの中でも、ひとつだけ選ぶ条件と複数選べる条件では、操作方法も実装方法も異なります。
たとえば、「新着・人気・価格順」の切り替えは、通常はひとつだけ選択します。一方、「屋外対応・耐薬品・短納期」といった製品特長は、複数を同時に指定することがあります。
実装前に、次の点を条件ごとに決めます。
チップ型フィルターは、画面に表示された選択肢を見ながら、条件を追加したり外したりする操作に適しています。
特に利用しやすいのは、次のような条件です。
BtoB製品検索であれば、「屋外」「高温対応」「食品機械向け」「RoHS対応」「短納期」といった条件が該当します。不動産検索では「ペット可」「駅徒歩5分以内」、宿泊施設では「大浴場あり」「駐車場あり」などが考えられます。
製品カタログ検索の絞り込み条件設計パターンで扱っている用途や利用環境のように、利用者が名称を見ただけで選択できる条件は、チップ型で表示しやすい項目です。
UI例 チップ型で表示しやすい条件
選択中の条件は、背景色と文字色を変え、未選択の状態と区別しています。
社内で使われている略称、規格番号、専門的な分類などは、短いチップへ収められても、初めて見る利用者には意味が伝わらない場合があります。
たとえば、「Class A」「仕様区分3」「適合区分B」といった名称は、補足説明がなければ選べません。このような条件には、説明文、ツールチップ、詳細検索画面などを用意する必要があります。
チップの文字数を減らすために略称を使うより、別のUIで正式名称と説明を表示した方が誤選択を防げる場合があります。
選択肢が少なくても、ラベルが長い、説明が必要、選択後に重大な処理が行われるといった場合は、チップ型が適しているとは限りません。
逆に、選択肢が10個を少し超えていても、利用頻度が高く、短いラベルで内容を理解できる場合は、グループ分けや表示切り替えによって利用できることがあります。
件数だけで決めず、ラベルの長さ、選択頻度、スマートフォンでの表示、検索結果への影響を確認します。
チップ型フィルターでは、ひとつだけ選択できる条件と、複数選べる条件が同じ画面に並ぶことがあります。
見た目がすべて同じだと、利用者は押してみるまで複数選択できるか分かりません。
単一選択では、新しいチップを選ぶと、それまで選択されていたチップが解除されます。ラジオボタンに近い動きです。
複数選択では、選択済みのチップをもう一度押すと解除できる動作が一般的です。チェックボックスに近い動きになります。
複数選択できることが分かりにくい場合は、グループ名の近くに「複数選択可」と表示します。単一選択の場合は、「いずれか1つを選択」と案内できます。
説明を読まなければ操作できない画面にするのではなく、選択状態や押した後の動きからもルールを理解できるようにします。
チップ型フィルターには、横一列に並べる方法、複数行に折り返す方法、条件グループごとに分ける方法があります。
どのレイアウトが適しているかは、選択肢の数だけでなく、画面上での優先度や検索結果との関係によって変わります。
スマートフォンの画面上部にチップを横一列で並べ、左右へスクロールできるようにする形式です。表示領域を大きく使わず、優先度の高い条件をすぐ選べます。
パターン1 一行スクロール型
画面内に収まらない条件があることを利用者が理解できる見せ方も必要です。
スクロールバーを非表示にしたうえで、チップが画面幅にぴったり収まっていると、右側に続きがあることへ気付かれない場合があります。
次のチップの一部を画面端に見せる、右側に余白を設けるなど、続きがあると分かる表示にします。
重要な条件を後方へ置くと見られない可能性があるため、利用頻度や検索データを基に並び順も確認します。
チップを複数行に折り返して、選択肢をまとめて表示する形式です。一覧性が高く、選択肢全体を確認できます。
ラベルの長さが大きく異なると、行ごとの配置が不規則になり、視線を動かしにくくなります。ラベルの表記を短く統一するか、長い条件は別画面で表示します。
用途、材質、性能など、検索項目ごとに見出しを設け、その中にチップを表示する形式です。
条件数が増えた場合でも、何に関する選択肢なのかを理解しやすく、グループごとのAND・OR条件も説明しやすくなります。
パターン2 条件グループ型
検索項目ごとに区切ることで、用途と材質が異なる種類の条件であることを示せます。
検索結果の直前に、よく使う条件や選択中の条件を表示する形式です。条件を変更した結果が同じ場所で確認できるため、検索を繰り返す画面に適しています。
パターン3 検索結果と選択条件を近くに表示する
選択中の条件
検索結果と条件を近くに配置すると、現在の絞り込み内容を確認しやすくなります。
スマホ入力最適化のUIパターン一覧でも紹介しているように、スマートフォンでは、押しやすさだけでなく、現在の状態が画面内で分かることが重要です。
複数のチップを選択した場合、検索結果をどのように絞るかを決める必要があります。
一般的には、同じグループ内の複数選択をOR、異なるグループ間をANDとして扱う設計が理解されやすい傾向があります。
たとえば、「用途」で屋外と食品向けを選んだ場合は、屋外または食品向けの製品を表示します。さらに「材質」でステンレスを選んだ場合は、その候補の中からステンレス製品だけを表示します。
AND/OR グループ内とグループ間の違い
用途：高温対応と食品向けを選択
いずれかの用途に該当する製品を表示します。
用途：高温対応、材質：ステンレス
両方の条件を満たす製品を表示します。
実際の検索仕様が異なる場合は、画面上で条件の関係を説明する必要があります。
複数の条件をすべてANDで結ぶと、チップを追加するたびに候補が減り、該当件数がゼロになりやすくなります。
利用者が候補を広く探す画面では、同じ種類の条件をORにした方が探しやすい場合があります。一方、製品の必須仕様を指定する業務検索では、AND条件が必要です。
どちらが正しいかは検索の目的によって異なります。条件を満たさない製品を表示してよいのか、候補を広く見せることを優先するのかを決めます。
チップ列の先頭に「すべて」を置く場合、その動作も明確にします。
複数選択チップの中に「すべて」を通常の条件として含めると、「すべて」と「屋外」が同時選択されるなど、意味のない状態が生じます。
検索条件がない状態を表すのであれば、「すべて」というチップを置かず、未選択状態を初期表示とする方法もあります。
チップ型フィルターでは、現在選ばれている条件をすぐ確認できることが重要です。
背景色だけで選択状態を示すと、表示環境や色覚特性によって違いを確認しにくいことがあります。
チェックマーク、太字、枠線、選択中というラベルなどを組み合わせます。キーボード操作時のフォーカス表示も、選択状態とは別に確認できる必要があります。
詳細検索画面やモーダルを閉じた後、選択した条件が見えなくなると、なぜ件数が減っているのか分かりません。
検索結果の上部に「選択中の条件」として表示し、そこから個別に解除できるようにします。
ただし、検索条件を選ぶチップと、選択済み条件を解除するチップが同じ画面にある場合は、役割を区別します。解除用には閉じる記号を付けるなど、操作結果を予想できる表示にします。
複数の条件を選択できる画面では、ひとつずつ解除するだけでなく、一括で初期状態へ戻せる操作を用意します。
「リセット」「条件をクリア」「すべて解除」など、何が起きるか分かる名称を使います。検索結果や入力したキーワードまで消える場合は、その範囲も明記します。
チップを押した直後に検索結果を更新する方法と、条件を選んだ後に「検索する」ボタンを押す方法があります。
検索処理が速く、結果件数が多すぎない画面では、選択後すぐに結果を更新すると、条件と結果の関係を確認しやすくなります。
一方で、通信に時間がかかる場合や、押すたびに画面全体が読み込み直される場合は、操作が落ち着きません。
条件数が多い詳細検索や、検索処理に時間がかかる場合は、複数の条件を選んでからまとめて検索する方法が適しています。
この場合は、チップを押しただけではまだ検索結果に反映されていないことを画面上で示します。「この条件で検索」「123件を表示」など、実行後の内容が分かるボタンを表示します。
検索結果を非同期で更新する場合、読み込みが完了するまでの表示が必要です。
チップの選択状態だけが変わり、結果が更新されていない状態は避けます。通信失敗時には、条件を保持したまま再試行できるようにします。
選択中の条件に何件該当するかを表示すると、条件を追加するか解除するか判断しやすくなります。
現在の選択条件と組み合わせると結果がゼロになるチップを、選択できない状態にする方法があります。
ただし、無効化した理由が分からないと、利用者はシステムの不具合だと感じる場合があります。件数を表示する、「現在の条件では選択できません」と説明するなどの対応が必要です。
検索の自由度を優先する場合は、ゼロ件でも選択できるようにし、結果画面で条件解除を提案する方法もあります。
「該当する結果がありません」だけで終わらせず、候補を表示するために何を変えればよいかを案内します。
選択中の条件をその場で解除できるようにすると、検索画面へ戻る必要がありません。
チップ型は、短い選択肢をすばやく切り替える用途に適しています。数値入力、長い名称、選択肢が多い項目まで同じ形式にすると、かえって探しにくくなります。
向き不向き 条件に応じてUIを使い分ける
| 条件の種類 | チップ型との相性 | 理由 | 候補となる別UI |
|---|---|---|---|
| 用途・特長 | 利用しやすい | 短い言葉で内容を理解できる | チップ、タグ群 |
| 価格帯・温度帯 | 別形式を検討 | 上限・下限の指定が必要 | 範囲入力、選択リスト |
| メーカー名が20件以上 | 別形式を検討 | 一覧が長くなり、目的の名称を探しにくい | 検索付き選択画面、チェックボックス |
| 説明が必要な規格条件 | 別形式を検討 | ラベルだけでは選択基準が分からない | アコーディオン、詳細検索 |
頻繁に使う条件だけをチップで表示し、その他を詳細検索へ分ける方法もあります。
価格、温度、寸法、重量などの範囲指定については、数値条件の絞り込みUI（スライダー・範囲指定）の設計で扱っているような別の入力方法が適しています。
多数の条件をまとめて扱う場合は、絞り込み検索UIのパターンと実装の考え方で紹介している、チェックボックス、選択リスト、アコーディオンなどとの組み合わせを検討します。
実務では、検索条件のすべてをチップにするより、利用頻度の高い条件だけを前に表示する方法が利用しやすいことがあります。
利用頻度が低い条件や専門的な条件は、「詳細条件」ボタンから別画面で指定できるようにします。
どの条件を前に表示するかは、社内の想定だけでなく、検索ログや営業担当者への問い合わせ内容も参考になります。
検索条件をURLのクエリパラメータなどへ反映すると、絞り込み後の状態を再現できます。
BtoB製品検索では、営業担当者が条件を指定したURLを顧客へ送る使い方も考えられます。
商品詳細から検索結果へ戻った際に、選択条件やスクロール位置が初期状態へ戻ると、同じ検索をやり直さなければなりません。
URL、ブラウザ履歴、セッションなどを使い、検索条件と結果一覧の状態を復元します。
検索条件に顧客名、会員情報、社内管理番号などが含まれる場合は、URLへそのまま記録してよい情報か確認します。
URLはブラウザ履歴、アクセスログ、解析サービスなどへ残る可能性があります。公開してはいけない情報は、セッションや認証済みのサーバー側データとして扱います。
チップ型フィルターは、見た目だけをクリック可能な要素にすると、キーボードや支援技術から操作できない場合があります。
実際の動作に応じて、ボタン、チェックボックス、ラジオボタンなど適切な要素を使います。
スマートフォンでは、文字の周囲に十分な余白を設け、隣のチップを誤って押さない間隔を確保します。
ラベルが短くても、文字幅だけの小さなボタンにはしません。実機で片手操作した場合の押しやすさを確認します。
現在の条件では選択できないチップを無効化する場合、未選択状態とは別の表示が必要です。
薄い色にするだけでなく、操作できない理由を確認できるようにします。無効なチップへキーボードで移動できるかどうかも、UI全体の操作方法に合わせて決めます。
検索対象が少ない場合は、ブラウザ内にあるデータを使って結果を切り替えられることがあります。商品数や条件数が多い場合は、チップを押すたびにサーバーへ検索条件を送る構成が一般的です。
どの方法でも、画面上の選択状態と実際に検索へ使われた条件を一致させる必要があります。
条件変更のたびに検索要求が送られる場合は、短時間の連続操作に対応し、古い検索結果が後から表示されないようにします。
公開後は、どのチップが選ばれているか、どの組み合わせで結果がゼロになるかを確認します。
ほとんど使われていないチップは、名称が分かりにくい、優先度が低い、検索結果へ期待どおり反映されていない可能性があります。
利用頻度の高い条件は前方へ移し、利用が少ない条件は詳細検索へ移すなど、実際の検索状況を見ながら表示内容を変更します。
アクセス解析へ送る際は、検索条件の固定名称や結果件数を対象とし、利用者が入力した個人情報や社内情報を含めないようにします。
チップ型フィルターUIは、用途、特長、対応環境など、短い言葉で理解できる条件を選ぶ際に利用しやすい形式です。
ただし、丸みのあるボタンを並べるだけでは、検索機能として十分ではありません。単一選択と複数選択、ANDとOR、選択解除、結果更新のタイミングを先に決め、その仕様が画面から理解できるようにする必要があります。
スマートフォンでは、横スクロール、複数行表示、条件グループ表示を、条件数や利用頻度に応じて使い分けます。選択中の条件は検索結果の近くにも表示し、一括解除や結果ゼロ時の案内も用意します。
価格や寸法の範囲、多数のメーカー名、説明が必要な専門条件までチップへ置く必要はありません。利用頻度の高い条件だけをチップで表示し、それ以外は詳細検索で指定できる構成が適している場合もあります。
実装時には、URLへの条件反映、戻る操作、読み込み中の表示、アクセシビリティも確認します。見た目の印象だけではなく、選択した条件と表示結果の関係を利用者が理解できることが、チップ型フィルター設計の重要な基準です。