売り上げを伸ばすためにどの色を使うべきですか?

公開: 2021-05-13

繰り返しになりますが、A / Bテストでは、私たちの好みや色の好みが必ずしも訪問者のものと一致しているとは限らないことがわかりました。 むしろ、あなたがあなたのウェブサイトに表示する色は、魅力的かもしれませんが、必ずしもあなたに最も多くの売り上げをもたらすものではありません。 実際、色の心理学に関する多くの記事があり、各色がどのように異なる感情的反応を引き起こし、これらがどのように聴衆を異なる方法で説得できるかを研究しています。

色とロゴにそれらを使用するブランドによって伝えられる感情へのガイド
色によって伝えられる感情と、それらをロゴに使用しているブランドのガイド(出典:The Logo Company)。

今月は、最近Nelio Contentの製品プランと価格設定ページのデザインを変更したため、売り上げを伸ばすために各プランにどの色を表示するかを分析する絶好の機会だと思いました。

元のページのデザインでは、青色のファンであるため、Nelioコンテンツプランページの次のデザインを提案しました。

NelioコンテンツのA/Bテストを作成する前のプランと価格のページのスクリーンショット
Nelioコンテンツプランと価格設定ページのスクリーンショット。A/Bテストを作成する前に。

かっこいいですよね? しかし、毎月テストを実行している私たちの経験について読んでいるなら、ビジネス上の意思決定に関しては、自分の好みだけに焦点を当てるのではなく、代わりに実際のデータを取得する必要があることを知っています。収益に最も影響を与えるもの。

したがって、Nelio A / B Testingを使用した今月のテストでは、価格設定ページのどの配色がより多くの収入を生み出すかを分析します。

青いカラーバリエーションで表示されたNelioコンテンツプランのスクリーンショット
A / Bテストの元のバージョン:青色のバリエーションで表示されたNelioコンテンツプラン。

価格設定ページのテストを作成する

Webサイトの要素のA/Bテストを作成する前に、摩擦や問題が多いWebサイトで何が機能しているかを分析し、改善できる点について仮説を立てることを常にお勧めします。 生成した仮説のリストから、目的に最も影響を与えるものに優先順位を付けます。 つまり、ランディングページと価格設定ページは、ブログ投稿よりも売上の増加にはるかに大きな影響を与える可能性があります。

この場合、このテストを作成する主な動機は次のとおりです。Nelioコンテンツプランを変更し、価格設定ページ全体を再設計したため、新しいデザインが可能な限り最高の配色を使用していることを確認する機会を得ました。

元のバージョンに加えて、これらの色の組み合わせで他の2つのバリエーションを作成することにしました。

A/Bテストの最初のバリアントに示されているNelioコンテンツプランのスクリーンショット
A/Bテストの最初のバリアントに示されているNelioコンテンツプランのスクリーンショット。

最初のバリエーションでは、今年非常にファッショナブルなパステルカラーを選択してプランを表示することにしました。

A/Bテストの2番目のバリアントに関するNelioContentの計画のスクリーンショット
A/Bテストの2番目のバリアントに示されているNelioコンテンツプランのスクリーンショット。

そして、上の画像でわかるように、2つ目のバリエーションを作成しました。このバリエーションでは、標準プランをフクシア色で強調表示し、他の2つのプランでは、最も暗い青色の背景と緑色のボタンでそれらを表示しました。

一般に、他の色を選択したり、他の配色を作成したりすることもできますが、多くの選択肢を作成する際の問題は、統計的に有意な結果を得るには、さらに多くの訪問が必要になることです。

A/Bテストの作成

A / Bテストを作成するには、いつものように、独自のプラグインであるNelio A /BTestingを使用します。 公式のWordPressプラグインディレクトリからダウンロードしてWebサイトにインストールするだけで、このようなテストを作成できます。 また、Webサイトでテストを作成するために使用するA / Bテストプラグインについてまだ疑問がある場合は、WordPressのA/Bテストプラグインの比較を読むことをお勧めします。

Nelio A / Bテストは、任意のWordPress要素のA / Bテストを作成できるため、非常に用途が広いです。 この場合、ページのA/Bテストを作成します。 このタイプのテストでは、元のページを新しい代替ページに複製することで、新しいバリアントを作成できます。 テストでは、上記のように、各プランの背景色を変更するだけです。 使用するページテンプレートの一部であるものを変更する場合は、代わりに代替テンプレートを作成し、代わりにページテンプレートのA/Bテストを実行することで変更できます。

