Wix Studio エディタ:AI アシスタントを使用してカスタムコードを追加する
6分
現在、この機能はアルファ版でのみご利用いただけます。
AI アシスタントを使用すると、コーディングの経験がなくても、要素にカスタムコードを追加することができます。これにより、簡単にサイトのインタラクティブ性を高めたり、カスタマイズされたサイトを作成することができます。AI アシスタントは、コーディングの提案から実装まですべてサポートしてくれるため、あなたはクリエイティブな作業に集中することができます。
AI アシスタントにアクセスする方法:

AI でカスタム動作を追加する
カスタマイズしたい要素を右クリックするか、コードパネルから AI アシスタントにアクセスします。すると、AI アシスタントがあなたに代わって「{要素 ID} に適用できるインタラクティブな動作は何ですか?」という最初のメッセージを表示し、それに続いて AI はその要素に基づいたカスタマイズの提案を表示してくれます。
その後は、AI が提案した動作を選択するか、AI に希望するカスタマイズ内容を説明します。カスタムコードは、クライアントのサイトに実装する前に、いつでもプレビューして承認することができます。
AI でカスタム動作を追加する方法:
- エディタに移動します。
- 該当する要素を右クリックします。
- 「Add Custom Behavior with AI(AI でカスタムの動作を追加する)」を選択します。
ヒント:選択すると、エディタ左側のコードパネル内に、AI アシスタントとのチャットが表示されます。 - 追加できるカスタムの動作について、AI アシスタントの提案を確認します。
- カスタマイズしたい内容を説明し、「送信」アイコン
をクリックします。
ヒント:AI が提案したものとは別のアイデアがある場合は、その内容を AI アシスタントに伝えてください。AI アシスタントは、あなたが考えているカスタマイズ内容が追加できるかどうかを、適切に評価・アドバイスしてくれます。 - 実行する内容を選択します:
- カスタマイズを調整する:AI アシスタントとのチャットを続けて、追加したい特定のカスタマイズ内容を具体的に説明します。
- コードをプレビューする:「コードを表示」をクリックし、AI が追加するコードを確認します。また、ここでは、コードを追加した場合の動作の詳細も確認することができます。
- コードを追加する:クライアントのサイトにコードを追加します。
- 「コードを追加」をクリックします。
- 「承認」をクリックし、コードの追加を確定します。
次のステップ:
- 「Generated Code(生成されたコード)」下の「プレビュー」をクリックし、カスタマイズの内容を確認します。
- AI に生成してもらいたい別のカスタムコードがある場合は、いつでも「新規チャット」アイコン
をクリックして、AI との会話を開始することができます。

AI がコードに加えた変更内容を元に戻す
AI アシスタントがコードに加えた変更内容を元に戻したい場合は、クライアントのサイトを以前の状態に復元することができます。AI アシスタントとのチャット履歴にアクセスして、生成されたコードを以前のバージョンに戻すことが可能です。
コードを以前の状態に復元する方法:
- エディタに移動します。
- エディタ左側で「コード」
をクリックします。
- 「AI アシスタント」をクリックします。
- コードパネル右上で「その他のアクション」アイコン
をクリックします。
- 「チャット履歴を表示」を選択します。

- 該当するメッセージを選択します。
- 該当する「Generated Code(生成されたコード)」セクション下で、「復元」をクリックします。

よくある質問
詳細については、以下の質問をクリックしてください。
サポートされていないカスタマイズ内容はありますか?
AI アシスタントが要素 ID(例:「box3」、「section1」など)のリストを表示した場合、それらの要素はどうやって見つけることができますか?