--- title: "AI Widget Builderで最初のウィジェットを作成する" description: "EmbedSocialのAI Widget Builderで最初のウィジェットを作成する方法を説明します。" --- コンテンツがアカウントに取り込まれました。次は、Webサイトに設置できるウィジェットの形にします。最も手軽な方法は**AI Widget Generator**です。イメージしているデザインをプロンプトとして入力するだけで、AIが数秒でウィジェットを作成します。 ウィジェットを作成する前に、'**Sources**'（ソース）タブでソース（Google Reviews、Instagram、TikTokなど）が接続されていることを確認してください。まだの場合は、[最初のソースを接続する](/docs/getting-started/connect-source/)から始めてください。 ## 最初のAIウィジェットを作成する方法 :::steps 1. **ウィジェットを作成します。** '**Widgets**'（ウィジェット）セクションを開き、'**+ New widget**' ボタンをクリックして、'**Generate with AI**' を選択します。 ![Generate with AIボタンとNew widgetボタンが表示されたWidgetsページ](https://embedsocial.com/images/docs/create-widget/manage-widgets.jpg) 2. **プロンプトを入力します。** ソースを選択し、必要な内容を具体的に記述して、'**Generate**' をクリックします。例：「ホバーするとふわりと浮き上がる、やわらかいカード型のウィジェットを作成してください。落ち着いたパステルカラーと控えめな影を使ってください。」 ![AI Widget Builderでウィジェットの内容を記述している画面](https://embedsocial.com/images/docs/create-widget/create-ai-widget-embedsocial.jpg) 3. **プロンプトを拡張します（任意、推奨）。** プロンプト入力欄の横にある '**Enhance**' ボタンをクリックすると、AIが簡単なプロンプトを詳細な指示に展開します。生成する前に内容を確認し、編集したり一部を削除したりできます。 4. **ブランドテーマを適用します（任意）。** AIエディターがWebサイトからブランドカラーを検出し、適用するかどうかをチャットで確認します。承認するとウィジェット全体にブランドカラーがさりげなく適用され、スキップするとテンプレートの既定の色が維持されます。 5. **デザインを改善します。** 最初に生成されたウィジェットを変更したい場合は、新しいプロンプトを入力します。イメージしている内容をより具体的に、詳しく伝えることができます。 ![AIのカスタマイズ提案で生成済みウィジェットを改善している画面](https://embedsocial.com/images/docs/create-widget/ai-widget-editor-embedsocial.jpg) ::: > AIがウィジェットを生成している間はページを再読み込みしないでください。再読み込みすると、ウィジェットは以前のデザインに戻ります。 ## テンプレートから始めたい場合 用意されているテンプレートから1つを選び、エディターでカスタマイズしてウィジェットを作成することもできます。[ウィジェットテンプレートの使い方とカスタマイズ方法](/docs/widgets/templates/)をご覧ください。 ## ウィジェット作成に関するよくある質問 **AIクレジットは消費されますか？** はい、ウィジェットの生成にはAIクレジットを使用します。AIの操作1回 = AIクレジット1件です。 **AIが作成した後でもウィジェットを変更できますか？** もちろんです。AIがウィジェットを生成した後も、新しいプロンプトを入力して送信できます。 **異なるソースから複数のウィジェットを作成できますか？** はい、1つのアカウント内で複数のウィジェットを作成できます。それぞれ異なるソースから、または複数のソースを組み合わせて作成できます。 **生成中にエラーが出た場合はどうなりますか？** 「Unable to generate HTML」というエラーが表示された場合は、チャット内に '**Retry**' ボタンが表示されます。クリックすると、プロンプトをワンクリックで再送信できます。 ## 次のステップ ウィジェットの準備が整いました。次は公開します。[ウィジェットをWebサイトに埋め込む](/docs/getting-started/embed/)。 > ご不明な点がございましたら、画面右下のチャットアイコンからカスタマーサクセスチームにお問い合わせいただくか、[support@embedsocial.com](mailto:support@embedsocial.com) までメールをお送りください。喜んでサポートいたします 🙏