FAQアコーディオンセクション
よくある質問を アコーディオン形式で一問一答 にまとめた、単列レイアウトのFAQセクションです。各項目は質問ボタンと回答領域の組で、ボタンには aria-expanded を持たせて開閉状態を伝えます。質問には「Q」、回答には「A」のマークを添え、クリックで回答が開く定番の作りです。
このパーツの使いどころと実装ポイント
よくある質問をアコーディオン形式で一問一答にまとめた、単列レイアウトのFAQセクションです。各項目は質問ボタンと回答領域の組で、ボタンには aria-expanded を持たせて開閉状態を伝えます。質問には「Q」、回答には「A」のマークを添え、クリックで回答が開く定番の作りです。カテゴリタブのような切り替えは持たず、上から順に読めるシンプルな構成にしています。
向いている場面
- サービスサイトやLPの「よくある質問」セクション
- 商品・予約・料金など問い合わせが集中しがちな項目の先回り回答
- サポートページや導入前の不安解消パート
カスタマイズと注意
質問を追加するときは faq-item のブロックを複製し、質問文と回答文を書き換えます。回答が長い場合は段落を分けると読みやすくなります。アクセシビリティ面では、開閉に合わせて aria-expanded を true / false へ切り替えること、ボタンがキーボードのEnterやスペースで操作できることが重要です。SEOの観点では、FAQの内容を本文テキストとして持っておくと検索エンジンに読まれやすく、構造化データ（FAQPage）を併用すると検索結果にQ&Aが出る可能性があります。回答は質問に対して具体的に答え、定型文の使い回しは避けると価値が伝わります。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
アコーディオンのまま検索エンジンに内容は読まれますか？
回答テキストがHTML内に存在していれば、表示が閉じていても検索エンジンは内容を読み取れます。さらにFAQPageの構造化データを付与すると、検索結果にQ&Aが展開表示される場合があり、クリック前に情報を伝えられます。
質問項目を増やすにはどうしますか？
既存のfaq-itemブロックを複製し、質問文と回答文を書き換えるだけで追加できます。開閉ボタンのaria-expandedが正しく切り替わること、キーボードでも開閉できることを確認すると、誰にとっても使いやすくなります。