--- title: デザイン紹介 - アコーディオン｜情報をコンパクトにまとめる description: Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は情報をコンパクトにまとめられるアコーディオンWidgetを紹介します。 image: https://23251619.hs-sites.com/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-07-14%2012.27.04.png --- 活用方法 # デザイン紹介 - アコーディオン｜情報をコンパクトにまとめる Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は情報をコンパクトにまとめられるアコーディオンWidgetを紹介します。 [ yuiko ](https://23251619.hs-sites.com/author/yuiko) 7 14, 2023 --- **今回教えてくれたのは** ## **Shihori Nakaide** **- BizOps チーム - Assistant Manager** 2021年2月よりSIVAにJoinし、CXチームで活動。ユーザーからのお問い合わせの解決やチームリーダーとしての役割・ユーザーに合わせた機能活用の提案・コミュニティの運営・オフ会の実施などを務めており、大手広告代理店の動向に関する知識を豊富に持っている。 ![スクリーンショット 2023-07-05 12.04.38](https://23251619.hs-sites.com/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-07-05%2012.04.38.png)   ### 目次 | 01 | [アコーディオンのデザインが人気な理由](https://23251619.hs-sites.com/widget_introduction_6#headline1) | | --- | --- | | 02 | [予め用意されたデザインを使えば、時間短縮に](https://23251619.hs-sites.com/widget_introduction_6#headline2) | | 03 | [アコーディオンのデザイン 20選](https://23251619.hs-sites.com/widget_introduction_6#headline3) | | 04 | [まとめ](https://23251619.hs-sites.com/widget_introduction_6#headline4) | ## 01｜アコーディオンのデザインが人気な理由 ---   ### - 情報をコンパクトにまとめて見やすくしたデザインだから コンテンツを階層化して表示することで、情報の整理と表示領域の節約に役立ちます。情報をコンパクトにまとめることで、ユーザーは簡潔な概要を把握しやすく◎ Q&Aや規約などの長文になりやすいコンテンツもシンプルに見せることができ、スマホでも読みやすいページに仕上がります。 ### - ユーザーが素早く必要な情報に辿り着けるから 長いスクロールをせずとも読みたい情報にすぐ到達できるため、読了ストレスを軽減することができます。コンテンツを収納しておき、必要な場合にのみ展開することで、スクリーンスペースを効果的に活用できます。 ## 02｜予め用意されたデザインを使えば、時間短縮に ---   ![image-1](https://23251619.hs-sites.com/hs-fs/hubfs/image-1.gif?width=750&height=378&name=image-1.gif) | 1 | Squad beyondの管理画面にログインし、beyondページを作成 | | --- | --- | | 2 | Widget管理をクリックし、カテゴリーや検索でお好きなWidgetを追加 | | 3 | テキストを変更したり、色やサイズを調整して完成 |   Squad beyondでは、800種類以上の「Widget」というLP制作パーツを提供しており、これらを組み合わせることで簡単にLPを作成することができます。特に比較表のデザインを再現する際には、従来は専門知識が必要で制作が困難でしたが、今では「Widget」を活用することで、誰でも素早く簡単に制作することができます。LPを効率的に量産し、コンバージョン率の向上を目指しましょう。 ▼ 参考記事 - [Widgetの余白を無くしたり、増やしたりしたい](https://knowledge.squadbeyond.com/edit-page/put-on-widget/margin) - [Widget内の文章の行間を変更したい](https://knowledge.squadbeyond.com/edit-page/put-on-widget/edit-letter) - [Widgetマスターへの第一歩｜修正相談・新規作成依頼の手順まとめ](https://23251619.hs-sites.com/squadvoice_widget) ## 03｜アコーディオンWidget 20選 ---   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **一覧（アコーディオン）※要javascript** **/ Widget名** ![3bda203c30ceaf18203f13861a3546b6](https://23251619.hs-sites.com/hs-fs/hubfs/3bda203c30ceaf18203f13861a3546b6.gif?width=400&height=176&name=3bda203c30ceaf18203f13861a3546b6.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/_SGrjimySMXDEwaCFQ/draft?token=03d02a84004234634ab6b5b984143d38) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオンの中に画像とテキスト※要javascript** **/ Widget名** ![ad42ad30a563cd71db28dfb426b21ba8](https://23251619.hs-sites.com/hs-fs/hubfs/ad42ad30a563cd71db28dfb426b21ba8.gif?width=398&height=174&name=ad42ad30a563cd71db28dfb426b21ba8.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/eOEYvekF_VTUOf-g/draft?token=52a64efd99446288d236012f174326f3)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオン（背景色あり）※要javascript** **/ Widget名** ![dccdb43c98400dc053424189aef178fe](https://23251619.hs-sites.com/hs-fs/hubfs/dccdb43c98400dc053424189aef178fe.gif?width=396&height=328&name=dccdb43c98400dc053424189aef178fe.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/jvMvRLEEjdAk_kzdEYYQ/draft?token=c40e06c30a4f1eadb08e7340708e4165) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオン** **/ Widget名** ![5a87edfe3de7b4bdd5ebf5d1dd6c095b](https://23251619.hs-sites.com/hs-fs/hubfs/5a87edfe3de7b4bdd5ebf5d1dd6c095b.gif?width=396&height=398&name=5a87edfe3de7b4bdd5ebf5d1dd6c095b.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/oeh_AplSXZaJhXleeaw/draft?token=397b3cc994c1ae04b594ab5782a99dc9)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオンの中にテーブル ※要javascript** **/ Widget名** ![d69c5163704ba604fb7270b3ff788cf3](https://23251619.hs-sites.com/hs-fs/hubfs/d69c5163704ba604fb7270b3ff788cf3.gif?width=394&height=782&name=d69c5163704ba604fb7270b3ff788cf3.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/JFSqCCgoxBolbouKtoh-w/draft?token=58ea759a3376f38a4bf2572db63614e2) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオン（三階層・テーブルあり）※要javascript** **/ Widget名** ![19302baf65d5e6b6b5d598db27961756](https://23251619.hs-sites.com/hs-fs/hubfs/19302baf65d5e6b6b5d598db27961756.gif?width=376&height=786&name=19302baf65d5e6b6b5d598db27961756.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/JubmzSTDtQVNgvA/draft?token=d66154ebe9c2a1d0ba5772d62119c5f2)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオンで表示/非表示（画像可）※要javascript** **/ Widget名** ![052f9acb0634fe4afa6b3104c87bf526](https://23251619.hs-sites.com/hs-fs/hubfs/052f9acb0634fe4afa6b3104c87bf526.gif?width=396&height=144&name=052f9acb0634fe4afa6b3104c87bf526.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/WepGuiqYLxNYCodYFsag/draft?token=145df1fbc56142a0291cfd163aa52253) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオンで表示/非表示※要javascript** **/ Widget名** ![53fb2bfb6132a8035972c0f38498bbae](https://23251619.hs-sites.com/hs-fs/hubfs/53fb2bfb6132a8035972c0f38498bbae.gif?width=398&height=166&name=53fb2bfb6132a8035972c0f38498bbae.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/_ZKiiA-IycnFrPFDnQ/draft?token=20005f66449213a30cfc3f5670633b0d)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **フッターメニュー（アコーディオン有）※要javascript** **/ Widget名** ![e93200f82174616c4b3e14bac4abb168](https://23251619.hs-sites.com/hs-fs/hubfs/e93200f82174616c4b3e14bac4abb168.gif?width=396&height=576&name=e93200f82174616c4b3e14bac4abb168.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/au_velCqsmGwSngzyg/draft?token=81e4ab5b76135a66d3bd92b2bbdb57c9#top) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオン（ボタンクリックでテキスト・画像・次の問題を表示）※要JavaScript** **/ Widget名** ![1713c83a1061f90412af3934ce846df4](https://23251619.hs-sites.com/hs-fs/hubfs/1713c83a1061f90412af3934ce846df4.gif?width=398&height=604&name=1713c83a1061f90412af3934ce846df4.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/kyRGUbMpmPkqFnFg/draft?token=540b5db5b5b2766a1f19a2e13698f868)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオン（3階層） ※要JavaScript** **/ Widget名** ![8102a38a06217e1ddcb741f2969f85a1](https://23251619.hs-sites.com/hs-fs/hubfs/8102a38a06217e1ddcb741f2969f85a1.gif?width=380&height=782&name=8102a38a06217e1ddcb741f2969f85a1.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/MVIfZQhaIbULdYhXLRw/draft?token=603e71afc978cafa91c231b25567b084) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **よくある質問コンテンツ（アコーディオン）※要Javascript** **/ Widget名** ![ffe1deb74806cebf9a4a4e07320e4687](https://23251619.hs-sites.com/hs-fs/hubfs/ffe1deb74806cebf9a4a4e07320e4687.gif?width=396&height=792&name=ffe1deb74806cebf9a4a4e07320e4687.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/RiPzXZgJwbFhPEtDnOXw/draft?token=2928393d4f34bacd708ea9001340039c)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アンケート 回答後にコンテンツをアコーディオンで開く※要javascript** **/ Widget名** ![102077d592baba5f0239aff1e18fc13e](https://23251619.hs-sites.com/hs-fs/hubfs/102077d592baba5f0239aff1e18fc13e.gif?width=396&height=794&name=102077d592baba5f0239aff1e18fc13e.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/kqGSBNxA_vfjNxwQ/draft?token=fed552e5a3da8c92161c68625e62b383) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオン（ボタンクリックでテキスト・画像・次の問題を表示）※要JavaScript** **/ Widget名** ![1a358d9076889b5f7dfb54ad2236672c](https://23251619.hs-sites.com/hs-fs/hubfs/1a358d9076889b5f7dfb54ad2236672c.gif?width=398&height=760&name=1a358d9076889b5f7dfb54ad2236672c.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/YrgieYNGZAXXTGRYlA/draft?token=524bb49a33cf047da8a5ed1670e20ab1)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオンメニュー** **/ Widget名** ![903735eb5c7b8a0ed3bb59052fa153e4 (1)](https://23251619.hs-sites.com/hs-fs/hubfs/903735eb5c7b8a0ed3bb59052fa153e4%20(1).gif?width=396&height=228&name=903735eb5c7b8a0ed3bb59052fa153e4%20(1).gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/UBpbXSbtQP-YQtTIuA/draft?token=0db6d4700f4c502a635eb5cd664d2cca) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオンメニュー（シンプル）** **/ Widget名** ![02d9c1ae7a0b2d63b29b06cef5488390](https://23251619.hs-sites.com/hs-fs/hubfs/02d9c1ae7a0b2d63b29b06cef5488390.gif?width=398&height=204&name=02d9c1ae7a0b2d63b29b06cef5488390.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/OUKZCVQATvjizTAhRnyQ/draft?token=e173c550af809b254978da3cbb5c9563)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオンメニュー（複数）** **/ Widget名** ![e62f725ed7f76cb8362392ea264f1b3e](https://23251619.hs-sites.com/hs-fs/hubfs/e62f725ed7f76cb8362392ea264f1b3e.gif?width=398&height=424&name=e62f725ed7f76cb8362392ea264f1b3e.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/wVwYzXSSqxhJTMDXw/draft?token=9cf85c9eadb694484ef41ad49fd25312) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオンメニュー ※要javascript** **/ Widget名** ![54577516eedfa45900ba4339f7f0da48](https://23251619.hs-sites.com/hs-fs/hubfs/54577516eedfa45900ba4339f7f0da48.gif?width=400&height=440&name=54577516eedfa45900ba4339f7f0da48.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/NVkliWlQjhPJLUKwXg/draft?token=260df82b1ac77323f096f289031fa27e)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **追従型ハンバーガーメニュー ※要javascript(見出し)** **/ Widget名** ![39fcf40bb696d9e36a58005dbe7129d7](https://23251619.hs-sites.com/hs-fs/hubfs/39fcf40bb696d9e36a58005dbe7129d7.gif?width=1000&height=186&name=39fcf40bb696d9e36a58005dbe7129d7.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/FOWiwLdhEkWvJyDNHA/draft?token=85ead8dceb1588340ea3d81ab9f1dacb) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アコーディオンメニュー（下層メニューあり）※要JavaScript** **/ Widget名** ![0ead4c1492ca4da93c5b30402a49542a](https://23251619.hs-sites.com/hs-fs/hubfs/0ead4c1492ca4da93c5b30402a49542a.gif?width=398&height=776&name=0ead4c1492ca4da93c5b30402a49542a.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/HCOgzxN_G_qckDkWwTEA/draft?token=de436fa1cbce450f3acb6e32992f51c1) ## 04｜まとめ --- アコーディオンのデザインは、情報をコンパクトにまとめることができます。アコーディオンWidgetを活用することで、従来のコーディングに費やしていた時間を短縮できますので、積極的にご利用ください！修正方法を相談したい場合は、[https://service.squadbeyond.com/voice/](https://service.squadbeyond.com/voice/) よりお尋ね下さい。     ▼関連記事 - [デザイン紹介 - スライド・カルーセル｜静止画よりも注目されやすい](https://23251619.hs-sites.com/widget_introduction_7) - [デザイン紹介 - ボタン｜ユーザーの行動を迷わせず導く](https://23251619.hs-sites.com/widget_introduction_8) - [Widgetマスターへの第一歩｜修正相談・新規作成依頼の手順まとめ](https://23251619.hs-sites.com/squadvoice_widget) - [【ユーザーインタビュー】WordPressの4倍速で記事制作を](https://23251619.hs-sites.com/mobilemovement) [![ブログCTA案](https://23251619.hs-sites.com/hs-fs/hubfs/%E3%83%96%E3%83%AD%E3%82%B0CTA%E6%A1%88.png?width=1500&height=500&name=%E3%83%96%E3%83%AD%E3%82%B0CTA%E6%A1%88.png)](https://lp.squadbeyond.com/download/vtzolnmytctnya) [![2](https://23251619.hs-sites.com/hs-fs/hubfs/2.png?width=1500&height=500&name=2.png)](https://lp.squadbeyond.com/download/creative-heatmap) *Squad beyondのご利用には、アカウント開設が必要です。* *[![デモを依頼する](https://no-cache.hubspot.com/cta/default/23251619/0b35c6a6-3d16-4951-83e9-42a4fb2edaf8.png)](https://cta-redirect.hubspot.com/cta/redirect/23251619/0b35c6a6-3d16-4951-83e9-42a4fb2edaf8)* *お好きな時間を選んで、どんなことでもお気軽にご相談ください。* *（商談の設定、お見積もり依頼、サービスの簡単な説明 など）*   [活用方法](https://23251619.hs-sites.com/tag/活用方法) [LP改善](https://23251619.hs-sites.com/tag/lp改善) [LP制作](https://23251619.hs-sites.com/tag/lp制作) ## Similar posts 活用方法 ### [デザイン紹介 - 診断｜LP内で個別の体験を提供する](https://23251619.hs-sites.com/widget_introduction_3) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は個別の体験を提供できる診断Widgetを紹介します。 yuiko 7 11, 2023 活用方法 ### [デザイン紹介 - 比較表｜一瞬で選択肢を視覚的に示す](https://23251619.hs-sites.com/widget_introduction_1) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回はどの案件にも使える万能な比較表Widgetを紹介します。 yuiko 7 6, 2023 活用方法 ### [デザイン紹介 - クチコミ｜説得力のある文言を視覚で表現する](https://23251619.hs-sites.com/widget_introduction_2) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回はどの案件にも使える万能なクチコミWidgetを紹介します。 yuiko 7 7, 2023 ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "yuiko", "url" : "https://23251619.hs-sites.com/author/yuiko" }, "dateModified" : "2023-09-15T02:43:06.158Z", "datePublished" : "2023-07-14T05:35:44.000Z", "headline" : "デザイン紹介 - アコーディオン｜情報をコンパクトにまとめる", "image" : [ "https://23251619.hs-sites.com/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-07-14%2012.27.04.png" ], "mainEntityOfPage" : { "@id" : "https://23251619.hs-sites.com/widget_introduction_6", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://23251619.hs-sites.com/hubfs/SB_Logo_RGB_Symbol_Primary-4-1.png" }, "name" : "株式会社Squad" } } ```