開くデザインデータ開くデザインデータ(Figma)の作り方デザインデータ(Figma)の更新をライブラリに適用する手順デザインレビューリソースAccordionPanel表示したい要素を展開して表示したり、折りたたんで隠したりするためのコンポーネントです。補足的な情報を折りたたんで画面をシンプルに保つことで、情報量が増えてもユーザーが重要な情報にたどりつきやすくなります。ページの要素が多くスクロールが生じる画面において、まず見出しだけを表示してユーザーに全体像を把握させたい場合にも使用できます。注意AccordionPanelを乱用しないAccordionPanelを使用することで、スペースを省略しつつ画面内に多くの要素を配置できるようになりますが、多用しすぎると1画面の情報量が増えユーザーの使いづらさに繋がります。画面内の情報量や粒度、構造が適切かどうかを精査してAccordionPanelを使用してください。ModelessDialogとの使い分けモードレスに情報を表示したい場合、AccordionPanelの代替としてModelessDialogを使用できます。「ヘルプページを参照しながら別の操作を行なう」といったケースでは、画面のスクロールに依存しないModelessDialogを使用してヘルプページを表示するほうが適切です。開閉する機能をアイコンによって認識しやすくするため、デフォルトは見出しの左にアイコンを配置しています。よってアイコンの位置を左または右に指定できますが、アイコンと見出しの位置が離れAccordionPanelとして認識しづらくなるため、右に配置するのは非推奨です。デフォルトの開閉状態デフォルトの開閉状態は、画面が利用される場面や、中に含まれる情報の重要度によって異なります。ユーザーの操作や閲覧が必ず必要な、重要性の高い情報を隠さないように注意してください。デフォルトで閉じる場合は、以下のような使い方が一般的です。状態マウスオーバーAccordionPanelItemに触れている状態(hover状態)のスタイルです。アイコンや見出しを含む行全体が操作対象です。マウスオーバーを認知できるように、標準時の背景色にOVERLAYを重ねて表現しています。アイコンを90度回転して展開を表現しています。アイコンを180度回転して展開を表現しています。場合、1つのリストを展開するとすでに展開している別のリストが同時に閉じますが、ユーザーが予測・意図していない動きが発生することにつながるため非推奨です。