アコーディオンUIシステム は何をしますか？
目的
アコーディオンUIシステムスキルは、積み重ねられたヘッダーを展開して関連コンテンツを表示するアコーディオンの設計と構造化のための方法論を提供します。このパターンはプログレッシブ・ディスクロージャー（段階的な情報開示）に不可欠であり、ユーザーが高レベルの情報をざっと見て、どの詳細を読むかを選択できるようにします。アコーディオンへの体系的なアプローチは、重要な情報を隠したりアクセシビリティの障壁を作ったりすることなく、認知負荷を低減します。
ユースケース
- FAQセクション： 長い質問と回答のリストをスキャン可能なリストに整理する。
- モバイルメニュー： セカンダリナビゲーション項目を折りたたんで縦方向のスペースを節約する。
- 複雑なフォーム： 関連するフォームフィールドを管理可能なトグル可能なセクションにグループ化する。
- 商品詳細： Eコマースページで技術仕様、配送情報、レビューなどを非表示にする。
- フィルタリング： ディスカバリーサイドバーで複数のファセットグループを管理する。
使用すべきでない場合
- コンテンツ量が少ない場合： コンテンツ全体が短い場合、クリックで隠すと不必要なインタラクションコストが発生します。
- 重要な手順： ユーザーが先に進むために情報を必ず読まなければならない場合（例：法的警告や「使い方」の手順）、非表示にしてはいけません。
- 検索主体のページ： ユーザーがブラウザの「検索」（Cmd/Ctrl+F）を頻繁に使用する場合；デフォルトでは非表示のアコーディオンコンテンツは検索できないことが多いためです。
- 単一アイテムの開示： トグルするコンテンツが1つだけの場合は、単純な「もっと見る」リンクまたは単一の開示コンポーネントを使用します。
入力
- コンテンツインベントリ： ヘッダーとそれに対応する展開コンテンツのリスト。
- 展開ロジック： 一度に1つのアイテムのみ開く（排他的）か、複数開くことができるか。
- トリガーのコンテキスト： アコーディオンはどこに配置されるか？（例：メインコンテンツエリア、サイドバー、モバイルドロワー）
- 既存システム： 親デザインシステムからの流体スペーシングとタイポグラフィスケール。
出力
- アコーディオン構造仕様： ヘッダー、アイコン、パネル、スペーシングの視覚的定義。
- インタラクション仕様： 展開、フォーカス状態、トランジションの動作。
- アクセシビリティ設計書： ARIAロール、状態、キーボードマッピング。
- レスポンシブ戦略： アコーディオンが狭いビューポートに適応するためのルール。
ワークフロー
1. コンテンツの構造を定義する
アコーディオン項目の標準パーツを定義します：
- ヘッダー（トリガー）： タイトルを含むクリック可能な領域。
- アイコン（アフォーダンス）： 通常は開閉を示すシェブロンまたはプラス/マイナス記号。
- パネル： 非表示コンテンツを保持するコンテナ。
- グループ： 複数項目間の関係を管理する親コンテナ。
2. 視覚的アフォーダンスを確立する
visual-hierarchy-system を適用してアコーディオンが認識可能であることを確保します：
- 状態インジケーター： アコーディオンが開いたときに回転または変化するアイコン（シェブロン）を使用します。
- 区切り： ボーダー、背景色の変化、または (
fluid-spacing-systemからの）垂直スペーシングを使用して項目を区別します。 - ヘッダー： ヘッダーテキストがインタラクティブに見えるようにします（太字または異なる色）。
3. インタラクションロジックを定義する
動作パターンを選択します：
- 排他的（単一開く）： 1つのアイテムを開くと、他のアイテムが自動的に閉じる。フォーカスとページ長の削減に最適。
- 複数開く： 複数のアイテムを開いたままにできる。セクション間で情報を比較する必要がある場合に最適。
- デフォルト状態： 機能を示すために最初のアイテムをデフォルトで開いておくかを決定します。
4. スペーシングとコンテンツを最適化する
内部に fluid-spacing-system を適用します：
- ヘッダーのパディング： タッチターゲットが少なくとも 24x24px（WCAG 2.2 SC 2.5.8 最小）であることを確認し、レイアウトが許す場合は快適なタッチ使用のために 44x44px を推奨します。
- パネルのパディング： 内部パディングを使用して、ヘッダーとそのコンテンツの間に明確な関係を作成します。
- トランジション： コンテンツが現れるときの「ジャンプ」を和らげるために、微妙な高さまたは不透明度のトランジション（200〜300ms）を使用します。
5. アクセシビリティとレスポンシブ対応を検証する
- キーボード： ユーザーは
Tabでヘッダーに移動し、Enter/Spaceでトグルできなければなりません（ARIA APG アコーディオンパターンに従う）。 - ARIA： 各トリガーを見出し要素（
<h3><button aria-expanded="true/false" aria-controls="panel-id">...</button></h3>）でラップし、パネルにrole="region"を与え、パネルに重要なコンテンツが含まれる場合はaria-labelledbyでトリガーを指すようにします。 - モバイル： 長いヘッダーが適切に折り返され、アイコンと重ならないようにします。
決定ルール
- シェブロンルール： ヘッダーの右側に常に視覚的なインジケーター（シェブロンなど）を含めます。閉じているときは下向き、開いているときは上向きにします。
- 最初のアイテムルール： 最初のアコーディオン項目に最も重要な情報または最もリクエストの多い情報が含まれている場合は、デフォルトで開いておきます。
- テキスト切り捨て禁止： アコーディオンのヘッダーを切り詰めてはいけません。タイトルが長い場合は、複数行に折り返して明確さを確保します。
- 配置： 展開/折りたたみトリガーアイコンの配置を一貫させ（通常は右端に揃える）、予測可能なスキャンパスを作成します。
制約
- アクセシビリティ： ヘッダーはキーボードアクセスのために
<button>を含むセマンティックな見出しタグ（H2-H4）を使用しなければなりません；WCAG 2.2 SC 2.5.8 の最小ターゲットサイズ（24x24px）を満たします。 - レスポンシブ対応： アコーディオンの幅は流体（親要素の100%）でなければなりません。パネルコンテンツは完全にレスポンシブである必要があります。
- 階層： アコーディオンのヘッダーは、ページのH1よりも視覚的に目立ってはいけません。
一般的な失敗パターン
- ミステリーミートトリガー： アコーディオンのヘッダーがプレーンテキストのように見え、ユーザーがクリックできることに気づかない。
- コンテンツの飛び跳ね： 速くてぎくしゃくしたトランジションがユーザーのスクロール位置を混乱させる。
- フォーカス状態の欠落： キーボードユーザー向けの可視フォーカスリングの設計忘れ。
- 過密パネル： パネル内に他のアコーディオンのような複雑なインタラクティブコンテンツを入れすぎて、「ネストされたインセプション」状態になる。
- アクセス不能なARIA：
aria-expanded状態をプログラムで更新し忘れる。
検証基準
- すべてのアコーディオン項目に明確な視覚的インジケーター（例：シェブロン）がある。
- ヘッダーがキーボードでアクセス可能（ボタンベース）であり、可視フォーカス状態がある。
-
aria-expandedとaria-controlsが正しく定義されている。 - 内部のスペーシングが流体スペーシングシステムに従っている。
- 排他的/複数開くロジックがコンテンツタイプに適切である。
- アコーディオンがレイアウトを壊さずにスムーズに遷移する。
- タッチターゲットがWCAG 2.2の最小24x24px（44x44px推奨）を満たしている。