アコーディオンメニュー完全ガイド｜HTMLとCSSで作る美しいUI設計

はじめに

情報が多層に積み重なる Web ページでは、閲覧者が迷子にならないための工夫が欠かせません。
アコーディオンメニューは、限られたスペースで情報を整理し、ユーザーが必要な部分だけを展開できる優れた UI コンポーネントです。

本記事では、HTML と CSS による実装方法から、UI 設計の観点、アクセシビリティ、レスポンシブ対応までを体系的に解説します。

アコーディオンメニューの基礎理解

アコーディオンとは

アコーディオンメニューとはクリックまたはタップ操作によってコンテンツを開閉できる UI コンポーネントです。

限られた領域に情報を整理でき、特に FAQ・メニュー・設定項目などで活用される場合が多いです。

特に、スマホでスペースが限られる画面や、初見ユーザーにとって情報量が多いページでは効果を発揮します。

UI としての役割

アコーディオンの役割は 「情報の階層整理」 と 「ユーザーの判断負荷の削減」 です。

常に全情報を表示するわけではなく、必要な部分だけを展開できることで、視認性を向上させます。

HTML で作る基本構造

最小構造のサンプル

<div class="accordion">
  <button class="accordion-trigger">タイトル</button>
  <div class="accordion-content">
    <p>内容テキスト</p>
  </div>
</div>

.accordion-trigger {
  width: 100%;
  padding: 8px 16px;
  background-color: #fc557c;
  color: #fff;
  cursor: pointer;
}

.accordion-content {
  margin: 10px;
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
}

.isOpen {
  height: 50px;
}

const accordion = document.querySelector(".accordion-trigger");
accordion.addEventListener("click", () => {
  accordion.nextElementSibling.classList.toggle("isOpen");
});

ポイントは 「見出し要素と内容要素のペア構造」 を守ることです。

要素の意味付けと注意点

アコーディオンは見た目だけでなく、支援技術を利用するユーザーにも正しく状態や役割が伝わる設計が重要です。

以下の点を意識することで、キーボード操作やスクリーンリーダー利用時でも、操作可能で理解しやすい UI になります。

トリガーには<button>タグが望ましい

→<button>要素は、クリックやタップだけでなく、Enter キーや Space キーによる操作が標準で可能です。

また、スクリーンリーダーにも「操作可能なボタン」として正しく認識されるため、追加実装なしで基本的なアクセシビリティ要件を満たせます。

コンテンツは role="region" を付与する

→role="region" を指定することで、アコーディオン内部のコンテンツが意味のある情報領域であることを支援技術に伝えられます。

特に、トリガーと紐づけて使うことで、スクリーンリーダー利用者が「どのボタンが、どの内容を開閉しているのか」を把握しやすくなります。

ただし、HTML5 のセマンティック要素（<section> など）を適切に使っている場合は、必須ではありません。

開閉状態は aria-expanded で明示

→ aria-expanded は、現在そのコンテンツが開いているか閉じているかを明示するための属性です。

これを更新しない場合、見た目では開閉していても、スクリーンリーダーには状態変化が伝わりません。

JavaScript で開閉処理を行う際は、状態に応じて true / false を正しく切り替えることが重要です。

これらを守ることで、スクリーンリーダー利用者にも正しく伝わる UI になります。

アクセシビリティ配慮

アクセシビリティ向上のためには以下の点を意識します。

特に、視覚的なフォーカスリングを残すという点は、すべてのユーザーにとって使いやすいUI を保証するだけでなく、SEO の観点でも評価対象となります。

CSS で作るアコーディオン演出

開閉アニメーションの種類

開閉のアニメーションを実装する方法はいくつもあります。

下記は CSS を使った代表的な手法です。

height を使うアニメーション

height を利用した方法は、開閉時の高さを明示的に指定してアニメーションさせる手法です。

コンテンツの高さを JavaScript で取得し、その値をもとにheight: 0から実際の高さへと変化させることで、自然な開閉動作を実現できます。

一方で、内容量が動的に変わる場合は毎回高さを再計測する必要があり、実装や保守の負荷が高くなりやすい点には注意が必要です。

max-height を使うアニメーション

max-height を使う方法は、CSS だけで実装できることが多く、アコーディオン演出として広く利用されています。

十分に大きな max-height を設定し、0 からその値までをアニメーションさせることで開閉を表現します。

