--- 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-27%2010.30.37.png --- 活用方法 # デザイン紹介 - グラフ｜データは読ませず、見せるもの Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回はデータを表現する際に役立つグラフWidgetを紹介します。 [ yuiko ](https://23251619.hs-sites.com/author/yuiko) 7 27, 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_9#headline1) | | --- | --- | | 02 | 予め用意されたデザインを使えば、時間短縮に | | 03 | グラフのデザイン 14選 | | 04 | [まとめ](https://23251619.hs-sites.com/widget_introduction_9#headline4) |   ## 01｜グラフの種類と活用例 ---   データの大小を比較するなら ### **棒グラフ**   ![スクリーンショット 2023-07-27 15.38.40](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-27%2015.38.40.png?width=363&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-27%2015.38.40.png)   例）   - 注文殺到の表現 - 販売後◯ヶ月で品切れになるほどの〜 - お得さの表現 - ◯◯を使い続けるよりも〜 - 成分の比較 - ◯◯は従来の【成分名】の◯倍の効果 - リスクの比較 - ◯◯がない場合とある場合での【リスク】の違い 時系列での変化を比較するなら ### **折れ線グラフ**   ![スクリーンショット 2023-07-27 15.38.34](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-27%2015.38.34.png?width=368&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-27%2015.38.34.png)   例）   - 売上の推移（金額や個数） - 2021年：◯◯ - 2022年：◯◯ - 2023年：◯◯ - 体型の変化（体重やウエスト） - 1週間後：◯◯ - 4週間後：◯◯ - 8週間後：◯◯ データの割合を比較するなら ### **円グラフ**   ![スクリーンショット 2023-07-27 15.38.27](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-27%2015.38.27.png?width=385&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-27%2015.38.27.png)   例）   - 量の比較 - 人間の体の60%は水 - アンケート結果の共有 - 90%以上が◯◯と回答 - ◯ヶ月時点で90%が◯◯を体感 - 実績の共有 - 驚異のリピート率90% - 置き換えダイエット成功率90%成功率   伝えたい内容に応じて、グラフを使い分けましょう。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｜グラフのデザイン 14選 ---   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **円グラフ** **/ Widget名** ![スクリーンショット 2023-07-27 10.47.52](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-27%2010.47.52.png?width=616&height=667&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-27%2010.47.52.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=CYDSIHleK-BXimItoxbnQ) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **円グラフ（シンプル）※要javascript** **/ Widget名** ![49d4fea95100aace22f18362ea92a3c9](https://23251619.hs-sites.com/hs-fs/hubfs/49d4fea95100aace22f18362ea92a3c9.gif?width=366&height=414&name=49d4fea95100aace22f18362ea92a3c9.gif) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=uWoDkpqwQEoASKGSZBg)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **棒グラフ※要javascript** **/ Widget名** ![492c693b6d0c37e09ff4537965de36cd](https://23251619.hs-sites.com/hs-fs/hubfs/492c693b6d0c37e09ff4537965de36cd.gif?width=586&height=354&name=492c693b6d0c37e09ff4537965de36cd.gif) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=IPTsxQPOn-zSDAsJVUsA) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **折れ線グラフ（複数対応可）※要javascript** **/ Widget名** ![22a9e6a10d058687fe71bb6d22d3ae6b](https://23251619.hs-sites.com/hs-fs/hubfs/22a9e6a10d058687fe71bb6d22d3ae6b.gif?width=588&height=352&name=22a9e6a10d058687fe71bb6d22d3ae6b.gif) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=kKVfHgXcHynDmYXhoDtA)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **円グラフ（項目表示）※要javascript** **/ Widget名** ![532c68f647f6c105dd54dbb87c1babd9](https://23251619.hs-sites.com/hs-fs/hubfs/%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%B5%E3%82%A4%E3%83%88%E8%B3%87%E6%96%99/532c68f647f6c105dd54dbb87c1babd9.gif?width=370&height=660&name=532c68f647f6c105dd54dbb87c1babd9.gif) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=JDoCEDgPXqeDLmmfqhJw) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **円グラフ（真ん中にパーセント）※要javascript** **/ Widget名** ![938fdad83f2dc7869af1e96571bcf64f](https://23251619.hs-sites.com/hs-fs/hubfs/938fdad83f2dc7869af1e96571bcf64f.gif?width=370&height=662&name=938fdad83f2dc7869af1e96571bcf64f.gif) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=lqWVOYSIQOHUYqcjvg)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アニメーション円グラフ（スクロール後領域内表示）※要javascript** **/ Widget名** ![e2a68581a6af6b21fbf87c7c8d851779](https://23251619.hs-sites.com/hs-fs/hubfs/e2a68581a6af6b21fbf87c7c8d851779.gif?width=370&height=662&name=e2a68581a6af6b21fbf87c7c8d851779.gif) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=sBrDYX_RQixmIQTNA) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アンケート(ダミーグラフあり・ラジオボタン・選択で次の問題へスクロール・進捗画像変化） ※要JavaScript** **/ Widget名** ![b9af0eaf6174a7d81f1294f94c175028](https://23251619.hs-sites.com/hs-fs/hubfs/b9af0eaf6174a7d81f1294f94c175028.gif?width=350&height=656&name=b9af0eaf6174a7d81f1294f94c175028.gif) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=z-fGIQA-AsTDCwYL_g)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アンケート（ダミー結果表示・ローダー無し・テキストの下にグラフ）※要Javascript** **/ Widget名** ![e5fd3d8c6b0884e8b5f19189b9595efb](https://23251619.hs-sites.com/hs-fs/hubfs/e5fd3d8c6b0884e8b5f19189b9595efb.gif?width=350&height=654&name=e5fd3d8c6b0884e8b5f19189b9595efb.gif) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=iMCvHHJAcbmgoiqQ) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **アンケート(ダミー結果表示・ローダー無し・テキストの下にグラフ・枠外に画像) ※要Javascript** **/ Widget名** ![27e04b2cbfa689e48207a601e6d6eb84](https://23251619.hs-sites.com/hs-fs/hubfs/27e04b2cbfa689e48207a601e6d6eb84.gif?width=360&height=658&name=27e04b2cbfa689e48207a601e6d6eb84.gif) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=VkTOlLKOwvqYHlRvTwPg)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **入力すると計算結果が表示（差分・比較／グラフ付き）※要java script** **/ Widget名** ![87d9c91d738a7ad5e6b202feef5d061d](https://23251619.hs-sites.com/hs-fs/hubfs/87d9c91d738a7ad5e6b202feef5d061d.gif?width=604&height=514&name=87d9c91d738a7ad5e6b202feef5d061d.gif) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=DPhIHWhflnBFFKliIw) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **入力すると計算結果が表示（ボタンを押した後計算結果、縦棒グラフが表示）※要java script** **/ Widget名** ![bc90f66daf444228aa648d97b4f2cf05](https://23251619.hs-sites.com/hs-fs/hubfs/bc90f66daf444228aa648d97b4f2cf05.gif?width=598&height=450&name=bc90f66daf444228aa648d97b4f2cf05.gif) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=foHZVWIbXctuGOklt-IQ)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **評価グラフとスコア表※要javascript** **/ Widget名** ![スクリーンショット 2023-07-27 11.58.00](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-27%2011.58.00.png?width=596&height=393&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-27%2011.58.00.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=JDyUlZDRbNdXrTmlEefg) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **分布図** **/ Widget名** ![スクリーンショット 2023-07-27 11.33.07](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-27%2011.33.07.png?width=611&height=479&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-27%2011.33.07.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/LNJtBmfIOxjvqzwAqOFw?step_uid=EPmDJJgWGodMwbFNtnwQ) ## 04｜まとめ --- データの表現に工夫を凝らすことで、内容をじっくり読まなくても理解してもらいやすくなります。Widgetを活用することで、従来のコーディングに費やしていた時間を短縮できますので、積極的にご利用ください！修正方法を相談したい場合は、[https://service.squadbeyond.com/voice/](https://service.squadbeyond.com/voice/) よりお尋ね下さい。     ▼関連記事 - [デザイン紹介 - 比較表｜一瞬で選択肢を視覚的に示す](https://23251619.hs-sites.com/widget_introduction_1) - [デザイン紹介- クチコミ｜説得力のある文言を視覚で表現する](https://23251619.hs-sites.com/widget_introduction_2) - [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) *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 活用方法 ### [デザイン紹介 - チャット型アンケート｜短時間でCVを獲得する](https://23251619.hs-sites.com/widget_introduction_14) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は、短時間でCVを獲得するアンケートLPを作成するための「チャット型アンケートWidget」をご紹介します。 yuiko 9 27, 2023 活用方法 ### [デザイン紹介 - 下部表示型アンケート｜短時間でCVを獲得する](https://23251619.hs-sites.com/widget_introduction_16) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は、短時間でCVを獲得するアンケートLPを作成するための「下部表示型アンケートWidget」をご紹介します。 yuiko 9 29, 2023 活用方法 ### [デザイン紹介 - スクロール型アンケート｜短時間でCVを獲得する](https://23251619.hs-sites.com/widget_introduction_15) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は、短時間でCVを獲得するアンケートLPを作成するための「スクロール型アンケートWidget」をご紹介します。 yuiko 9 28, 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:59:28.210Z", "datePublished" : "2023-07-27T07:33:38.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-27%2010.30.37.png" ], "mainEntityOfPage" : { "@id" : "https://23251619.hs-sites.com/widget_introduction_9", "@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" } } ```