はじめに
「アコーディオンメニューってよく見るけど、どんな仕組みなの？」
「自分でも使ってみたいけど、どうやって作ればいいのか分からない…」
そんなふうに気になりつつも、手が止まっていませんか。サイトを作ろうとすると、「難しそう」と感じてしまう方も多いと思います。
アコーディオンメニューは、クリックしたときだけ内容が開くシンプルな仕組みで、情報をすっきり見せたいときに役立ちます。
この記事では、仕組みや使い方から、コピペで作る方法まで、順を追ってやさしく説明していきます。
WEBで使われるアコーディオンメニューとは？
アコーディオンとは、クリックやタップなどの操作によってコンテンツの表示・非表示を切り替えるUI（ユーザーインターフェース）の一種です。
限られた画面スペースの中で情報を整理し、必要な内容だけを効率よく見せるために活用されます。
ここではまず、その基本的な仕組みと、どのような場面で使われるのかを具体的に見ていきましょう。
クリックで開閉するUIの仕組み
クリックされたタイミングで、その項目の表示・非表示を切り替える処理が1回だけ動きます。
たとえば、閉じている状態の項目をクリックすると、中の内容が表示されるように切り替わり、すでに開いている状態でクリックすると、今度は内容が見えなくなるように切り替わります。
この切り替えは毎回1クリックごとに1回だけ行われるため、何度クリックしても「開く→閉じる→開く」と同じ動きが繰り返されます。
見た目に動きをつける場合は、0.3秒ほどかけて高さが少しずつ変わるようにすると、スッと開いたり閉じたりする動きに見えます。
また、今の状態が開いているか閉じているかをもとに、その都度「閉じる」か「開く」かの処理がすぐに実行される仕組みになっています。
どんな場面で使われるか｜FAQ・メニューなど
FAQページでは、質問と回答をセットで見せたいときに使われることが多いです。
最初は質問だけを10件ほど並べておき、気になるものをクリックしたときに、その回答だけがふわっと表示されるイメージです。
すべての回答を最初から出してしまうと、ページが一気に長くなってしまい、スクロールが増えて探しにくくなってしまいますが、必要なところだけ開く形にしておくと、知りたい内容にスムーズにたどり着けます。
ナビゲーションメニューでも同じように活用されています。
カテゴリ名をクリックすると、その中のリンクが5〜10件ほどだけ表示され、それ以外は閉じたままにしておく形です。
画面に表示される情報量が多くなりすぎないので、全体がすっきり見えますし、気になるカテゴリだけを開いて確認できるので、迷わず操作しやすくなります。
WEBのアコーディオンメニューのメリット・デメリット
アコーディオンUIは、情報を整理して見やすくできる一方で、使い方によってはユーザーにとって不便に感じられる場合もあります。
ここでは、具体的にどのような利点と注意点があるのかを整理し、それぞれの特徴を詳しく見ていきましょう。
メリット
最初は本文を隠して見出しだけを並べておくことで、ページ全体の長さを大きく抑えられます。必要な情報だけを自分で開いて確認できるため、画面がごちゃつかず、読みやすさも保ちやすくなります。
■メリット
・見出しだけを10件並べることで、表示行数を約3分の1まで抑えられる
・本文をすべて表示すると縦スクロールが6000pxになるページでも、2000px以内に収まる
・1画面で確認できる項目数が約3倍に増える
・クリックした項目だけが表示されるため、不要な情報が目に入らない
・画面内のテキスト量を最小限に保てる
・スクロール回数が半分以下になり、目的の項目を見つけやすくなる
・情報を詰め込みすぎず、一覧性を保ったまま整理できる
デメリット
最初は本文が表示されていないため、内容を確認するには見出しを1つずつ開いていく必要があります。情報をすぐに一覧で見たい場合には、少し手間に感じることもあります。
■デメリット
・内容を確認するたびに見出しを1件ずつクリックする必要がある
・項目が10件ある場合、目的の内容にたどり着くまでに最大で10回クリックすることがある
・見出しだけでは判断できないと、開いて閉じてを繰り返す必要がある
・クリックのたびに表示の切り替えを待つ時間が発生する
・複数の内容を同時に表示できないため、比較しながら確認しにくい
・必要な情報をまとめて見られず、判断しづらく感じることがある
WEBのアコーディオンメニューの作り方
アコーディオンUIは、基本的な構造さえ押さえれば比較的シンプルに実装することができます。
ここでは、すぐに使えるコピペ用のコードを紹介しながら、HTML・CSSによる見た目の作り方と、JavaScriptを使った開閉処理の基本を順を追って解説していきます。
HTML＋CSSのコピペコード
以下のコードをそのまま貼り付けると、クリック1回で開閉する構造が動作します。チェックボックスの状態を使って表示高さを0pxと内容分の高さで切り替えます。
<style>
.accordion {
width: 300px;
}
.accordion input {
display: none;
}
.accordion label {
display: block;
padding: 10px;
background: #eee;
cursor: pointer;
}
.accordion .content {
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.accordion input:checked + label + .content {
height: 100px;
}
</style>
<div class=”accordion”>
<input type=”checkbox” id=”acc1″>
<label for=”acc1″>見出し</label>
<div class=”content”>
本文がここに表示されます。
</div>
</div>
JavaScriptを使った開閉処理の基本
クリック対象の要素に対してイベントリスナーを1つ設定し、クリック発生時に対応するコンテンツ要素の高さを切り替えます。
具体的には、addEventListener(‘click’, …)でクリックを検知し、直前の表示状態をscrollHeightとclientHeightで比較して、閉じている場合はstyle.heightにscrollHeight + ‘px’を代入し、開いている場合は0pxを代入します。
高さ変更と同時にtransitionを0.3秒に設定しておくことで、1回のクリックごとに高さが0pxから内容分の高さ、またはその逆へ変化します。
状態判定は毎回クリック直前の高さを基準に行い、1回のイベント処理で高さ変更を1回だけ実行します。
WEBでよく使われるアコーディオンメニューの使い方
アコーディオンUIは、さまざまな場面で活用されており、用途に応じて効果的な使い方があります。
ここでは代表的な利用シーンとして、FAQやナビゲーションメニューでの具体的な活用パターンを見ていきましょう。
FAQで使うパターン
質問文を1行ずつ並べ、初期状態では回答文の高さを0pxに設定して非表示にします。
ユーザーが質問文をクリックした時点で、その質問に対応する回答文だけを高さ0pxから内容分の高さに変更し、他の回答文は0pxのまま維持します。
10件の質問がある場合でも画面上には質問文のみが表示され、回答はクリックされた1件分だけが展開されます。
これにより、ユーザーは目的の質問を1回のクリックで選択し、その回答だけを表示して確認できます。
ナビゲーションメニューで使うパターン
カテゴリ名を1行ずつ並べ、初期状態では各カテゴリ配下のリンク群の高さを0pxに設定して非表示にします。
ユーザーがカテゴリ名をクリックした時点で、そのカテゴリに対応するリンク群だけを高さ0pxから内容分の高さに変更し、未選択のカテゴリは0pxのまま維持します。
1カテゴリあたり5〜10件のリンクを持つ構造でも、画面上にはカテゴリ名のみが表示され、リンクはクリックされた1カテゴリ分だけが展開されます。
これにより、ユーザーは目的のカテゴリを1回のクリックで選択し、その配下のリンクだけを表示して移動できます。
WEBで使われるアコーディオンメニューを使うときの注意点
アコーディオンUIは便利な反面、使い方を誤るとユーザーの理解や操作性を損ねてしまうことがあります。
ここでは、特に意識しておきたいポイントとして、情報の見せ方やスマホでの使いやすさに関する注意点を確認していきましょう。
重要な情報を隠しすぎない
初期状態で本文を高さ0pxにして非表示にする場合、ユーザーがクリックしない限り内容は一切表示されません。
判断に必要な情報をすべて非表示にすると、ユーザーは各項目を1件ずつクリックして確認する必要があり、10件あれば最大10回の操作が発生します。
クリック前に内容を判断できない状態が続くと、重要な項目であっても見落とされる可能性が高くなります。
そのため、クリック前の見出し文だけで内容を判別できる長さと具体性を確保し、少なくとも1回のクリックで必要な情報に到達できる状態を維持する必要があります。
スマホ表示での使いやすさを確認する
画面幅が375px前後のスマホでは、指でタップする操作になるため、見出しのタップ領域を高さ44px以上に設定しないと誤タップが発生します。
タップ後にコンテンツが展開された際、1項目の高さが600pxを超えると画面1枚に収まらず、スクロール操作が追加で必要になります。
さらに、連続して複数項目を開いた場合、全体の表示高さが2000px以上に伸びると、元の位置に戻るまでに複数回のスクロールが発生します。
そのため、タップ1回で確実に開閉できる領域サイズを確保しつつ、展開後の高さを画面1〜2枚以内に収めることで、操作回数とスクロール量を増やさない状態を維持する必要があります。
まとめ
アコーディオンは、クリックやタップで表示・非表示を切り替えながら、限られた画面の中で情報をすっきり整理できるUIです。FAQやメニューなど、情報をまとめて見せたい場面でよく使われています。
一方で、内容を確認するたびに操作が必要になるため、使い方によっては手間に感じてしまうこともあります。そのため、見出しだけで内容がイメージできるようにしたり、重要な情報を隠しすぎない工夫が大切です。
うまく設計できれば、見やすさと使いやすさを両立できる便利なUIです。迷わず情報にたどり着けるよう、やさしく導く意識で取り入れていきましょう。
