--- 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-13%2012.00.54.png --- 活用方法 # デザイン紹介 - ランキング｜信頼感を醸成し支持を強くする Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は信頼感を醸成し支持を強くするランキングWidgetを紹介します。 [ yuiko ](https://23251619.hs-sites.com/author/yuiko) 7 13, 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_5#headline1) | | --- | --- | | 02 | [予め用意されたデザインを使えば、時間短縮に](https://23251619.hs-sites.com/widget_introduction_5#headline2) | | 03 | [ランキングのデザイン 14選](https://23251619.hs-sites.com/widget_introduction_5#headline3) | | 04 | [まとめ](https://23251619.hs-sites.com/widget_introduction_5#headline4) | ## 01｜ランキングのデザインが人気な理由 ---   ### - 信頼感を醸成しやすいデザインだから 「バンドワゴン効果」という心理効果をご存知でしょうか。他人の行動や意見に影響を受けてそれを模倣する現象を指します。ランキングのデザインは、この心理効果を利用しています。多くの人々が項目を高く評価しているならば、それは間違いなく価値があると認識され、自身も手に入れたいという欲求が生まれます。満足度1位・人気1位・オススメ1位などの表記は、「みんなが知っているのに自分だけ知らないなんて...もしかして流行遅れかも」と思わせるような効果が期待できます。 ### - 目を引くデザインだから 上位や特に注目すべき項目が目立ちます。情報をテキストで伝えると読みづらい場合でも、ランキングのデザインを活用することで、見やすく整理された情報を提供できます。   ## 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｜ランキングのデザイン 14選 ---   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) 商品画像が見やすいデザイン **人気商品ランキング（横スクロール）** **/ Widget名** ![84441146a3f556795c6ba9b4c425f699](https://23251619.hs-sites.com/hs-fs/hubfs/84441146a3f556795c6ba9b4c425f699.gif?width=444&height=212&name=84441146a3f556795c6ba9b4c425f699.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/PeCJCMh_ZjwkhsthLnVQ/draft?token=89ecaa9974221677eba4769376014b39) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) 商品画像が見やすいデザイン **順位ラベル付きアイコンリスト** **/ Widget名** ![スクリーンショット 2023-07-12 18.29.26](https://23251619.hs-sites.com/hs-fs/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-12%2018.29.26.png?width=398&height=202&name=%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-12%2018.29.26.png) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/mRrudGAZtiJUjnO_yvyaQ/draft?token=29fcd8d981d3b41b2149dfa145cd1642)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) 商品画像が見やすいデザイン **タブ切り替えできるスライド (ランキング付)※要Javascript** **/ Widget名** ![6a496fb41d3fc5ef63b05f432392d892](https://23251619.hs-sites.com/hs-fs/hubfs/6a496fb41d3fc5ef63b05f432392d892.gif?width=416&height=192&name=6a496fb41d3fc5ef63b05f432392d892.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/XBc-IXTSdGphUQYFA/draft?token=65deafb23aceb3ddcb4c8fd9606eb88c) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) ページ遷移の機能付きデザイン **ランキング** **/ Widget名** ![スクリーンショット 2023-07-12 17.47.35](https://23251619.hs-sites.com/hs-fs/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-12%2017.47.35.png?width=446&height=370&name=%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-12%2017.47.35.png) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/YomySbGxAxPUtoFJA/draft?token=0810258159e54d9030f662101853a6a4)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) どの商材でも応用できる万能デザイン **ランキング（横3カラム）** **/ Widget名** ![スクリーンショット 2023-07-12 17.51.21](https://23251619.hs-sites.com/hs-fs/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-12%2017.51.21.png?width=437&height=382&name=%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-12%2017.51.21.png) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/XUaCFIyqHyZWBtilXw/draft?token=12bc871a999bd8e75b73d5289215df3c) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) どの商材でも応用できる万能デザイン **比較表（ランキング有）** **/ Widget名** ![スクリーンショット 2023-07-05 13.03.17](https://23251619.hs-sites.com/hs-fs/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%2013.03.17.png?width=586&height=867&name=%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%2013.03.17.png) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/cEckvHwDKKNMpSHXhBsw/draft?token=6656e92a7fbbe220a9bbb42c8b263bfc)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) 転職サイトと相性◎ **ランキング3** **/ Widget名** ![スクリーンショット 2023-07-12 17.50.20](https://23251619.hs-sites.com/hs-fs/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-12%2017.50.20.png?width=450&height=621&name=%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-12%2017.50.20.png) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/lWCPIMVmndyMMCUsmg/draft?token=94013b3b8d17b5f1191c118ce238bff0) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) どの商材でも応用できる万能デザイン **ヘッダー固定比較表2（3列）** **/ Widget名** ![スクリーンショット 2023-07-12 17.24.32](https://23251619.hs-sites.com/hs-fs/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-12%2017.24.32.png?width=444&height=629&name=%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-12%2017.24.32.png) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/nppjRhawlKspHgyrJSLA/draft?token=7c434ed9c6767c141c6c41c0aa752b14)     ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) 情報が沢山でも視覚的に整ったデザイン **ランキングを入れた比較表** **/ Widget名** ![c5d28c0a6462a74d8f910b71a1f7fd2b](https://23251619.hs-sites.com/hs-fs/hubfs/c5d28c0a6462a74d8f910b71a1f7fd2b.gif?width=394&height=516&name=c5d28c0a6462a74d8f910b71a1f7fd2b.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/OqZAexIUKkdaPFGIA/draft?token=abfdf6402569d5a139d973bc157fa7d3) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) 情報が沢山でも視覚的に整ったデザイン **商品評価とランキングの表（横スク対応）** **/ Widget名** ![0a25a3a0f9dc69cd5bfd914ccce7f77c](https://23251619.hs-sites.com/hs-fs/hubfs/0a25a3a0f9dc69cd5bfd914ccce7f77c.gif?width=396&height=498&name=0a25a3a0f9dc69cd5bfd914ccce7f77c.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/UhEiwBBOHGdMqjWBfvAsA/draft?token=15962332f864655610780d9135c4ad51)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) 比較記事の大部分が実現する 非常に便利なデザイン **ランキング（数字背景王冠）※要javascript** **/ Widget名** ![99bd7a1baeec52c1a5060d2f38ab6ae4](https://23251619.hs-sites.com/hs-fs/hubfs/99bd7a1baeec52c1a5060d2f38ab6ae4.gif?width=364&height=662&name=99bd7a1baeec52c1a5060d2f38ab6ae4.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/tEdJHpbknktbajJEgrIw/draft?token=c7a79ed07c88f2ce6cef2d10edc2b74b) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) 縦長のコンテンツでも 上部の固定により読みやすいデザイン **ランキング(スクロールで上部固定)** **/ Widget名** ![スクリーンショット 2023-07-12 17.25.41](https://23251619.hs-sites.com/hs-fs/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-12%2017.25.41.png?width=451&height=792&name=%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-12%2017.25.41.png) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/YmLypdesOBuLfhEVaeJA/draft?token=11f359add38623d5e4367ffbd4428a15)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) エステや脱毛案件と相性 ◎ **ランキング（星評価・バナー画像・ボタン）** **/ Widget名** ![スクリーンショット 2023-07-12 17.49.54](https://23251619.hs-sites.com/hs-fs/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-12%2017.49.54.png?width=457&height=481&name=%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-12%2017.49.54.png) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/vhAHmPexMRFSYCSnifA/draft?token=7e7ab724070a4c76f478c43dd30d6daf) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) アプリインストールと相性 ◎ **ランキング（見出し・ボタン付き）** **/ Widget名** ![e3e6b421f35a352c69288052b5391676](https://23251619.hs-sites.com/hs-fs/hubfs/e3e6b421f35a352c69288052b5391676.gif?width=396&height=884&name=e3e6b421f35a352c69288052b5391676.gif) --- [PREVIEW ](https://sb-draft-preview.squadbeyond.com/articles/AkApfmQZgSX_PsBhDLw/draft?token=fcf619ecc7db1d36cf071789951b9332) ## 04｜まとめ --- ランキングのデザインは、信頼感を醸成し支持を強くすることができます。ランキングWidgetを活用することで、従来のコーディングに費やしていた時間を短縮できますので、積極的にご利用ください！修正方法を相談したい場合は、[https://service.squadbeyond.com/voice/](https://service.squadbeyond.com/voice/) よりお尋ね下さい。       ▼関連記事 - [デザイン紹介 - アコーディオン｜情報をコンパクトにまとめる](https://23251619.hs-sites.com/widget_introduction_6) - [デザイン紹介 - スライド・カルーセル｜静止画よりも注目されやすい](https://23251619.hs-sites.com/widget_introduction_7) - [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_2) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回はどの案件にも使える万能なクチコミWidgetを紹介します。 yuiko 7 7, 2023 活用方法 ### [デザイン紹介 - スライド・カルーセル｜静止画よりも注目されやすい](https://23251619.hs-sites.com/widget_introduction_7) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は静止画よりも注目されやすいスライド・カルーセルの動きするWidgetを紹介します。 yuiko 7 20, 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:40:31.557Z", "datePublished" : "2023-07-13T07:13:37.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-13%2012.00.54.png" ], "mainEntityOfPage" : { "@id" : "https://23251619.hs-sites.com/widget_introduction_5", "@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" } } ```