FAQ 初級

アコーディオンFAQ（解決導線付き）

質問をクリックで開閉するFAQ。最下部に「解決しませんか？」のお問い合わせ導線を添えて、自己解決と有人サポートを両立します。サポートページやサービスサイトの定番レイアウトです。

#faq#accordion#support#help

ライブデモ

使用例（お題: カフェ MOON BREW）

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

HTML

<!-- MOON BREW：カフェのアコーディオンFAQ -->
<section class="fqa">
  <div class="fqa-inner">
    <p class="fqa-eyebrow">FAQ</p>
    <h2 class="fqa-title">よくあるご質問</h2>

    <div class="fqa-list" id="fqaList">
      <div class="fqa-item is-open">
        <button class="fqa-q" type="button" aria-expanded="true">豆の挽き方は選べますか？ <span class="fqa-ico" aria-hidden="true"></span></button>
        <div class="fqa-a"><p>はい。豆のまま／粗挽き〜極細まで5段階からお選びいただけます。注文時にご指定ください。</p></div>
      </div>
      <div class="fqa-item">
        <button class="fqa-q" type="button" aria-expanded="false">どのくらい日持ちしますか？ <span class="fqa-ico" aria-hidden="true"></span></button>
        <div class="fqa-a"><p>焙煎後3〜4週間が目安です。開封後はお早めに、密閉して冷暗所で保存してください。</p></div>
      </div>
      <div class="fqa-item">
        <button class="fqa-q" type="button" aria-expanded="false">ギフト対応はできますか？ <span class="fqa-ico" aria-hidden="true"></span></button>
        <div class="fqa-a"><p>のし・ラッピング・メッセージカードに対応しています。注文画面のギフト設定からどうぞ。</p></div>
      </div>
    </div>

    <div class="fqa-help">
      <span>解決しませんでしたか？</span>
      <button class="fqa-help__btn" type="button">お問い合わせ</button>
    </div>
  </div>
</section>

CSS

/* MOON BREW（カフェ）：アコーディオンFAQの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.fqa { width: 100%; min-height: 380px; display: grid; place-content: center; padding: 30px 26px; background: #f7f2e9; }
.fqa-inner { width: min(620px, 94vw); }
.fqa-eyebrow { margin: 0 0 6px; font-size: 11px; letter-spacing: .24em; font-weight: 700; color: #b07a3f; text-align: center; }
.fqa-title { margin: 0 0 20px; font-size: 26px; font-weight: 800; color: #4a3320; text-align: center; font-family: "Hiragino Mincho ProN", serif; }
.fqa-list { display: flex; flex-direction: column; gap: 10px; }
.fqa-item { background: #fffdf8; border: 1px solid #ece2d0; border-radius: 12px; overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; }
.fqa-item.is-open { border-color: #e0cba6; box-shadow: 0 12px 30px rgba(176,122,63,.1); }
.fqa-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: inherit; font-size: 14.5px; font-weight: 700; color: #4a3320; background: none; border: none; cursor: pointer; padding: 16px 18px; text-align: left; }
.fqa-ico { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.fqa-ico::before, .fqa-ico::after { content: ""; position: absolute; background: #b07a3f; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.fqa-ico::before { left: 0; right: 0; top: 7px; height: 2px; }
.fqa-ico::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.fqa-item.is-open .fqa-ico::after { transform: scaleY(0); opacity: 0; }
.fqa-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.fqa-item.is-open .fqa-a { max-height: 160px; }
.fqa-a p { margin: 0; padding: 0 18px 18px; font-size: 13.5px; line-height: 1.8; color: #6a5742; }
.fqa-help { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px dashed #ddd0bd; font-size: 13.5px; color: #8a715a; }
.fqa-help__btn { font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #b07a3f, #7a4f2a); border: none; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.fqa-help__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) { .fqa-item, .fqa-a, .fqa-ico::before, .fqa-ico::after, .fqa-help__btn { transition: none; } }

JavaScript

// （デモと同じフックを流用）質問の開閉（1つずつ）＋自動巡回
(() => {
  const list = document.getElementById('fqaList');
  if (!list) return;
  const items = [...list.querySelectorAll('.fqa-item')];
  const toggle = (item, open) => { item.classList.toggle('is-open', open); const q = item.querySelector('.fqa-q'); if (q) q.setAttribute('aria-expanded', open ? 'true' : 'false'); };
  let auto = !matchMedia('(prefers-reduced-motion: reduce)').matches;
  items.forEach(item => item.querySelector('.fqa-q').addEventListener('click', () => {
    auto = false;
    const open = !item.classList.contains('is-open');
    items.forEach(i => toggle(i, i === item ? open : false));
  }));
  if (auto) {
    let i = 0;
    const tick = () => { if (!auto) return; items.forEach((it, idx) => toggle(it, idx === i)); i = (i + 1) % items.length; setTimeout(tick, 2400); };
    setTimeout(tick, 2200);
  }
})();

実装ガイド

使いどころ

サポートページやサービスサイトのFAQに。質問をクリックで開閉し、最下部に問い合わせ導線を添えて自己解決と有人サポートを両立します。

実装時の注意点

各質問は max-height のトランジションで開閉、＋/− アイコンは擬似要素で切替。1つ開くと他を閉じる排他制御にしています。JS は開閉とプレビュー用の自動巡回のみ。

対応ブラウザ

max-height トランジション・擬似要素は全モダンブラウザ対応。

よくある失敗

max-height は回答の高さを上回る値が必要（grid-template-rows:0fr→1fr も選択肢）。aria-expanded を同期し、見出しは button にしてキーボード操作可能に。回答が長い場合のスクロールにも配慮します。SEO目的なら FAQPage 構造化データの付与が有効です。

応用例

複数同時オープン、カテゴリ分け、URLハッシュで特定質問を開く、検索ボックス併設などに展開できます。

コード