アコーディオン
Figmaに未定義（参考実装）
コンテンツを折りたたみ可能なセクションに整理するコンポーネント
基本的なアコーディオン
シンプルな折りたたみ式のアコーディオン。単一選択モードでは、一度に1つのアイテムのみ開きます。
アコーディオンは、コンテンツを折りたたみ可能なセクションに整理するUIパターンです。ユーザーが必要な情報だけを展開して閲覧できるため、画面スペースを効率的に使用できます。
FAQ、設定画面、長いフォーム、サイドバーナビゲーションなど、情報を階層的に整理したい場合に使用します。ユーザーが一度にすべての情報を必要としない場合に特に有効です。
キーボード操作（Enter/Spaceで開閉、矢印キーで移動）、適切なARIA属性（aria-expanded、aria-controls）、フォーカス管理が重要です。
複数選択アコーディオン
複数のアイテムを同時に開くことができるアコーディオン。
アコーディオンは、コンテンツを折りたたみ可能なセクションに整理するUIパターンです。ユーザーが必要な情報だけを展開して閲覧できるため、画面スペースを効率的に使用できます。
FAQ、設定画面、長いフォーム、サイドバーナビゲーションなど、情報を階層的に整理したい場合に使用します。ユーザーが一度にすべての情報を必要としない場合に特に有効です。
キーボード操作（Enter/Spaceで開閉、矢印キーで移動）、適切なARIA属性（aria-expanded、aria-controls）、フォーカス管理が重要です。
プラス/マイナスアイコン
展開状態を+/-アイコンで示すバリエーション。
アコーディオンは、コンテンツを折りたたみ可能なセクションに整理するUIパターンです。ユーザーが必要な情報だけを展開して閲覧できるため、画面スペースを効率的に使用できます。
FAQ、設定画面、長いフォーム、サイドバーナビゲーションなど、情報を階層的に整理したい場合に使用します。ユーザーが一度にすべての情報を必要としない場合に特に有効です。
キーボード操作（Enter/Spaceで開閉、矢印キーで移動）、適切なARIA属性（aria-expanded、aria-controls）、フォーカス管理が重要です。
分離スタイル
各アイテムが独立したカードとして表示されるスタイル。
アコーディオンは、コンテンツを折りたたみ可能なセクションに整理するUIパターンです。ユーザーが必要な情報だけを展開して閲覧できるため、画面スペースを効率的に使用できます。
FAQ、設定画面、長いフォーム、サイドバーナビゲーションなど、情報を階層的に整理したい場合に使用します。ユーザーが一度にすべての情報を必要としない場合に特に有効です。
キーボード操作（Enter/Spaceで開閉、矢印キーで移動）、適切なARIA属性（aria-expanded、aria-controls）、フォーカス管理が重要です。
DOs
- 明確で簡潔なタイトルを使用する
- 関連するコンテンツをグループ化する
- 重要な情報はデフォルトで開いた状態にする
- キーボード操作をサポートする
DON'Ts
- 深くネストされたアコーディオンを使用しない
- 重要なアクションをアコーディオン内に隠さない
- アコーディオン内に長すぎるコンテンツを入れない
- 開閉状態が分かりにくいアイコンを使用しない