【UIデザイン】アコーディオンメニュー実装のメリット・デメリット

みなさん、こんにちわ！
ジャングルオーシャンのラファエロです！

Webサイトをデザインするうえで、ユーザーの目をひく”見栄えの良さ”をデザインすることも大事ですが…

ユーザーの”使いやすさ”をデザインする「UIデザイン」も同じく大事です！

UIとは、ユーザーインターフェイス（User Interface）の略。
Interface とは「接点・接触面」という意味で、UI はユーザーと製品・サー
ビスの接触面を指すのでユーザーが視覚でとらえることのできる情報全て
が「UI」になります。

そんなUIデザインにも様々なUIパターンがありますが、今回はアコーディオンメニュー（アコーディオンUI）に絞って、メリット・デメリットや実装・デザインする際のコツを解説いたします！

アコーディオンメニューがどんなものか分からないという方は、下記の記事に簡単な説明と様々なデモサンプルがありますのでチェックしてみてくださいね！

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

アコーディオンメニューを実装しコンテンツを折りたたんでしまうことで、ページ全体を確認してから段階的にコンテンツを表示することができます。

これによりユーザーがページ内を往復したり、縦長のページを延々とスクロールすることなく効率的に欲しい情報を探しやすくなります！

アコーディオンメニューは、画面の表示領域が小さいスマホサイトに多く利用されています！

画面の表示領域が広いPCに比べ、どうしても縦長になってしまいがちなスマホサイトとアコーディオンメニューは相性が良いので、情報量の多いスマホサイトをデザインする際はぜひ実装したいですね♪

クリックやタップでコンテンツを展開するということは、ユーザーにとって良いことばかりではありません！

もし、折りたたまれた複数のコンテンツを全て表示したい場合は一つ一つクリックまたはタップをして展開する必要があります。何でもかんでもコンテンツが折りたたまれてしまっていたらめんどくさいですよね…

ほとんどのユーザーが内容を確認するようなコンテンツの場合はアコーディオンにはせずにコンテンツを全て表示するなど、折りたたんでしまって良い情報と折りたたまない方が良い情報をしっかり精査した上でアコーディオンメニューを検討しましょう！

せっかくアコーディオンメニューを実装してもユーザーが展開できることを理解できなければ意味がありません！

ユーザーが挙動をイメージしやすいよう左右のどちらかに下矢印や「＋」マークなど表示して展開できること必ず明示してあげましょう。同様に、展開後は上矢印や「ー」マークなどを表示し閉じれることも明示します。

また、展開する際にコンテンツが伸びるようなアニメーションを付けるとより分かりやすいUIのアコーディオンメニューに仕上がります！

アコーディオンメニューには必ず見出しなどの文言が入りますよね！

ユーザーはその文言から必要な情報かどうかを判断し、アコーディオンメニューを展開するでしょう。

もし、アコーディオンメニューの文言が曖昧な表現だと、ユーザーはアコーディオンメニューを一つ一つ展開して情報を探す無駄な手間が発生してしまいます。

そうなるとアコーディオンメニューを実装した意味がなくなってしまうので、しっかり伝わる文言を入れるようにしましょう！