UI観察 - アコーディオンの目立たせ方、最適解は?
UI観察の第12弾は「アコーディオン」について深掘りしていきます。
(その他のUI観察記事はマガジンはこちら ↓)
アコーディオン(accordion)とは
アコーディオンは、ウェブサイトのナビゲーションメニューの1つで、コンテンツを押し下げて広げるUIです。
アコーディオンは、クリックやタップすると内容が展開し、再度クリックすると折りたたむことができます。楽器のアコーディオンの動きに似ていることから、この名前が付けられました。
アコーディオンは、次の特徴があります。
コンテンツを押し下げて広げる
他のコンテンツを隠すことなく表示できる
複数の非表示コンテンツをそれぞれ開いた状態にできる
同じページ内のコンテンツ同士を行き来できる
項目をクリックや、マウスオーバーすることにより応じた詳細を表示できる
アコーディオンはスペースを節約する一方で、方向感覚を失わせたり、大量スクロールの要因になりますので、注意が必要です。
アコーディオンのデザインパターンと挙動
■ 一般的なアコーディオン
<details>
<summary>アコーディオン</summary>
アコーディオンが開いた状態。
</details>
■ 制御されたアコーディオン
開いた状態で他箇所のアコーディオンをタップすると、すでに開いた箇所が閉じられます。1つしか開くことができない制御がなされています。
■ MENUで使用されるアコーディオン
アコーディオンで開いたコンテンツが長い場合は、一番下に折り畳むボタンを用意してあげると、上までいちいちスクロールする手間が無くなる為、優しい配慮になります。
下記画像はGmailのアコーディオンです。コンテンツ量が少ない場合は、折りたたむボタンの位置は下に用意せず、開くボタンと同じ位置で問題ありません。
アコーディオンは、どこまで目立たせるべきか
ユーザーに該当箇所がアコーディオンすることをUIで伝える必要がありますが、どこまで目立たせるべきかは悩むポイントかと思います。
方法としては、主に下記が挙げられます。
背景色、文字色の変更
hover時の不透明度、色の変更
下線の追加
矢印アイコンの追加
これらを行えばアコーディオン箇所を目立たせることができますが、先ほど紹介した、主なサービスのアコーディオンを見ると、そこまで目立たせてないことが分かると思います。
最低限のデザインとしては「矢印アイコンの追加」のみとなります(矢印アイコンの向きは下向き、開いた後は上向きがベター)。
周りとの調和次第になりますが、過剰に「要素の追加」「色変更」などはせずに、全体のバランスを保つことが大事となります。
矢印も何も装飾が必要ないケースもある
開いた後に閉じることが出来ないボタン「さらに表示」があります。
下記はスマホアプリのGoogleカレンダーのUIです。
中央にある「さらに表示」を押すと、畳まれた内容が表示されます。
PCとは異なり「折りたたむ」ボタンは無く、畳むことは出来ません。
畳むことができないUIの場合はテキストのみで問題ないという例となります。もちろん場合によっては「下矢印アイコン」「プラスアイコン」を付けていいと考えられますが、アイコンが無くても伝わることを覚えておくと、過剰な装飾を避けられるでしょう。
アコーディオンUIは、SEOにどのように評価されるか?
デザインとは異なりますが、マーケティングに興味ある方は気になる箇所だと思います。
アコーディオンで隠されている内容がGoogleのクローラーにきちんと伝えられているかという観点ですが、下記の海外記事を紹介します。
記事では、Googleの公式コメントとクローラーの実際の読み込み挙動が異なることがあると述べられています。Googleのアルゴリズムは日々進化しているため、この記事も時間が経つと古くなり、必ずしも正確でなくなる可能性があります。しかし、参考程度に知っておく価値はあるでしょう。
まとめ
UI観察のアコーディオン編でした。参考になりましたでしょうか?
アコーディオンのデザインを実装する際に参考にしてくださいませ。
(不明点やタブに関する記事、質問などコメントお待ちしてます!)
X(Twitter)アカウント
https://twitter.com/makotoK1988
参考記事
この記事が気に入ったらサポートをしてみませんか?