header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix Studio エディタ:AI アシスタントを使用してカスタムコードを追加する

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

AI でカスタム動作を追加する

カスタマイズしたい要素を右クリックするか、コードパネルから AI アシスタントにアクセスします。すると、AI アシスタントがあなたに代わって「{要素 ID} に適用できるインタラクティブな動作は何ですか?」という最初のメッセージを表示し、それに続いて AI はその要素に基づいたカスタマイズの提案を表示してくれます。
その後は、AI が提案した動作を選択するか、AI に希望するカスタマイズ内容を説明します。カスタムコードは、クライアントのサイトに実装する前に、いつでもプレビューして承認することができます。

AI でカスタム動作を追加する方法:

  1. エディタに移動します
  2. 該当する要素を右クリックします。
  3. Add Custom Behavior with AI(AI でカスタムの動作を追加する)」を選択します。
    ヒント:選択すると、エディタ左側のコードパネル内に、AI アシスタントとのチャットが表示されます。
  4. 追加できるカスタムの動作について、AI アシスタントの提案を確認します。
  5. カスタマイズしたい内容を説明し、「送信」アイコン をクリックします。
    ヒント:AI が提案したものとは別のアイデアがある場合は、その内容を AI アシスタントに伝えてください。AI アシスタントは、あなたが考えているカスタマイズ内容が追加できるかどうかを、適切に評価・アドバイスしてくれます。
  6. 実行する内容を選択します:
    • カスタマイズを調整する:AI アシスタントとのチャットを続けて、追加したい特定のカスタマイズ内容を具体的に説明します。
    • コードをプレビューする:「コードを表示」をクリックし、AI が追加するコードを確認します。また、ここでは、コードを追加した場合の動作の詳細も確認することができます。
    • コードを追加する:クライアントのサイトにコードを追加します。
      1. コードを追加」をクリックします。
      2. 承認」をクリックし、コードの追加を確定します。
次のステップ:
  • Generated Code(生成されたコード)」下の「プレビュー」をクリックし、カスタマイズの内容を確認します。
  • AI に生成してもらいたい別のカスタムコードがある場合は、いつでも「新規チャット」アイコン をクリックして、AI との会話を開始することができます。
AI アシスタントを使用して、ドイツからの訪問者にのみ特定のボタンを表示するカスタムコードを追加した様子を示したスクリーンショット。

AI がコードに加えた変更内容を元に戻す

AI アシスタントがコードに加えた変更内容を元に戻したい場合は、クライアントのサイトを以前の状態に復元することができます。AI アシスタントとのチャット履歴にアクセスして、生成されたコードを以前のバージョンに戻すことが可能です。

コードを以前の状態に復元する方法:

  1. エディタに移動します
  2. エディタ左側で「コードundefined をクリックします。
  3. AI アシスタント」をクリックします。
  4. コードパネル右上で「その他のアクション」アイコン をクリックします。
  5. チャット履歴を表示」を選択します。
コードパネルで AI アシスタント横の「その他のアクション」アイコンをクリックし、「チャット履歴を表示」のオプションが表示されている様子を示したスクリーンショット。
  1. 該当するメッセージを選択します。
  2. 該当する「Generated Code(生成されたコード)」セクション下で、「復元」をクリックします。
AI アシスタントとの以前のチャット内容が表示され、「復元」のオプションがハイライトされている様子を示したスクリーンショット。

よくある質問

詳細については、以下の質問をクリックしてください。