無料で使える!ABテストツール『VWO』のご紹介

2024.05.15
  • グロース

こんにちは、SINAPの塩入です。
私が所属するグロースチームでは日々ABテストを用いてサイト改善を行っています。

今回は、ABテストを行う際に必須のツールであるABテストツールについてお話します。
「ABテスト」や「ABテストツール」と検索すると、「ABテストツール おすすめ◯選」「ABテストツール 比較◯選」などの検索結果が出てくるかと思います。これらの記事を読んだ後に、「結局どのツールが良いのか?どれも同じでは?」と疑問に思うこともあるでしょう。

そこで、実際に業務で使用しているABテストツールを、導入からテスト実施に至る使用感を踏まえて、シリーズ形式でご紹介します。
それでは、第1回として、VWOについてご紹介させていただきます!

VWOとは

VWO(Visual Website Optimizer)は、インドのIT企業Wingifyによって開発されたABテストツールです。150カ国以上で利用されており、日本でもいくつかの代理店が存在するため、安心して使用できます。

使用感としては、「ノーコードツール」としても「本格的な実装ツール」としても優れています。ノーコードでの利用では、専門的な知識がなくても直感的にウェブサイトの画面を編集し、施策を作成してテストを実施できます。

また、複雑なテストが必要な場面では、本格的な実装を行うツールとしても機能し、使いやすいエディターがエンジニアからの評価も高いです。さらに、プランによっては、ABテストツール以外にもヒートマップ機能が付帯しており、サイト改善に大いに役立ちます。

VWOは無料で使えるの?

VWOは、Google Optimizeがサービスを終了した2023年9月30日に合わせて無料プランを公開しました。このプランでは、月間5万ユーザーまで無料で利用できます。
料金プランの詳細については、以下のプランページをご確認ください。

https://vwo.com/pricing/

VWOの導入方法

1.アカウント登録

下記のサイトにアクセスして「Try VWO for Free」をクリックし、アカウントを作成します。途中でプランの選択が出るのでお好みのプランを選択してください。(無料で利用したい場合は30日のトライアル期間後に無料のStarterプランに切り替えます。)

VWOアカウント登録

VWOアカウント登録_情報入力画面


2.タグをサイトに埋め込み

アカウント登録が完了したら、VWOを動かすためのタグ(SmartCode)をサイトに埋め込みます。

  • 「Configurations」の中にある「ウェブサイトとアプリ」を選択します。

ダッシュボード画面


  • 該当のWebサイトを選択して表示されたSmartCodeを</head> タグの前に追加します。

※VWOはGTM(Googleタグマネージャー)からのタグ追加は非推奨となっています。GTM経由でタグを追加するとVWO コードを非同期的にロードするため、ページがちらつく可能性があります。

埋め込みタグ


ちなみに、非推奨の方法でタグを追加すると、下記のようなエラーメッセージで教えてくれます。
こういった機能はABテストツールに慣れていない人が導入を行う場合に嬉しい機能です。

エラーメッセージ


  • タグの設置が完了したら、最後に正しく動作するかを確認できるチェッカーで確認します。

タグの動作確認


VWOのABテスト設置方法

1.ABテストの基本設定

  • 「テスト」タブの中にある「A/B」を選択し「+作成」を選択

ABテストの設置


  • ABテストの施策と対象ページの設定を行います。
    • ①に施策名を入力します。
    • ②にテスト対象のページを入力します。


※SINAPではお客様との連絡などをBacklogで行っており、施策名にはBacklogのチケット番号とチケット名を用いて管理しています。


施策名と対象ページの登録


2.ABテストのテストパターンを作成し、配信割合を設定

  • バリエーションのタブを開き「+Add variation」をクリックし、ABテストに必要なテストパターンの数だけ「variation」を作成します。
    • ①テストパターン名を入力します。
    • ②配信比率を設定します。

テスト案名と配信比率の設定


VWOの配信比率変更は自動で100%に調整してくれるのでとても便利です。
(複数のABテストツールを使っていると、実は配信比率を手動で計算して100%しないといけないツールもあるので、地味に嬉しい機能です。)

自動で合計100%に設定してくれます。


3.テスト実装

  • テストを実装するには「編集」ボタンをクリックします。

ABテストの実装


  • テスト対象ページが読み込まれ、編集画面が開きます。この画面からABテストを実装していきます。

編集画面


ノーコードでABテストを実施したい場合

  • ABテストの対象としたい要素をクリックすると、編集画面が表示されます。

