Accordion

Accordion コンポーネントを使用すると、ユーザーは垂直スタックのコンテンツを段階的に表示できます。通常、これは Expansion Panel のリストで構成されており、各項目を展開または縮小することで、その内容を表示または非表示にすることができます。Accordion は、多くの場合、コンパクトなスペースで大量の情報を管理し、ユーザーが特定の情報に集中できるようにするために使用されます。Accordion は、Ignite UI for Angular Accordion コンポーネントと視覚的に同じものです。

Accordion のデモ

Figma と Sketch で Accordion を使用する方法

Accordion には 5 つのパネルが付属しています。各パネルは上マージンと下マージンで構成され、ブール演算でオン/オフできます。ネストされた展開パネルに移動すると、その内容を変更できます。より多くの展開パネルを備えた Accordion を設計する必要がある場合、それを行う最も簡単な方法は、コンポーネントをデタッチすることです。コンポーネントをデタッチするには、ワークスペース (Frame または Artboard) に配置する必要があります。それを右クリックするとコンテキストメニューが開き、Detach Instance (Sketch では Detach from Symbol) を選択します。

コンポーネントをデタッチした後、既存の展開パネルを複製して追加の展開パネルを追加できます。Figma では、Auto Layout によりサイズが自動で調整されます。Sketch では、追加された展開パネルの位置を手動で調整する必要があります。

Adobe XD で Accordion を使用

Note

対応状況: 現在、Adobe XD では Accordion コンポーネントはサポートされていませんが、複数の Expansion Panel を組み合わせて同様の Accordion コンポーネントの動作を行うこともできます。ただし、これは App Builder では適切に生成されません。

Expansion Panel の状態

拡張パネルには Disabled 状態と Expanded 状態があり、選択した Expansion Panel に対してオンとオフを切り替えることができます。Expansion Panel を参照してください。

Figma では、Expanded プロパティを使用して、要件に応じてパネルの状態を構成できます。さらに、Layers パネルのパネル階層と展開されているパネルに基づいて、ブール値プロパティから上下マージンを有効にして、デザインにスペースを追加できます。Sketch には、パネルの展開状態とそのマージンをカバーする定義済みの Single Branch Expanded シンボルがあります。

スタイル設定

Accordion コンポーネントは、カスタマイズのためのさまざまなオプションを使用して、スタイル設定の柔軟性を提供します。Header と Body の背景色を変更したり、テキストの色と太さを変更したりできます。さらに、アイコンの色とタイプをカスタマイズできます。

使用方法

Accordion を使用して情報をまとめている場合は、重要でない情報のみを中に入れてください。たとえば、製品ページでは、通常、Accordion の中に価格やブランド名を入れません。ただし、サイズガイド、配送に関する質問、および製品資料を 1 つの中に入れます。

さらに、単一のページまたは画面に簡単に表示できる少量のコンテンツにはアコーディオンを使用しないでください。また、アコーディオンセクションが多すぎたり、各セクション内のコンテンツが多すぎたりしてユーザーに過負荷を与えないようにしてください。

良い例	悪い例