COLUMN コラム

ウェブサイトで使用されるアコーディオンメニューについて、大抵は見やすさを向上させていると思いますが

時たま「分かりにくいなあ」「いちいちクリックしないとどこに何があるかわからなくて使いにくいな…」と感じることはないでしょうか。

本来、見やすさ・使いやすさの向上に繋がるはずなのに、どうしてそのような状況が生じてしまうのでしょうか。今回はアコーディオンメニューについて、ユーザビリティの観点から実装のTPO(メリット・デメリット)を考えてみました。

1. そもそもアコーディオンメニューってなに？

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

「アコーディオンメニューとは、Webページなどの表示・操作要素の一つで、選択した項目がその場で広がって詳細な内容を表示する形式のメニューのこと。限られた範囲で多数の項目を一覧でき、かつ詳細な内容を即座に参照できるメニュー形式として利便性が高い。」

IT用語辞典 e-Words

モバイルファーストに適した表示

インターネットで何かを検索する際など、スマホから見られることが大多数を占めるようになってきました。

アコーディオンメニューは情報を折りたたんで適宜表示できるため、パソコンに比べ小さく狭いスマホ画面上でも情報量を減らすことなく、見やすさを確保することができる実装方法のひとつです。

ユーザーが必要な情報を任意で表示・非表示することができること、これはユーザビリティの観点から見ても重要度の高い表示形式であると言えます。

実装もより手軽に

HTML5から新たに登場したdetailsタグとsummaryタグを使うことで、従来であれば

・JavaScriptやjQueryで実装するか？

・CSSのみでやりくりして実装するか？

選択しないとならなかったアコーディオンメニューも、あっという間に実装することができるようになりました。

2.FAQはいつでもアコーディオンメニュー？実装のTPO

“いつでもユーザビリティに有効”ということはない

情報整理に有効なアコーディオンメニューですが、「折り畳み表示する＝隠れる情報が増える」ことであるため、使用上のTPOを意識しないと折角のユーザビリティを損ねてしまいかねません。

大抵は見やすさを向上させてくれるアコーディオンメニューも、たまに「使いにくいなあ」と感じることはないでしょうか。特にFAQ等で使用される場合、煩わしさを生じさせていることが多いのでは、と感じます。

そこで、「FAQ箇所にアコーディオンメニューを実装する場合を想定」し、そのメリットとデメリットをそれぞれ考えてみました。

実装した場合、デフォルト表示は「回答は非表示、質問のみがズラーっと並んでいる状態」です。

実装するメリット

・質問項目のみを一覧で見れるため、知りたい項目が探しやすい

・ユーザーは見たい項目だけクリックして回答を展開し、確認すれば良い

・回答文が長い場合などは折り畳むことでスッキリした見た目になる

・質問項目数が多い場合、回答を隠すことで質問一覧を確認しやすい

【結論】回答非表示ですっきりした見た目になり、目的の質問を見つけやすい

実装するデメリット

・全ての回答にざっと目を通したい場合等に、逐一クリックしないと回答を確認できない

・逐一クリックが手間で面倒になってしまうこともある

・回答文が短い場合、折り畳むことに意味があまり無く、手間だけが増えてしまう

・回答をユーザーに見て欲しいときには適さない

【結論】多くの回答に目を通したいとき不便

以上を踏まえると、質問の項目数が少ないときや回答文が短いとき(=見た目をスッキリさせる必要がないとき)　は不要であることが分かってくると思います。

3.おわりに

実際の構築では「殆どの回答に目を通したいユーザーが多いはず、でも質問項目数も多い」という状況もあると思います。その場合、アコーディオンメニューを実装＋初めから回答を全展開させておくことで上記のデメリットを補うことができるかもしれません。

そのように、目的や条件を考慮して適した見せ方をできるのが一番ですよね。

メリットとデメリットを洗い出し把握した上で、状況に合わせて実装の有無や表示形式を設計することが重要です。これからもユーザー導線を意識した使いやすいサイト制作を心がけていきたいです。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。