編集したい要素を選択


  • 要素の変更をクリックすると、HTMLやCSSなどの知識がなくてもフォントサイズ・文字色・背景色・大きさなど様々な変更が可能となっています。

要素変更画面


  • テキストの差し替えを行いたい場合も、対象のテキストを選択して「Edut HTML」をクリックすると簡単に既存のテキストを編集することが可能です。


テキストの差し替え


テキストの編集


  • 特定の要素を削除したい場合も対象を選択して「Remove」を選択するだけで、簡単に非表示テストが行えます。

要素の非表示テストの設定


簡単に設定が可能


  • テストしたい施策の実装が終わったら「SAVE AND CONTINUE」をクリックして編集画面を終了させます。 

保存ボタン


HTML・CSS・jsを記述してテストを実装したい場合

「code」をクリックするとHTML・CSS・jsを記述出来るエディターが表示されます。
このエディターに記述することでテストの実装が可能です。

コードを書いてABテストを実装


エディター画面


エディターに記述して、「Done」をクリックするとすぐに実装内容が反映されるので、実装確認も簡単に出来ます。

実装を記述したエディター画面


ABテストの実装完了画面



テストしたい施策の実装が終わったら「SAVE AND CONTINUE」をクリックして編集画面を終了させます。 

保存ボタン


クリック計測の設定

VWOはクリック計測を簡単に仕込むことが可能です!
これはABテストをするうえでとても嬉しい機能で、テストの勝敗を決める際に役立ちます!
この機能が無いとGA4と連携させたりする手間が増えるので、実装工数やレポートの工数が増加傾向になるので、1つのツールで完結出来るのはとてもありがたいです。

  • 対象の要素をクリックして、「Track Clicks」を選択します。


クリック計測の設定


  • 指標名を記入して「Done」を押すと指標が追加されます。

指標名を記述


各デバイスごとの実装確認

VWOでは編集画面で各デバイスごとのプレビューを見ることが出来ます。

SINAPでは実機確認はテスト開始前に必ず行いますが、実装中に簡単に各デバイスのプレビューができるのは作業の効率化につながるため、嬉しい機能です。

  • ディスクトップ


ディスクトップのプレビュー画面


  • モバイル

モバイルのプレビュー画面


4.ABテストの勝ち負けを決めるゴールの設定

ABテストの施策を実装出来たら最後に勝敗を決める為の指標を設定していきます。

  • Primary metric(主要指標):テスト結果に直接影響するメインゴールとなる指標を設定します。
  • Secondary metrics(二次指標): Primary metricとは別のサブで追っていきたい指標を設定します。(複数設定可能)


ゴールの設定


今回は

  • Primary metric(主要指標):問い合わせフォームの完了ページ閲覧
  • Secondary metrics(二次指標):「問い合わせフォームのページ閲覧」「クリック計測で設定したMVのボタンクリック」

を設定しました。

ゴール設定後の画面


5.ABテストを開始する

ここまで設定したら、最後に各テスト案を実際のブラウザで最終確認します。

「Review」タブからライブプレビューを選択し、対象ページのURLを入力してから「Preview in a new tab」をクリックしてテストが正しく実装されているかを確認します。

最終的なプレビューを行う


上記のプレビューが問題なければ「Start test」をクリックしてABテストを開始します。

ABテスト結果を確認する

テスト開始後は「Report」タグからテスト結果を確認することが出来ます。
「Metrics」には「4.ABテストの勝ち負けを決めるゴールの設定」で設定した指標名が表示されます。この中から計測した指標名をクリックすると各テスト案ごとにテスト結果を確認することができます。

ABテストのレポート画面


まとめ

以上がVWOを使用してABテストを行う方法と、実際に使用した際に良いと感じた部分です。

VWOは本格的なABテスト機能を備えており、月間5万ユーザーまで無料で利用可能です。そのため、低コストでABテストを試みたい方に特におすすめできます。ぜひこのツールを使ってサイト改善に取り組んでみてください!


シナップではABテストツールの導入支援から運用代行内製化支援まで幅広く取り扱っております。「ABテストのやり方を教えてほしい。」「ABテストツールの導入と使い方だけ教えてほしい。」「ABテストツールを導入してみたけどうまく活用できなかったから代わりに運用してほしい。」などお困り事がございましたら是非お気軽にお問い合わせください。


