--- title: Widgetマスターへの第一歩｜修正相談・新規作成依頼の手順まとめ description: Squad beyondの機能の中でも、特に人気なWidget。今回はWidget修正（HTML・CSS・JavaScript）の方法・欲しいWidgetがある時の作成依頼の方法をまとめました。Widgetをマスターし、従来より倍速で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-09-12%2016.52.11.png --- 活用方法 # Widgetマスターへの第一歩｜修正相談・新規作成依頼の手順まとめ Squad beyondの機能の中でも、特に人気なWidget。今回はWidget修正（HTML・CSS・JavaScript）の方法・欲しいWidgetがある時の作成依頼の方法をまとめました。Widgetをマスターし、従来より倍速でLP制作ができるようになりましょう。 [ yuiko ](https://23251619.hs-sites.com/author/yuiko) 9 13, 2023 --- ### 目次 | 01 | [LPを制作するなら、Widgetが便利](https://23251619.hs-sites.com/squadvoice_widget#headline1) | | --- | --- | | 02 | [修正相談 / 新規依頼作成の手順](https://23251619.hs-sites.com/squadvoice_widget#headline2) | | 03 | [他の人の相談内容を見てみよう！](https://23251619.hs-sites.com/squadvoice_widget#headline3) | | 04 | [コーディングを勉強できるコミュニティ、Squad voice](https://23251619.hs-sites.com/squadvoice_widget#headline4) | ## 01｜**LP制作をするなら、Widgetが便利** --- Squad beyondでは、LPを制作する時に便利なWidget（ウィジェット）というデザインパーツを無料で利用できます。Widgetは予めHTML・CSS・JavaScriptによってデザインをされており、これらを組み合わせることで簡単にLPを作成することができます。   〜Widgetの使い方〜 ![aac53c3b05824f02e0ffb5af0c933ec3](https://23251619.hs-sites.com/hs-fs/hubfs/aac53c3b05824f02e0ffb5af0c933ec3.gif?width=750&height=273&name=aac53c3b05824f02e0ffb5af0c933ec3.gif)   | 1 | Squad beyondの管理画面にログインし、beyondページを作成 | | --- | --- | | 2 | Widget管理 > Widet名 を検索し、Widgetを追加 | | ３ | クイック編集をクリックし、文字を入力して完了 | ## 02｜Widget修正相談 / 新規作成依頼の手順 ---   ### ｜修正相談 Widgetは全てお好みで色や形、動作などを修正することができます。   例）ページの横幅を変更したい ![スクリーンショット 2023-09-13 14.40.24](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-09-13%2014.40.24.png?width=700&height=152&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-09-13%2014.40.24.png)   修正方法を相談したい場合、下記の手順でお尋ね下さい。 | １ | ![スクリーンショット 2023-09-15 12.54.23](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-09-15%2012.54.23.png?width=506&height=344&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-09-15%2012.54.23.png) | [https://docs.google.com/forms/d/e/1FAIpQLSdFD6PnfMktorp6CKQU-wTCa--VRoqZkz2S5VlwGs_i7WhF4A/viewform](https://docs.google.com/forms/d/e/1FAIpQLSdFD6PnfMktorp6CKQU-wTCa--VRoqZkz2S5VlwGs_i7WhF4A/viewform) をクリック | | --- | --- | --- | | ２ | ![スクリーンショット 2023-09-15 13.02.12](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-09-15%2013.02.12.png?width=594&height=203&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-09-15%2013.02.12.png) | 依頼内容で 「Widget作成/確認」を選択 | | ３ | ![スクリーンショット 2023-09-15 12.57.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-09-15%2012.57.57.png?width=456&height=435&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-09-15%2012.57.57.png) | 修正したいWidgetの内容を記入 | | ４ | ![スクリーンショット 2023-09-15 12.58.59](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-09-15%2012.58.59.png?width=599&height=227&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-09-15%2012.58.59.png) | Q7. 種類を選択してください で 「相談アドバイス」を選択し、提出 |   ### ｜新規作成依頼 使いたいWidgetが用意されていない場合、下記の手順でリクエストをお送りください。無料で新規Widgetを作成致します。参考のキャプチャや動画のご用意があると、完成イメージに近いものを提供できます。 | １ | ![スクリーンショット 2023-09-15 12.54.23](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-09-15%2012.54.23.png?width=506&height=344&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-09-15%2012.54.23.png) | [https://docs.google.com/forms/d/e/1FAIpQLSdFD6PnfMktorp6CKQU-wTCa--VRoqZkz2S5VlwGs_i7WhF4A/viewform](https://docs.google.com/forms/d/e/1FAIpQLSdFD6PnfMktorp6CKQU-wTCa--VRoqZkz2S5VlwGs_i7WhF4A/viewform) をクリック | | --- | --- | --- | | ２ | ![スクリーンショット 2023-09-15 13.02.12](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-09-15%2013.02.12.png?width=594&height=203&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-09-15%2013.02.12.png) | 依頼内容で 「Widget作成/確認」を選択 | | ３ | ![スクリーンショット 2023-09-15 12.57.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-09-15%2012.57.57.png?width=456&height=435&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-09-15%2012.57.57.png) | 作成したいWidgetの内容を記入 | | ４ | ![スクリーンショット 2023-09-15 13.05.08](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-09-15%2013.05.08.png?width=508&height=189&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-09-15%2013.05.08.png)   | Q7. 種類を選択してください で 「新規作成」を選択し、提出 | ## 03｜他の人の相談内容を見てみよう！ --- 現在Widgetに関する相談やお問い合わせは、Squad voice（[https://service.squadbeyond.com/voice/](https://service.squadbeyond.com/voice/)）にて一般公開されており、弊社のWidget専門チームが「Widgetマスター」として回答をしています。どのようにWidget相談の対応しているのか例をご紹介します。 ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) #### SPでチェックボックスとラジオボタンを表示させたい ![スクリーンショット 2023-09-13 12.23.56](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-09-13%2012.23.56.png?width=700&height=649&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-09-13%2012.23.56.png) --- [Squad voiceで見る ](https://service.squadbeyond.com/voice/communities/discussion/4046/)   ## 04｜コーディングを勉強できるコミュニティ、Squad voice --- Squad voiceは広告運用者向けのコミュニティとして、Web広告運用に関して困ったときや気になることがある時に何でも相談できる場所です。このサイトはSquad beyondユーザーでない方も無料でご利用頂けます。 ### ｜サイトURL **[https://service.squadbeyond.com/voice/](https://service.squadbeyond.com/voice/)**   **｜コミュニティ発起人** **Shihori Nakaide** **- BizOps チーム - Assistant Manager** 元々CXチームでユーザーの問い合わせ対応をしていた私は、ユーザーとのコミュニケーションを通じて「このやり取りを公開すれば、もっと多くの人が助かるかも」と思うようになりました。特に「他の人はどうやっているの？」「成功事例を教えてほしい」といったリクエストが多く、私が知っていても直接伝えることができない状況がありました。そこで「情報を交換したい人たちが匿名で話し合える場があればいいな」と考え、Squad voiceを立ち上げました。Twitterのように気軽にWeb広告に関する情報を投稿していただければと思います！ ---   *2021年2月よりSIVAにJoinし、CXチームで活動。ユーザーからのお問い合わせの解決やチームリーダーとしての役割・ユーザーに合わせた機能活用の提案・コミュニティの運営・オフ会の実施などを務めており、大手広告代理店の動向に関する知識を豊富に持っている。* ![スクリーンショット 2023-08-29 11.20.24](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%2011.20.24.png) ### ｜Squad voiceでWidget修正の質問をする | １ | ![スクリーンショット 2023-09-12 15.11.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-09-12%2015.11.00.png?width=450&height=379&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-09-12%2015.11.00.png) | [https://service.squadbeyond.com/voice/ ](https://service.squadbeyond.com/voice/)をクリック | | --- | --- | --- | | ２ | ![スクリーンショット 2023-09-12 17.27.19](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-09-12%2017.27.19.png?width=450&height=386&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-09-12%2017.27.19.png)   | 相談内容を投稿 ※ テンプレートは[【こちら】](https://service.squadbeyond.com/voice/communities/discussion/3962/) |   ただ見ているだけで知識が身につくので、コーディング勉強中の方にも必見のサイトです。是非LP制作に携わる方は利用してみてください。Widgetを活用し、素早くLPを作成しましょう！       ▼関連記事 - [デザイン紹介 - 比較表｜一瞬で選択肢を視覚的に示す](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) [![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制作) ## 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_2) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回はどの案件にも使える万能なクチコミWidgetを紹介します。 yuiko 7 7, 2023 活用方法 ### [デザイン紹介 - 矢印｜存在感は期待度と比例する](https://23251619.hs-sites.com/widget_introduction_12) Squad beyondの機能の中でも、特に人気なWidget。ブロックやパーツ単位のデザインパーツで、少しの調整で誰でも同じクオリティでLPを作成できます。今回は修正なしで誰でもすぐに使える「矢印Widget」を紹介します。 yuiko 9 13, 2023 ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "yuiko", "url" : "https://23251619.hs-sites.com/author/yuiko" }, "dateModified" : "2023-09-15T09:00:25.065Z", "datePublished" : "2023-09-13T05:48:02.000Z", "headline" : "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-09-12%2016.52.11.png" ], "mainEntityOfPage" : { "@id" : "https://23251619.hs-sites.com/squadvoice_widget", "@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" } } ```