あなたのウェブサイトに最適な召喚状のボタンの色についての真実

インターネットでは、Webページで最も効果的な色について多くのことが言われています。 あなたはそれについて何千もの記事を見つけるでしょう。 ユーザーがどの色が良いかを尋ねて矛盾した答えを受け取るもの（なんて驚きでしょう？）から、Googleがリンクに多くの青の色合いを使って行ったテストを説明する有名な記事まで。

このすべての背後にある現実は、特定の色がそれを試さずにWebサイトで良くも悪くも機能することを誰も保証できないということです。 彼らがあなたに別のことを言うなら、彼らはあなたに嘘をついています。 そして、私はあなたが嘘をつくのが好きではないと確信しています。

私もそうではないので、Yahoo！からこの記事を読んでいたとき。 ボタンに使うのに最適な色は赤、緑、オレンジまたは黄色だと言われている中小企業ですが、私が最初に考えたのは、自社のWebサイトで試してみるべきだということです。

私が毎月書いているA/Bテストに関する一連の記事を読んでいるなら、私たちのWebサイトで最も重要なページの1つが、価格設定ページとともにNelioContentのランディングページであることをすでにご存知でしょう。 どちらのページでも、召喚状のボタンはオレンジ色です。

召喚ボタンにウェブサイトですでに使用しているオレンジ色と比較して、赤または緑の方がうまく機能しますか？ これは私が自分自身に尋ねた質問であり、訪問者からの実際のデータを使ってここで答えるつもりです。 主観的な意見ではありません。 実際のデータ。

さあ行こう！

CSSのA/Bテストの作成

ページ上のボタンの色を変更する最も簡単な方法は、新しい色を適用するためにいくつかのCSSルールを追加することです。 あなたはあなたが望む色でボタンに新しいbackground-colorルールを置きます、そしてそれはそれです。 簡単に簡単。

Nelio A / Bテストを使用すると、CSSスタイルのA / Bテストを作成して、追加のCSSルールのさまざまなバリアントをテストすることができます。 新しいテストを作成し、テストタイプセレクターでCSSオプションを選択するだけです。

これにより、テストエディタが表示されます。ここで、最初に行う必要があるのは、バリアントを作成することです。 このタイプのテストでは、最初のバリアントは、追加のCSSを使用せずに、現在の外観でページを表示するものであることに注意してください。

次に、この場合、テストする追加の色のそれぞれのバリアントを作成します。1つは緑用、もう1つは赤用です。 最初のバリアントはすでにオレンジ色になっているので、これですべての準備が整います。

追加のバリアントごとに、それを編集して、ボタンの色を変更する追加のCSSルールを追加できます。 必要なCSSルールは、WordPressで使用するテーマによって異なります。 Nelio A / B Testingが提供するCSSエディターでは、新しいCSSルールがサイトのルックアンドフィールをどのように変更するかをリアルタイムで確認できます。 これは、正しく実行しているかどうかを確認するのに役立ちます。

設定しているA/Bテストの各バリアントのCSSスタイルエディターからのアクションボタンの外観は次のとおりです。 前述のように、最初にオレンジ色のボタンが付いた元のバージョンがあります。 他の2つのバリアントには、ボタンをそれぞれ緑と赤に変えるCSSが含まれています。

バリアントの準備ができたら、測定するコンバージョン目標を定義します。 この場合、テストエディターのスクリーンショットでわかるように、2つの目標があります。

最初の目標はアクションボタンのクリック数を測定し、2番目の目標はそれらのクリック数も測定しますが、Nelioコンテンツの価格設定ページで発生するクリック数のみを測定します。

最後に、CSSのA / Bテストは、Webサイトのすべてのページに影響することに注意してください。 Nelio A / Bテストでこの動作を制限するには、A / Bテストエディターの右側のサイドバーで、テストの範囲を制限するオプションがあります。 Nelioコンテンツのメインページと価格設定ページにのみ影響するように作成しました。

テストを開始する準備が整いました。 その後、Nelio A / B Testingは、これら2つのページにアクセスするトラフィックを分割し、さまざまなカラーバリエーションを表示し、コンバージョンを追跡します（ボタンをクリックします）。

訪問者がこれらのページを通過して結果が表示されるのを待つだけでよいことを忘れないでください。

結果の分析

ボタンの色のA/Bテストは、スペイン語のWebサイトで1か月半、英語のWebサイトでほぼ1か月間実行されています。 英語版では、高い信頼値で統計的に有意な結果をより早く達成したため、以前に停止しました。

しかし、スペイン語で私たちのウェブ上のテストの結果から始めましょう：

上のスクリーンショットでわかるように、両方のページのクリック数を測定するために、ボタンの緑と赤のバリエーションは、元のオレンジバージョンよりもいくらか優れているようです。 ただし、統計によると、改善はそれほど大きくないため、これらの色がオレンジよりも優れているとは言えません。

Nelioコンテンツの価格設定ページでクリック数のみを測定した2番目の目標についても、明確な勝利の色がないことがわかります。 ここの緑がオレンジよりもパフォーマンスが悪いことさえ観察できます。 Nelio A / B Testingが訪問者から収集したデータでは、強力な結論を導き出すことはできませんが、次のようになります。

それでは、英語版のページでテストの結果を見てみましょう。 ここで、Nelioコンテンツの2ページのいずれかでクリック数を測定した最初の目標では、緑と赤の両方がより良いクリック率を生み出す色であることがわかります。

さらに、ここでは、緑色がテストの勝者の色であることを確認できます。 結果は統計的に有意であり、99％を超える信頼度があります。 緑は、Nelioコンテンツページのボタンに英語でWebサイトで使用できる最高の色です。

Nelioコンテンツの価格設定ページ（テストの2番目の目標）のクリックのみを見ると、結果はテストの最初の目標の結果と一致していることがわかります。

これを見て、Nelioコンテンツページで英語の視聴者にとって最も効果的な色は緑であると言えます。 しかし、スペインの聴衆にとって、私たちはすでに持っていた色よりもうまく機能する色を見つけることができませんでした。

結論

ここでは、A / Bテストの結果を、当社のWebサイトの最も関連性の高い2つのページを閲覧した訪問者からの実際のデータを使用して示しました。 また、特定のオーディエンスに最適なものが、別のオーディエンスに最適である必要がないことを確認できました。

緑のボタンは、英語を話す訪問者に最適です。 しかし、それは他の訪問者にとっても同じという意味ではありません。 このため、これらのページの英語版では、Nelioコンテンツページのアクションボタンの色を緑色に変更しただけです。 スペイン語のものはオレンジのままです。

あなたがあなたのページで緑色を使う必要があるとあなたに言ったら、私は愚かでしょう。 誰もあなたにそれを言うべきではありません。 私ではなく、誰でもありません。 緑があなたのために働くかどうか私にはわかりません。

このため、インターネット上にある多くの教祖に注意を払う前に、自分でテストを行ってください。 A/Bテストの作成は非常に簡単です。 そして、それはあなたのウェブサイトで何がうまくいくか（またはうまくいかないか）を発見する唯一の方法です。 あなたの本当の聴衆と。

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