よくある質問のページなどで見かける、見出しを押すと中身が開いたり閉じたりする部品を作ろうとして、どんなときに使えばいいのか、開くことをどう伝えればいいのかと迷ったことはありませんか。
この部品はアコーディオンメニューと呼ばれ、長いページをすっきり見せられる便利な部品ですが、使い方を間違えると大事な情報が見落とされる原因にもなります。
この記事では、アコーディオンメニューとは何か、Webデザインでの使いどころと使わない方がよい場面、開閉の示し方(矢印やプラス・マイナス)などのデザインのコツを、実際に開閉できる見本を使って初心者向けに解説します。
この記事の見本は、サイトの配色ではなく、架空のサービスの配色(青系)で描いています。最初の見本は実際に開閉できますが、それ以外の見本の部品は押しても動きません。
アコーディオンメニューの基本
まずは、アコーディオンメニューとはどんな部品なのか、どんな場面に向いていて、どんな場面には向かないのかを押さえましょう。
アコーディオンメニューとは
アコーディオンメニューとは、縦に並んだ見出しを押すと、その下に隠れていた中身が開いたり閉じたりする部品のことです。
楽器のアコーディオンの蛇腹(じゃばら)が伸び縮みする様子に似ていることから、こう呼ばれています。
デジタル庁デザインシステムは、行政機関などのWebサイトやサービスを、誰にとっても使いやすく作るためにデジタル庁が公開しているデザインのルール集です(デジタル庁デザインシステム)。使いやすさやアクセシビリティを踏まえて部品ごとの使い方が定められているので、この記事でもたびたび参考にします。
メニュー以外にも使われる部品なので、単に「アコーディオン」とも呼ばれ、デジタル庁デザインシステムでも「アコーディオン」という名前で紹介されています(アコーディオン – デジタル庁デザインシステム)。
次の見本は、実際に見出しを押すと開閉できるアコーディオンです。
送料はかかりますか?
5,000円以上のご注文で送料が無料になります。
届くまでに何日かかりますか?
ご注文から3日ほどでお届けします。
返品はできますか?
商品到着から7日以内であれば返品できます。
見本では、最初の質問だけが開いていて、ほかの質問は見出しだけが並んでいます。
このように、見出しの一覧を見て必要なものだけを開けるので、項目が多くてもページが長くなりすぎません。
アコーディオンの構成
アコーディオンは、主に次の3つの部分でできています。
| 部分 | 役割 | よくある質問での例 |
|---|---|---|
| 見出し(ヘッダー) | 中身の内容を短く表し、押すと開閉する | 「送料はかかりますか?」 |
| 開閉アイコン | 押せること、今開いているか閉じているかを示す | 下向きの山形の矢印、プラスとマイナスの記号 |
| 中身(パネル) | 開いたときに表示される内容 | 「5,000円以上で送料無料」という答え |
Webの技術の標準を定めている国際的な団体W3Cが、Webの部品の作り方をまとめた資料「WAI-ARIA Authoring Practices Guide(APG)」でも、アコーディオンは見出しと、それに対応する中身(パネル)の組み合わせとして説明されています(Accordion Pattern – APG(英語))。
アコーディオンの使いどころ
アコーディオンは、同じ種類の項目がたくさん続き、見る人がその中の一部だけを読めばよい場面に向いています。
中身を閉じておくことで見出しの一覧がひと目で見渡せるようになり、自分に関係のある項目をすばやく見つけられるからです。
- よくある質問
質問を一覧で見せ、答えは開いたときだけ表示します。 - 更新履歴やお知らせの過去分
日付と概要を一覧で見せ、詳しい内容は開いたときに表示します。 - スマートフォンのメニューの階層
「サービス」を押すとその下のページの一覧が開く、のように、メニューの中で使われることもあります。
デジタル庁デザインシステムでも、アコーディオンは同じ種類の内容が続くときに、折りたたんで一覧で見やすくするための部品とされ、よくある質問や更新履歴が例に挙げられています。
アコーディオンを使わない方がよい場面
一方で、全員に必ず読んでほしい大事な情報を、アコーディオンの中に隠してはいけません。
閉じた中身は、見る人が見出しを押さない限り目に入らないので、大事な注意書きや条件を入れると、読まれないまま手続きを進められてしまうからです。
デジタル庁デザインシステムでも、重要な情報は原則として最初から隠さずに表示し、ページを短く見せることだけを目的にアコーディオンを使わないよう注意しています。
ほかにも、次のような場面ではアコーディオンは向きません。
- ほとんどの人が全部を読む内容
記事の本文や手順の説明のように、上から順に通して読む内容を細かく閉じると、開く手間が増えるだけになります。 - 中身が少ない内容
開いても1〜2行しかないなら、最初から全部見せたほうが早く読めます。 - 項目が1つだけのとき
デジタル庁デザインシステムでは、1つの補足情報だけを折りたたむ場合は、アコーディオンではなく「ディスクロージャー」という別の部品として扱っています(ディスクロージャー – デジタル庁デザインシステム)。
ディスクロージャーは、「詳しい条件を見る」のような見出しを押すと、その下に1つの補足だけが開閉する小さな部品です。同じ種類の見出しが縦にいくつも並ぶのがアコーディオン、1つだけぽつんと置くのがディスクロージャー、と区別しておきましょう。
Webの使いやすさ(ユーザビリティ)を長年調査・研究しているアメリカの専門機関、Nielsen Norman Groupも、ほとんどの人がページの内容の大部分を必要とする場合や、内容が少ない場合には、アコーディオンを使わないよう勧めています(Accordions on Desktop(英語))。
アコーディオンメニューのデザインのコツ
ここからは、アコーディオンメニューを実際にデザインするときのポイントを見ていきます。
「開閉できると伝える」「押せる範囲を広くする」「見出しで中身を予想させる」の3つが中心です。
開閉のアイコンで「開ける」ことを伝える
アコーディオンの見出しには、開閉できることを示すアイコンを付け、開いたときと閉じたときでアイコンの形を変えます。
アイコンがないと、見出しがただの太字の文章に見え、押すと中身が開くことに気づいてもらえないからです。
よく使われるのは、次の2種類です。
- 山形の矢印(シェブロン)
閉じているときは下向きの「∨」の形、開いたときは上向きの「∧」の形にします。
「下に中身が広がる」ことが伝わりやすい形です。 - プラスとマイナス
閉じているときは「+」、開いたときは「−」にします。
「中身を足す・減らす」というイメージで伝わります。
Nielsen Norman Groupは、アコーディオンの見出しに付けるアイコンとして、山形の矢印(caret)とプラスの記号が、調査の結果もっともよく機能したと紹介しています。
同じ調査では、右向きの矢印はアイコンがない場合と大きな差がなく、アコーディオンには使わない方がよいと報告されています。
右向きの矢印は「別のページへ移動する」リンクにもよく使われるので、その場で中身が開くアコーディオンでは避けましょう。
商品到着から7日以内であれば返品できます。
商品到着から7日以内であれば返品できます。
NGの見本は、見出しが太字で並んでいるだけなので、押せるのか、ただの小見出しなのかが分かりません。
2つのOKの見本は、アイコンの形で「開ける」ことと「今開いているか」の両方が伝わります。
アイコンを見出しの文字の前に置くか後ろに置くかは、デザインシステムによって違い、たとえばデジタル庁デザインシステムでは見出しの文字の前に置いています(アコーディオン 使い方 – デジタル庁デザインシステム)。
どちらにする場合も、サイトの中でアイコンの形と位置を統一しておくことが大切です。
見出し全体を押せるようにする
アコーディオンは、アイコンだけでなく、見出しの行全体を押せるようにします。
見る人はアイコンだけでなく見出しの文字を押すことも多いので、小さなアイコンしか反応しないと、押しても開かない部品だと思われてしまうからです。
Nielsen Norman Groupの調査でも、アイコンと見出しの文字はほぼ同じくらい押されていて、どちらを押しても同じ動きになるべきだと報告されています(Accordion Icons: Which Signifiers Work Best?(英語))。
見出し全体が押せることは、ホバー時に行全体の背景色を変えるなどして伝えます。
5,000円以上のご注文で送料が無料になります。
ホバー時の見本では、行全体の背景色が変わるので、文字の部分を押しても開くことが自然に伝わります。
開いた状態の見本では、答えを見出しのすぐ下に置き、次の見出しとの間は空けることで、どの見出しの中身なのかが分かるようにしています。
人の目には、近くに置かれたもの同士を、同じグループの仲間として見る性質があります。答えが自分の見出しから離れて次の見出しに近づいていると、「これはどの質問の答えだろう」と迷わせてしまうので、答えは自分の見出しのすぐ下にくっつけ、次の見出しとの間はしっかり空けます(この性質は近接の原則とは?で解説しています)。
見出しだけで中身が予想できるようにする
アコーディオンの見出しは、開かなくても中に何が書いてあるかが分かる言葉にします。
見る人は見出しの一覧だけを見て開くかどうかを決めるので、「その他」「詳細」のようなあいまいな見出しでは、自分に必要な項目かどうか判断できないからです。
よくある質問なら「送料について」ではなく「送料はかかりますか?」のように、見る人が実際に抱く疑問の形で書くと、探している質問を見つけやすくなります。
1つだけ開くか、いくつでも開けるかを決める
アコーディオンには、「1つ開くとほかが自動で閉じる」作りと、「いくつでも同時に開ける」作りがあります。
APGでも、どちらにするかは作る側が決めるものとされています。
迷ったときは、いくつでも開ける作りにしておくのが無難です。
自動で閉じる作りでは、2つの答えを見比べたいときに比べられず、さっき読んだ内容が勝手に閉じて読む位置がずれることもあるからです。
コーディングするときのHTML要素
ここからは、Webサイトを自分でコーディングする人向けの補足です。
デザインツールだけで作る場合は、「見出し・アイコン・中身の3つ」と「閉じた状態と開いた状態の2つ」を描き分けておけば十分です。
HTMLには、開閉する部品を作るための<details>要素と<summary>要素があり、JavaScriptを使わなくても開閉できます(MDN: <details>)。
JavaScript(Webページに動きを付けるプログラミング言語)で開閉の動きを作り込まなくても、要素で囲むだけで、ブラウザが開閉の動きを用意してくれるということです。デザインを担当する場合も、「開発する人と話すときは、この要素が土台になる」と知っておくと話が通じやすくなります。
<details>
<summary>送料はかかりますか?</summary>
<p>5,000円以上のご注文で送料が無料になります。</p>
</details><summary>に書いた文字が見出しになり、それ以外の中身は開いたときだけ表示されます。
<details>にopen属性を付けると最初から開いた状態になり、同じname属性を付けた<details>同士は、一度に1つだけ開く作りになります。
この記事の最初の見本も、この<details>要素で作っていて、デジタル庁デザインシステムでもアコーディオンの実装に<details>要素を使う方法が示されています。
アイコンの見た目を変えたり、開閉に動きを付けたりする詳しい作り方は、今後のHTML/CSS入門・JavaScript入門シリーズで扱う予定です。
実践のポイント
アコーディオンメニューで陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- キャンセルの条件や料金の注意書きなど、必ず読んでほしい情報をアコーディオンの中に入れてしまうことがあります。
大事な情報は閉じずに、最初から見える場所に置きましょう。 - ページを短く見せたいからと、記事の本文や手順の説明まで細かく折りたたんでしまうことがあります。
通して読む内容は、開く手間が増えるだけなので折りたたまないようにしましょう。 - 開閉のアイコンがなく、見出しがただの太字の文章に見えてしまうことがあります。
山形の矢印やプラス・マイナスで、開けることと今の状態を示しましょう。 - アイコンの部分だけが押せて、見出しの文字を押しても開かないことがあります。
見出しの行全体を押せるようにしましょう。 - アコーディオンの中に、さらにアコーディオンを何段も入れてしまうことがあります。
今どの階層を見ているのか分からなくなるので、入れ子は避け、内容の分け方を見直しましょう。
よくある質問
- Q. アコーディオンとタブは、どう使い分ければいい?
A. 項目が多く、複数を同時に開いて見たい可能性があるならアコーディオン、少ない数の観点を1つずつ切り替えて見せたいならタブが向いています。
アコーディオンは縦に並ぶので、画面の狭いスマートフォンでも項目が増えても崩れにくい、という利点もあります。 - Q. 最初から開いておいてもいい?
A. 構いません。
多くの人が読む最初の項目だけを開いておくと、「押すと中身が開く部品だ」と気づいてもらうきっかけにもなります。
ただし、全部を開いておくならアコーディオンにする意味がないので、本当に折りたたむ必要があるかを見直しましょう。 - Q. アコーディオンメニューとドロップダウンメニューの違いは?
A. アコーディオンメニューは、開いた中身がその場で下に広がり、下にある内容を押し下げて表示されます。
ドロップダウンメニューは、押したボタンの下に、ほかの内容の上に重なる形で選択肢の一覧が表示されるのが一般的です(パソコン向けのサイトのヘッダーで「製品情報」などを押すと浮き出てくるメニューの一覧など)。
ページの中で読む内容を折りたたむならアコーディオン、ヘッダーなどで選択肢の一覧を一時的に出すならドロップダウン、と考えると区別しやすくなります。
まとめ
アコーディオンメニューとは、見出しを押すと中身が開閉する部品で、よくある質問のように同じ種類の項目が続き、見る人が一部だけを読めばよい場面に向いています。
大事な情報は隠さず、山形の矢印やプラス・マイナスで開閉できることと今の状態を示し、見出しの行全体を押せるようにして、見出しだけで中身が予想できる言葉にすることがポイントです。
まずはよく使うサービスの「よくある質問」のページを開き、どんなアイコンで開閉を示しているか、見出しの文字を押しても開くかを確かめてみてください。
