【基礎解説】Webサイトにおける表示折りたたみ機能「アコーディオン機能」とは

Web

みなさんこんにちは!

「Webサイトエンジニア」×「臨床検査技師」のハイブリットおじさんこと、ウエノです。

今回はWebサイトにおいて、表示を折りたたんだり広げたりできる便利機能「アコーディオン機能」についてお話しします。

みなさんはWebサイトにおけるアコーディオン機能というものを知っていますか?

名前は聞いたことないと思いますが、みなさんも一度は触ったことのある機能なはずです。

よくQ&Aで使われている機能なのですが、このようなものを見たことはありませんか?

  • Question 1(click here)

    +

    Answer 1

  • Question 2(click here)

    +

    Answer 2

  • Question 3(click here)

    +

    Answer 3

まさに楽器のアコーディオンのように伸びたり縮んだりするので、機能の名前に「アコーディオン」という言葉が使われています。

今回のブログでは、このアコーディオン機能についての概要、メリット、デメリット、実装時のコツをお教えします。

使い勝手の良い機能なので実装する機会も多く、覚えておいて損はない機能です。

みなさんがWebサイトについての知識を1つでも多く得てもられるように、知識をふんだんにバラ撒きますので、ぜひ最後まで見ていってください。

【アコーディオン機能】とは「折りたたみ機能」

冒頭にあったサンプルを触れてもらえばわかる通り、アコーディオン機能とは「折りたたみ機能」です。

もしQ&Aで質問とそれに対する回答がずらっと下に続いていたらどうでしょうか。

該当する質問を見つけるのも大変ですし、テキストだらけで見る気も失せますよね。

そんなときに活躍するのがこのアコーディオン機能です。

回答部分は人によって必要なものとそうでないものがはっきりと分かれます。

アコーディオン機能を使えば全員が全員見なくても良い部分を隠すことができるので、回答部分を隠してしまえば質問を探しやすくなります。

これで見やすさはと探しやすさは劇的に向上し、さらに見たい質問をクリックすればすぐ下に回答が表示されるので、とても機能的で便利なシステムであるといえます。

しかしアコーディオン機能にはこのような素晴らしいメリットとは逆に、デメリットもあります。

それらをふまえ、アコーディオン機能を最大限に活かせるように実装していきましょう。

アコーディオン機能は上手に使えばとても便利な機能です。その特性をしっかりと理解して機能的に実装しましょう!

ウエノアイコン

ウエノ

【アコーディオン機能】のメリット3つ

アコーディオン機能の導入には3つのメリットがあります。

主に「ユーザビリティの向上(利便性)」に繋がりますので、導入できる部分では積極的に導入していきたい機能といえます。

ではそのメリット3つについてご紹介します。

文章が折りたたまれているので、単純に見やすいですね。

テキストだらけは嫌われる傾向が強いので、文量の多い場面で特に大活躍します。

これはもう「ユーザーへの優しさ」といっても過言ではないでしょう。

表示する情報量を減らせるので、ユーザーへの負担も減らせます。

与える情報はなるべく少なくシンプルにした方が、見る側としては疲れが少なくて済みます。

どうしてもテキストが多くなりがちな部分で、もしアコーディオン機能が導入できそうなら実装しない手はないでしょう。

表示する情報量が減らせればページの縦幅も短くなりますので、スクロールの回数も少なくて済みます。

これも見る側の負担が減りますので、とてもユーザーに優しい提案ですね。

繰り返しになりますが、アコーディオン機能の良いところは「ユーザビリティの向上」です。ユーザーに優しいWebサイトを目指しましょう!

ウエノアイコン

ウエノ

【アコーディオン機能】のデメリット3つ

アコーディオン機能のメリットを十分に理解して頂けたかと思います。

しかし、そんな素晴らしいアコーディオン機能にもデメリットはあります。

デメリットについては3つありますので、1つずつ見ていきましょう。

折りたたまれているので、そのままの状態では内容がわかりません。

ユーザーに見てもらえなければ、そのコンテンツは「ない」も同然です。

そのあたりを考慮して、絶対に見てもらいたい内容であれば、アコーディオン機能を使わないという選択肢を選びましょう。

何度も言いますが、アコーディオン機能は「特定の人しか見ない部分を隠す機能」なので、全員に見せたい場合は使うべきではありません。

