アコーディオンのUIデザイン
アコーディオン（見出しを押すと中身が開く部品）のUIデザインを、設計パターンとして整理したページです。
1つずつ開くのか、まとめて開けるようにするのか、階層を持たせるのか、閉じたままでも中身の要点を見せるのかによって、向いている型が変わります。
閉じた中身もページ内検索で見つかるようにし、判断に欠かせない情報を隠さないための型をまとめています。
6 patterns
アコーディオンの型の一覧
-
排他型 アコーディオン
1つの項目を開くと、ほかの開いている項目が自動で閉じるアコーディオンです。
-
全開閉つき型 アコーディオン
アコーディオンの上に「すべて開く」「すべて閉じる」のボタンを置き、項目をまとめて開閉できるようにする設計です。
-
入れ子型 アコーディオン
大きな分類を開くと、その中にさらに開閉できる項目が並ぶ、2段のアコーディオンです。
-
要約表示型 アコーディオン
閉じた状態でも、見出しの右に今選んでいる内容（例：配送方法「通常配送」）を表示し、変えたい項目だけを開いて変更するアコーディオンです。
-
カード型 アコーディオン
項目を1つずつ枠で囲んだカードにし、閉じた状態でもアイコンと1行の説明を見せるアコーディオンです。
-
本文折りたたみ型 アコーディオン
長い文章の最初の数段落だけを見せ、残りを「続きを読む」で開くアコーディオンです。