検索・絞り込みUIの設計

記事一覧や商品一覧で使う検索・絞り込みUIとして、条件の選びやすさと解除しやすさを重視しました。入力中の検索と確定後の検索を用途に応じて使い分けます。

適用中の条件はチップ表示にし、一つずつ解除できるようにしました。結果が0件の場合は条件を見直せる案内を表示し、単に「ありません」だけで終わらせない設計です。

URLのクエリパラメータへ条件を反映し、再読み込みや共有後も同じ結果を表示できる構成を想定しています。Next.jsではsearchParamsとサーバー側取得を組み合わせます。