【UIパーツ大全】アコーディオン[accordion]参考パーツ一覧

WebサイトやアプリケーションのUI設計において、アコーディオンパーツ（accordion）は情報をコンパクトに整理するための重要な要素です。本記事ではアコーディオンの基本構造から、よく使われるデザインパターン、実装のポイント、そして具体的なUIパーツの種類を詳しく紹介します。これを読めば自分のプロジェクトに合ったアコーディオンの選定と実装がスムーズになるはずです。

アコーディオンとは？

アコーディオンパーツとはクリックやタップなどのユーザー操作によって、特定のコンテンツが展開・折りたたまれるUIコンポーネントのことです。限られたスペースに大量の情報を収納できるため、FAQや設定画面、ナビゲーションメニューなどで頻繁に使われます。

主なメリット

• 情報の視認性が高まる
• ページ全体の長さを短縮できる
• モバイルフレンドリーな設計が可能
• インタラクティブ性が高まりUX向上

アコーディオンの基本構造

アコーディオンの基本構造は以下のようなHTML要素で構成されます。

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header">タイトル1</button>
    <div class="accordion-content">コンテンツ1</div>
  </div>
  <!-- 以下、必要に応じて繰り返し -->
</div>

JavaScriptでクリックイベントをトリガーとして.accordion-contentの表示/非表示を切り替えるのが一般的な実装です。

よく使われるアコーディオンのパターン

1. 単一展開タイプ

一度に1つのセクションだけが展開されるタイプ。展開中のセクションを開くと、他のセクションが自動的に閉じられます。FAQセクションによく使われます。

2. 複数展開タイプ

複数のセクションを同時に開くことが可能。設定画面や管理ツールなど、比較的自由な操作が求められる場面で有効です。

3. ステップ式アコーディオン

ステップごとに入力や確認を求めるフロー形式のUI。フォームやアンケート、申し込み画面などで使用されます。

4. アイコン付きアコーディオン

開閉時にアイコン（例：+ / -）を動的に切り替えて、視覚的に状態を示します。ユーザーに直感的な操作感を提供します。

5. 水平方向アコーディオン

縦ではなく横方向に展開されるアコーディオン。画像やビジュアルを多用するポートフォリオサイトなどで使用されます。

デザインとUXのポイント

一貫性を保つ

アコーディオンの開閉動作やトランジションのアニメーションは、全セクションで統一させるのが望ましいです。不規則な動きはユーザーに混乱を与える原因になります。

状態の視認性

開いているか閉じているかを一目で判別できるよう、アイコンや色、アニメーションを工夫しましょう。

アクセシビリティへの配慮

ARIA属性（aria-expandedやaria-controlsなど）を適切に設定し、スクリーンリーダー利用者にも配慮した設計を心がけます。

モバイル最適化

タップしやすいサイズ、十分なマージンやパディング、スムーズなアニメーションを取り入れ、スマホでもストレスなく操作できるようにします。

アコーディオンUIパーツの具体例

1. Bootstrap Accordion

Bootstrapでは組み込みのクラスとJavaScriptで手軽にアコーディオンを実装できます。

<div class="accordion" id="exampleAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        セクション1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">内容1</div>
    </div>
  </div>
</div>

2. Material UI Accordion (React)

Material UIではReactコンポーネントとして提供されており、アクセシビリティやアニメーションが標準で組み込まれています。

<Accordion>
  <AccordionSummary expandIcon={<ExpandMoreIcon />}>
    セクション1
  </AccordionSummary>
  <AccordionDetails>
    内容1
  </AccordionDetails>
</Accordion>

3. Tailwind CSS + Headless UI

スタイルとロジックを分離した実装が可能で、デザインの自由度が高いのが特徴です。

4. jQuery UI Accordion

古くからあるライブラリですが、今でもレガシーなプロジェクトでは使用されています。

5. カスタムアコーディオン（Vanilla JS）

完全にオリジナルの見た目と挙動を作りたい場合は、HTML/CSS/JavaScriptを組み合わせて独自実装します。

まとめ

アコーディオンパーツは情報を整理しユーザーの操作性を高めるための強力なUIコンポーネントです。種類や実装方法も多岐にわたるため、用途に応じて最適なタイプを選びましょう。しっかり設計されたアコーディオンはUXを大きく向上させ、サイト全体の印象を左右します。自分のプロジェクトにぴったりなアコーディオンを選び、より洗練されたUIを目指してください。