FAQセクション FAQ Section

よくある質問と回答をアコーディオン形式で表示する。サポートコスト削減に貢献。

使用場面: 製品ページ・料金ページ・ヘルプセンターのFAQセクション 採用例: Stripe, Notion

ライブデモ

よくある質問

はい、基本機能を無料でご利用いただけるフリープランをご用意しています。クレジットカードの登録は不要です。

ソースコード

<div class="demo-faq">
  <h2 class="demo-faq-heading">よくある質問</h2>
  <div class="demo-faq-list">
    <div class="demo-faq-item open">
      <button class="demo-faq-question" aria-expanded="true">
        <span>無料プランはありますか？</span>
        <span class="demo-faq-icon">&#9660;</span>
      </button>
      <div class="demo-faq-answer">
        <p>はい、基本機能を無料でご利用いただけるフリープランをご用意しています。クレジットカードの登録は不要です。</p>
      </div>
    </div>
    <div class="demo-faq-item">
      <button class="demo-faq-question" aria-expanded="false">
        <span>プランの変更はいつでも可能ですか？</span>
        <span class="demo-faq-icon">&#9654;</span>
      </button>
      <div class="demo-faq-answer" style="display:none;">
        <p>はい、管理画面からいつでもプランの変更が可能です。アップグレードは即座に反映され、ダウングレードは次回請求日から適用されます。</p>
      </div>
    </div>
    <div class="demo-faq-item">
      <button class="demo-faq-question" aria-expanded="false">
        <span>データの安全性はどう確保していますか？</span>
        <span class="demo-faq-icon">&#9654;</span>
      </button>
      <div class="demo-faq-answer" style="display:none;">
        <p>全データはAES-256で暗号化して保管。SOC 2 Type II認証取得済みで、定期的な脆弱性診断を実施しています。</p>
      </div>
    </div>
    <div class="demo-faq-item">
      <button class="demo-faq-question" aria-expanded="false">
        <span>解約後もデータにアクセスできますか？</span>
        <span class="demo-faq-icon">&#9654;</span>
      </button>
      <div class="demo-faq-answer" style="display:none;">
        <p>解約後30日間はデータのエクスポートが可能です。その後、全データは安全に削除されます。</p>
      </div>
    </div>
  </div>
</div>
.demo-faq { max-width: 100%; }
.demo-faq-heading {
  font-size: 20px; font-weight: 800; color: #333;
  text-align: center; margin: 0 0 20px;
}
.demo-faq-list {
  display: flex; flex-direction: column; gap: 8px;
}
.demo-faq-item {
  border-radius: 10px; overflow: hidden;
  border: 1px solid #e5e7eb;
  transition: border-color 0.2s;
}
.demo-faq-item.open {
  border-color: color-mix(in srgb, var(--ui-primary) 30%, transparent);
}
.demo-faq-question {
  width: 100%; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; padding: 14px 16px;
  background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #333;
  text-align: left; transition: background 0.2s;
}
.demo-faq-question:hover {
  background: color-mix(in srgb, var(--ui-primary) 4%, transparent);
}
.demo-faq-item.open .demo-faq-question {
  color: var(--ui-primary);
}
.demo-faq-icon {
  font-size: 10px; color: #ccc; flex-shrink: 0;
  transition: transform 0.3s, color 0.2s;
}
.demo-faq-item.open .demo-faq-icon {
  color: var(--ui-primary);
}
.demo-faq-answer {
  padding: 0 16px 14px;
}
.demo-faq-answer p {
  margin: 0; font-size: 13px; color: #666; line-height: 1.6;
}
document.querySelectorAll('.demo-faq-question').forEach(btn => {
  btn.addEventListener('click', function() {
    const item = this.closest('.demo-faq-item');
    const answer = item.querySelector('.demo-faq-answer');
    const icon = this.querySelector('.demo-faq-icon');
    const isOpen = item.classList.toggle('open');
    answer.style.display = isOpen ? 'block' : 'none';
    icon.innerHTML = isOpen ? '&#9660;' : '&#9654;';
    this.setAttribute('aria-expanded', isOpen);
  });
});

AIプロンプト

Basic 
FAQセクションをHTML/CSS/JSで作ってください。質問をクリックすると回答がアコーディオン形式で展開されます。
Custom 
以下の仕様でFAQセクションを実装してください。
- セクションタイトル＋アコーディオン式のQ&A
- 展開時にスムーズなアニメーション
- 開いている質問はアクセントカラーでハイライト
- プライマリカラー: #2563eb
- アイコンの回転アニメーション
- 一度に一つだけ展開モード
Advanced 
高機能なFAQセクションを実装してください。
- カテゴリタブでFAQをグループ分け
- テキスト検索・フィルタリング機能
- Schema.org FAQPage マークアップ（SEO対応）
- アニメーション（max-height transition）
- 深層リンク対応（URLハッシュで特定のFAQを開く）
- 「役に立ちましたか？」のフィードバックボタン
- アクセシビリティ（aria-expanded, role="region"）
← カタログに戻る