「駅近」「在庫あり」「土日対応」のような条件を、指で押してすぐ切り替えられるのがチップ型フィルターです。検索結果の近くに置けるため、スマートフォンでも候補を見ながら条件を変えられます。
ただし、チェックボックスを丸いボタンへ置き換えるだけでは使いやすくなりません。単一選択か複数選択か、選んだ条件をどう示すか、同じグループ内をANDとORのどちらで扱うかによって、検索結果は変わります。利用者が予想した結果と実際の動きが違えば、条件そのものを信用できなくなります。
チップが向くのは、短い言葉で理解でき、よく使われる少数の条件です。価格帯や日付範囲、階層の深いカテゴリーまで同じ形にすると、かえって選びにくくなります。最初に「何をチップにし、何を別の入力部品へ任せるか」を決めることが必要です。
この記事では、チップ型フィルターに向く条件、横スクロールと折り返しの使い分け、選択・解除、件数表示、URL連携、アクセシビリティまで解説します。実装前に決める仕様表と、公開前に確認したい問題も掲載しています。
チップという名称は、主に見た目の形を表しています。同じような外観でも、画面上での役割は複数あります。
| 役割 | 操作後の動き | 例 |
|---|---|---|
| フィルターチップ | 選択状態を切り替え、表示結果を絞り込む | 在庫あり、屋外対応、朝食付き |
| 入力済みチップ | 入力された値を表示し、必要に応じて削除する | 宛先、タグ、選択済みの担当者 |
| 候補チップ | 候補を選び、入力や検索を補助する | 最近の検索、よく使う質問 |
| 操作チップ | ひとつの処理や画面表示を実行する | 日付を選ぶ、場所を開く |
ページへ移動するリンクを、選択状態のあるフィルターチップと同じ見た目にすると、押した後の動きを予想できません。検索条件のON・OFF、入力値の削除、ページ遷移は、役割が分かる表示にします。
この記事で扱うのは、主に検索条件を選ぶフィルターです。ただし、フィルターの中でも、ひとつだけ選ぶ条件と複数選べる条件では、操作方法も実装方法も異なります。
たとえば、「新着・人気・価格順」の切り替えは、通常はひとつだけ選択します。一方、「屋外対応・耐薬品・短納期」といった製品特長は、複数を同時に指定することがあります。
実装前に、次の点を条件ごとに決めます。
チップ型フィルターは、画面に表示された選択肢を見ながら、条件を追加したり外したりする操作に適しています。
特に利用しやすいのは、次のような条件です。
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全体の操作方法に合わせて決めます。
検索対象が少ない場合は、ブラウザ内にあるデータを使って結果を切り替えられることがあります。商品数や条件数が多い場合は、チップを押すたびにサーバーへ検索条件を送る構成が一般的です。
どの方法でも、画面上の選択状態と実際に検索へ使われた条件を一致させる必要があります。
条件変更のたびに検索要求が送られる場合は、短時間の連続操作に対応し、古い検索結果が後から表示されないようにします。
公開後は、どのチップが選ばれているか、どの組み合わせで結果がゼロになるかを確認します。
ほとんど使われていないチップは、名称が分かりにくい、優先度が低い、検索結果へ期待どおり反映されていない可能性があります。
利用頻度の高い条件は前方へ移し、利用が少ない条件は詳細検索へ移すなど、実際の検索状況を見ながら表示内容を変更します。
アクセス解析へ送る際は、検索条件の固定名称や結果件数を対象とし、利用者が入力した個人情報や社内情報を含めないようにします。
画面案だけで開発を始めると、AND・OR、初期状態、解除、URL共有などの解釈が担当者ごとに異なることがあります。条件グループごとに、次の内容を決めます。
| 仕様項目 | 記載例 |
|---|---|
| 条件名 | 利用場所 |
| 選択肢 | 屋内／屋外／車載 |
| 選択方法 | 複数選択可 |
| 同一グループ内 | OR。いずれかに該当する製品を表示 |
| 他グループとの関係 | AND。規格など他の選択条件も満たす製品を表示 |
| 初期状態 | 未選択。全製品を表示 |
| 0件時 | 選択可能。結果画面で解除候補を案内 |
| URL | 条件コードをクエリへ反映し、共有後も再現 |
条件名と表示ラベルは別に管理する方法もあります。画面上では「屋外」と短く表示し、検索データでは固定の条件コードを使えば、表示文言を変更しても保存済みURLや集計結果への影響を抑えられます。
検索ボタンで確定する方式なのに、チップを押した時点で選択が反映されたように見える場合に起こります。未適用の条件があることを示し、「この条件で12件を表示」のように確定後の件数をボタンへ表示します。
一行表示は高さを抑えられますが、右側の条件が見えないことがあります。次のチップを一部見せる、補助文を表示する、主要条件だけを一行目へ置くなど、横に続くことが分かる表示が必要です。
背景色の違いだけでは、選択済みか判断しにくい利用者がいます。チェック記号、枠、文字の変化などを併用し、キーボード操作時のフォーカス位置も表示します。
件数や読み込み表示の高さが変わると、押そうとしていた別のチップが移動することがあります。表示領域を確保し、連続操作中に部品の位置が大きく変わらないようにします。
見た目は似ていますが、記事や商品に付いた分類を表示するだけのタグと、押すことで検索条件を変更するチップは役割が異なります。操作できる場合は、選択状態、解除方法、結果への反映を示します。
使えます。ただし、ひとつを選ぶと他が解除されることを理解できる表示が必要です。複数選択のフィルターチップと同じ画面に置く場合は、説明文やグループ見出しで選択方法を区別します。
一律の上限はありません。短いラベルでも候補が多いと探しにくくなるため、利用頻度の高い少数条件を表示し、残りは詳細検索へ分けます。長い名称や説明が必要な条件は、個数が少なくても別の入力方法が適しています。
検索が速く、少数の条件を試す画面では即時更新が向いています。条件数が多い、通信が遅い、複数選択後にまとめて確定したい場合は検索ボタン方式が適しています。
チップ型フィルターUIは、用途、特長、対応環境など、短い言葉で理解できる少数の条件に向いています。価格や寸法の範囲、多数のメーカー名、説明が必要な専門条件は別の入力部品へ分けます。
実装前に、単一選択と複数選択、ANDとOR、選択解除、結果更新のタイミングを条件グループごとに決めます。丸みのあるボタンを並べただけでは、利用者は選択方法や検索結果を予想できません。
スマートフォンでは、横スクロール、複数行、条件グループを、条件数と利用頻度に応じて使い分けます。選択中の条件は検索結果の近くにも表示し、一括解除と結果ゼロ時の案内を用意します。
URLへの条件反映、戻る操作、読み込み中と通信失敗の表示、キーボード操作も確認します。選択した条件と表示結果の関係が画面から分かることを、見た目より先に確かめます。