何を変更すればよいかわからない場合は、Webサイトの色を変更してみてください

Webサイトのパフォーマンスを向上させる際の最大の問題の1つは、どのような変更を加えるかがわからないことです。 これは、ある時点で私たち全員に起こりました。 このような場合、正しいことは、Webの最も重要な部分に焦点を当てることです。 これは、あなたのビジネスモデルにとって最も注目を集める、または最も重要なページのセクションを意味します。

たとえば、Webサイトにアクセスするユーザーが最終的にフォームに入力することを目標としている場合は、フォーム自体に焦点を当てます。フォームをより目立たせ、できるだけ単純化して、入力と送信が簡単になるようにします。 前にも言ったように、最初に、変更すると訪問者に大きな影響を与える可能性のある要素を探します。これにより、興味深い結果がより早く得られます。

それでも何を変更すればよいかわからない場合は、決してがっかりせず、非常に簡単に試すことができるのは、Webページの色に変更を適用することです。 視覚障害者を脇に置くつもりはありませんが、あなたのウェブサイトの色が非常に重要であることは明らかです。 あなたが想像できるよりはるかに。

色彩理論と私たち人間がそれを認識する方法については、いくつかの研究があります。 私たちの視覚系（目、視神経、脳）によってキャプチャされたさまざまな波長の単なる解釈に見えるかもしれませんが、巨大な心理的背景を隠しています。

このため、Webページ（またはその中の影響力の大きい要素）の色を変更してみて、これらの変更に直面して訪問者のインタラクションがどのように変化するかを調べることをお勧めします。 これは、このWebサイトでテストした完全で実際の例を使用して、今日説明する内容です。

A/Bテストの定義

Webサイトの変更をテストするには、A/Bテストを使用する必要があります。 これを行うことにより、実際のデータを使用し、科学的方法に従って、適用された変更が現在のバージョンよりもうまく機能する（または機能しない）ことを保証できます。

今日の例では、Nelio A /BTestingの価格設定ページの最初の折り目の色の変化をテストします。 この最初の折り畳みは、プラグインを購入するときに訪問者が最終的に顧客になる価格表の表示を担当するため、私たちのビジネスに大きな影響を与えます。

次の比較では、ボタンと余白の色が異なる最初の折り目の元のバージョン（左側）と代替バージョン（右側）、および新しい背景画像を確認できます。

変更をテストするために、参照A/BテストプラグインとしてNelioA/Bテストを使用しました。 最初に行うことは、ページの新しいA / Bテストを作成することです。これは、テストする要素です。

これは、WordPressページエディター自体を使用して色を変更できるためです。 色がテーマテンプレートを介して、または他のあまり正統でない方法で提供されるためにそのようにできない場合（経験から、WordPressでは色のスタイルをいくつかの方法で定義できることがわかります）、常に機能する別のオプションは次のようになります。 CSSスタイルのA/Bテストを使用します。このテストでは、バリアントに新しいCSSスタイルルールを追加することで新しい色を適用できます。

A / Bテストの編集画面で、テストするベースページ（価格設定ページ）を選択し、後で編集する新しいバリアントを作成します。

強調すべきもう1つの重要な側面は、A / Bテストツールで追跡するメトリックを定義して、2つのバージョンのどちらがより適切に機能したかを後で見つけることです。 上のスクリーンショットでわかるように、これはコンバージョンの目標とアクションのセクションで定義します。

この例では、5つの目標を定義しました。これにより、同じA/Bテストで5つの異なる結果が得られます。 まず、価格表にあるプランの購入ボタンのクリック数を測定する目標を定義します。 次に、各プランのクリック数を個別に測定する3つの追加の目標があります。 そして最後に、テスト対象のページの各バージョンを確認した後、実際に行われた購入数を測定するという目標があります。

最後に、ページの代替バージョンを編集します。 次のスクリーンショットに示すように、これにより、使用しているWordPressページエディター（この場合はブロックエディター）が表示されます。

ここでは、3つの列のそれぞれのアクションボタンの色と、上マージンを作成するために使用する要素の色を変更するだけです。 また、WordPressメディアライブラリにアップロードした別の画像の背景画像も変更しました。

テストする変更を含む代替ページの準備ができたら、A/Bテストの編集画面に戻って開始します。 これにより、価格設定ページへのトラフィックが自動的に2つに分割されます。 訪問者の半分は元のバージョンと対話し、残りの半分はバリアントを表示します。

このようにして、ページのどのバージョンが5つのコンバージョン目標に対してより効果的に機能するかを確認できます。 今、私たちは結果が私たちが求める情報を私たちに与えるのを待つ必要があるだけです。

テスト結果の分析

最終的に、一方のバリアントがもう一方のバリアントよりも優れている場合、A/Bテストツール自体がそのように通知します。 前に説明したA/Bテストでは、結果は明確です。 新しい色のバージョンは、私たちがすでに持っていたものよりも悪いです。 次のギャラリーで、テストで定義された5つの目標のそれぞれの結果の詳細を確認できます。

バリアントはアクションボタンのクリック数が減っただけでなく、売り上げも減少しました（ほぼ22％減少）。

これはばかげているように見えるかもしれませんが、A / Bテストで変更をテストする代わりに、以前にテストせずにWebサイトで直接変更すると、さらに悪い結果になる可能性のある変更を導入するリスクがあります。 私たちがしたかった変更が思ったほどうまく機能しなかったので、これは私たちの場合であった可能性があります。

新しい色の方が好きなので、いつでも色を変更するのが良い解決策であることがわかるかもしれません。 あなたは、スタイルの観点からはるかに優れていると思う新しいカラーパレットを見つけ、それを直接使用することを選択しました。 しかし、これは大きな間違いです。 ある色が別の色よりも好きであるという事実は重要ではありません。 重要なことは、これが本当にあなたの聴衆とあなたの訪問者に当てはまるかどうかを注意深くチェックすることです。 また、A / Bテストを通じて、制御された環境でこれを行うことができます。

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