アコーディオンとは？

この記事を読むための時間：5分

アコーディオンとは

アコーディオンメニュー（英：accordion menu）とも呼ばれます。

WEBサイトにおけるナビゲーションメニューのひとつで、項目をクリックしたりタップしたりすることで、隠れている詳細画面を表示させることができるものです。その項目を再度クリックすると、表示されていた画面はまた元のように隠れます。

このように、クリックするたびに楽器のアコーディオンのように開いたり閉じたりすることから、アコーディオンメニューと呼ばれています。

なお、ナビゲーションメニューとはWEBサイトの各コンテンツのページにリンクされているもので、WEBサイトの目次のようなものです。

アコーディオンのメリット

WEBサイトにアコーディオンメニューを実装するとどんなメリットがあるのでしょうか？

以下で確認していきましょう。

ユーザビリティの向上につながる

アコーディオンを実装することで、コンテンツの情報を折りたたんで隠すことができます。つまり、ユーザーはまずページ全体を確認してから、段階的にコンテンツを表示させることができるようになります。

こうすることで、ユーザーが欲しい情報を探すためにWEBページ内を往復したり、長々とスクロールする必要がなくなり、使いやすいサイトにすることができます。

スマホの画面でも見やすい

現在はスマホでWEBサイトを閲覧する人が多いですが、スマホだとどうしてもパソコンの画面より表示領域が小さくなってしまいます。そこでスマホ用のサイトで多く活用されているのがアコーディオンです。

画面をワイドに使えるパソコンに比べ、スマホは情報が縦長になりがちですが、アコーディオンメニューを使うことで情報をコンパクトにまとめることができます。

ユーザーが情報量をコントロールできる

アコーディオンによって折りたたまれている情報は、展開するのも隠したままにするのも、すべてユーザー自身の判断に委ねられます。

そのため、ユーザーが読みたいもの・無視したいものをユーザー自身でコントロールできるというメリットがあります。

アコーディオンのデメリット

反対にアコーディオンメニューを実装することによるデメリットは、どんなものがあるのでしょうか？

一気に情報を確認できない

アコーディオンは、ユーザーがクリックやタップをすることによってコンテンツが表示されます。そのため、アコーディオンに折りたたまれている複数のコンテンツを一気に表示させたい場合は、ひとつひとつの項目をクリックやタップによって展開していかなくてはなりません。

もし全ての情報に関心を持っていて、ひとまとめにコンテンツを確認したいと考えているユーザーにとってはアコーディオンは大きな手間になってしまいます。

こういったユーザーにとっては、アコーディオンをクリックするより、長いページをスクロールダウンするほうが簡単に情報にたどり着けます。

ユーザーのストレスになる

ユーザーは、本来リンクなどをクリックする行為自体を好き好んで行うものではありません。それでもクリックするのは、ユーザーが「クリック・タップする行為」をすることによって得られる相応の対価を望んでいるからです。

もしアコーディオンメニューの項目をクリックして得られた情報が有意義なものであれば何も問題ありませんが、もし価値がないものだった判断され、クリックした行為が無駄だと感じると、ユーザーは大きなストレスを感じてしまいます。

ユーザーがコンテンツに気づかない可能性がある

アコーディオンメニューによって、詳細のコンテンツ情報はメニューの下に折りたたまれて隠れた状態になります。

そのため、コンテンツのタイトルが魅力的でない場合など、ユーザーがクリックして情報を確認するのに値しないと判断された場合は、いくらコンテンツの内容が優れていてもユーザーに内容を見てもらえない可能性があります。

アコーディオンの実装で注意すること

アコーディオンメニューにはメリットもデメリットも存在することがわかりました。

それを踏まえて、実際にWEBサイトにアコーディオンを展開する場合にどういったことに気をつけるべきなのか解説していきます。

展開できるメニューであるとわかりやすくする

せっかくアコーディオンを実装しても、展開できるコンテンツであるとユーザーに理解してもらわないと意味がありません。

ユーザーにきちんと理解してもらうためには、メニューの左端もしくは右端に「下向きの矢印」や「＋」のマークを表示して、コンテンツが折りたたんであることを分かりやすく示しましょう。

さらに、メニューを展開したあとは「上向きの矢印」や「−」マークを表示させ、アコーディオンを閉じられることも明示するようにしてください。

コンテンツのタイトルをわかりやすくする

アコーディオンメニューには、その中に隠されているコンテンツを端的に表したタイトルをつけます。ユーザーはそのタイトルをもとに、自分の欲しい情報が掲載されているかどうか判断し、クリックするかどうかを決めます。

しかし、タイトルが曖昧だったり、コンテンツの内容を正確に反映したタイトルでなかったりした場合、ユーザーは必要な情報を探すために大きな手間がかかってしまいます。

さらに、必要な情報が載っていないと判断されてコンテンツ自体見てもらえなくなる可能性も考えられます。

アコーディオンメニュー実装に必要な言語

WEBサイトにアコーディオンを実装するにはマークアップ言語やプログラミング言語の知識が必須です。

以下でどういった言語が必要なのか解説していきます。

HTML

Hyper Text Markup language（ハイパーテキスト・マークアップ・ランゲージ）の略で、WEBサイトを作る上で最も基本的な言語のひとつです。

HTMLは文書を構造化するための言語のため、見た目の整ったアコーディオンメニューの実装は難しいですが、単純なアコーディオンメニューであれば比較的簡単に実装可能です。

CSS

Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、HTMLで作成された文書の見た目や装飾を整える役割があります。

そのため、HTMLで作られたアコーディオンメニューも、CSSを使うことで見栄えがよくなります。

JavaScript

JavaScript（ジャバスクリプト）はWEBページの様々な場面で使われているプログラミング言語です。HTMLで作成したコンテンツを変更したり、CSSで作成したスタイルを変更したりすることもできます。

HTMLやCSSのみを使った場合と違い、アニメーションの動きがついたアコーディオンが実装できます。さらに、多層階のアコーディオンメニューを作ったり、ひとつ開けると他を閉じるように設定したり、横に並べたりなど、かなり自由な実装ができます。

jQuery

jQuery（ジェイクエリー）は、前述のJavaScriptをより簡単に記述できるようにしたもので、中身はJavaScriptで作られています。

一般的に、アコーディオンメニューを実装する場合はこのjQueryを利用するサイトが多くなっています。

まとめ

アコーディオンメニューはユーザーにとって便利な面もあれば、不便だと感じさせてしまう面もあります。

アコーディオンメニューを使ったユーザビリティの高いWEBサイトを運営したいと考えている方は、ユーザーにとってわかりやすく的確な実装をするように意識してみてください。