coastdigitalgroup/coastai-skills

フィルターと並び替えシステム

目的

フィルターと並び替えシステムは、ユーザーが大規模なデータセットや商品カタログをナビゲートするための発見インターフェースを設計する方法論を提供します。技術的な実装がロジックを処理する一方、このシステムは発見ツールの空間的構成と視覚的なアフォーダンスを定義します。これにより、ユーザーが簡単に表示を絞り込み、現在のフィルター状態を理解し、優先順位モード（並び替え）を切り替えても、文脈を見失ったり圧倒されたりしないようにします。

ユースケース

• eコマースサイト向けのサイドバーまたはトップバーの発見レイヤーを設計する。
• ディレクトリやリソースハブ向けの複雑な検索結果ページ（SERP）を整理する。
• モバイルファーストのアプリケーションインターフェース向けに「発見ドロワー」を実装する。
• コンテンツが豊富なドキュメントやブログアーカイブ向けにファセットナビゲーションを作成する。

使用すべきでない場合

• 小規模データセット（12アイテム未満）： すべてのコンテンツが1画面に収まる場合、フィルタリングと並び替えを追加すると、不必要なインタラクションコストが発生します。
• 単一パスのワークフロー： ユーザーがカタログを探索するのではなく、線形的な順序に従うことが想定されている場合。
• 生データテーブル： ユーザーがブラウザネイティブの「検索」や高度なスプレッドシートツールを使用する可能性が高い場合（ただし、高レベルの並び替えは依然として役立ちます）。

入力

1. ファセット一覧： ユーザーがフィルタリングできるすべての属性のリスト（例：サイズ、色、評価、価格）。
2. 優先順位ランキング： 「主要」（ユーザーの80%が使用）なファセットと「二次的」（ニッチな仕様）なファセットの区別。
3. コントロールタイプ： データ型とUIコントロールのマッピング（例：複数選択にはチェックボックス、価格には範囲スライダー）。
4. レイアウトコンテキスト： 利用可能な水平・垂直スペース（responsive-grid-systemから取得）。

出力

1. 発見レイアウト設計図： フィルターバー（サイドバー vs トップバー）と結果グリッドの配置を定義。
2. ファセットコンポーネント仕様： 発見コンテキスト内でのチェックボックス、スウォッチ、範囲入力のビジュアルデザイン。
3. 状態マップ： アクティブフィルター（チップ/ピル）、ローディング状態（スケルトン）、空の状態の視覚的表現。
4. レスポンシブ戦略： デスクトップ（例：サイドバー）からモバイル（例：ボトムドロワー）へのフィルターの変換計画。

ワークフロー

1. 主要レイアウトパターンを選択する

ファセットの数に基づいて空間的配置を選択します：

• サイドバー（左/右）： 5つ以上のファセットに最適。発見ツールへの高い可視性と永続的なアクセスを提供します。
• 水平トップバー： 1〜4つのファセットに最適。結果の幅を最大化しますが、後でファセットを追加すると乱雑になる可能性があります。
• オーバーレイ/ドロワー： モバイルや、発見が二次的なタスクである「クリーンな」デスクトップインターフェースに最適。

2. ファセットの視覚的階層を定義する

visual-hierarchy-systemの原則をフィルターリストに適用します：

• グループヘッダー： 太字で簡潔なタイトルを使用します（例：カテゴリ、ブランド）。
• コントロールサイズ： チェックボックスやテキストリンクに十分な垂直リズム（通常は--space-sの間隔）を確保します。
• 初期展開 vs 折りたたみ： 最も使用される上位3つのファセットを展開し、残りは折りたたんで垂直スペースを節約します。

3. 「アクティブ状態」システムを設計する

ユーザーは常に適用されているフィルターを把握できなければなりません：

