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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

また、弊社ではパソコン・スマートフォンの画面サイズに適したホームページ制作・リニューアルを承っております。下記リンクより弊社のWEB制作についてご覧いただけます。是非ご覧ください。

効果的なホームページ制作で売上・集客アップを実現!ホームページ制作については株式会社観光丸にお任せください！