検索付き FAQ ヘッダー
「検索付き FAQ ヘッダー」は、ヘルプセンターの上部に置く見出し・検索ボックス・カテゴリリンクをまとめたパーツです。検索欄は display:flex で入力欄とボタンを横並びにし、 border-radius:9999px で角を完全に丸めた丸ピル型にしています。
このパーツの使いどころと実装ポイント
「検索付き FAQ ヘッダー」は、ヘルプセンターの上部に置く見出し・検索ボックス・カテゴリリンクをまとめたパーツです。検索欄は display:flex で入力欄とボタンを横並びにし、border-radius:9999px で角を完全に丸めた丸ピル型にしています。薄いクリーム色から白へのグラデーション背景がやわらかな印象を作り、ユーザーが「まず探す」行動に入りやすい導線です。
向いている場面
FAQ が多い SaaS やサブスクサービスのサポートページ、オンラインショップのヘルプ、社内向けナレッジベースの入口などに向きます。質問数が多いほど、一覧の前に検索とカテゴリを置く価値が高まります。
カスタマイズと実装の注意
- 検索を実際に動かすには、入力欄の値を受け取って絞り込む処理や検索サービスとの連携が別途必要です。このパーツは入口の見た目を担います。
- カテゴリの
aはhrefを持たないので、各カテゴリページへのリンクを付けると回遊性が上がります。 - 入力欄には
labelを関連付け、ボタンには検索を表す明確なテキストを置くと、アクセシビリティと SEO の両面で読み取りやすくなります。
よくある質問
検索ボックスは入力した質問を実際に検索してくれますか？
このパーツは見た目のテンプレートで、検索処理自体は含まれていません。入力値を受け取って記事を絞り込むスクリプトや、サイト内検索サービスと連携させることで実際に動くようになります。
カテゴリのリンク先はどう設定しますか？
カテゴリのaタグにhref属性を追加し、各カテゴリの一覧ページのURLを指定します。リンク先を整えると利用者が目的の質問にたどり着きやすくなります。