「アコーディオンメニュー」の使いどころをUIデザインから学ぼう!

「アコーディオンメニュー」の使いどころをUIデザインから学ぼう!

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

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

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

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

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

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




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

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

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

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

スマホサイトのデザインに有効

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

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

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

ユーザーにとってクリックやタップは手間

Webサイトを見る人 イメージ
クリックやタップでコンテンツを展開するということは、ユーザーにとって良いことばかりではありません!

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

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

アコーディオンUIをデザインするコツ

UIデザイン イメージ

展開できることを分かりやくする

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

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

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

見出しを伝わりやすい文言にする

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

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

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

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

関連記事もチェックしよう!

いかがだったでしょうか?

実際にアコーディオンメニューを実装してみたという方は、下記に記事にjQueryを使ったアコーディオンメニューのサンプルがありますので参考にしてみましょう!

UIデザインをしっかり学びたいという方は、下記の記事にオススメの書籍やWebサイトをまとめていますのでこちらもチェックしてみてくださいね♪

以上、ラファエロでした!




デザインカテゴリの最新記事