Webサイトの画面は限られている!アコーディオン化を取り入れてスッキリ表示

コラム

ユーザーの多くは、Webサイトをスマホ画面から見る割合が圧倒的に多くなりました。スマホの画面はスクロールすることによって下にいくらでも動かすことが可能です。しかし、見せ方を間違えると、文字が多い、ごちゃごちゃしている・・・など、ユーザーがページ離脱をしてしまうことも。

デザインの工夫や機能の取り入れ方はWeb制作側の見せ所となります。

 

ナビゲーションメニューで使われているアコーディオン

スマホメニューでよく見られるスタイルの1つにアコーディオンメニューがあります。メニューの中にさらに複数の項目がある場合、全部表示させるのではなく、クリックやマウスオーバーすることにより、メニューの下の階層が表示されます。

楽器のアコーディオンのように、スマホ画面の省スペースで多くの情報を表示させるため、今では当たり前のように実装されるようになりました。

 

優先度によって情報の見せ方を変えよう

アコーディオンはメニューだけでなく、コンテンツの中でも有効な使い方があります。それは文字が多い説明などです。

ユーザー全員を対象としていない「注意点」など、見る必要がない場合は、長い文章の表示がデメリットになってしまいます。そこで、アコーディオン化することによって、「〇〇の注意点」という見出しだけを表示させます。ユーザーがアクションを起こさなければ、表示されません。

 

アコーディオン化のメリットとデメリットとは?

【メリット】
・ページが折りたたまれているため、スクロールが最小限になる
・ユーザーは見出しで知りたい情報を選択できる
・長文を隠すことによってすっきりした表示になる
【デメリット】
・ユーザーがアクションを起こす煩わしさがでる
・クリックした内容に不満がでてユーザーのストレスになってしまう
・クリックする場所だとユーザーが気づきにくい
・印刷をした時に表示されない

 

使い方にはメリハリをつけて工夫を!

アコーディオン化することによって、スマホ画面内の見た目はスッキリします。スクロールする部分も減るため、メリットもたくさんあります。

しかし、情報を隠している状態なので、ユーザーがアクションを起こさない限り、内容を見てもらえません。そのため、優先度が低い情報、ユーザー全員が必要としない情報に利用するなど、アコーディオンを取り入れる時は注意しましょう。

 

また、ユーザーはクリックする手間を嫌がります。アコーディオン化されている部分が多いと、ユーザーは見たい情報をわざわざクリックして展開する必要があります。見た場合は閉じるボタンを押さなければなりません。印刷の場合も表示されません。

見た目がわかりにくく、アコーディオンになっていることすら気づかれない場合もあります。見せ方、実装のテクニックも必要になりますので、メリハリをつけて工夫しながら取り入れるといいですね。

タイトルとURLをコピーしました