はじめに

多くのウェブサイトで見かけるアコーディオンメニューですが、多くの方がどのような操作をするとどのような反応になるか知っています。この単純な操作と応答動作のメリット、あなたはご存じでしょうか。そして、実はメリットだけでなくデメリットもあるのです。

そこでこの記事ではアコーディオンメニューのメリット、デメリットと、実際の使われ方について解説します。

アコーディオンメニューとは

最初にアコーディオンメニューとは何かについて触れておきます。アコーディオンメニューとはホームページで使用されるユーザーインターフェース(UI)のひとつで、項目をクリックしたりタップしたりすることで、隠れている詳細画面を表示させることができるものです。その項目を再度クリックすると、表示されていた画面はまた元のように隠れます。

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

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

多くのホームページでアコーディオンメニューが採用されているということは採用するメリットがあるということです。それではアコーディオンメニューを採用するそのメリットとはどんなものでしょうか？

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

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

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

こうすることで、ユーザーが欲しい情報を探すためにホームページ内をページ移動したり、長々とスクロールしたりする必要がなくなり、見やすく使いやすい作りになります。

ページがコンパクトでスッキリして見える

現在は高校生以上の誰もがスマホを持っていると言っても過言ではなくライにスマホユーザーは広がっています。そして、ホームページをスマホで閲覧する人が多いですが、スマホだとパソコンに比べ画面が小さく、当然、表示領域も小さくなってしまいます。

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

たとえば、会社のホームページや、メディアコンテンツの各種メニューを必要なだけ表示することができ、非常に便利に閲覧できます。

このようにアコーディオンメニューを利用することで、たくさんの情報の中から欲しい情報だけを見せることができる結果、ページ表示をスッキリすることができます。

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

一方、あまり語られないことですが、アコーディオンメニューもデメリットがあります。それではそのデメリットとは具体的には、どんなものなのでしょうか？

ここからはアコーディオンメニューのデメリットについて解説します。

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

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

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

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

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

ユーザーは、クリックしたりタップしたりしてアコーディオンメニューを展開します。このとき、多くの場合、タイトルを見てその下に何があるか興味があるかもしれないとか、自分の求めている情報があるかもしれないと期待しています。

アコーディオンメニューを展開して得られた情報が自分の期待するものでない、価値がないものだった判断された場合、ユーザーはストレスを感じてしまいます。

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

ページを開いた直後はアコーディオンメニューの中のコンテンツはメニューの下に折りたたまれて隠れた状態になります。

このとき、クリックするとコンテンツが展開されると認識されない、つまりユーザーに認識されないと見てもらえません。

また、タイトルが魅力的でないあるいは、ユーザーがクリックして情報を確認したいと思えるタイトルでない場合、いくら優れた内容ンコンテンツがメニューを展開した先にあっても、ユーザーに内容を見てもらえない可能性があります。

アコーディオンの実装上の注意点

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

それを踏まえて、実際にホームページ上にアコーディオンを配置する際の注意点を解説していきます。

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

アコーディオンメニューを実装する場合、タイトルをクリックすれば展開できるコンテンツであるとユーザーに視覚的に分かる状態にすることが必要です。

ユーザーにきちんと理解してもらうためには、たとえばタイトルの右端に「＋」や「>」のマークを表示して、コンテンツが折りたたんであることを分かりやすく示しましょう。

さらに、メニューを展開したあとはやはりタイトルの右端に「^」や「−」マークを表示させ、アコーディオンを閉じられることも明示するようにしてください。

このような処理はアコーディオンメニューを採用する多くのサイトで行われていますので、そこでの経験からここをクリックすると何が起こるか見た瞬間に類推できます。

メニューのタイトルをわかりやすくする

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

しかし、タイトルが曖昧だったり、タイトルの内容とコンテンツとの関連性がずれていたりする場合、ユーザーはストレスに感じます。つまり、顧客満足度が下がります。

また、コンテンツはメニューを展開しない限り見てもらえませんので、クリックしたくなるようなタイトルを付ける必要があります。

アコーディオンメニューの使われ方

ここまで説明してきたようにアコーディオンメニューにはメリット、デメリットがあります。使う場合はデメリットを補う配慮が必要であると説明しました。

これら踏まえると使う場所は限られます。それではどのような場所で使うのが適切か説明します。

大きく２つあります。

そのひとつはバーガーメニューのナビゲーションリンクです。アコーディオンメニューと言うくらいですからメニューメニューに関連するところでは使えるでしょう。

スマホは小さい画面の中に多くの情報を載せる必要があります。バーガーメニューのナビゲーションリンクをすべて載せると縦に長くなり、すべての項目は入りきりません。そこで、たとえばハンバーガーメニューを開いた直後は下層ページのメニューはアコーディオンメニューを閉じて見えない状態としておき、トップ画面の直下のリンクだけを表示します。そうすれば項目の数もそれほど多くないため、主要な項目はすべて画面に入りきります。そしてアコーディオンメニューを開くと下層ページのメニューが展開されるというふうにしておくことで、ホームページ全体の構造も分かるし、下層ページにどのようなリンクがあるかもわかります。

もうひとつは全員には必要なく、また別のページに移行するほどではない小さな情報でアコーディオンメニューが有効です。具体的にはよくある質問（FAQ）と新着情報です。

FAQも新着情報も全員に必要な情報ではありません。そこでページが開いた直後はタイトルのみを表示し、気になった人だけがアコーディオンを展開するようにしておけばその項目に関心がない人にとってはスクロールする量が少なくてすみます。関心がある人にとっては別のページに移行するよりも素早く情報に接することができます。

まとめ

この記事ではアコーディオンメニューと、その特徴が生かされる項目について説明しました。とは言え、使えるところはそれほど多くなく、ハンバーガーメニューの中の詳細なリンクと、FAQ、新着情報くらいであることを説明しました。

もしかしたら詳しく見るとそれ以外にも使える項目があるかもしれません。これから出てくるかもしれません。アコーディオンメニューはユーザーにとって便利な面もあれば、不便な面もあるUIですので、その両面を踏まえて使うべきか判断しましょう。

合同会社中丸屋ではホームページ制作を行っており、デザインももちろんやります。これまでアコーディオンメニューの設計にも多く携わりましたので、一般の方に比べ、知見は蓄積されています。

もし、この項目でアコーディオンメニューが使えないかな、などと悩まれる方がいらっしゃいましたらアドバイス可能です。気軽にお問合せください。