クリーンFAQアコーディオン
左ボーダーアクセントスタイルのFAQアコーディオン。開閉アニメーション付き。複数同時展開可能。schema.orgマークアップ対応可能な構造。
このパーツの使いどころと実装ポイント
これは、左ボーダーをアクセントにしたFAQアコーディオンです。マークアップは定義リスト（dl／dt／dd）を使い、質問が dt、回答が dd という意味的に正しい構造になっています。各項目は data-faq 属性を持ち、JavaScript で is-open クラスを付け外しして開閉します。開いた項目は左ボーダーの色が変わり、複数を同時に展開できるのが特徴です。schema.org の FAQPage 構造化データに対応しやすい構造で、JSON-LD を併記すれば検索結果でのリッチリザルト表示も狙えます。
向いている場面
- サービスサイトの「よくある質問」、料金や納期への疑問解消
- ECサイトの返品・送料・配送に関するFAQ
- 採用ページの応募条件Q&A、サポートページのトラブル対処集
カスタマイズと注意点
項目は __item ブロックを複製して増やすだけで拡張できます。左ボーダーの色（is-open 時の border-left-color）を変えるとブランドカラーに合わせられます。アクセシビリティ面では、開閉ボタンに aria-expanded を付け、キーボード操作（Enter/Space）でも開閉できるようにすると、よりインクルーシブになります。質問文は実際に多い疑問を選び、回答は冗長にせず要点を先に書くのが読みやすさのコツです。複数同時展開を許可しているので、関連する質問をまとめて読めるのが利点です。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
このFAQは検索結果のリッチリザルトに対応できますか？
対応しやすい構造です。質問をdt、回答をddとする定義リストで組まれているため、同じ内容をschema.orgのFAQPage形式でJSON-LDとしてページに併記すれば、Googleがよくある質問として認識し、検索結果に質問と回答が展開表示される可能性が高まります。
複数のFAQを同時に開いたままにできますか？
できます。このアコーディオンは、ひとつ開くと他が閉じる排他制御ではなく、各項目を独立して開閉する仕様です。そのため利用者は気になる質問をいくつも開いたまま読み比べられます。逆に同時に1つだけ開く挙動にしたい場合は、開く際に他項目のis-openクラスを外す処理を加えてください。