最低限、見てもらうためにはユーザーにクリックしてもらう必要があります

アコーディオン機能は画面を見やすくする一方で、ユーザーにクリックしてもらうというアクションが必要ですので、少し導入のハードルが上がります。

操作は少ない方が良く、ユーザーの中にはクリックするひと手間にものすごいストレスを感じる人もいるので、そのあたりに注意しなければなりません。

折りたたまれているので、やはり気づいてもらえずスルーされることもあります。

さくさくとスクロールされてしまうと気付いてもらえないことも多いです。

これもアコーディオン機能の宿命ですね。

アコーディオン機能の欠点は「視認性」です。ユーザーに気づいてもらえることが最大の課題なのです。

ウエノアイコン

ウエノ

【アコーディオン機能】の実装時のコツ

アコーディオン機能には先ほどのように3つのデメリットがあります。

では、どうしたらデメリットを緩和できるのでしょうか。

とにかくまずは気づいてもらうことが大切です。

クリックが必要なのは、アコーディオン機能の仕様上避けては通れません。

クリックが必要なければアコーディオン機能ではありませんからね。

しかし、気付いてもらえてなおかつ興味を持ってもらえれば、クリックに対するユーザーの心的な負担を与えずに見てもらえることも可能です。

どうしたら気づいてもらいやすくなるのでしょうか。

テキストだけで目立たせるのは難しいのでアイコンを使いましょう

例えば「▼」や「+」です。よく見るパターンですね。

あえて奇をてらうことも、サイトイメージに合わせるからといって妙なアイコンを使うことよりも、「よく見るパターン」にすることが大切です。

なぜならよく見るパターンの方がユーザーが理解しやすいからです。

いちいち「これはなんだろう」と考えさせずにパっと見で理解できることがポイントです。

色を変えるという方法もありますが、色を変えただけではコンテンツ自体の視認性は上がりますが、「これはアコーディオン機能ですよ」というのは伝わりません。

アコーディオン機能はアイコンがあってはじめて認識される機能と覚えておきましょう。

これがアコーディオン機能を実装するうえでのコツです。

アイコンがアコーディオン機能を生かすか殺すかが決まると言っても過言ではありません。セオリーに沿って効果的に実装しましょう!

ウエノアイコン

ウエノ

【まとめ】アコーディオン機能を活かすにはアイコンが大切

これまでアコーディオン機能について、メリット・デメリット、実装時のコツをお話してきましたが、1番大切なのは実装時のコツです。

「よくあるパターン」のアイコンを使用して、「これはアコーディオン機能ですよ、押したらコンテンツが展開しますよ」と認識してもらうことが何よりも大切です。

アコーディオン機能は画面をスッキリと見せる優れた機能である反面、認識されにくい欠点がありますので、しっかりと対策しておきましょう。

また使用例としては、Q&Aだけでなくメニューバーやクイズなど、応用の幅も広がりを見せています。

使えば素晴らしい機能を発揮してくれますので、上手に利用していきましょう!

このブログがみなさまのお役に立てれば幸いです。

最後まで、ご閲覧いただきありがとうございました。

関連ブログのご案内

Web

モーダルウィンドウは主に注意喚起やユーザーへの重要事項の確認に使用されています。このブログではそんなモーダルウィンドウについての基礎的な知識から、メリットとデメリット、デメリットに対する解決策を解説します。使い方を間違えるとユーザーに多大なストレスを与えてしまうため、知識をつけてしっかりと検討しましょう

Web

みなさんはスマートフォンやパソコンなど、サイズ感のまったく異なるデバイスで同じサイトを見たことはありますか?デザインが変わりましたよね。これをレスポンシブWebデザインといいます。レスポンシブWebデザインについてのもっと詳しい解説や、適応させるときに考えるべき項目を3つお教えします。

Web

Webサイトに設置するボタンデザインは制作者の好みに合わせて作ればよいのかというと、ある程度は好みで決めて良いですが注意するべき項目が6つあります。その項目とは「色」「形」「大きさ」「テキスト内容」「アニメーション活用」「設置数」です。ユーザーに好まれやすいボタンデザインについてそれぞれ詳しく解説します。

TOPへ戻る