2カラム FAQ グリッド
これは、よくある質問を左右 2 列のグリッドで並べた FAQ セクションです。 display:grid; grid-template-columns:1fr 1fr で 2 列に組み、各 Q&A をカードとして配置します。
このパーツの使いどころと実装ポイント
これは、よくある質問を左右 2 列のグリッドで並べた FAQ セクションです。display:grid; grid-template-columns:1fr 1fr で 2 列に組み、各 Q&A をカードとして配置します。アコーディオンのような開閉はなく、すべての質問と答えを常に表示しておくのが特徴で、回答を探す手間がかからない作りです。
向いている場面
質問数が 4〜8 個程度に収まるサービス紹介ページ、料金・納期・サポート範囲などをまとめて見せたいコーポレートサイト、申し込み前の不安を解消したい LP に向きます。答えが短く、ひと目で全体を見渡したいときに効果的です。
カスタマイズと注意
- 質問が多い場合はカテゴリで区切るか、開閉式（
details/summary）に切り替えると縦の圧迫を抑えられます - 回答が長いと左右でカードの高さがそろわず凸凹になります。文章量をそろえるか、整え方を工夫してください
- すでに
@media(max-width:600px)で 1 列に折り返す指定があり、スマホでも読みやすくなっています - 検索エンジン向けには FAQPage の構造化データ（JSON-LD）を併用すると、内容が理解されやすくなります
よくある質問
FAQ は開閉式と常時表示のどちらが良いですか
質問数や回答の長さによります。このパーツのように数が少なく答えが短いなら、常に全部見える 2 列表示が探しやすいです。質問が多い、または回答が長い場合は、details などの開閉式にして縦の長さを抑えるほうが快適です。
FAQ を検索結果に表示させるにはどうすればよいですか
見た目の HTML に加えて、FAQPage という構造化データを JSON-LD で記述すると、検索エンジンが質問と回答を理解しやすくなります。ただし表示されるかは検索エンジンの判断によるため、確実に出るとは限りません。