FAQ 初級

2カラムFAQ（カテゴリ見出し付き）

よくある質問をカテゴリごとに2カラムで並べた一覧型FAQ。スクロールで全体を見渡せるため、質問数が多くても探しやすいのが利点。料金・利用方法など見出しで整理して見せます。

#faq#grid#two-column#list

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk：SaaSの2カラムFAQ -->
<section class="fq2">
  <div class="fq2-inner">
    <h2 class="fq2-title">よくあるご質問</h2>
    <div class="fq2-cols">
      <div class="fq2-col">
        <p class="fq2-cat">料金・契約</p>
        <div class="fq2-qa"><p class="fq2-q">無料トライアルはありますか？</p><p class="fq2-a">14日間、全機能を無料でお試しいただけます。</p></div>
        <div class="fq2-qa"><p class="fq2-q">途中でプラン変更できますか？</p><p class="fq2-a">いつでも変更可能で、差額は日割り精算されます。</p></div>
        <div class="fq2-qa"><p class="fq2-q">請求書払いは可能ですか？</p><p class="fq2-a">年額プランで請求書払いに対応しています。</p></div>
      </div>
      <div class="fq2-col">
        <p class="fq2-cat">機能・運用</p>
        <div class="fq2-qa"><p class="fq2-q">既存データを移行できますか？</p><p class="fq2-a">CSVインポートと移行サポートをご用意しています。</p></div>
        <div class="fq2-qa"><p class="fq2-q">権限管理はできますか？</p><p class="fq2-a">閲覧／編集／管理の3権限と監査ログに対応します。</p></div>
        <div class="fq2-qa"><p class="fq2-q">外部ツールと連携できますか？</p><p class="fq2-a">Slack・Google・Webhook など100種以上と連携できます。</p></div>
      </div>
    </div>
  </div>
</section>

CSS

/* FlowDesk（SaaS）：2カラムFAQの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.fq2 { width: 100%; min-height: 380px; display: grid; place-content: center; padding: 30px 26px; background: #fff; }
.fq2-inner { width: min(760px, 94vw); }
.fq2-title { margin: 0 0 22px; font-size: 26px; font-weight: 800; color: #1f2547; text-align: center; }
.fq2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.fq2-cat { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #3b5bff; padding-bottom: 8px; border-bottom: 2px solid #eef1fc; }
.fq2-qa { padding: 11px 0; border-bottom: 1px solid #f0f2f8; }
.fq2-q { margin: 0 0 5px; font-size: 14px; font-weight: 700; color: #2a3050; position: relative; padding-left: 20px; }
.fq2-q::before { content: "Q"; position: absolute; left: 0; top: 0; color: #3b5bff; font-weight: 800; }
.fq2-a { margin: 0; font-size: 13px; line-height: 1.7; color: #5a6078; padding-left: 20px; }

@media (max-width: 600px) { .fq2-cols { grid-template-columns: 1fr; gap: 18px; } }

実装ガイド

使いどころ

質問数が多いサービスで、全体を見渡しながら探させたいときに。カテゴリ見出し付きの2カラム一覧型FAQです。

実装時の注意点

grid の2カラムでカテゴリごとにQ&Aを並べ、Qには擬似要素のラベルを付与。開閉のない静的一覧なので、スキャンしやすいのが特長です。狭幅では1カラムに畳みます。

対応ブラウザ

CSS grid・擬似要素は全モダンブラウザ対応。JS 不要です。

よくある失敗

回答が長いと一覧の見通しが悪くなるため簡潔に。カテゴリ間の項目数の偏りに注意（左右のバランス）。モバイルでは確実に1カラム化を。

応用例

アンカーリンクで目次化、アコーディオンとの併用（モバイルだけ折りたたみ）、カテゴリのタブ切替などに展開できます。

コード