Accordion

クリックで開閉するコンテンツパネル。FAQ・利用規約・詳細設定など、必要なときだけ読む情報を折りたたんで提供するときに使う。

インストール

npx shoji add accordion

プレビュー

使用例

パターン

Default

標準的な FAQ / 情報整理に使う、余白と区切り線だけのプレーンなパターン。

accordion
FAQbaseline

Support FAQ

問い合わせ前に読みたい質問をまとめる、先頭項目を開いた状態のサポート向けパターン。

accordion --pattern support-faq
supportopen-first

法人のお客様は請求書払いを利用できます。購入前に会社名・担当者名・希望プランを添えてお問い合わせください。

Bordered

設定画面や管理画面でセクション境界を明確にしたいときの bordered パターン。

accordion --pattern bordered
settingsbordered

Compact

サイドバーや小さな余白の中で補足情報を畳むための compact パターン。

accordion --pattern compact
sidebarcompact

使い方

こんなときに使う

  • FAQ・よくある質問のリスト
  • 詳細設定・詳細フィルターなど補助的な情報の折りたたみ
  • 複数セクションを比較しながら開閉できるようにしたいとき

使わないほうがいい場面

  • 重要な情報を折りたたむ（必ず読んでほしい情報は常時表示する）
  • 1つのセクションだけを折りたたむ（Collapsible のほうが適切）
  • アコーディオンをデフォルト全閉で表示する（何があるか分からなくなる）

JP 最適化のポイント

  • 日本語の FAQ は回答が長くなりやすい — Accordion を開いたとき縦スクロールが必要にならないよう、1項目あたりの回答を簡潔にする
  • 「よくある質問」セクションには AccordionItem の trigger にキーワードを含めると日本語検索でも見つかりやすい