検索 + カテゴリタブ FAQ
検索+カテゴリタブFAQは、検索バーとカテゴリの絞り込みタブを組み合わせた高機能なよくある質問セクションです。上部に角丸の <input type="search"> を置き、その下に「すべて／料金／使い方」などのタブを <button> で並べています。
このパーツの使いどころと実装ポイント
検索+カテゴリタブFAQは、検索バーとカテゴリの絞り込みタブを組み合わせた高機能なよくある質問セクションです。上部に角丸の <input type="search"> を置き、その下に「すべて／料金／使い方」などのタブを <button> で並べています。選択中のタブには is-act を付け、キーワード検索とカテゴリの二段構えで目的の回答へ素早く近づける設計です。
向いている場面
- 質問数が多いSaaSやアプリのサポートページ
- 料金・使い方・解約など話題が分かれるヘルプセンター
- 問い合わせを減らしたい自己解決型のFAQ
固有の勘所は、タブの分類を実際の質問の偏りに合わせること。件数の多い話題からタブを並べると探しやすくなります。検索は質問文だけでなく回答本文も対象にすると、言い回しが違っても見つかりやすくなります。
実装上の注意
質問が少ないうちは検索とタブを両方出すと過剰になることもあるため、件数に応じて表示を調整します。タブは <button> なのでキーボードで操作でき、絞り込み後に該当件数を出すと現在の状態が分かりやすくなります。スマートフォンではタブが折り返すので、flex-wrap が効いている前提で横スクロールか2段表示のどちらが良いか実機で確認します。
よくある質問
検索とカテゴリタブはどう使い分けますか
ざっくり話題で絞るならタブ、具体的な単語で一気に探すなら検索が向きます。両方を併用でき、まずタブで料金関連に絞ってから検索で言葉を入れる、といった組み合わせも有効です。
質問が少ない場合でも使えますか
使えますが、件数が10件未満程度なら検索やタブはかえって過剰に感じられることがあります。質問が増えてきたタイミングで導入するか、最初はタブだけにするなど段階的に足すのがおすすめです。