---
title: "AIデザイン"
description: "エディタのAIデザインのチャットで、作りたいウィジェットを説明するだけで作成・スタイル変更ができます。"
---

**AIデザイン**は、ウィジェットエディタ内のチャットです。作りたいウィジェットを説明すると、そのとおりに作成されます。レイアウト、色、余白を手作業で設定する代わりに、ご希望の内容を書くだけで、同じ会話の中で調整を続けられます。

'**Editor**' タブの左側のレールにある '**AI design**' がその場所です。1回の生成につき1クレジットを消費し、エディタ右上のカウンターに残高が表示されます。

先に[ブランディング](/docs/widgets/branding/)の設定を入力しておくと、エディタはロゴ、フォント、ブランドカラーをすでに把握した状態になります。最初の生成からブランドに沿ったデザインで返ってくるため、プロンプトはレイアウトとコンテンツに専念できます。

## AIデザインでウィジェットを作成する方法

:::steps
1. **ウィジェットを説明します。** '**Type your message...**' に作りたい内容を入力します。書き出しに迷う場合は、入力欄の下にある提案されたプロンプトから選んでください。
![プロンプトの入力欄、SourcesとEnhance promptのボタン、その下に提案されたプロンプトが並ぶDescribe your perfect widgetの画面](https://embedsocial.com/images/docs/ai-design/1-describe-your-perfect-widget.jpg)
2. **プロンプトを拡張します（任意、おすすめ）。** '**Enhance prompt**' をクリックすると、一言のアイデアがレイアウト、ヘッダー、アニメーション、ブランドカラー、モバイルでの動作まで含む詳細な指示に展開されます。生成前に編集できます。
![短いアイデアを詳細な複数行の指示に展開するEnhance promptボタン](https://embedsocial.com/images/docs/ai-design/2-enhance-prompt.jpg)
3. **表示するソースを選びます。** '**Sources**' のドロップダウンを開き、ウィジェットに表示したい投稿のアカウント、ハッシュタグ、ページにチェックを入れます。
![接続済みのアカウントがチェックボックスで並ぶ、AIデザインのチャットで開いたSourcesのドロップダウン](https://embedsocial.com/images/docs/ai-design/3-select-sources-in-chat.jpg)
![メッセージ入力欄の下にSourcesのドロップダウン、プレビューの上にConnect your sourceのバナーが表示されたAIデザインのチャット](https://embedsocial.com/images/docs/ai-design/5-connect-your-source.jpg)
4. **参考画像を追加します（任意）。** '**Enhance prompt**' の隣の画像ボタンからスクリーンショットやブランドのビジュアルをアップロードすると、それに合わせたデザインで作成されます。
5. **生成します。** '**Generate**' をクリックするとクレジットを消費してウィジェットが作成されます。
6. **ブランドカラーを適用します（任意）。** テンプレートから生成すると、エディタがWebサイトのブランドカラーを検出し、適用するかどうかをチャットで確認します。適用を選ぶとヘッダー、ボタン、リンク、アクセントに反映され、スキップするとテンプレート本来の色が維持されます。
7. **チャットで調整を続けます。** 最初の生成のあとは、'**Add hover effects**'、'**Change the color scheme**' などの追加の提案がチップとして表示されます。クリックするか、ご自身で変更内容を入力すると、チャットの横のプレビューでウィジェットが更新されます。
![AIデザインの会話の下に追加の提案チップが並び、プレビューに完成したウィジェットが表示された画面](https://embedsocial.com/images/docs/ai-design/6-follow-up-suggestions.jpg)
:::

> Enhance promptはひと手間かける価値があります。短いプロンプトではレイアウト、動き、ブランドの細部が運任せになります。展開された指示は編集できるため、不要な部分は生成前に削除できます。

## 生成したウィジェットにソースを接続する

テンプレートから始めた場合や、ソースを接続する前に生成した場合は、プレビューがプレースホルダーのコンテンツで埋まり、'**This is a dummy source. Connect your source →**' というバナーが表示されます。クリックすると、プレースホルダーをご自身の投稿に差し替えられます。

チャットから離れずにソースを追加することもできます。'**Sources**' を開き、'**Connect source**' をクリックして、プラットフォームを選択します。

![Instagram、Google、Trustpilot、TikTok、Threads、LinkedIn、Facebook、YouTube、X、Pinterest、Vimeo、RSS Feed、Custom、Request sourceが並ぶChoose platformのモーダル](https://embedsocial.com/images/docs/ai-design/4-choose-platform.jpg)

'**Custom**' はソーシャルプラットフォーム以外のコンテンツに対応し、'**Request source**' はまだ連携していないプラットフォームを当社チームにリクエストする機能です。各プラットフォームで取得できる内容は[ソース](/docs/social-media-aggregator/sources/)をご覧ください。

## エディタ内のAIクレジット

AIデザインは**AIクレジット**を消費します。最初の生成でも、チャットに入力した追加の変更でも、1回の生成につき1クレジットです。テンプレートからの作成、ソースの接続、ウィジェットの表示設定の手動変更ではクレジットを消費しません。

残高はエディタの右上と、レールの左下に表示され、生成のたびに減っていきます。各機能の消費量と追加購入の方法は[AIクレジット](/docs/billing/ai-credits/)をご覧ください。

ウィジェットを作ってみませんか？[AIウィジェットビルダーでできることを見る](/ai-widget/)、または[無料トライアルを開始](/admin/continue_plugin_purchase/socialfeed29/trial?continue_onboarding=ai_widget&lang=ja)してください。

## AIデザインに関するよくある質問

**ウィジェット1つあたり何クレジット必要ですか。クレジットがなくなるとどうなりますか？**

1回の生成につき1クレジットで、エディタ右上のカウンターに表示されます。各機能の消費量、残高、追加購入の方法は[AIクレジット](/docs/billing/ai-credits/)をご覧ください。

**プロンプトは自分で書く必要がありますか？**

いいえ。新しいウィジェットでは入力欄の下に提案されたプロンプトが表示され、'**Enhance prompt**' は一言のアイデアを編集可能な詳細な指示に変換します。

**生成したあとにウィジェットを変更できますか？**

はい。同じチャットに入力を続けるか、追加の提案チップをクリックしてください。プレビューはその都度更新されます。

**自分のものではない投稿がウィジェットに表示されるのはなぜですか？**

プレースホルダーのコンテンツを含むテンプレートから生成されたためです。プレビュー上部のバナーで '**Connect your source**' をクリックするか、'**Sources**' のドロップダウンでご自身のアカウントを選択してください。

**生成に失敗するとどうなりますか？**

'**Unable to generate HTML**' のエラーが表示され、チャットに **Retry** ボタンが現れます。クリックすると、入力し直すことなく同じプロンプトを再送信できます。

**説明の代わりにスクリーンショットからデザインできますか？**

はい。'**Enhance prompt**' の隣の画像ボタンから参考画像をアップロードすると、それに合わせたデザインになります。

**毎回プロンプトにブランドカラーを書く必要がありますか？**

いいえ。[ブランディング](/docs/widgets/branding/)でロゴ、フォント、ブランドカラーを一度設定すれば、それ以降に生成するウィジェットはすべてその設定から始まります。

**カスタムCSSはどこにありますか？**

カスタムCSSはエディタの独立した設定ではなくなりました。スタイルの調整はこちらで行います。変更したい内容をチャットで説明し、結果を厳密に制御したい場合にCSSをお使いください。

## 次のステップ

[ブランディング](/docs/widgets/branding/)でワークスペースのブランドを一度設定すると、すべてのウィジェットがブランドに沿った状態で始まります。デザインが決まったら、[フィルター](/docs/widgets/filters/)で表示する投稿を絞り込み、[ウィジェットの設定](/docs/widgets/widget-settings/)で表示オプションを設定しましょう。

> ご不明な点がございましたら、画面右下のチャットアイコンからカスタマーサクセスチームにお問い合わせいただくか、[support@embedsocial.com](mailto:support@embedsocial.com) までメールをお送りください。喜んでサポートいたします 🙏