--- 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-20%2017.41.55.png --- 活用方法 # デザイン紹介 - スライド・カルーセル｜静止画よりも注目されやすい Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は静止画よりも注目されやすいスライド・カルーセルの動きするWidgetを紹介します。 [ yuiko ](https://23251619.hs-sites.com/author/yuiko) 7 20, 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_7#headline1) | | --- | --- | | 02 | [予め用意されたデザインを使えば、時間短縮に](https://23251619.hs-sites.com/widget_introduction_7#headline2) | | 03 | [スライド・カルーセルのデザイン 38選](https://23251619.hs-sites.com/widget_introduction_7#headline3) | | 04 | [まとめ](https://23251619.hs-sites.com/widget_introduction_7#headline4) | ## 01｜スライド・カルーセルのデザインが人気な理由 ---   ### - 動きで視線を誘導し、見せたいものに注目をさせられるから 指でスワイプすることで画像を切り替えるデザインや自動で画像が動くデザインは、ユーザーの興味を引き寄せる効果があります。複数の画像やコンテンツが順番に切り替わることで、静止画よりも目を引きやすく、ユーザーの視線を集めることができ、LPにとどまる時間を増やす助けになります。 ### - 限られたスペースで複数の画像を提供できるから ページ遷移やスクロールをせずとも複数の画像を一度に表示することができるので、情報をコンパクトにまとめられます。 ## 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｜スライド・カルーセルのデザイン 38選 ---   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **カルーセル※要javascript** **/ Widget名** ![a7317e70d871e2dd6ff78d899ef1bd51](https://23251619.hs-sites.com/hs-fs/hubfs/a7317e70d871e2dd6ff78d899ef1bd51.gif?width=344&height=344&name=a7317e70d871e2dd6ff78d899ef1bd51.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/tCCKjMLtohLISkig/draft?token=d379162ec61e5c522205f63c54a2c37b) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **カルーセル（フェードエフェクト）※要javascript** **/ Widget名** ![bb9f31d2a6d611abd8292628a6ccc43e](https://23251619.hs-sites.com/hs-fs/hubfs/bb9f31d2a6d611abd8292628a6ccc43e.gif?width=344&height=342&name=bb9f31d2a6d611abd8292628a6ccc43e.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/PMCDtrCdTN_VypkHWA/draft?token=ac7b98eb6a777bb7d2bc4e1f32936862)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **カルーセル（クリエイティブエフェクト）※要javascript** **/ Widget名** ![ffc25c68865a16aea4ef49faf0808825](https://23251619.hs-sites.com/hs-fs/hubfs/ffc25c68865a16aea4ef49faf0808825.gif?width=344&height=346&name=ffc25c68865a16aea4ef49faf0808825.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/cXNLWeDtDAFFBRNE-A/draft?token=3081a9f0afc69ed3c6ef5e759049cf68) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **横幅いっぱいのカルーセル※要javascript** **/ Widget名** ![7577f4a6931aa8e963edf6084a2e3c85](https://23251619.hs-sites.com/hs-fs/hubfs/7577f4a6931aa8e963edf6084a2e3c85.gif?width=372&height=372&name=7577f4a6931aa8e963edf6084a2e3c85.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/oPhIEirsHKCJrmmCfkVlg/draft?token=cbd8ddb3dff7f7a03afa1c66f0492847)     ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **自動で画像スライド表示※要javascript** **/ Widget名** ![d5a1b9cd1085adaf529718fae2dcc1c5](https://23251619.hs-sites.com/hs-fs/hubfs/d5a1b9cd1085adaf529718fae2dcc1c5.gif?width=312&height=312&name=d5a1b9cd1085adaf529718fae2dcc1c5.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/pOA_ojCXUGcLAKJEvw/draft?token=baf3aa77ac728acd077b945963fcd36a) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **自動で画像スライド表示（サイズ違い）※要javascript(画像)** **/ Widget名** ![d26d68b7bad81cc6ab94283cfef71d92](https://23251619.hs-sites.com/hs-fs/hubfs/d26d68b7bad81cc6ab94283cfef71d92.gif?width=312&height=280&name=d26d68b7bad81cc6ab94283cfef71d92.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/a-wwrmpRGeikvMRQ-PIg/draft?token=139f50f0fa9b98b9c2a4215370600aee)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **カルーセル（矢印小）※要javascript** **/ Widget名** ![f76ae7d06bd02d2731012ff38e84ff60](https://23251619.hs-sites.com/hs-fs/hubfs/f76ae7d06bd02d2731012ff38e84ff60.gif?width=298&height=284&name=f76ae7d06bd02d2731012ff38e84ff60.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/CTWGjFmMuCHwFgwLcA/draft?token=7743d157b56efb79262aec321c42de69) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **自動で画像スライドふわっと表示 ※要javascript** **/ Widget名** ![4f70dbe8e323d83caf494c348a8f8c59](https://23251619.hs-sites.com/hs-fs/hubfs/4f70dbe8e323d83caf494c348a8f8c59.gif?width=312&height=310&name=4f70dbe8e323d83caf494c348a8f8c59.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/oVOIoVFqwaFMBZ_WSkg/draft?token=0b0ab1887f0d044c791eb2db1b3d8e84)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（画像/左右タップでスライド）※要javascript** **/ Widget名** ![471f93966b759a01b727858edbced37d](https://23251619.hs-sites.com/hs-fs/hubfs/471f93966b759a01b727858edbced37d.gif?width=344&height=344&name=471f93966b759a01b727858edbced37d.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/lQjCnfpDFSlaSrjeA/draft?token=71c7670e81ab284b06f93f21b4a475fb) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（画像の中に画像・クリエイティブエフェクト）※要javascript** **/ Widget名** ![41cb37ac1d814006c57fc1f97a58317d](https://23251619.hs-sites.com/hs-fs/hubfs/41cb37ac1d814006c57fc1f97a58317d.gif?width=346&height=344&name=41cb37ac1d814006c57fc1f97a58317d.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/LwMzChMURpwoUZrebw/draft?token=da86a88b3a18e517cbfd9ee4caf32ae4)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（縦スクロール）※要javascript** **/ Widget名** ![732a950fe81e7863ab1ed1b641236e9b](https://23251619.hs-sites.com/hs-fs/hubfs/732a950fe81e7863ab1ed1b641236e9b.gif?width=344&height=344&name=732a950fe81e7863ab1ed1b641236e9b.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/ElQ_LXp_hVpZwCccw/draft?token=21b26dd52633fc8149a2bdbc36b5e474) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（プレビュー表示あり・複数対応）※要javascript** **/ Widget名** ![ea67a28a19fd1c8682a034633f2092f7](https://23251619.hs-sites.com/hs-fs/hubfs/ea67a28a19fd1c8682a034633f2092f7.gif?width=346&height=392&name=ea67a28a19fd1c8682a034633f2092f7.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/gieVOxSXgRiwM-zfTEw/draft?token=9ce38c97ed09b0aa76f02dc1c811ea2b)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（紙風デザイン）※要javascript** **/ Widget名** ![871b01334410d58bcee0440b832f8ccc](https://23251619.hs-sites.com/hs-fs/hubfs/871b01334410d58bcee0440b832f8ccc.gif?width=350&height=412&name=871b01334410d58bcee0440b832f8ccc.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/nZcXKAzxqlfnhyKBWdhg/draft?token=decb84e886a4a90bb6a88f9dfa7ec9af) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（SNS表示風）※要javascript** **/ Widget名** ![89d17396f372b45a498297e013e11df7](https://23251619.hs-sites.com/hs-fs/hubfs/89d17396f372b45a498297e013e11df7.gif?width=346&height=538&name=89d17396f372b45a498297e013e11df7.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/R-ftWBPZkmXAoZmhlw/draft?token=d0cd8541d6b74d0374b9d63eace7863a)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（画像とテキストのみ）※要javascript** **/ Widget名** ![244fb2eab9770a1ae2a561f9c3c2481a](https://23251619.hs-sites.com/hs-fs/hubfs/244fb2eab9770a1ae2a561f9c3c2481a.gif?width=388&height=460&name=244fb2eab9770a1ae2a561f9c3c2481a.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/akSqAwx-oqDbNfEGMA/draft?token=2ef3bf6e623725e4b55a408c2e6cfb69) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（クリックでポップアップ）※要javascript** **/ Widget名** ![5e075bcd75bcf817c233a92aaaeb94e2](https://23251619.hs-sites.com/hs-fs/hubfs/5e075bcd75bcf817c233a92aaaeb94e2.gif?width=340&height=518&name=5e075bcd75bcf817c233a92aaaeb94e2.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/kzSMoQz_jTg_HnGcfQ/draft?token=59374a3a09582208520c1a8aaa2383ff)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（画像/テキスト）※要javascript** **/ Widget名** ![e3e496744143c56d802a60a78af2117d](https://23251619.hs-sites.com/hs-fs/hubfs/e3e496744143c56d802a60a78af2117d.gif?width=338&height=404&name=e3e496744143c56d802a60a78af2117d.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/pmpWGieEHBwJrVJRg/draft?token=18979334c55eb95043df1045f2120eeb) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（画像/テキスト/中央配置）※要javascript** **/ Widget名** ![2c5457df89684d55050809905121ea47](https://23251619.hs-sites.com/hs-fs/hubfs/2c5457df89684d55050809905121ea47.gif?width=290&height=568&name=2c5457df89684d55050809905121ea47.gif)   --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/cs-pvomiPqYcvRYgLXpXw/draft?token=6ffa523a0b67ab01d4c65b18beedb6a3)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（カバーフローエフェクト）※要javascript** **/ Widget名** ![601063e0485e7c844fd93f9f916043b8](https://23251619.hs-sites.com/hs-fs/hubfs/601063e0485e7c844fd93f9f916043b8.gif?width=348&height=228&name=601063e0485e7c844fd93f9f916043b8.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/kZLIRfqkobrRlNghQ/draft?token=1a27d9cb18b44a11833bb0331c9b8b38) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（カードエフェクト）※要javascript** **/ Widget名** ![7e011de4107db15d261316523d7565fc](https://23251619.hs-sites.com/hs-fs/hubfs/7e011de4107db15d261316523d7565fc.gif?width=332&height=254&name=7e011de4107db15d261316523d7565fc.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/lZDAWFOWArRVXBVvwyrHYQ/draft?token=0eaf54c28b36adfa198cc71513acfd38)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **カルーセル - 背景切り替えあり※要javascript** **/ Widget名** ![1198bc853a019d74006f750fbb480899](https://23251619.hs-sites.com/hs-fs/hubfs/1198bc853a019d74006f750fbb480899.gif?width=346&height=228&name=1198bc853a019d74006f750fbb480899.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/fHaMXvzDjRQBuWtXy_CA/draft?token=22070d87d380842639b8bf161de16089) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **画像の中にテキスト、背景画像カルーセル※要javascript** **/ Widget名** ![88792ffdaab2c45f2846e171992541dd](https://23251619.hs-sites.com/hs-fs/hubfs/88792ffdaab2c45f2846e171992541dd.gif?width=342&height=232&name=88792ffdaab2c45f2846e171992541dd.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/jnUFJMAxzZtBnHcsBNhRMA/draft?token=025d2a16daaf6da8175717d371a969d5)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル・動画ポップアップ ※要javascript ** **/ Widget名** ![442361eab048c0d03129ee4130903aa7](https://23251619.hs-sites.com/hs-fs/hubfs/442361eab048c0d03129ee4130903aa7.gif?width=396&height=128&name=442361eab048c0d03129ee4130903aa7.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/RnVhqftRyEMnPAuKEjw/draft?token=cd8a4c1da5772ff24274d59b0658b9a8) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（画像リンク）※要javascript** **/ Widget名** ![0d0bc2f5be759886c9cf0416015dc53d](https://23251619.hs-sites.com/hs-fs/hubfs/0d0bc2f5be759886c9cf0416015dc53d.gif?width=336&height=150&name=0d0bc2f5be759886c9cf0416015dc53d.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/ynPoNFQymRbGDlonaA/draft?token=3a1e1c93282efd3fc2daa6dd14b630c0)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル - 複数個対応※要javascript** **/ Widget名** ![5aee9b4107bb9d49754f89cbb145ee82](https://23251619.hs-sites.com/hs-fs/hubfs/5aee9b4107bb9d49754f89cbb145ee82.gif?width=398&height=46&name=5aee9b4107bb9d49754f89cbb145ee82.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/fnJeJbLnYYOYi-HlldA/draft?token=de59599459f9cc2936f95b981af5fe8a) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **トリミングで画像の幅、高さを揃えたカルーセル※要javascript** **/ Widget名** ![ae0d4deede5df40b4bf22b5758b13fab](https://23251619.hs-sites.com/hs-fs/hubfs/ae0d4deede5df40b4bf22b5758b13fab.gif?width=312&height=98&name=ae0d4deede5df40b4bf22b5758b13fab.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/aQNIwjIFgHobZVqPikQ/draft?token=c913560d633f52aec095348cb9cc8766)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **真ん中強調のカルーセル※要javascript(アクション)** **/ Widget名** ![b577f44d11ebe2965f2941f892e412ec](https://23251619.hs-sites.com/hs-fs/hubfs/b577f44d11ebe2965f2941f892e412ec.gif?width=320&height=90&name=b577f44d11ebe2965f2941f892e412ec.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/CUEnSQLMBZWVdUwftarSw/draft?token=aef62f3e0eec533749b2aceb55caa0d3) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル上部にテキスト挿入可※要javascript** **/ Widget名** ![8c25eb5044b5e3481a793acafe1328c7](https://23251619.hs-sites.com/hs-fs/hubfs/8c25eb5044b5e3481a793acafe1328c7.gif?width=344&height=120&name=8c25eb5044b5e3481a793acafe1328c7.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/nMkPHhxViCDRVYukmMXBVg/draft?token=a0179e8bedba935a83ad25b4cdfbd477)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル - 全画面 ※要JavaScript** **/ Widget名** ![4fb3aa01faa32a07a45f4db2ee0c1888](https://23251619.hs-sites.com/hs-fs/hubfs/4fb3aa01faa32a07a45f4db2ee0c1888.gif?width=346&height=422&name=4fb3aa01faa32a07a45f4db2ee0c1888.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/DlmushqmIPYbYhinBA/draft?token=490e5eda3e2ef86ecda67c585b7f72c6) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **カルーセル（背景カラー設定/画像サイズ縮小/左右矢印フェードイン）※要Javascript** **/ Widget名** ![336c020ac9a4f82345939708b6959f32](https://23251619.hs-sites.com/hs-fs/hubfs/336c020ac9a4f82345939708b6959f32.gif?width=342&height=446&name=336c020ac9a4f82345939708b6959f32.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/CvkcUoxlAqTIxtBAg/draft?token=3906d5f98277cc2a9ae40679b20f281c)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **動画/画像をスライドで比較（左右）※要javascript** **/ Widget名** ![e65cf837fd7178761e653bc5878d8f87](https://23251619.hs-sites.com/hs-fs/hubfs/e65cf837fd7178761e653bc5878d8f87.gif?width=342&height=196&name=e65cf837fd7178761e653bc5878d8f87.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/FOxZazHFnJQQpEKtMazA/draft?token=4802b69611c024db5069c1ae0c2140e0) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **Before/After画像をスライドで比較（クリックして上下比較） ※要javascript** **/ Widget名** ![d328948a2bcd6da52759f895ad0ebad7](https://23251619.hs-sites.com/hs-fs/hubfs/d328948a2bcd6da52759f895ad0ebad7.gif?width=344&height=234&name=d328948a2bcd6da52759f895ad0ebad7.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/wIFfCpvUrLaCOQhCrjg/draft?token=983d6497ec658bf07f3df31bfb4ac6ea)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **Before/After画像をスライドで比較（クリックして左右にずらす） ※要javascript** **/ Widget名** ![95707c1549600bb2a27551ff14cfedae](https://23251619.hs-sites.com/hs-fs/hubfs/95707c1549600bb2a27551ff14cfedae.gif?width=344&height=234&name=95707c1549600bb2a27551ff14cfedae.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/dHWGrZMIKZdfputIcnw/draft?token=a927e65a0e5019f9c88bbcf65bf3863a) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **Before/After画像をスライドで比較（カーソルを合わせるだけ、左右比較） ※要javascript** **/ Widget名** ![681f4ae3d5f1da98b0b01ae71f3b8a61](https://23251619.hs-sites.com/hs-fs/hubfs/681f4ae3d5f1da98b0b01ae71f3b8a61.gif?width=346&height=234&name=681f4ae3d5f1da98b0b01ae71f3b8a61.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/uxhNDtOMiOA_O_iRTlrg/draft?token=765a64c13303a7b65aaddc099eed4e96)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **カルーセル（スマホ枠）※要javascript** **/ Widget名** ![aef8df0a53ccc7c2023f6e7a70758eff](https://23251619.hs-sites.com/hs-fs/hubfs/aef8df0a53ccc7c2023f6e7a70758eff.gif?width=276&height=544&name=aef8df0a53ccc7c2023f6e7a70758eff.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/M-ZIzwzKg_QsWcINbpYg/draft?token=1913b595218e2611c10bd62b9f1cec68) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **カルーセル（グラデーション枠）※要javascript(アクション)** **/ Widget名** ![9875c7074aac0261b84895a61dc99e63](https://23251619.hs-sites.com/hs-fs/hubfs/9875c7074aac0261b84895a61dc99e63.gif?width=348&height=646&name=9875c7074aac0261b84895a61dc99e63.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/RQjvq_YVwPAqKnvVetPg/draft?token=6734f02892fb1d16e90f851d30990dd4)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アンケートの選択肢をスライド化 ※要JavaScript** **/ Widget名** ![95a82658ec621b15a137bb469d940322](https://23251619.hs-sites.com/hs-fs/hubfs/95a82658ec621b15a137bb469d940322.gif?width=370&height=614&name=95a82658ec621b15a137bb469d940322.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/DovJKq_MmYIBfwh-xsZg/draft?token=965c1167fd510c55888141ae4437d31f) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **ホバーするとスライドしてボタン表示** **/ Widget名** ![89869e12db420074d48a505bcd309676](https://23251619.hs-sites.com/hs-fs/hubfs/89869e12db420074d48a505bcd309676.gif?width=366&height=620&name=89869e12db420074d48a505bcd309676.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/sLeclwdrbKkwGOzdBcWQ/draft?token=7dbc25e31912193c8052b8fb3eb84fa1) ## 04｜まとめ --- スライド・カルーセルのデザインは、静止画よりも注目されやすいです。スライド・カルーセルWidgetを活用することで、従来のコーディングに費やしていた時間を短縮できますので、積極的にご利用ください！修正方法を相談したい場合は、[https://service.squadbeyond.com/voice/](https://service.squadbeyond.com/voice/) よりお尋ね下さい。     ▼関連記事 - [デザイン紹介 - ボタン｜ユーザーの行動を迷わせず導く](https://23251619.hs-sites.com/widget_introduction_8) - [デザイン紹介 - グラフ｜データは読ませず、見せるもの](https://23251619.hs-sites.com/widget_introduction_9) - [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 活用方法 ### [デザイン紹介 - ランキング｜信頼感を醸成し支持を強くする](https://23251619.hs-sites.com/widget_introduction_5) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は信頼感を醸成し支持を強くするランキングWidgetを紹介します。 yuiko 7 13, 2023 活用方法 ### [デザイン紹介 - 診断｜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_6) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は情報をコンパクトにまとめられるアコーディオンWidgetを紹介します。 yuiko 7 14, 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:47:10.095Z", "datePublished" : "2023-07-20T10:11:54.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-20%2017.41.55.png" ], "mainEntityOfPage" : { "@id" : "https://23251619.hs-sites.com/widget_introduction_7", "@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" } } ```