アコーディオン vs. タブ
アコーディオンはページ内のセクションを開き、複数を開いたままにできる場合があります。タブは一度に1つのセクションしか表示せず、共有スペースで管理します。
質問や人々が一緒に読む可能性のあるセクションにはアコーディオンを使用してください。一度に一つしか重要でない少数のビューにはタブを使用してください。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
アコーディオン
アコーディオンは、自身のコンテンツを開閉できる見出しを持つセクションを積み重ねます。
アコーディオン
アコーディオンは、自身のコンテンツを開閉できる見出しを持つセクションを積み重ねます。
次の場合に選択してください
それぞれ明確で別個の見出しを持つオプションのセクションに使用します。
FAQはまず質問を表示します。ページを離れずに回答を開くことができます。
- 以下の場合に使用します
- それぞれ明確で別個の見出しを持つオプションのセクションに使用します。
- 以下の場合は使用しないでください
- ページを見た目を整えるためだけに、短くて重要な情報を隠してはいけません。
- コードで使用する名前
<details><summary>
タブ
タブはラベルを使って、1つの共有パネル内のコンテンツを切り替えます。メインタスクは開いたままです。
概要、アクティビティ、および権限は、同じプロジェクトを開いたまま、下のパネルを変更します。
- 以下の場合に使用します
- ラベルを常に表示しておきたい同じレベルのセクションがいくつかある場合、タブを使用します。
- 以下の場合は使用しないでください
- 関連のないページへの小さなリンクとしてタブを使用してはいけません。
- コードで使用する名前
role="tablist"
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| アコーディオンAccordion | それぞれ明確で別個の見出しを持つオプションのセクションに使用します。 | ページを見た目を整えるためだけに、短くて重要な情報を隠してはいけません。 | <details><summary> |
| タブTabs | ラベルを常に表示しておきたい同じレベルのセクションがいくつかある場合、タブを使用します。 | 関連のないページへの小さなリンクとしてタブを使用してはいけません。 | role="tablist" |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをアコーディオン (Accordion)、タブ (Tabs)から選んでください。このルールを使用してください: アコーディオンはページ内のセクションを開き、複数を開いたままにできる場合があります。タブは一度に1つのセクションしか表示せず、共有スペースで管理します。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。