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

参考記事