次のスクリーンショットでは、テストの定義を確認できます。

NelioコンテンツプランのA/Bテストの定義のスクリーンショット
NelioコンテンツプランページのA/Bテストの定義のスクリーンショット。

次に、A / Bテストを作成するときは、テストで測定する目標を設定して、何が最適かを判断する必要があります。 この場合、テスト内で測定する4つの目標を定義しました。

  • 任意のプランのボタンをクリックします
  • 基本プランボタンをクリックします
  • 標準プランボタンをクリックします
  • プラスプランのボタンをクリック

これがすべて作成されたので、私たちがしなければならなかったのは、テストを開始し、結果が来るのを待つことだけでした。 Nelio A / B Testingは、トラフィックを3つのランダムなグループに分割して、それぞれが定義されたバリアントの1つだけを認識し、各バリアントと目標が取得するコンバージョンを追跡する役割を果たします。

A/Bテスト結果の分析

このテストを1か月9日間実行した後、ほぼ100%の信頼度で統計的に有意な結果を達成しました。 それぞれの目的の分析を詳細に見て、テストから導き出すことができた結論を見てみましょう。

最初の目的は、いずれかの料金表プランボタンのクリック数を測定することでした(表はページに2回表示されます)。

実行されたA/Bテストの最初の目的の結果の分析
実行されたA/Bテストの最初の目的の結果の分析。

この場合、結果は、2番目のバリアントである代替Cが、元のバージョンよりもほぼ130%(正確には、129.6%)多くのクリックを獲得するものであることを示しています。 対照的に、パステルカラーで計画を示すバリアントは25.5%悪化しています。 このテストの目的しかなかったとしたら、代替案Cは圧倒的な結果を達成したでしょう。

2番目の目標は、基本プランボタンのクリックに焦点を当てました。 結果がどのように変化するかを見てみましょう。

実行されたA/Bテストの2番目の目的の結果の分析のスクリーンショット
実行されたA/Bテストの2番目の目的の結果の分析。

基本プランのクリックのみに焦点を当てた場合、3番目のバリアントと元のバージョンの違いはまだかなりありますが、73.7%の改善であり、すべてのクリックを分析した場合ほどではありません。 また、パステルカラーのバリエーションの場合は、前の場合と同様に、オリジナルよりも悪いですが、差は12.3%です。 あなたがそれについて考えるならば、バリアントは基本計画を特に強調することに焦点を合わせていないので、それはある程度意味があるかもしれません。

標準プランのクリック数を測定したい結果を見てみましょう。

実行されたA/Bテストの3番目の目的の結果の分析のスクリーンショット
実行されたA/Bテストの3番目の目的の結果の分析。

この場合、3番目のバリエーションの改善は、まさに計画の中でより目を引く色で際立っているものであり、元のバージョンよりも228.1%多くのクリックを達成しています。 したがって、計画のいずれかを強調表示することが影響を与えるかどうかについて疑問がある場合は、このテストから、人々が最も目を引く要素に惹かれていることは明らかです。

最後に、最新の計画で何が起こるか見てみましょう。

実行されたA/Bテストの4番目の目的の結果の分析のスクリーンショット
実行されたA/Bテストの4番目の目的の結果の分析。

この場合、元のCと比較した代替Cの改善は、95.7%の信頼度でほぼ3%です。 そして、いずれにせよ、すべての選択肢でプラスプランの変換はほとんどありません。 実際、ほとんどのお客様は、最初は低額のプランを選択し、後で別のプランに切り替えることを好みます。

結論

A / Bテストから得られた結果を考慮すると、標準プランがフクシア色で際立っているバージョンは、他のどのバリアントよりもはるかにうまく機能しているという結論に達しました。 したがって、当社のWebサイトで最終バージョンとして適用することをお勧めします。

A/Bテストの勝者のバリアントを適用するスクリーンショット
A/Bテストの勝者のバリアントを最終として適用するスクリーンショット。

ご覧のとおり、ワンクリックで、Nelioコンテンツの価格設定ページの最終バージョンがテストに勝ったものになります。 確かに、最初は青い配色が良い選択肢だと思っていたかもしれませんが、私たちの好みや好みは売り上げを伸ばすのにほとんど役に立ちません。 A / Bテストは、実際のデータを使用して、実際に機能するものを証明するテストです。 ウェブサイトでのコンバージョンを増やすためにA/Bテストを作成するために何を待っていますか?

UnsplashのBaherKhairyによる注目の画像。