フィルター・ソートUIパターン：一覧画面の絞り込み設計ガイド

フィルターとソートは、大量のコンテンツを扱うアプリにとって不可欠な機能です。ECサイト・求人アプリ・不動産アプリ・グルメアプリなど、多くのサービスでユーザーは何百・何千というアイテムの中から目的のものを絞り込みます。本記事では、ユーザーが迷わず快適に使えるフィルター・ソートUIの設計パターンを解説します。

フィルターUIの主な実装パターン

チップ型フィルター（水平スクロール）：

一覧ページの上部に横スクロール可能なチップ（タグ）を並べるパターン。カテゴリ・価格帯・評価などの主要フィルタを素早く適用できます。選択中のチップは色を変え視覚的に区別します。

最も汎用性が高く、Airbnb・食べログ・楽天など多くのアプリで採用されています。フィルタの種類が5〜8個程度のシンプルなケースに最適です。

フィルタードロワー（サイドパネル・ボトムシート）：

フィルターボタンをタップすると、全フィルタを網羅したパネル（左または下からスライドイン）が表示されるパターン。多数のフィルタ条件がある場合（価格・評価・エリア・設備・日程など）に適しています。

EC・不動産・求人アプリで広く採用されており、ユーザーは複数条件を一度に設定し「適用」ボタンで反映できます。

インラインフィルター：

フィルタコントロール（チェックボックス・スライダー等）を一覧の上部に常時表示するパターン。デスクトップWebでは左サイドバーとして表示されることが多いです。

ソートUIの設計

ソートドロップダウン：

「並び替え：おすすめ順 ▼」のようなドロップダウンで、ソート条件（新着順・価格が安い順・評価が高い順など）を切り替えます。現在選択中のソートをテキストで明示することで、ユーザーは現在の表示順を常に把握できます。

ソートボトムシート：

モバイルでは、ソートドロップダウンの代わりにボトムシートでソートオプションを提供するパターンが増えています。ラジオボタン形式のシンプルなリストで選択します。

列ヘッダークリック（テーブルUI）：

データを表形式で表示する管理画面・ダッシュボードでは、列ヘッダーをクリックでソート、再クリックで昇順/降順の切り替えが標準パターンです。現在のソートカラムと方向を矢印アイコンで表示します。

アクティブフィルターの表示

適用中フィルターをチップで表示：

フィルターが適用されている状態では、「エリア：渋谷 ×」「価格：〜5,000円 ×」のようなチップを一覧上部に表示し、個別のフィルター削除を可能にします。

フィルター件数バッジ：

フィルタードロワーパターンでは「フィルター (3)」のようにボタン上に適用中のフィルター数をバッジ表示することで、フィルターが適用されていることを明示します。

「フィルターをリセット」：

全フィルターを一括解除するボタンを目立つ位置（ドロワー内のヘッダー右・一覧上部）に設けます。

フィルター設計のベストプラクティス

リアルタイム vs 「適用」ボタン型：

チップ型のシンプルなフィルターはリアルタイムで結果を更新するのがスムーズです。複数条件を設定するドロワー型では、「適用」ボタンで一括反映する方が、条件設定中に頻繁に結果が変わって混乱するのを防げます。

フィルター後の件数プレビュー：

ドロワー型フィルターで、設定したフィルター条件での件数を「〇件を表示」ボタンでリアルタイムプレビューすることで、「適用したら0件になる」という失敗を防げます（Airbnbが採用しているパターン）。

フィルターの優先順位：

最もよく使われるフィルター条件を上位・左側に配置します。ユーザーリサーチやログ分析でどのフィルターがよく使われるかを把握し、UI上の優先度に反映します。

フィルタ結果が0件の場合：

適用中のフィルターを表示しつつ「条件を変更」または「フィルターをリセット」を提示する空のステートを必ず用意します。

モバイルとデスクトップの違い

モバイルでは画面幅が限られるため、フィルター用のUIはボトムシートやドロワーに格納するのが基本です。デスクトップWebでは左サイドバーに常時フィルターパネルを表示するパターンが多く使われ、一覧と並べて表示することで操作性が向上します。

まとめ

フィルター・ソートUIは、ユーザーが大量のコンテンツから目的のものを見つける効率を決定します。チップ型・ドロワー型を適切に使い分け、アクティブフィルターの表示・件数プレビュー・リセット機能を整備することで、ストレスフリーな絞り込み体験を実現できます。UI ZUKANではフィルターUIの実装例を多数掲載しています。