--- title: 【後編】インターン生が1ヶ月でLP制作をマスター？コツは◯◯の攻略だった description: 「HTML・CSS・JavaScriptの知識がなくても、LP制作ができる方法があれば便利だな」と思ったことはありませんか？フリーチャットでWidget修正方法を質問することはできるけれど、営業時間外には手詰まりで作業が進まない…そんなお悩みを持つユーザーに朗報です！コーディングの知識がほぼゼロのインターン生が、自力で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-04%2011.52.59.png --- 活用方法 # 【後編】インターン生が1ヶ月でLP制作をマスター？コツは◯◯の攻略だった 「HTML・CSS・JavaScriptの知識がなくても、LP制作ができる方法があれば便利だな」と思ったことはありませんか？フリーチャットでWidget修正方法を質問することはできるけれど、営業時間外には手詰まりで作業が進まない…そんなお悩みを持つユーザーに朗報です！コーディングの知識がほぼゼロのインターン生が、自力でWidget修正できた方法をご紹介します。 [ yuiko ](https://23251619.hs-sites.com/author/yuiko) 9 5, 2023 --- ### ｜前回までのあらすじ ![スクリーンショット 2023-09-04 18.58.14](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-04%2018.58.14.png?width=700&height=229&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-04%2018.58.14.png) [**▶︎【前編】インターン生は1ヶ月でLP制作をマスター？コツは◯◯の攻略だった**](https://23251619.hs-sites.com/widget_pro_intern_1) ---       ### 目次 | 05 | [Widgetについて質問をする時のコツ](https://23251619.hs-sites.com/widget_pro_intern_2#headline5) | | --- | --- | | 06 | [CXのChatGPT活用術](https://23251619.hs-sites.com/widget_pro_intern_2#headline6) | | 07 | [まとめ：ChatGPTを活用して、Widgetを修正しよう](https://23251619.hs-sites.com/widget_pro_intern_2#headline7) | ## 05｜ChatGPTにWidgetについて質問をする時のコツ ---   ![スクリーンショット 2023-09-04 18.59.29](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-04%2018.59.29.png?width=700&height=222&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-04%2018.59.29.png) ![スクリーンショット 2023-08-04 16.45.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-08-04%2016.45.20.png?width=750&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-08-04%2016.45.20.png)       ### ポイント①：ChatGPTの得意分野を知る ![スクリーンショット 2023-09-04 18.53.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-09-04%2018.53.13.png?width=900&height=314&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-04%2018.53.13.png)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) ### ChatGPTが得意なこと --- - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) 色の変更（変更したい色のカラーコードをもっていると、なおGood！） - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) 画像等パーツのサイズ変更 - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) 幅の変更 - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) 再生スピードの変更 - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) フォントサイズの変更 - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) フォントの変更 - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) アンケートWidgetで複数選択に変更 - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) 自動再生へ変更 - ![ダウンロード](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89.png) 【コードについてもっと知りたい場合も、色々と教えてもらえます！】 - ![](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) 任意の数値を設定できるWidgetで、設定例の提案 - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) エラー構文のあるコードの修正 - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) HTMLのメモ欄に書いてある内容から、コードの修正の提案 - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) HTML・CSSコードの読み取りと理解（Widgetの使い方を間接的に教えてくれます）     ### ポイント②：期待通りの回答を引き出す ![スクリーンショット 2023-09-04 18.51.42](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-04%2018.51.42.png?width=900&height=318&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-04%2018.51.42.png) ### Widgetのコード修正を知りたい場合 １｜**「今から、WidgetのHTML、CSS、JavaScriptのコードを送ります。その後に質問をするので、日本語で回答してください」** ２｜コードを送る時のポイント - 全選択ショートカットキー：`Control ＋A`（できれば一度のチャットでHTMLとCSSのどちらも送付） - 複数回に分けて送る際には**「長いので前半と後半に分けて送ります。まずは前半です。」「3部に分けてお送りします」**などと添えてあげるとGood！ ３｜**「〇〇したいのですが、どのようにコードを修正すればよいか教えてください」** ４｜**「提案いただいたコードをどこに貼り付ければよいのか、具体的に教えてください」** ### Widgetに特定のコードがあるか知りたい場合 １｜**「今からWidgetのHTMLとCSS、JavaScriptのコードをそれぞれ送ります。その後に質問をするので、日本語で回答してください」** ２｜コードを送る時のポイント - 全選択ショートカットキー：`Control ＋A`（できれば一度のチャットでHTMLとCSSのどちらも送付） - 複数回に分けて送る際には**「長いので前半と後半に分けて送ります。まずは前半です。」「3部に分けてお送りします」**などと添えてあげるとGood！ ３｜**「〇〇についての修正を考えているのですが、〇〇に関するコードは既にありますか？」** ### ChatGPTにLP全体のコードを理解してもらいたい場合 １｜該当のLPブラウザを開く ２｜ソースコードのページを開き、コードをコピーする - ソースコードビューのショートカットキー：`Control + Option + U` - 全選択のショートカットキー：`command + A` ３｜**「今から、LPのHTMLコードを送ります。どのようなLPか、日本語で説明してください。」** ４｜２でコピーしたコードを送る。複数回に分けて送る際には**「長いので前半と後半に分けて送ります。まずは前半です。」「3部に分けてお送りします」**などと添えてあげるとGood！   ※LPのコードは分量がかなり多いです。特に1行目が非常に長いため、2行目までで一旦分けて送る必要があります。   ![スクリーンショット 2023-09-04 12.55.25](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-04%2012.55.25.png?width=700&height=117&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-04%2012.55.25.png) ![スクリーンショット 2023-09-04 18.16.10](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-04%2018.16.10.png?width=900&height=310&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-04%2018.16.10.png) ### ポイント③：長いコードの送付方法を覚える   ![スクリーンショット 2023-09-04 18.19.14](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-04%2018.19.14.png?width=900&height=316&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-04%2018.19.14.png)   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) ### **長いコードの送付方法** --- - ![](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) コードの一部を送信 - →　最初にヘッダー、次にメインコンテンツというようにHTMLコードを別々に送信。 - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) コードの断片を表示 - →　重要な部分だけを表示し、それ以外の部分は省略。修正が必要な箇所に焦点を当てることができ、コードが読みやすさアップ。 - ![Checkmark](https://f.hubspotusercontent30.net/hubfs/8823337/Checkmark.svg) コードを外部サービスにアップロード - →　GitHub Gist等にアップロードし、共有可能なリンクを提供する。 ## 06｜CXのChatGPT活用術 --- 現在Widgetに関するお問い合わせは、裏側でCXがChatGPTを使いながら回答をしています。どのようにWidget修正を対応しているのか例をご紹介します。   ![logo (1)](https://23251619.hs-sites.com/hubfs/Widget%E3%83%96%E3%83%AD%E3%82%B0/logo%20(1).webp) #### ChatGPTを活用したWidget修正例 ![ポップアップ用_ブログ画像](https://23251619.hs-sites.com/hs-fs/hubfs/%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E7%94%A8_%E3%83%96%E3%83%AD%E3%82%B0%E7%94%BB%E5%83%8F.gif?width=750&height=268&name=%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E7%94%A8_%E3%83%96%E3%83%AD%E3%82%B0%E7%94%BB%E5%83%8F.gif) | **やりたいこと** | **ボタンの角を丸くする** | | --- | --- | | **Widget名** | **ぷるぷるしながら光る画像ボタン** |   --- ![スクリーンショット 2023-09-05 17.33.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-09-05%2017.33.40.png?width=1000&height=545&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-05%2017.33.40.png)   --- [ChatGPTとの会話内容を見る ](https://chat.openai.com/share/4485e8fd-867a-4fe7-9f97-7b791d3e96b2)   ## 07｜まとめ：ChatGPTを活用して、Widgetを修正しよう --- ChatGPTを活用することでフリーチャットの営業時間外でも、作業のタイムロスをせず、効率的にLP制作ができます。是非一度お試しください！   ### ｜コーディング初心者にオススメのデザイン - [デザイン紹介 - 区切り線｜売れるLPライターは、線で差をつける（１）](https://23251619.hs-sites.com/widget_introduction_10) - [デザイン紹介 - 下線｜売れるLPライターは、線で差をつける（２）](https://23251619.hs-sites.com/widget_introduction_11)   ### ｜Widgetの利用方法 | 1 | Squad beyondの管理画面にログインし beyondページを作成 | | --- | --- | | 2 | Widget管理をクリックし カテゴリーや検索でお好きなWidgetを追加 | ### ![image-1](https://23251619.hs-sites.com/hs-fs/hubfs/image-1.gif?width=750&height=378&name=image-1.gif) ### ｜ChatGPTの利用方法 | 1 | [https://openai.com/blog/chatgpt](https://openai.com/blog/chatgpt) にアクセス | | --- | --- | | 2 | アカウントがない場合は「Sign up」を、ある場合は「Log in」をクリック | | 3 | 質問したい内容を入力し、送信してスタート |               [![ブログ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 活用方法 ### [【前編】インターン生が1ヶ月でLP制作をマスター？コツは◯◯の攻略だった](https://23251619.hs-sites.com/widget_pro_intern_1) ... yuiko 8 15, 2023 活用方法 ### [Widgetマスターへの第一歩｜修正相談・新規作成依頼の手順まとめ](https://23251619.hs-sites.com/squadvoice_widget) Squad beyondの機能の中でも、特に人気なWidget。今回はWidget修正（HTML・CSS・JavaScript）の方法・欲しいWidgetがある時の作成依頼の方法をまとめました。Widgetをマスターし、従来より倍速でLP制作ができるようになりましょう。 yuiko 9 13, 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-05T08:52:56.870Z", "datePublished" : "2023-09-05T08:41:37.000Z", "headline" : "【後編】インターン生が1ヶ月で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-04%2011.52.59.png" ], "mainEntityOfPage" : { "@id" : "https://23251619.hs-sites.com/widget_pro_intern_2", "@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" } } ```