実装が簡単で汎用性が高い反面、コンテンツ量に対して過剰な値を設定すると、動きが不自然に感じられる場合があります。

transform を使うスムーズな演出

transform を使った方法では、高さを直接操作せず、scaleYなどを用いて見た目上の開閉を表現します。

ブラウザの描画負荷が比較的低く、パフォーマンス面で優れる点が特徴です。
ただし、実際の高さが変わらないため、レイアウトやアクセシビリティとの兼ね合いを考慮した設計が求められます。

目的は 「操作の結果が視覚的に理解しやすい」 ことです。

どの手法を選ぶ場合でも重要なのは、ユーザーが「開いた」「閉じた」という状態変化を直感的に把握できることです。
実装の容易さだけでなく、操作感や画面全体の UX を意識して使い分けることが、質の高いアコーディオン設計につながります。

スマートフォン表示でのアコーディオン

スマートフォンでの表示では特に UI が詰まりやすいため、下記の点を注意しましょう。

• タップ領域の拡大
• フォントの可読性
• 余白の調整

このような小さい画面向けのミニマム設計を取り入れると、より UX の向上につながります。

よくあるエラーと対処法

開閉しない原因

アコーディオンを実装する際は、見た目だけでなく支援技術から正しく認識される構造を意識することが重要です。

特にトリガー要素には、クリック可能な UI として意味を持つ <button> を使用することで、キーボード操作やスクリーンリーダーへの対応が容易になります。

コンテンツ部分に role="region" を付与することで、「ここが独立した情報領域である」ことを支援技術に伝えられます。これにより、ユーザーはページ内の構造を把握しやすくなり、情報の読み飛ばしや迷子を防ぐ効果があります。

また、aria-expanded を用いて開閉状態を明示することで、現在その情報が表示されているかどうかを視覚に頼らず把握できるようになります。

これらの配慮を行うことで、スクリーンリーダー利用者にも正しく伝わる、アクセシブルなUI を実現できます。

高さ制御の失敗

max-height を使ったアコーディオンでは、設定した最大値がコンテンツ量に足りていない場合、途中で内容が切れて表示されてしまうことがあります。

逆に、過剰に大きな値を設定すると、開閉時のアニメーションが間延びし、不自然な挙動に感じられることもあります。

この問題を防ぐためには、コンテンツ量に応じて調整しやすい設計を意識することが重要です。

その一つの方法として、CSS 変数を活用すると、値の管理や変更が容易になります。

:root {
  --accordion-max-height: 500px;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion.is-open .accordion-content {
  max-height: var(--accordion-max-height);
}

このように CSS 変数として高さの最大値を定義しておくことで、コンテンツ量に応じた微調整や、デザイン変更時の修正範囲を最小限に抑えることができます。

また、将来的にコンテンツ量が増減する可能性がある場合は、「どの程度の情報量を想定しているか」をあらかじめ考慮した上で値を設定することが、安定したアコーディオン挙動につながります。

使いどころの判断基準

アコーディオンが向かないケース

アコーディオンがよく使われる場面は最初に触れましたが、アコーディオン表示が向かない場合もあります。

• 必ず見るべき重要な情報など、全項目が常に見えていて欲しい場面
• 頻繁に参照される情報
• 一覧性が最も重視されるページ

これらの場合、アコーディオンはかえって UX を損なう可能性があります。

UX 向上のコツ

アコーディオンを実装するうえでの、アニメーションの注意点について紹介します。

• 開閉のフィードバックを明確にする
• アニメーションはスピードを短めに
• アイコンの回転など視覚的変化を持たせる

特に 「ユーザーが現在の状態を理解しやすい」 演出が欠かせません。

まとめ

アコーディオンメニューは、情報量の多いページを整理し、ユーザーの判断負荷を軽減する強力な UI パターンです。

HTML と CSS を正しく組み合わせることで、視認性・操作性・アクセシビリティに優れた実装が可能になります。
さらに、演出や構造を適切に設計することで、UX を損なわず、むしろ向上させることもできます。

こうした基礎から HTML/CSS を始めとする Web 制作スキルを学びたい方には、WEBMASTERS がおすすめです。
現役エンジニアの個別サポートにより、初心者でも疑問を素早く解決でき、効率的に学習を進められます。一歩踏み出したいと思った今が、学び始めるベストタイミングです。