> For the complete documentation index, see [llms.txt](https://docs.vwo.gaprise.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vwo.gaprise.jp/testing/editor/2jntwuc0b8.md).

# ビジュアルエディターの使い方

### 概要 <a href="#id-1" id="id-1"></a>

ビジュアルエディターは、ウェブサイトのページのデザインレイアウトを変更するための「WYSIWYG（What you see what you get：見たままを得られる）」ツールです。

ビジュアルエディターを使えば、コードを一行も書かずにウェブサイトの基本的な見た目を変更することができます。

編集オプションを開くには、変更したいウェブサイト要素をクリックします。

<figure><img src="/files/sWDnHdxJoky63SbFUWZk" alt=""><figcaption></figcaption></figure>

ビジュアルエディターで利用できる主な機能は次の通りです。

* [画像を変更する](#id-2)
* [動画を変更する](#id-3)
* [要素の編集](#id-4)
* [移動/サイズ変更](#id-5)
* [HTMLの編集](#id-6)
* [削除](#id-7)
* [非表示/表示](#id-8)
* [相対的な要素を選択](#id-9)
* [URL移動](#id-10)
* [iframeの内容を編集する](#id-11)
* [インライン編集](#id-12)
* [要素・スタイルのコピー＆ペースト](#id-13)
* [位置変更](#id-14)
* [目標に追加して追跡](#id-15)
* [コードエディターに切り替える](#id-16)
* [ナビゲートモード](#id-17)
* [元に戻す/やり直す/保存](#id-18)
* [詳細設定](#id-19)
* [シングルページアプリケーション/サーバーサイドレンダリングサポート設定](#id-20)
* [ブックマークやジャンプリンクの追加](#id-21)

### **画像を変更する** <a href="#id-2" id="id-2"></a>

ウェブサイト上の画像を変更する場合に使用します。ビジュアルエディターで画像をクリックすると、\[**画像変更**]オプションが表示されます。

{% hint style="info" %}
画像以外の要素をクリックした場合、\[**画像を変更する**]オプションは表示されません。
{% endhint %}

<figure><img src="/files/4JYkruxph4R0fuLp9fYh" alt=""><figcaption></figcaption></figure>

1. ページ上の変更したい画像をクリックし、表示されるメニューから\[**画像変更]**&#x3092;選択します。\
   下記のようなダイアログが表示されます。

<figure><img src="/files/9C5NG70XMvmRlEA2p6dZ" alt=""><figcaption></figcaption></figure>

2. 画像を変更するダイアログでは、ローカルデバイスから画像をアップロードするか、画像の出典元URLを直接追加することができます。
3. 画像の読み込み時にアニメーションを表示させたい場合は、画像取り込み中に\[**ローダーアニメーションを表示する**]を有効にします。このオプションの詳細とキャンペーンでの使用方法については、「[ページの画像にローディングアニメーションを使用する](https://help.vwo.com/hc/en-us/articles/900002674986-Use-Loading-Animation-for-Images-on-Your-Webpage)」を参照してください。
4. 異なる画面サイズ（*携帯端末、デスクトップ、大型HDディスプレイなど*）で画像をきれいに表示するには、同じ画像を異なるサイズ（*例えば1x、2xなど*）でアップロードし、画面サイズに応じてブラウザが適切なものを表示できるようにする必要があります。\
   \
   エディターでは、\[**レスポンシブサイズ(srcset)**]オプションを使用して、同じ画像で異なるサイズのものをアップロードすることができます。

{% hint style="warning" %}
\[レスポンシブサイズ(srcset)]オプションが表示されない場合、元の画像がレスポンシブサイズに対応していないことを意味します。すべての画像にsrcsetを定義しておくことをお勧めします。\
また、VWOを使ってsrcsetを変更することはできますが、非レスポンシブな画像をレスポンシブな画像に変換することはできません。
{% endhint %}

* 各サイズ用の画像が定義されている場合は、それぞれのサイズにアップロードしてください。
* 新しい画像に追加の画像サイズがある場合は、\[**サイズ追加**]オプションを使用してアップロードすることができます。
* **新しい画像に十分な画像サイズがない場合、⊖オプションを使用してサイズを削除してください。**

5. \[**タイトル**]、\[**Altテキスト**]、\[**サイズ**]、\[**ボーダー**]の各欄で、画像の属性を追加で指定することができます。
6. 画像をアップロードするために、\[**完了**]をクリックします。

### **動画を変更する** <a href="#id-3" id="id-3"></a>

ページに掲載されている動画は、**\[動画変更]**&#x304B;ら修正できます。

例えば、ページ上の既存動画を別のURLで公開されている新しい動画に置き換えることが可能です。

また、既存の動画からプログレスバーを隠したり、音声をミュートしたい場合は、\[動画変更]のオプションから設定できます。

ビジュアルエディター&#x3067;**\<video>**&#x30BF;グ内に埋め込まれた動画をクリックすると、動画を変更するオプションが表示されます。

<figure><img src="/files/K5SfAuxMRHoV76yVSCdo" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
iframeに埋め込まれた動画またはYouTube動画を修正したい場合は、[こちらをクリック](https://help.vwo.com/hc/en-us/articles/360021535813-Using-Visual-Editor-to-Create-Variations#h_01FKZA1NR0ABHSNQ1KZ6RC75NP)してください。 \<video>タグに含まれる動画の設定は、< iframe>タグに含まれる設定とは異なります。
{% endhint %}

**\[動画変更]**&#x6A5F;能には、以下の設定があります。

<figure><img src="/files/ABShKOd86qHJDaQYFo17" alt=""><figcaption></figcaption></figure>

#### **動画ソースの設定**

* **URL：**&#x52D5;画ソースを変更するときに使用します。
* **互換性のあるさまざまな形式のURL：**&#x69D8;々な形式の動画ソースを指定する場合に使用します。ブラウザに対応したものが自動的に表示されます。これは、ブラウザの互換性に問題がある場合によく役に立ちます。

#### **初期設定**

* **読み込み時に自動再生：**&#x3053;れを有効にすると、ページが読み込まれたときに動画が自動的に再生されます。
* **コントロールを削除：**&#x52D5;画からすべてのコントロールを非表示にする場合は、この機能を有効にします。
* **無限ループ：**&#x52D5;画を連続的に再生したい場合は、この機能を有効にします。
* **音声をミュート：**&#x30DA;ージ読み込み時に音声なしで動画を再生したい場合は、これを有効にします。

#### **ポスターの設定**

* **ポスター非表示：**&#x52D5;画の読み込み中に最初のフレームを表示したい場合に選択します。
* **画像のソースURLを使用：**&#x753B;像をロードしている間、特定のURLからポスターとして表示したい場合に選択します。
* **アップロードまたはアップロード済み画像から選択：**&#x52D5;画の読み込み中に、すでにアップロードされた画像を表示したり、新しい画像をポスターとしてアップロードしたい場合に選択します。

{% hint style="warning" %}
ポスター画像は、動画と同じアスペクト比である必要があります。
{% endhint %}

ページの\<video> タグ内に埋め込まれた動画を修正する手順は次の通りです。

#### **手順**

1. ビジュアルエディターで\[**\<video>**]タグ内に埋め込まれた動画をクリックし、表示されるメニューから\[**動画変更**]を選択します。\[動画変更]ダイアログが表示されます。
2. 動画の属性を変更するには、上記のオプションを使用します。
3. 変更を確定するには、\[**完了**]をクリックします。

**iframeに埋め込まれた動画の修正**

iframeに埋め込まれたYouTubeまたはVimeoの動画を変更したい場合は、YouTubeまたはVimeoが提供する埋め込み動画コードを変更しないように注意してください。その場合、映像が途切れることがあります。

例えば、スクリーンショットで強調されている動画埋め込みコードは、YouTubeが提供しているものです。変更せずにそのままウェブサイトに埋め込んでください。

<figure><img src="/files/cUJB4Dv1Y35abihSgHn5" alt=""><figcaption></figcaption></figure>

ページの\<iframe>タグ内に埋め込まれた動画を修正する手順は次の通りです。

#### **手順**

1. ビジュアルエディターで\[**\<iframe>**]タグ内に埋め込まれた動画をクリックします。
2. 表示されるメニューから、動画の種類に応じて、\[**YouTubeの埋め込み設定**]または\[**Vimeoの埋め込み設定**]のオプションを選択します。\
   **動画を変更する**ダイアログが表示されます。
3. 動画の属性を変更するには、次のオプションを使用します。

   <figure><img src="/files/ZhfcGRYyN3u1FCtrdQn6" alt=""><figcaption></figcaption></figure>
4. 変更を確定するには、\[**完了**]をクリックします。

### **要素の編集** <a href="#id-4" id="id-4"></a>

要素のテキスト、URL、CSSスタイル、属性を変更する場合は、\[**要素変更**]オプションを使用します。

<figure><img src="/files/WVQz2zEFRpzPrruzCnhz" alt=""><figcaption></figcaption></figure>

#### **一般** <a href="#id-2l2cnp4s5kac" id="id-2l2cnp4s5kac"></a>

一般タブから、コンテンツの内容、フォントのスタイルやサイズ、テキストの色など、要素の属性を変更することができます。要素の更新が完了したら、\[**完了**]をクリックして変更を保存します。

<figure><img src="/files/LvpL5dhionvQEnZDtJ1I" alt=""><figcaption></figcaption></figure>

#### **スタイル** <a href="#txc7f6jlvdml" id="txc7f6jlvdml"></a>

このオプションを使用すると、ウェブサイト上の要素のCSSスタイルを変更することができます。\[**スタイル**]タブをクリックして変更します。

<figure><img src="/files/VdNbUbO8bjp1CtQYFHtf" alt=""><figcaption></figcaption></figure>

エディター上でリアルタイムにプレビューしながら、フォントサイズ、背景、ボーダー、レイアウトなどを変更したり、カスタムスタイル要素をこのセクションから追加したりすることが可能です。

#### **属性** <a href="#c1dmz8747621" id="c1dmz8747621"></a>

属性は、HTMLの要素に関する追加情報を提供します。ページ上で選択した要素の標準的なHTML属性やカスタム属性を変更することができます。

<figure><img src="/files/gLrpnoUGL3bwNBZ3e4kD" alt=""><figcaption></figcaption></figure>

* **ID：**&#x7279;定の要素を識別するために使用さ。この属性の値は一意でなければなりません。
* **クラス：**&#x43;SSで使用され、共通のプロパティを持つ要素にスタイルを設定。
* **タイトル：**&#x8981;素にカーソルを合わせたときにツールチップとして表示されるテキスト。

要素にカスタム属性を追加することができます。カスタム属性を追加するには、\[**カスタム**]を選択し、必要に応じて\[**属性名**]と\[**値**]を入力します。ビジュアルエディターを使用して属性を変更すると、VWOはその更新に対応するコードスニペットを作成し、コードエディターで表示できるようにします。

<figure><img src="/files/Yx9o0ukv2n0uq75Tb1rV" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/NnZGTHj63nMS1416mwze" alt=""><figcaption></figcaption></figure>

### **移動/サイズ変更** <a href="#id-5" id="id-5"></a>

移動操作は、現在の位置から正確なピクセル数で相対的に要素を移動させます。この操作で、ボタンなどのサイズを大きくしたり小さくしたりすることもできます。

ページ上のある位置から別の位置へ要素を移動させることができます。

要素を任意の位置にドラッグ＆ドロップしたり、軸に値を入力して移動したりすることができます。

<figure><img src="/files/BDA7X1Xjrw1ojYKC9Rrx" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
要素を移動させるとレイアウトが変わるため、ウェブサイトのレスポンシブ性が損なわれる可能性があります。テストを公開する前に、すべてのデバイスで変更をプレビューすることを確認してください。
{% endhint %}

### **HTMLの編集** <a href="#id-6" id="id-6"></a>

ページ上の任意の要素のHTMLコードスニペットを変更する場合に使用します。\[**HTMLの編集**]オプションの使用方法については、[こちらをクリック](https://help.vwo.com/hc/en-us/articles/360020929193)してください。

<figure><img src="/files/aIjKb2SRE3Y4lUrJ9ie9" alt=""><figcaption></figcaption></figure>

### **削除** <a href="#id-7" id="id-7"></a>

バリエーションから要素を削除します。これにより、要素の表示プロパティが none に設定されます。

<figure><img src="/files/8PZfnaWApzljScUlJUqF" alt=""><figcaption></figcaption></figure>

### **非表示/表示** <a href="#id-8" id="id-8"></a>

これにより、ウェブサイトの要素を非表示または表示にすることができます。隠された要素を任意の時点で表示することができます。\
\
例えば、変更バリエーションのために画像やCTAボタンを非表示にしたい場合があります。これにより、要素の表示プロパティが hidden（非表示）/ visible（表示）に設定されます。

<figure><img src="/files/TPFcW53XCdnIrHxip7LO" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
非表示/表示操作は、要素をウェブサイトから削除せず、要素のコードスニペットを非表示にし、ユーザーに表示されないようにします。
{% endhint %}

### **相対的な要素を選択** <a href="#id-9" id="id-9"></a>

場合によっては、一部の子要素、親要素、または兄弟要素がページ上に表示されず、クリックしたり選択したりできないことがあります。親要素に変更を加えて子要素にも影響を与える場合、どの子要素に影響が及ぶかわからない場合があります。

\[**相対的な要素を選択**]オプションを利用すると、選択した要素に対応する利用可能な要素（親/子/兄弟）をすべて表示し指定できます。

ここで、\[**親要素**]は選択した要素の親要素のリストを、\[**兄弟要素**]は選択した要素のすべての兄弟要素のリストを、\[**子要素**]は選択した要素のすべての子要素のリストを表示します。

<figure><img src="/files/Qw4HSIdZdX4h8dmAkfqr" alt=""><figcaption></figcaption></figure>

#### DOMツリー <a href="#h_01habykry9gh2eh70h33hta5jh" id="h_01habykry9gh2eh70h33hta5jh"></a>

DOM (ダイレクト オブジェクト モデル) ツリーを使用すると、上記の手順を省略できます。すべての要素が、順に配置されて直線的に表示され、ツリーから必要な要素を直接選択できます。

<figure><img src="/files/K2jiYk83IedhLVyCZ9s9" alt=""><figcaption></figcaption></figure>

見つからない場合は、矢印をクリックしてブランチを移動し、目的の要素を特定して選択できます。

<figure><img src="/files/RADVAtW2HZylSn5QH7B3" alt=""><figcaption></figcaption></figure>

相対要素の選択の詳細については、[この記事](https://help.vwo.com/hc/en-us/articles/360020915494-How-to-Use-the-Select-Parent-Operation-in-Visual-Editor-)を参照してください。

### **URL移動** <a href="#id-10" id="id-10"></a>

\[**URL先に移動**]オプションは、ビジュアルエディター上でページを移動することができます。

リンクしている要素に対して、\[**URL先に移動**]をクリックするだけで、ビジュアルエディター上でページが開かれます。

<figure><img src="/files/EqGZ3mQ8oqdpwQmMnKRx" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**\[URL先に移動]**&#x30AA;プションは、アンカータグ内の要素にのみ適用され、それ以外の要素ではメニューに表示されません。
{% endhint %}

### **iframeの内容を編集する** <a href="#id-11" id="id-11"></a>

エディターの\[**iframeの内容を編集する**]オプションは、ページ上のiframe内に存在する要素に変更を加えることができます。このオプションにより、VWOはエディターにiframeのURLを読み込み、ユーザがiframeのコンテンツに対して必要な機能を実行できるようにします。

<figure><img src="/files/5AVDM1OILAKI8DjmcJCO" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**\[iframeの内容を編集する]**&#x30AA;プションは、iframeの中にある要素に適用されます。
{% endhint %}

### **インライン編集** <a href="#id-12" id="id-12"></a>

インライン編集オプションを使用すると、\[**要素変更]**&#x3092;使わなくても、項目をすばやく修正することができます。

インライン編集ダイアログのオプションを使って、フォント、色、配置の変更、リンクの追加、画像の挿入を行うことができます。ここで、[HTMLの編集](https://help.vwo.com/hc/en-us/articles/360021535813-Using-Visual-Editor-to-Create-Variations#h_1ac0ca63-ba53-41ac-b6c6-4d89cca6dddd)オプションを使用してカスタムコードを追加することができます。

<figure><img src="/files/pIDUhu9Ib0NbvEuBoTcm" alt=""><figcaption></figcaption></figure>

### **要素・スタイルのコピー＆ペースト** <a href="#id-13" id="id-13"></a>

要素またはそのスタイルだけをコピーし、**要素を貼り付け**と**スタイルを貼り付け**オプションを使って、別の位置に貼り付けたり、あるUI要素のスタイルだけを別の要素に貼り付けたりすることができます。

これにより、コピー＆ペーストや、同じスタイルを他の要素に適用する時間を短縮し、効率化を図ることができます。

ページの別の位置に要素をコピー＆ペーストする手順は次の通りです。

**手順**

1. ビジュアルエディターで、コピーしたい要素をクリックし、\[**コピー**] → \[**要素**]を選択します。

<figure><img src="/files/zajyZITp8ZoKI11K8fnL" alt=""><figcaption></figcaption></figure>

2. コピーした要素をウェブサイト上の別の位置に貼り付けるには、位置を選択して\[**この要素の前**]または\[**この要素の後**]を選択します。

<figure><img src="/files/OkncGTsFRQD7MFyM6wPn" alt=""><figcaption></figcaption></figure>

3. ソース要素の見た目を維持したい場合は、\[**HTMLをスタイル付きで貼り付ける**]を選択し、そうでない場合は\[**HTMLのみを貼り付ける**]を選択してください。これで、コピーした要素があなたのページに貼り付けられるはずです。

<figure><img src="/files/2Me9Fqk5CJHUUHJCCeAV" alt=""><figcaption></figcaption></figure>

**要素のスタイルだけをコピー＆ペースト**

あるUI要素のスタイルを別のUI要素にコピー＆ペーストするには、次のようにします。

**手順**

1. ビジュアルエディターで、スタイルをコピーしたい要素をクリックし、\[**コピー**]→\[**スタイルのみ**]を選択します。
2. コピーしたスタイルを別の要素に貼り付けるには、要素上でクリックし、\[**スタイルの貼り付け**]を選択します。これにより、コピーされたスタイルが選択された要素に適用されるはずです。

### 位置変更 <a href="#id-14" id="id-14"></a>

複数の要素をある位置から別の位置に移動させることができます。この操作で、ページ上の任意の場所に要素を並べ替えたり配置したりすることができます。

<figure><img src="/files/3bFzASxbc8NXqEUiPUmS" alt=""><figcaption></figcaption></figure>

### **目標に追加して追跡** <a href="#id-15" id="id-15"></a>

VWOエディターでは、テストのコンバージョン目標を追加することも可能です。ビジュアルエディターを使用して、ウェブサイト上のリンクのクリック、要素のクリック、フォームの送信を追跡する目標を追加することができます。

エディターで目標を追加する方法については、[こちらをクリック](https://help.vwo.com/hc/en-us/articles/360021105953)してください。

<figure><img src="/files/c3Jd0QWDVgrrj9Suew1g" alt=""><figcaption></figcaption></figure>

### **コードエディターに切り替える** <a href="#id-16" id="id-16"></a>

\[**< />**]アイコンをクリックすると、コードエディターに切り替わります。コードエディターについてもっと詳しく知りたい方は[こちらをクリック](https://help.vwo.com/hc/en-us/articles/360020730394)してください。

<figure><img src="/files/U68LRHXWQ2hvoQMhJPNs" alt=""><figcaption></figcaption></figure>

### **ナビゲートモード** <a href="#id-17" id="id-17"></a>

* **デザイン：**&#x3053;のモードを選択すると、エディターに読み込まれたページに変更を加えることができます。
* **ナビゲート：**&#x30D6;ラウザで閲覧するのと同じように、VWOでウェブサイトを閲覧できるモードです。ただし、このモードでは編集を行うことはできません。編集したいページが表示されたら、\[**デザイン**]モードに切り替えて、編集したい部分を選択します。

<figure><img src="/files/I4tscgPE68PTbawHCbg0" alt=""><figcaption></figcaption></figure>

### **元に戻す/やり直す/保存** <a href="#id-18" id="id-18"></a>

ページに変更を加える際には、ビジュアルエディターの\[**元に戻す**]/\[**やり直す**]/\[**保存**]ボタンを使用してください。最後に保存したテストやバリエーションへの変更は、次回ログイン時もアクセスできます。

<figure><img src="/files/6Cj7VVoBdCNxQJ0TetkX" alt=""><figcaption></figcaption></figure>

### **詳細設定** <a href="#id-19" id="id-19"></a>

エディターのこのオプションは、ページに存在する要素をターゲットにする際に使用される方法を決定することができます。

VWOは、変更を要素に適用するために要素をターゲットにする必要があります。

デフォルトでは、エディターはページ上の要素を識別するためにIDとクラス（推奨オプション）の両方を考慮します。これにより、IDとクラスの両方を使用して要素セレクタを構築する柔軟性が得られます。

この設定を変更することで、動的なIDやクラスを持つウェブサイトに有効です。\[**エディターの設定**]ダイアログにあるオプションを使って、生成されるセレクタパスのID、クラス、またはその両方をスキップすることができます。

エディター設定オプションはアカウントレベルにも存在し、\[**アカウント設定**] > \[**キャンペーン設定**]タブで設定することができます。

{% hint style="info" %}
デフォルトでは、［**IDとクラスの両方を考慮する（推奨）**]オプションが選択されています。
{% endhint %}

<figure><img src="/files/JgU8cvdNWk0am2yxmU0v" alt=""><figcaption></figcaption></figure>

### **シングルページアプリケーション/サーバーサイドレンダリングサポート設定** <a href="#id-20" id="id-20"></a>

ページに、通常、遅延やユーザーアクションの後に表示される動的な要素があるとします。VWOのテストキャンペーンでは、このような要素に変更を加えることがあります。このような場合、キャンペーンが読み込みされるたびに行った修正が適用されるように、VWOでは2種類の実装を用意しています。

* ページが読み込まれた後でも、変更を適用し続ける
* フレームワークレンダリングが完了するまで、変更の適用を遅らせる

1つ目は、VWOキャンペーン実行後にページに表示される変更を扱うもので、2つ目はGatsbyJSやNext.js ReactJSなどのフレームワークで構築されたウェブサイトの要素に変更を適用することを目的としています。

VWOでのこれらの設定について詳しくは、「[VWOでウェブサイトのエディター設定にシングルページアプリケーション/サーバーサイドレンダリングサポートを設定する](https://help.vwo.com/hc/en-us/articles/900000678806)」を参照してください。

### **ブックマークやジャンプリンクの追加** <a href="#id-21" id="id-21"></a>

スクロールや検索をせずに、ユーザーを特定のセクションに誘導したり、ページのトップに戻したりしたいですか？&#x20;

例えば、長いブログ記事を作成する場合、ページの上部の役に立つ各セクションへのリンクがあれば、ユーザーは必要なリンクをクリックし、スクロールすることなく直接興味のある情報に移動できるのでかなり便利です。この現象は、**ブックマークやジャンプリンクの追加**と呼ばれることが多い。

その場合、VWOキャンペーンで[要素の編集](https://help.vwo.com/hc/en-us/articles/360021535813#h_01F66TN25XA1VVT60JC2D661K5)セクションを使って設定することができます。 必要なのは、要素のURL属性を必要なセクションに設定することだけです。

VWOキャンペーンにジャンプリンクを設定する手順は次の通りです。

{% hint style="warning" %}
Linkタイプの要素で設定可能です。
{% endhint %}

**手順**

1. \[**要素変更**]オプションを使用して、ユーザーをナビゲートしたいセクションに\[**id**]属性を追加します。

{% hint style="warning" %}
ユーザーを適切に誘導するために、ユニークなIDを持つことをお勧めします。
{% endhint %}

2. 訪問者にクリックして別のセクションに移動してもらいたい要素を選択し、\[**要素変更**]オプションを選択します。
3. \[**URL**]欄に、手順1で指定した\[**id**]の先頭に\[**#**]\(ハッシュ)記号を入力します。

{% hint style="warning" %}
既存の要素を変更する以外に、必要に応じて新しい要素をページに追加することもできます。その方法については、エディターを使ったページへの要素の追加を参照してください。
{% endhint %}

※本ページは[\[原文：Using Visual Editor to Create Variations\]](https://help.vwo.com/hc/en-us/articles/360021535813-Using-Visual-Editor-to-Create-Variations)を翻訳・加筆修正しています。