アコーディオンUIのデザイン20選｜LPでの使い方と注意点
LPに、よくある質問や料金の補足、注意事項まで載せたい。けれど全部並べると縦に長くなり、肝心の申し込みボタンまでたどり着いてもらえない。そんなときに使えるのが、見出しを押すと中身が開いたり閉じたりするアコーディオンUIです。
この記事では、アコーディオンUIの基本と、LPで使う場面・閉じないほうがよい情報、よくある失敗3つとよくある質問をまとめたうえで、Squad beyondで使えるアコーディオンのWidget 20種類をデザイン例として紹介します。
｜広告運用ノウハウ公開中！
今回教えてくれたのは
目次
Shihori Nakaide
- BizOps チーム
- Assistant Manager
2021年2月よりSIVAにJoinし、CXチームで活動。ユーザーからのお問い合わせの解決やチームリーダーとしての役割・ユーザーに合わせた機能活用の提案・コミュニティの運営・オフ会の実施などを務めており、大手広告代理店の動向に関する知識を豊富に持っている。
目次
| 01 | アコーディオンUIとは？LPで人気な理由 |
| 02 | 予め用意されたデザインを使えば、時間短縮に |
| 03 | アコーディオンのデザイン 20選 |
| 04 | アコーディオンUIでよくある失敗3つ |
| 05 | アコーディオンUIについてよくある質問 |
| 06 | まとめ |
＼LPの制作から検証まで、ひとつの画面で／
- ・10日間、有料プランの機能を無料でお試しいただけます
- ・LP制作からA/Bテスト、効果測定までワンストップ
01｜アコーディオンUIとは？LPで人気な理由
アコーディオンUIは、見出しを押すと、その下の内容が開いたり閉じたりするデザインです。W3CのWAI-ARIA Authoring Practicesでは、縦に並んだ見出しが、それぞれの内容を表示・非表示にする操作部品として働くものと説明されています。1ページに複数の内容を並べるときに、スクロールを減らす目的でよく使われるとしています（出典：Accordion Pattern｜W3C WAI）。
LPでよく使われる理由は、次の3つです。
- 情報をコンパクトにまとめて見やすくしたデザインだから
コンテンツを階層化して表示することで、情報の整理と表示領域の節約に役立ちます。情報をコンパクトにまとめることで、ユーザーは簡潔な概要を把握しやすく◎ Q&Aや規約などの長文になりやすいコンテンツもシンプルに見せることができ、スマホでも読みやすいページに仕上がります。
- ユーザーが素早く必要な情報に辿り着けるから
長いスクロールをせずとも読みたい情報にすぐ到達できるため、読了ストレスを軽減することができます。コンテンツを収納しておき、必要な場合にのみ展開することで、スクリーンスペースを効果的に活用できます。
- スマホでも情報を削らずに収められるから
スマホでは縦に長いページになりやすく、説明を短く削りたくなります。Googleの検索セントラルは、モバイル向けのページで内容を減らすとGoogleがページから取得できる情報が減るとしたうえで、内容を取り除くのではなく、アコーディオンやタブに移してスペースを確保することを勧めています（出典：モバイルファースト インデックスに関するおすすめの方法｜Google 検索セントラル）。
- ただし、申し込みの判断に使う情報は閉じないほうがよい
価格、申し込みの条件、解約の方法のように、申し込むかどうかを決めるときに読む情報は、閉じた中に入れると気づかれないまま読み飛ばされることがあります。アコーディオンに向くのは、よくある質問や補足の説明のように、必要な人だけが開いて読めば足りる情報です。
02｜予め用意されたデザインを使えば、時間短縮に
| 1 | Squad beyondの管理画面にログインし、beyondページを作成 |
| 2 | Widget管理をクリックし、カテゴリーや検索でお好きなWidgetを追加 |
| 3 | テキストを変更したり、色やサイズを調整して完成 |
Squad beyondでは、「Widget」というLP制作パーツを提供しており、これらを組み合わせることで簡単にLPを作成することができます。特にアコーディオンのように開閉の動きがあるデザインは、従来はコーディングの知識が必要でしたが、「Widget」を活用することで、誰でも素早く制作することができます。名前に「※要javascript」が付いているWidgetは、公式FAQの案内に沿って利用方法を確認してから使います（出典：Widgetの使い方｜Squad beyond FAQ）。LPを効率的に量産し、コンバージョン率の向上を目指しましょう。
▼ 参考記事
＼LPの制作から検証まで、ひとつの画面で／
- ・10日間、有料プランの機能を無料でお試しいただけます
- ・LP制作からA/Bテスト、効果測定までワンストップ
03｜アコーディオンWidget 20選
一覧（アコーディオン）※要javascript
/ Widget名
アコーディオンの中に画像とテキスト※要javascript
/ Widget名
アコーディオン（背景色あり）※要javascript
/ Widget名
アコーディオン
/ Widget名
アコーディオンの中にテーブル ※要javascript
/ Widget名
アコーディオン（三階層・テーブルあり）※要javascript
/ Widget名
アコーディオンで表示/非表示（画像可）※要javascript
/ Widget名
アコーディオンで表示/非表示※要javascript
/ Widget名
フッターメニュー（アコーディオン有）※要javascript
/ Widget名
アコーディオン（ボタンクリックでテキスト・画像・次の問題を表示）※要JavaScript
/ Widget名
アコーディオン（3階層） ※要JavaScript
/ Widget名
よくある質問コンテンツ（アコーディオン）※要Javascript
/ Widget名
アンケート 回答後にコンテンツをアコーディオンで開く※要javascript
/ Widget名
アコーディオン（ボタンクリックでテキスト・画像・次の問題を表示）※要JavaScript
/ Widget名
アコーディオンメニュー
/ Widget名
アコーディオンメニュー（シンプル）
/ Widget名
アコーディオンメニュー（複数）
/ Widget名
アコーディオンメニュー ※要javascript
/ Widget名
追従型ハンバーガーメニュー ※要javascript(見出し)
/ Widget名
アコーディオンメニュー（下層メニューあり）※要JavaScript
/ Widget名
04｜アコーディオンUIでよくある失敗3つ
失敗例1：「※要javascript」のWidgetをそのまま置くと、見出しを押しても開かないことがある
- 症状：アコーディオンのWidgetをLPに追加して公開したところ、見出しをタップしても中身が開かないことがある。
- 原因：Squad beyondのWidgetのうち、名前に「※要javascript」が付いているものは、追加するだけでなく、公式FAQで案内されている利用方法を確かめる必要があるWidgetです（出典：Widgetの使い方｜Squad beyond FAQ）。手順を確認しないまま置いてしまっています。
- 対策：公式FAQの「※要javascript」がついているWidgetの使い方を確認して設定し、プレビューで全ての見出しを開閉して動きを確かめます。
- 回避策：公開前のチェック項目に「アコーディオンを全て開閉してみる」を入れ、スマホとパソコンの両方で確認します。
失敗例2：見出しをdivやspanだけで作ると、キーボードで開けない
- 症状：マウスやタップでは開くのに、キーボードでは見出しにフォーカスが当たらず、中身を開けない状態になる。
- 原因：W3CのWAI-ARIA Authoring Practicesでは、見出しのタイトルを「button」の役割を持つ要素に入れ、開いているときはaria-expandedをtrue、閉じているときはfalseにするとしています。また、見出しにフォーカスがあるときにEnterキーかSpaceキーで開けることを求めています（出典：Accordion Pattern｜W3C WAI）。divやspanだけの見出しは、この条件を満たしません。
- 対策：見出しをbutton要素にするか、role="button"とaria-expandedを付け、Enterキー・Spaceキーで開閉できるようにします。
- 回避策：Widgetを編集したあとは、Tabキーで見出しまで移動してEnterキーで開けるかを試してから公開します。
失敗例3：価格や申し込みの条件まで閉じると、判断に必要な情報が読まれない
- 症状：LPをすっきり見せるために料金表や申し込みの条件もアコーディオンに入れると、開かずに読み進めた人が条件を知らないまま申し込みフォームに進むことになる。
- 原因：アコーディオンは、開かれなければ中身が目に入りません。必要な人だけが読めばよい補足と、全員が読むべき条件を分けずに閉じてしまっています。
- 対策：申し込みの判断に使う情報は開いた状態で見せ、よくある質問や補足だけをアコーディオンに収めます。
- 回避策：どこまで閉じるかで迷ったら、Squad beyondで開いた版と閉じた版を複数のVersionとして用意し、同じ配信URLのまま配信割合を決めて出し分けて、レポートで成果を比べてから決めます（出典：Versionの配信割合について｜Squad beyond FAQ）。
05｜アコーディオンUIについてよくある質問
Q. アコーディオンUIとは何ですか？
見出しを押すと、その下の内容が開いたり閉じたりするデザインです。W3CのWAI-ARIA Authoring Practicesでは、縦に並んだ見出しが、それぞれの内容を表示・非表示にする操作部品として働くものと説明されています。1ページに複数の内容を並べるときにスクロールを減らす目的でよく使われ、LPではよくある質問や料金の補足、注意事項などをまとめる場面で使われています。
Q. アコーディオンで閉じた文章は、検索エンジンに読まれますか？
Googleの検索セントラルは、モバイルファーストインデックスの説明で、モバイル向けのページの内容を減らすとGoogleがページから取得できる情報が減るとしたうえで、内容を取り除くのではなく、アコーディオンやタブに移してスペースを確保することを勧めています。スマホで長く見えるからといって文章を削るより、アコーディオンに収めるほうが、この案内に沿った作り方になります。
Q. LPではどんな内容をアコーディオンに入れるとよいですか？
よくある質問、利用規約や注意事項、料金の内訳の補足のように、必要な人だけが開いて読めば足りる内容が向いています。反対に、価格や申し込みの条件、解約の方法など、申し込むかどうかを決めるときに読む情報は、閉じずに見える場所に置くほうが安全です。どこまで閉じるかで迷ったら、開いた版と閉じた版を用意して、成果を比べてから決めると判断がぶれません。
Q. アコーディオンをキーボードでも操作できるようにするには？
W3CのWAI-ARIA Authoring Practicesでは、見出しのタイトルを「button」の役割を持つ要素に入れ、開いているときはaria-expandedをtrue、閉じているときはfalseにするとしています。キーボードでは、見出しにフォーカスがあるときにEnterキーかSpaceキーで開けることが求められています。divやspanだけで見出しを作っていないか、HTMLを開いて確かめておきましょう。
Q. Squad beyondでアコーディオンを使うには？
Version編集画面の［Widget管理］で、カテゴリーや検索からアコーディオンのWidgetを選んで追加します。テキストの変更はクイック編集で、色や余白などの装飾はHTML編集で行えます。名前に「※要javascript」が付いているWidgetは、公式FAQの案内に沿って利用方法を確認してから使います（出典：Widgetの使い方｜Squad beyond FAQ）。この記事の3章で紹介している20種類のデザインも、PREVIEWで動きを確かめられます。
Q. アコーディオンを入れるとCVRは上がりますか？
上がるとは限りません。閉じたことで読みやすくなる場合もあれば、大事な情報に気づかれにくくなる場合もあるため、商材とLPの内容によって結果は変わります。Squad beyondでは、アコーディオンを使った版と使わない版を複数のVersionとして用意し、同じ配信URLのまま配信割合を決めて出し分けられるので、レポートの結果を見てから残す版を決められます（出典：Versionの配信割合について｜Squad beyond FAQ）。
＼LPの制作から検証まで、ひとつの画面で／
- ・10日間、有料プランの機能を無料でお試しいただけます
- ・LP制作からA/Bテスト、効果測定までワンストップ
06｜まとめ
アコーディオンのデザインは、情報をコンパクトにまとめることができます。ただし、価格や申し込みの条件のように判断に使う情報は閉じずに見せ、よくある質問や補足だけを収めるのが基本です。アコーディオンWidgetを活用することで、従来のコーディングに費やしていた時間を短縮できますので、積極的にご利用ください！修正方法を相談したい場合は、https://service.squadbeyond.com/voice/ よりお尋ね下さい。
Squad beyondサービス紹介資料はこちらからダウンロード
▼関連記事
- デザイン紹介 - スライド・カルーセル｜静止画よりも注目されやすい
- デザイン紹介 - ボタン｜ユーザーの行動を迷わせず導く
- Widgetマスターへの第一歩｜修正相談・新規作成依頼の手順まとめ
- 【ユーザーインタビュー】WordPressの4倍速で記事制作を
Squad beyondのご利用には、アカウント開設が必要です。
お好きな時間を選んで、どんなことでもお気軽にご相談ください。
（商談の設定、お見積もり依頼、サービスの簡単な説明 など）
