検索付きFAQアコーディオン

このパーツの使いどころと実装ポイント

キーワード検索でリアルタイムに絞り込めるFAQアコーディオンです。各質問は details と summary 要素で組まれており、JavaScriptなしでも開閉が成立する堅牢な構造になっています。各項目には data-q 属性でキーワードを持たせ、上部の type="search" 入力欄に文字を打つと、一致しない項目を即座に非表示にする仕組みです。

向いている場面

項目数の多いサポートページ、ECの購入前疑問の解消、サービスサイトのよくある質問など、ユーザーが目的の答えに早くたどり着きたい場面に適します。質問が10件を超えるような長いFAQで、検索による絞り込みが特に効果を発揮します。

カスタマイズと注意点

• 項目を増やすときは details ブロックを複製し、summary に質問、本文に回答を入れ、data-q に検索に引っかけたい同義語（例：費用 料金 見積もり）を並べておくと検索精度が上がります。
• details ベースなのでJSが無効でも開閉できるのが利点です。検索機能だけがJSに依存します。
• 質問文をそのまま見出しに使うと検索エンジンにも内容が伝わりやすく、構造化データ（FAQ）にも転用しやすくなります。回答は簡潔にまとめましょう。

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。