• 要約（ピル/チップ）： アクティブフィルターの水平リストを結果の上またはサイドバーの上部に配置します。
• すべてクリア： ビュー全体をリセットするための、目立つ単一のアクションを提供します。
• 視覚的フィードバック： フィルターが切り替えられたとき、結果コンテナが「更新中」であることを示す必要があります（例：不透明度20%またはスケルトン画面）。

4. 並び替えのアフォーダンスを確立する

包含（フィルタリング）と優先順位付け（並び替え）を区別します：

• 配置： 並び替えは結果エリアの右上または左上に、フィルターから分離して配置します。
• ラベル付け： 「価格」とだけ表示するのではなく、「並び替え：価格（安い順）」のように明確なラベルを使用します。

5. モバイル向け発見を計画する

• 発見トリガー： 画面の下部または上部に固定ボタン（例：「フィルター＆並び替え」）を使用します。
• ドロワーパターン： タッチターゲットサイズを最大化するために、フィルターを全画面またはボトムドロワーで開きます。
• 即時 vs バッチ： モバイルビューを即座に更新するか（ファセット型）、結果を適用するための「X件の結果を表示」ボタンを必要とするかを決定します。

決定ルール

• 「80/20」ルール： 任意のファセットについて、上位5つの値のみを表示し、残りは「もっと見る」リンクで表示します。
• サイドバー vs トップバー： ファセットリストが標準的なノートパソコン画面でスクロールを必要とする場合はサイドバーを使用します。1行に収まる場合はトップバーを使用します。
• 選択の永続性： 適用されたフィルターは、サイドバーからスクロールアウトされても表示されたままにする必要があります（例：固定チップバーを使用）。
• 空の状態のフォールバック： フィルターの組み合わせが行き止まりにならないようにし、常に「リセット」ボタンまたは代替案を提供します。

制約

• アクセシビリティ： すべてのフィルターコントロールには、可視のフォーカスリングが必要であり、キーボードで操作可能でなければなりません。折りたたみ可能なファセットにはaria-expanded、結果カウント/コンテナにはaria-live="polite"を使用して、スクリーンリーダーユーザーが結果の更新を認識できるようにします。
• レスポンシブ対応： フィルターは、水平オーバーフローやコンテンツグリッドの「圧迫」を避けるために、モバイルでは積み重なるかドロワーに移動しなければなりません。フィルターバーがサイドバーや埋め込みウィジェットなど複数のレイアウトコンテキストで表示される可能性がある場合は、ビューポートのブレークポイントよりもコンテナクエリを優先します。
• コントラスト： アクティブ/選択状態（例：チェックされたボックスや青いチップ）が、背景に対して3:1のコントラスト比を満たしていることを確認します。

よくある失敗パターン

• 「ミステリーフィルター」： 要約用のチップ/ピルバーがないため、ユーザーがどのフィルターがアクティブかわからない。
• 「無限サイドバー」： サイドバーが長すぎて管理が大変になる。多くの場合、長いリストに「もっと見る」を使用していないことが原因。
• モバイルへの詰め込み： デスクトップのサイドバーをそのままモバイルビューに押し込もうとし、結果グリッドが読みづらくなる。
• 「適用」フィードバックの欠如： フィルターを切り替えたときに、結果グリッドが視覚的に変更を示さない（変更が高速であっても）。
• 行き止まり： フィルターでアイテムがゼロになり、戻る方法が提供されていない。

検証基準

• フィルタリング（包含）と並び替え（優先順位付け）の間に明確な区別がある。
• アクティブフィルターが視覚的に要約されている（例：チップ/ピル）。
• 最も使用されるファセットはデフォルトで展開され、その他は折りたたみ可能である。
• 「すべてクリア」または「リセット」アクションが簡単にアクセスできる。
• システムがモバイル固有の発見パターン（例：ドロワー）を提供している。
• 結果が更新されるときのローディング状態（スケルトン/スピナー）が定義されている。
• すべてのコントロールがタッチターゲットサイズ（WCAG 2.2 SC 2.5.8 に基づく最小24x24px、推奨44x44px）とキーボードアクセシビリティ要件を満たしている。