--- title: デザイン紹介 - 区切り線｜売れるLPライターは、線で差をつける（１） 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-08-29%2015.13.19.png --- 活用方法 # デザイン紹介 - 区切り線｜売れるLPライターは、線で差をつける（１） Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は修正なしで誰でもすぐに使える「区切り線Widget」を紹介します。 [ yuiko ](https://23251619.hs-sites.com/author/yuiko) 8 30, 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 | [読みやすいLPに共通する、線の使い方](https://23251619.hs-sites.com/widget_introduction_10#headline1) | | --- | --- | | 02 | [誰でも本当に「１クリックだけ」ですぐに使える](https://23251619.hs-sites.com/widget_introduction_10#headline2) | | 03 | [区切り線のデザイン 12選](https://23251619.hs-sites.com/widget_introduction_10#headline_3) | | 04 | [まとめ](https://23251619.hs-sites.com/widget_introduction_10#headline4) |   ## 01｜読みやすいLPに共通する、線の使い方 --- LP制作の際に心掛けるべきは「読ませる＜見せる」の意識。一般的にLPは「パッと見て凄そうだから」という理由で興味を持ってもらえます。本を読むようにじっくりとLPを読むユーザーは少ないため、視覚的な印象が重要となります。 そのため、区切り線を使用して情報を分割したり、下線を引きテキストを強調したりしましょう。これにより、LP全体のデザインが洗練され、より魅力的になります。   ![スクリーンショット 2023-08-31 15.59.57](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-08-31%2015.59.57.png?width=800&height=628&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-08-31%2015.59.57.png)   ## 02｜誰でも本当に「１クリックだけ」ですぐに使える ---   ![4cb13504b525c1d980ff562fcdad4b4e](https://23251619.hs-sites.com/hs-fs/hubfs/4cb13504b525c1d980ff562fcdad4b4e.gif?width=1000&height=556&name=4cb13504b525c1d980ff562fcdad4b4e.gif) | 1 | Squad beyondの管理画面にログインし、beyondページを作成 | | --- | --- | | 2 | Widget管理 > 区切り線 をクリックし、Widgetを追加 |   Squad beyondでは、800種類以上の「Widget」というLP制作パーツを提供しており、これらを組み合わせることで簡単にLPを作成することができます。中でも区切り線のWidgetは、HTMLやCSSの修正が不要でそのまま使うことができます。LP制作初心者・Squad beyond初心者でも挑戦しやすいデザインなので是非お試しください。 ※下記に紹介しているもの、全てbeyond初心者さんにオススメです！ ## 03｜区切り線のデザイン 12選 ---   popular ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **区切り線（実線1px）** **/ Widget名** ![スクリーンショット 2023-08-29 12.53.30](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-08-29%2012.53.30.png?width=469&height=32&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-08-29%2012.53.30.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/ZhdHO__rRdBwKU-Pw?step_uid=aMIfPh_SgnEBHPATQ) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **区切り線（実線3px）** **/ Widget名** ![スクリーンショット 2023-08-29 13.07.38](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-08-29%2013.07.38.png?width=468&height=30&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-08-29%2013.07.38.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/ZhdHO__rRdBwKU-Pw?step_uid=_NAFTzNifcrzidndLRNg)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **区切り線（実線5px）** **/ Widget名** ![スクリーンショット 2023-08-29 13.11.28](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-08-29%2013.11.28.png?width=466&height=37&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-08-29%2013.11.28.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/ZhdHO__rRdBwKU-Pw?step_uid=fquksdpEXWCaX_pjKA) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **区切り線（破線1px）** **/ Widget名** ![スクリーンショット 2023-08-29 13.12.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-08-29%2013.12.26.png?width=470&height=34&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-08-29%2013.12.26.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/ZhdHO__rRdBwKU-Pw?step_uid=PAjWUZ_X_qIJolNqw)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **区切り線（破線3px）** **/ Widget名** ![スクリーンショット 2023-08-29 13.14.05](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-08-29%2013.14.05.png?width=473&height=38&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-08-29%2013.14.05.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/ZhdHO__rRdBwKU-Pw?step_uid=CQLNkXCqxsSGqDBAJPw) ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) **区切り線（破線5px）** **/ Widget名** ![スクリーンショット 2023-08-29 13.15.05](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-08-29%2013.15.05.png?width=469&height=43&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-08-29%2013.15.05.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/ZhdHO__rRdBwKU-Pw?step_uid=_EXgkPUMKxipUuCtQ)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **区切り線（斜線1px）** **/ Widget名** ![スクリーンショット 2023-08-29 13.16.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-08-29%2013.16.26.png?width=468&height=35&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-08-29%2013.16.26.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/ZhdHO__rRdBwKU-Pw?step_uid=IlEFjKYnTCJKgb_w) popular ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **区切り線（斜線2px）** **/ Widget名** ![スクリーンショット 2023-08-29 13.17.28](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-08-29%2013.17.28.png?width=466&height=37&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-08-29%2013.17.28.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/ZhdHO__rRdBwKU-Pw?step_uid=OclAXMXZEpGtGoIUGpKw)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **区切り線（斜線3px）** **/ Widget名** ![スクリーンショット 2023-08-29 13.18.48](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-08-29%2013.18.48.png?width=471&height=35&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-08-29%2013.18.48.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/ZhdHO__rRdBwKU-Pw?step_uid=gmRpTdGJgiCHggZuWw) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **区切り線（二重線3px）** **/ Widget名** ![スクリーンショット 2023-08-29 13.19.36](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-08-29%2013.19.36.png?width=469&height=31&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-08-29%2013.19.36.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/ZhdHO__rRdBwKU-Pw?step_uid=JfIcId--DCbFXgqHxrsBgg)   ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **区切り線（二重線6px）** **/ Widget名** ![スクリーンショット 2023-08-29 13.21.13](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-08-29%2013.21.13.png?width=471&height=29&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-08-29%2013.21.13.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/ZhdHO__rRdBwKU-Pw?step_uid=nPOhfoyjRUMjnCnLSEA) ![logo (1)](https://23251619.hs-sites.com/hubfs/logo%20(1).png) **区切り線（二重線9px）** **/ Widget名** ![スクリーンショット 2023-08-29 13.22.05](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-08-29%2013.22.05.png?width=471&height=31&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-08-29%2013.22.05.png) --- [PREVIEW ](https://sb-sivatest.squadbeyond.com/ab/ZhdHO__rRdBwKU-Pw?step_uid=AJOiEqJuyAk_BhPcPQ)   ## 04｜まとめ --- 線を利用することで、ワンランク上の読みやすいLPを制作することができます。特に区切り線のWidgetは修正不要で誰でも今すぐ使えるデザインですので、積極的にご利用ください！修正方法を相談したい場合は、[https://service.squadbeyond.com/voice/](https://service.squadbeyond.com/voice/) よりお尋ね下さい。     ▼関連記事 - [デザイン紹介 - 下線｜売れるLPライターは、線で差をつける（２）](https://23251619.hs-sites.com/widget_introduction_11) - [デザイン紹介 - 矢印｜存在感は期待度と比例する](https://23251619.hs-sites.com/widget_introduction_12) - [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_11) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は誰でもすぐに使える「下線Widget」を紹介します。 yuiko 9 1, 2023 活用方法 ### [デザイン紹介 - 矢印｜存在感は期待度と比例する](https://23251619.hs-sites.com/widget_introduction_12) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は修正なしで誰でもすぐに使える「矢印Widget」を紹介します。 yuiko 9 13, 2023 活用方法 ### [デザイン紹介 - ボタン｜ユーザーの行動を迷わせず導く](https://23251619.hs-sites.com/widget_introduction_8) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回はCVR改善に役立つボタンWidgetを紹介します。 yuiko 7 25, 2023 ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "yuiko", "url" : "https://23251619.hs-sites.com/author/yuiko" }, "dateModified" : "2023-09-15T01:30:01.350Z", "datePublished" : "2023-08-30T01:26:00.000Z", "headline" : "デザイン紹介 - 区切り線｜売れるLPライターは、線で差をつける（１）", "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-08-29%2015.13.19.png" ], "mainEntityOfPage" : { "@id" : "https://23251619.hs-sites.com/widget_introduction_10", "@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" } } ```