アコーディオン（概要）
アコーディオンは、同種のセクションが連続するとき、それらを折りたたんで一覧性を向上する目的で使用します。
ユースケース
- 同種のセクションが連続する際、それらを一覧として並べつつ、各コンテンツを折りたたみたいとき
- 「よくある質問」の質問文を一覧として並べつつ、それぞれの質問に対する回答を折りたたんで提示する
- 「更新履歴」の日付および概要を一覧として並べつつ、それぞれの更新日に対する詳しい内容を折りたたんで提示する
- 申請者の属性ごとに入力内容が異なる申請手続きで、属性ごとの個別説明を折りたたんで一覧として提示する
注意が必要なケース
- 表示領域をコンパクトにするためだけにアコーディオンを使ってはいけません
- ヘッダーの内容で概要が示されているなど、ボディの内容が追加や補足の情報になるといった合理的な理由がある場合だけ、アコーディオンを使うことができます。
- 内容が多くのユーザーにとって重要なときにアコーディオンを使っていけません
- 折りたたまれている内容のほうに重要な情報が含まれるような使い方をしないでください。原則として、重要な情報は最初から隠さずに表示するようにします。
- 独立した単一のセクションのみをアコーディオンにしてはいけません
- アコーディオンは同種のセクションが連続するときに使用するコンポーネントです。単一セクションのみが想定される箇所での使用は避けてください。ただし、通常複数セクションが想定されるページ構造であるものの、コンテンツ運用の途上において1セクションだけが表出する期間があるというような使用については許容されます。
- セクション内の一部を追加や補足の情報として折りたたむ時はディスクロージャーを使用してください
- アコーディオンはセクション全体を折りたたみ可能にするコンポーネントです。ヘッダー単体で必要な情報が提供されて、それへの追加や補足の情報をボディに折りたたんで格納するものであり、セクション内の一部を折りたたむものではありません。
関連コンポーネント
各種リソース
| 種別 | リソース | 状態 |
|---|---|---|
| デザイン | デザインデータ（Figma） | 提供中 |
| HTML版実装 | ソースコード（GitHub） | 提供中 |
| サンプル（Storybook） | 提供中 | |
| React版実装 | ソースコード（GitHub） | 提供中 |
| サンプル（Storybook） | 提供中 |