Web戦略から制作、グロースまで総合的に支援します
シナップはサービスの継続的な成長をサポートするデザインコンサルティングです。戦略的から制作・開発、そしてサービスのグロース・運用まで、すべてのワークフローにおいて支援が可能です。
この記事をシェアする
塩入 樹
塩入 樹
神奈川県平塚市出身。自動車部品メーカーのEC担当、旅行代理店のWebディレクターを経験後、制作会社で幅広い案件に関わりたいと考えシナップに入社。カメラとライブと野球が好き。最近はよく週末にライブフォトを撮っている。愛用機はニコン Z7ⅡとNIKKOR Z 50mm f/1.2 S

関連記事

【必見!ABテスト効果測定のポイントを解説】最適なテスト期間・有意差とは?

2024.05.16
  • グロース

無料で使える!ABテストツール『VWO』のご紹介

2024.05.15
  • グロース

ECRS(改善の4原則)を使ったEFO対策の事例紹介

2024.04.26
  • EFO
  • グロース

【EFO】Googleアナリティクスのイベントトラッキングを使って行う入力フォーム最適化

2024.04.26
  • EFO
  • グロース

EFO対策に必要なデータとは?入力フォームの数値取得方法まとめ

2024.04.26
  • EFO
  • グロース

【EFO対策】入力フォーム最適化に必須の9つのルール

2024.04.26
  • EFO
  • グロース

【EFOとは?】スマホ入力フォーム最適化を始めよう!

2024.04.26
  • EFO
  • グロース

Web制作会社が実践!フルリモートワークにおけるコミュニケーションのポイント【基本編】

2024.04.26
  • グロース

不動産業界向け:賃貸物件一覧ページ 5つの最適化ポイント

2024.04.25
  • グロース

2024年4月 『サイト改善の専門家』が選ぶ、サイト改善に役立つニュースまとめ

2024.04.23
  • グロース

Webサイトの課題、正しく把握できていますか?Webサイトの課題抽出の方法を解説します

2024.04.11
  • グロース

2024年3月 『サイト改善の専門家』が選ぶ、サイト改善に役立つニュースまとめ

2024.03.28
  • グロース

不動産業界向け:顧客を引きつける資料請求フォーム事例

2024.03.28
  • グロース

フォームからの離脱率を下げる方法とは? EFOツールの課題と シナップのフォーム改善代行サービス

2024.03.21
  • グロース

EFOでCVR改善に繋げる 優れた入力フォーム事例 5選

2024.03.15
  • グロース

2024年2月 『サイト改善の専門家』が選ぶ、サイト改善に役立つニュースまとめ

2024.02.26
  • グロース

入力フォームの改善でCVR向上!フォームの効果的な4つの改善方法

2024.01.30
  • グロース

フォーム改善代行(EFO)始めました!

2024.01.30
  • グロース

WebサイトのCVR改善は、リニューアルよりもABテストが低リスクでオススメ

2024.01.30
  • グロース

ABテストを学ぶならこの書籍!〜ABテスト専門チーム おすすめ書籍5選〜

2022.07.20
  • グロース

サービスを成長させる シナップのABテスト支援

2022.04.26
  • グロース

ABテスト運用でよくある6つのお悩みと解決策

2022.03.15
  • グロース

次世代アナリティクス「Googleアナリティクス4(GA4)」の主な特徴と今後について

2021.09.14
  • グロース

人気記事

「microCMS」導入を徹底解説!メリット・デメリット、料金体系、適切なプランの選び方、最後に相談できる会社の見つけ方まで!

2024/05/22
  • Web技術

KJ法とFigma(Figjam)を活用したZoomミーティングでの意見整理テクニック

2024/05/15
  • その他

恋愛マンガシチュエーションで面白く学ぶ Webガバナンスが必要なシグナル

2024/04/10
  • その他

企業のWeb戦略成功への鍵 Webガバナンスの重要性

2024/03/13
  • その他

『SINAP Journal 2024 Winter』PDF版をアップしました!

2024/02/20
  • シナップについて

自己成長を加速させるシナップの新人研修

2023/12/12
  • シナップについて
  • 採用

注目の国産ヘッドレスCMS「microCMS」

2023/11/14
  • Web技術

Webサービスを成功に導くシナップのUXリサーチ

2023/10/04
  • UXデザイン

リアルとリモートを上手に使った、柔軟なコミュニケーション

2023/09/12
  • シナップについて

ABテスト運用でよくある6つのお悩みと解決策

2022/03/15
  • グロース

成長するサービスを支えスケールを可能にするデザインシステムとは

2021/10/12
  • UXデザイン

次世代アナリティクス「Googleアナリティクス4(GA4)」の主な特徴と今後について

2021/09/14
  • グロース