> 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/aoey86qmku.md).
# ウィジェットを操作する
### **VWOのウィジェットとは？**
VWOのウィジェットは、画像やフォームを使ったバナーやポップアップをコードレスでWebサイトに追加することができます。これらのウィジェットを使ったWebページのバリエーションを、VWOビジュアルエディターから直接作成することができます。この機能は、VWOエンタープライズプランでのみ利用可能です。
Webサイト上で継続的な販売を促進したい状況を考えてみましょう。ユーザーがスクロールしても、Webページに貼り付けられるプロモーションバーを使用することができます。これは、あなたの訪問者に興味を持ってもらう確実な方法です。
また、ウィジェットと様々なターゲティングオプションを組み合わせることで、よりコンテクスチュアルな情報を提供することができます。例えば、訪問者が記事の最終部に来た時にニュースレター購読のポップアップを表示したい場合、「[行動ターゲティング](https://help.vwo.com/hc/en-us/articles/360020433374)」を使って訪問者を特定し、ウィジェットを使って体験を作成することができます。
ウィジェットは、新しく、素晴らしいコンテンツの宣伝、今後のイベントのプロモーション、アプリケーションの主要機能の発見力の強化、次のイベントやニュースレターのためのより多くのサインアップの収集など、Webサイトの訪問者を魅了する素晴らしいメカニズムです。
Webサイトに表示する各情報の関連性が高まり、コンバージョンが上昇します。
### **VWOのウィジェットの種類**
VWOウィジェットは、大きく分けて以下の2つのカテゴリーに分類されます。
1. **バナー**\
バナーは、Webサイト上で何かを強調するのに最適な方法です。バナーは、情報提供、新製品のプロモーション、ブランドの認知度向上など、さまざまなシーンで活用することができます。\
VWOのバナーウィジェットは、Webサイトの上部または下部にカスタマイズ可能なリボン状のコンポーネントを追加することができます。
メッセージとアクションを起こすボタンは、使用ケースに合わせて変更することができます。また、このバナーでメール登録を可能にするための入力欄など、より多くのコンポーネントを導入することができます。VWOのバナーは、Webページ上ではこのように表示されます。
2. **モーダル**
モーダルは、Webページのコンテンツの上に表示されるポップアップウィンドウで、様々な場面で利用することができます。訪問者がWebサイトを離れようとしている場合、モーダルを使って興味を引くことができます。ボタンやフォームなどに便利です。
VWOでは、「イメージポップアップ」、「フォームポップアップ」、「購読ポップアップ（縦型）」、「購読ポップアップ（横型）」の4種類のモーダルが用意されています。それぞれ3種類のレイアウトで使用することができます。フルスクリーン モーダル、オーバーレイ無しのモーダル、またはデフォルトのオーバーレイ付きモーダルのいずれかを選択することができます。
注：ウィジェットを使ったフォームの追加については、「[VWOでフォームを操作する](https://help.vwo.com/hc/en-us/articles/360039329873)」を参照してください。\
モーダルウィジェットを使用すると、以下のことが可能です。
* イメージポップアップを追加し、Webページ上の訪問者の行動に基づいてそれをトリガーにする
* フォームポップアップを使用して、今後のイベントのプロモーションとサインアップを収集する
* ユーザーがニュースレターに登録しようとしたときにフォームをトリガーする
* ウィジェットをページ上に表示するタイミングを選択します。詳しくは、「[VWOのウィジェットトリガー条件](https://help.vwo.com/hc/en-us/articles/900007712483-Widget-Triggering-Conditions-in-VWO)」を参照してください。
3. \
\
*フォームのポップアップはこのような感じです。*
4. **サイドチクレット**
Webサイト訪問者の通常のWebサイト体験を妨げることなく、訪問者と関わりたいと思いませんか？ サイドチクレットがその答えです。\
サイドチクレットとは、Webページの左側や右側に追加することで、訪問者の興味を容易に引くことができる小さな長方形の要素です。**例えば、**あるeコマースサイトが、ポリシーに関連する変更をサイト訪問者に知らせたいと考えたいとします。ここでは、「返品規定が変更されました」という歯切れの良いメッセージを表示するサイドチクレットウィジェットを追加し、訪問者がこのチクレットをクリックするとすぐに、ポリシーのページにリダイレクトされるようにすることができます。こうすることで、Webページの大部分を覆うことなく、告知することができます。\
**注：**チクレットコンテンツのバリエーションを複数作成したり、告知バナーを試したりして、どれが一番効果的かを確認することをお勧めします。\
[Wingify.com](http://wingify.com/)の実例で、チクレットの使い方を理解しましょう。 チームウインギファのホームページに、現在募集中の職種をお知らせするチックレットを追加しました。ホームページの右側に「募集中」と書かれたチックレットがあり、これをクリックすると、直接「採用情報」のページに移動して、現在募集中の職種を見ることができます。\
VWOエディターを使用してWebページにサイドチクレットウィジェットを追加すると、以下のことが可能です。
* ページ内での配置を変更する（左または右）
* ページと一緒にスクロールさせるか、スクロールしても位置が固定されるかを選択可能
* ユーザーをWebページまたは特定のセクションにリダイレクトする
* 文字色と背景色を設定する
* ウィジェットをページ上に表示するタイミングを選択します。詳しくは、「[VWOのウィジェットトリガー条件](https://help.vwo.com/hc/en-us/articles/900007712483-Widget-Triggering-Conditions-in-VWO)」を参照してください。
5. **ビデオエンベッド**\
Webサイトに動画を追加することで、クリックスルー率、平均注文額、コンバージョン、収益の向上が期待できます。動画は、メッセージを素早く伝えることができ、Webサイト訪問者をより長く惹きつけることができます。これだけでなく、動画は検索エンジン最適化（SEO）にも欠かせません。\
読み物よりも動画の方が長く興味を持ち続け、動画視聴後にリードに転換する可能性が高いことが証明されています。なぜなら、動画ならどんなものでも最も効果的な方法で伝えることができるからです。\
VWOは「Youtube」と「Vimeo」の2つの動画タイプに対応しています。Youtubeビデオウィジェットを使用すると、Youtubeでホストされているビデオを追加することができ、Vimeoウィジェットを使用すると、Vimeoでホストされているビデオを追加することができます。\
VWOエディターのビデオウィジェットを使えば、一行のコードも書かずに、Webページのあらゆる場所に簡単に動画を埋め込むことができます。必要なのは、Youtube/Vimeoの動画のURLだけです。
VWOエディターを使ってWebページにビデオウィジェットを追加すると、以下のことが可能です。
* 動画の配置を設定する
* ページの読み込み時に動画を自動再生する
* 動画コントロールの削除
* 動画を連続的にループ再生させる
* 音声をミュートする
* 動画を非インタラクティブにする
* ウィジェットをページ上に表示するタイミングを選択します。詳しくは、「[VWOのウィジェットトリガー条件](https://help.vwo.com/hc/en-us/articles/900007712483-Widget-Triggering-Conditions-in-VWO)」を参照してください。
6. 情報：YouTubeとVimeoのウィジェット以外にも、\[**VWOギャラリ**]の\[**動画**]要素を使用して、他の種類のビデオを追加することができます。詳しくは、「[VWOエディターを使ったWebページへの要素の追加](https://help.vwo.com/hc/en-us/articles/360035250274)」を参照してください。
7. **ツールチップ**\
UI上の任意の欄について、煩雑な印象を与えることなく追加情報を提供したいですか？ 訪問者が要素と相互作用するときに表示されるツールチップを追加します。ツールチップは、ページそのものに情報を表示させるのではなく、訪問者に情報を伝えるための優れた方法です。\
ツールチップは、ユーザーが要素にカーソルを合わせたり、焦点を合わせたり、触れたりしたときに表示される文脈的なラベルのことです。通常、その機能に関するヘルプテキストが含まれています。**例えば、**パスワード欄のツールチップには、パスワードを構成する必須文字に関する情報を保持することができます。\
**注：**VWOを使用してWebページにツールチップを追加する際、テキストコンテンツとメディアコンテンツを追加することができます。\
下の画像にあるツールチップを見てください。通常、どのような情報を欄に入れるべきかを通知します。
VWOエディターを使ってWebページにツールチップウィジェットを追加すると、以下のことが可能です。
* ページ上の要素との相対的な配置を設定する
* テキスト、画像、アクションを起こすなどのコンテンツを追加する
* ウィジェットをページ上に表示するタイミングを選択します。詳しくは、「[VWOのウィジェットトリガー条件](https://help.vwo.com/hc/en-us/articles/900007712483-Widget-Triggering-Conditions-in-VWO)」を参照してください。
8. **トップページに戻る**\
あなたのWebサイトのいくつかのページに多くのコンテンツがある場合、**例えば、**ブログサイトでは、訪問者がコンテンツを読み進めるために、より深くスクロールする必要があります。さらに、モバイル端末からのアクセスでは、このスクロールが拡大する可能性があります。\
ページの一番下までスクロールした訪問者が、一番上に戻りたい場合を考えてみましょう。そのためには、手動で一番上までスクロールする必要があります。これでは、訪問者がWebサイトを離れてしまうことにもなりかねません。\
そこで、VWOがスクロールトゥトップウィジェットを用意しています。一般的には、訪問者が1回のクリックで素早くページのトップに戻れるようにするためのボタンです。これにより、より良いユーザー体験をWebサイトにもたらすことができます。
VWOエディターのスクロールトゥトップウィジェットを使えば、一行もコードを書かずに簡単にWebページにスクロールトゥトップボタンを追加することができます。一度挿入すると、訪問者が下にスクロールし始めると、ページの右下にスティッキーボタンが表示されます。デスクトップ版、タブレット版、モバイル版のWebページでシームレスに動作します。\
VWOエディターでWebページにスクロールトゥトップボタンを追加すると、以下のことが可能です。
* 背景の形状を変更する（円、長方形、角丸長方形）
* ボタンに表示される矢印の色を変更する
* ボタンの色を変更する
* ウィジェットをページ上に表示するタイミングを選択します。詳しくは、「[VWOのウィジェットトリガー条件](https://help.vwo.com/hc/en-us/articles/900007712483-Widget-Triggering-Conditions-in-VWO)」を参照してください。
9. **カウントダウンタイマー**\
カウントダウンタイマーは、継続時間を表示するライブカクテルのようなものです。まだ始まっていない、あるいは終わっていないイベントに対して、緊迫感を出したり、誇大広告を出したりするために使うことができます。\
**例えば、**セール期間中にトップページやWebサイトの各ページのヘッダーにカウントダウンタイマーを追加すると、切迫感が生まれ、時間切れになる前にもっと買い物をしようとする訪問者が増え、より多くのコンバージョンが起こるようになります。
VWOエディターのカウントダウンタイマーウィジェットを使えば、一行もコードを書かずに簡単にカウントダウンタイマーをWebページに追加することができます。カウントダウンタイマーをインストールするWebページの位置を選択し、必要な設定を行うだけです。\
タイマーは、ページが読み込みされたとき、またはページ上のアクションに基づいて開始することができます（例えば、訪問者がWebサイトを終了すると感じたとき）。さらに、タイマーが切れるとメッセージを表示したり、カスタムコードをトリガーにしてイベントを実行するオプションもあります。\
VWOエディターを使用して、Webページにカウントダウンタイマーを追加すると、以下のことが可能です。
* レイアウトを選択する
* タイマーの開始時間と終了時間のカスタム指定
* タイマー終了後の動作を指定する（カスタムイベントを発することも可能です）
* タイマーの単位を表示する（年、時間、月、分、日、秒）
* ウィジェットをページ上に表示するタイミングを選択します。詳しくは、「[VWOのウィジェットトリガー条件](https://help.vwo.com/hc/en-us/articles/900007712483-Widget-Triggering-Conditions-in-VWO)」を参照してください。
10. **ソーシャルシェア**
ソーシャルメディアは、ターゲットとなるユーザーに接触し、認知度を高め、Webサイトへのトラフィックを増やすための強力なソースとなります。Webページにソーシャルメディアボタンを追加すると、視聴者がTwitterやFacebookなど、さまざまなプラットフォームでコンテンツを簡単に共有できるようになります。例えば、 Facebook、Twitterなどのソーシャルシェアボタンを追加する必要があります。新しい投稿を公開するたびに、訪問者は複数のソーシャルグループやコミュニティで積極的に共有、宣伝し、他のコミュニティのメンバーに見てもらうことができます。\
VWOエディターのソーシャルシェアウィジェットを使えば、コードを一行も書かずにFacebook、Twitter、LinkedInのシェアボタンをWebページに簡単に追加することができます。ソーシャルシェアボタンをWebページに追加する位置を選択する必要があります。キャンペーンを公開すると同時に、ソーシャルシェアボタンが訪問者に表示されるようになります。\
**注：**現在、VWOでは以下のソーシャルシェアボタンを追加することができます - Facebook、Twitter、Linkedin。
VWOエディターを使ってWebページにソーシャルウィジェットを追加すると、以下のことが可能です。
* 追加したいソーシャルシェアボタンを、利用可能なオプションから選択する。
* ページ上での配置を設定する。移動操作でページ上の位置を細かく調整することができる。
* トリガー条件を追加して、要件に応じた表示・非表示を実現する。
* ウィジェットをページ上に表示するタイミングを選択します。詳しくは、「[VWOのウィジェットトリガー条件](https://help.vwo.com/hc/en-us/articles/900007712483-Widget-Triggering-Conditions-in-VWO)」を参照してください。
11. **お問い合わせはこちら**\
インターネットの世界では、多くの消費者がチャットでサポートを受けたり、フォームに記入してコールバックを期待したりすることに慣れていますが、それでも多くの消費者は電話で素早くサポートを受けることを好みます。Webサイト上に電話番号やメールアドレスを表示することで、訪問者があなたに連絡を取り、コンタクトを確立するためのすべての情報を得ることができます。さらに改善できるのは、連絡先を手入力したり、コピー＆ペーストしたりする細かい作業を自動化することです。
そこで、VWOでは、\[**お問い合わせはこちら**]ウィジェットを用意しています。クリックコンタクトウィジェットは、その名の通り、ユーザーがワンクリックで電話、WhatsApp、Eメールで連絡できるようにするシンプルなウィジェットです。ボタンをクリックするだけで、連絡を取ることができます。
Webサイト上にクリックコンタクトのボタンやリンクがあれば、ユーザーは簡単に素早く連絡を取ることができます。さらに、消費者の生活を便利にし、コンバージョンの増加やユーザー体験の向上に貢献します。
VWOエディターのクリックコンタクトウィジェットを使えば、コードを一行も書かずに簡単にWebページにフローティングボタンを追加することができます。追加したい位置を選択するだけで、キャンペーンをライブにするとすぐに訪問者に表示されます。
VWOエディターを使用してWebページにクリックコンタクトウィジェットを追加すると、以下のことが可能です。
* Webページに電話、メール、WhatsAppのいずれかの連絡先を追加することを選択する。
**注：**選択したオプションに対応する欄に記入してください。電話とWhatsAppの場合は電話番号、メールの場合はメールアドレスが入力必須項目となります。
* 連絡先を詳細な状態で表示するか、最小化した状態で表示するかを選択する。さらに、最小化した状態から直接コンタクトを開始するオプションも用意されています。
* ウィジェットの見出し、キャプション、説明を指定します。
* ウィジェットをページ上に表示するタイミングを選択します。詳しくは、「[VWOのウィジェットトリガー条件](https://help.vwo.com/hc/en-us/articles/900007712483-Widget-Triggering-Conditions-in-VWO)」を参照してください。
### **Webページにウィジェットを追加する**
VWOエディターにある\[**追加**]オプションを使用して、Webページに新しいウィジェットを追加することができます。ウィジェットを設置することで、より効果的かどうかを検証したい場合は、以下の手順で行ってください。
**手順**
1. お客様のVWOアカウントにログインします。
2. \[**テスト**]→\[**A/Bテスト**]に進みます。
3. \[**テストを作成**]をクリックして、新しいA/Bテストキャンペーンを作成します。
4. \[**テスト対象のページのURLを入力する**]フィールドに、テストするWebページのURLを入力します。
注：キャンペーンにURLを含める、または除外するには、\[URLs]欄の横にある\[**詳細設定**]タブをクリックします。このタブでは、ワイルドカードを含む広範なURLや特定のURLを含む高度なパターンマッチオプションを定義することもできます。様々なURLパターンの使用については、「[VWOにおけるURLパターンの使い方](https://help.vwo.com/hc/en-us/articles/360021127714)」をご参照ください。
5. \[**テストする仮説**]のプルダウンから、作業したい仮説を選択します。 これはオプションのステップです。\
**注：**まだ仮説がない場合、または新しい仮説を作成したい場合は、仮説プルダウンの下部にある \[**仮説を新規作成**] オプションをクリックすることで可能になります。仮説の詳細については、「[VWOにおける仮説](https://help.vwo.com/hc/en-us/articles/360019569694)」を参照してください。
6. また、ウィジェットを表示するタイミングや相手も設定することができます。そのためには、「行動ターゲティング」と「カスタムセグメント」を利用することができます。
7. \[**次へ**]をクリックします。\
VWOエディターにテストページが表示されます。
8. Webページに新しいウィジェットを追加するには、\[**追加]**ボタンをクリックします。
9. \[追加]ダイアログに\[**ウィジェット**]タブが表示されます。Webページに追加したいウィジェットをクリックします。\
ウィジェットがあなたのWebページに追加されます。
**注：**デフォルトでは、Webページに追加するウィジェットはいくつかのサンプルコンテンツを持っています。ウィジェットの様々なコンポーネントをクリックして、VWOエディターの\[**要素の編集**]オプションにアクセスします。ウィジェットの内容は、お客様のご要望に応じて変更することが可能です。
10. ウィジェットを追加すると、\[**ウィジェット設定**]オプションでレイアウトを変更することができます。ウィジェットのコンポーネントをクリックすると、コンテキストメニューにウィジェット設定オプションが表示されます。
11. ウィジェットの他の属性を変更するには、\[**要素の編集**]オプションを使用します。クリックすると、\[要素の編集]ダイアログが表示されます。
12. このフォームがデータを送信する場所を設定するには、「[VWOにおけるフォームの操作](https://help.vwo.com/hc/en-us/articles/360039329873)」を参照してください。
13. \[**完了**]をクリックして、変更内容を保存します。
Webサイトに表示する各情報の関連性を高め、コンバージョンを増加させるために、ウィジェットを表示する最適なタイミングを知りたいと思いませんか？ 「[VWOにおけるウィジェッのトリガー条件](https://help.vwo.com/hc/en-us/articles/900007712483)」についての記事を参照してください。
### **シナリオの例**
Webページの上部に、現在開催中のセールについてのバナーを追加してください。バナーには「12月22日セール開始」と表示し、CTAボタンには「詳しくはこちら」と表示し、ユーザーを特定のURLに誘導します。このシナリオを実現するためには、以下の手順で行います。
**手順**
1. お客様のVWOアカウントにログインします。
2. \[**テスト**]→\[**A/Bテスト**]に進みます。
3. \[**テストを作成**]をクリックして、新しいA/Bテストキャンペーンを作成します。
4. \[**既存の仮設から選択する**]プルダウンから、仮設を選択します。
5. \[**テスト対象のページのURLを入力する**]欄に、フォームが存在するURLを入力します。
6. また、ウィジェットを表示するタイミングや相手も設定することができます。そのためには、「行動ターゲティング」と「カスタムセグメント」を利用することができます。
7. \[**次へ**]をクリックします。\
VWOエディターにテストページが表示されます。
8. ここで、VWOエディターを使用して、新しいバナーウィジェットをWebページに追加する必要があります。
9. ウィジェットを追加するには、\[**追加**]ボタンをクリックします。
10. \[追加]ダイアログに\[**ウィジェット**]タブが表示されます。\[**バナー**]セクションから、\[プロモーションバナー]をクリックします。プロモーションバナーウィジェットは、あなたのWebページに追加されます。
**注：**デフォルトでは、ウィジェットはあなたのWebページの一番上に、いくつかのサンプルコンテンツとともに追加されます。\
11. 次に、バナーの内容を変更します。そのためには、バナーに表示されるデフォルトのコンテンツをクリックします。\
バナーを設定するダイアログが表示されます。
12. ダイアログで、\[**要素の編集**]オプションをクリックします。\
\[要素の編集]ダイアログが表示されます。
13. \[**一般**]タブを開き、\[**テキスト**]欄に「12月22日セール開始」と入力します。
14. \[**完了**]をクリックします。
15. 同様に、\[**ボタン**]をクリックし、\[**要素の編集**]オプションを選択します。
16. \[**要素の編集**]ダイアログで、\[**テキスト**]欄に「もっと知りたい」と入力し、\[**URL**]欄に有効なURLを入力します。
17. \[**完了**]をクリックします。
上記の手順を実行すると、Webページ上のバナーは次のようになります。
### **VWO ウィジェット FAQ**
1. **VWOウィジェットはレスポンシブ対応ですか？**\
はい、すべてのVWOウィジェットは、デフォルトでレスポンシブ対応です。ただし、ウィジットの内容をどのようにカスタマイズするかによって、影響を受ける可能性があります。モバイルモードに切り替えると、どのように表示されるかを確認できます。ウィジェットを本稼働させる前に、モバイルとデスクトップの両方でプレビューすることを強くお勧めします。
2. **ユーザーが十字ボタンをクリックすると、どうなるのでしょうか？**\
Widgetは、ユーザーのために破棄されます。ウィジェットターゲットに含まれる他のページに移動したり、ページを更新したりすると、ウィジェットは再び表示されます。これをカスタマイズするためのオプションは、ウィジェットのオプションメニューで近日中に利用可能になる予定です。
3. **ユーザーがフォームを送信するとどうなるのでしょうか？**\
ウィジェットに定義されたフォームアクションが登場し、次のステップを決定します。ウィジェットターゲットに含まれる他のページに移動したり、ページを更新したりすると、ウィジェットは再び表示されます。これをカスタマイズするためのオプションは、ウィジェットのオプションメニューで近日中に利用可能になる予定です。
4. **ウィジェットは、いつ訪問者に表示されるのですか？**\
テスト/キャンペーンのターゲティング条件が一致すると、ウィジットは訪問者に表示されます。
5. **ページにもっと手を加えたい。ウィジェットを非表示にするにはどうしたらいいですか？**\
Webページからウィジェットを非表示にしたい場合は、\[**変更**]オプションをクリックし、非表示にしたいウィジェットに対応する「非表示（目）」のアイコンを選択します。
6. **ウィジェットを削除するにはどうしたらいいですか？**\
Webページからウィジェットを削除したい場合は、\[**変更**]オプションをクリックし、削除したいウィジェットに対応する「削除（赤）」のアイコンを選択します。また、VWOエディターの下部にある\[**元に戻す**]オプションを使用することもできます。
**注:** ウィジェットコードをバリエーションから完全に削除できない可能性があるため、ウィジェットコンテキストメニューにある\[**削除**]オプションは使用しないことをお勧めします。