アコーディオン

定義

アコーディオンは、見出しだけを縦に並べておき、ユーザーが特定の見出しを押すと、その下に 隠れていた中身が開く折りたたみ式のリストです。ふだんはリスト全体が短く畳まれているので 画面をひと目で見渡しやすく、気になる項目だけを押して開けばよいだけです。名前のとおり、 楽器のアコーディオンの蛇腹が伸び縮みするように、必要なときだけ中身が広がる姿から この名前が付きました。もっともよくある例が「よくある質問（FAQ）」です。数十個の質問を 一度に開いておくと画面が延々と長くなってしまいますが、アコーディオンで畳んでおけば、 ユーザーは自分に必要な質問を一つだけ開いて答えを確認できます。

なぜ重要か

項目は多いけれど、ユーザーが一度に全部を読む必要はない。そんなときアコーディオンは スペースを大きく節約してくれます。畳まれた見出しの一覧が目次の役割を果たし、まず全体の 構造をつかませたうえで、その中から気になるものだけを開いて深く入っていく流れをつくります。 おかげでユーザーは、興味のない内容をスクロールで通り過ぎる手間なく、目当ての項目に まっすぐたどり着けます。タブと似て見えますが、決定的な違いがあります。タブは一度に一つ だけを見せて横に並ぶのに対し、アコーディオンは縦に積み重なり、複数を同時に開いておくことも でき、中身の長さの制約も少なめです。だから長さがまちまちな説明や設定項目のように、分量を 予測しにくい可変のコンテンツにとりわけよく合います。

よくある間違い

• 本当に大切で、全員が必ず見るべき情報をアコーディオンの中に畳んでしまうケースです。 畳まれた中身はもう一度押さないと見えないので、肝心な案内や警告を隠してしまうと、かなりの ユーザーがその存在にすら気づかず通り過ぎます。必ず読んでほしいものは畳まず、最初から 開いておきましょう。
• 開いているかどうかを知らせる表示がなかったり、あいまいだったりするケースです。矢印の 向きやアイコンが開閉に応じて変わらないと、ユーザーはこの項目をすでに開いたのか、押しても よいのか迷い、同じ場所を何度も押すことになります。

実務のヒント

• 一度に一つだけ開くようにするか、複数を同時に開けるようにするかを先に決めましょう。 項目どうしの比較が必要なら複数開き、画面を短く保つことが大事なら一つだけ開く方式が 向いています。二つの方式を混ぜると、ユーザーは動きを予測しにくくなります。
• 開いている状態は、矢印の向きのように目立つ合図ではっきり示しましょう。閉じたときと 開いたときのアイコンが確実に違えば、ユーザーは今の状態をひと目で把握でき、どこを開いて おいたか見失いません。見出しを押せる範囲もゆったり取っておくと、手元が滑りにくくなります。
• 見出しを読むだけで中に何があるか見当がつくよう、ラベルは具体的に書きましょう。見出しが ぼんやりしていると、ユーザーは目当ての内容を探して複数の項目をいちいち開いたり閉じたり することになり、スペースを節約するという本来の目的が台無しになります。

関連概念