EコマースランディングページのA/Bテストを作成する方法と理由

昔、シカゴのメインショッピングアベニューであるミシガンアベニューを初めて歩いたとき、複数の店の店の窓に絶対に驚かされたことを覚えています。 ナイキストアはマイケルジョーダンへの大きな賛辞であり、FAOシュワルツのおもちゃ店は壮観なミニ遊園地などでした。 体験のお土産をもらうためだけに、入って何か持って行ってしまいました

オンラインストアの実店舗のウィンドウに相当するのは、ランディングページです。 ランディングページはあなたのウェブサイトの重要なページです：多くの場合、それは訪問者がグーグル検索をした後、またはあなたのブログの投稿を読んだ後に最初に見るページです。

ランディングページはあなたのウェブサイトのホームページであると人々はしばしば考えます、そしてそれ故に、たった一つしかありません。 真実と違うことがあってはならない。 このタイプのページは、当社のWebサイトへのエントリポイントとして設計されたページです。 それは訪問者の注意を引き付け、私たちのサイトに彼らを保ち、そして彼らの買い物体験を始めるものです。 したがって、たとえば、Nelio Webサイトでは、Nelio A/Bテストを表示する必要があるランディングページの一部は次のとおりです。

• Nelio A /BTestingのホームページ
• あなたのビジネスのためのNelioA/Bテスト
• eコマースのためのNelioA/Bテスト
• 等

これらの各ページは、当社の製品に関心がある可能性のあるさまざまなタイプのプロファイルに対応するために、わずかに異なる視点から当社の製品を示しています。 したがって、たとえば、eコマースのランディングページは、eコマースを備えたWebサイトの特徴を強調しています。 それらは潜在的な顧客を変える目的で作成されます。 そして、これらのページでのあなたの主な目的があなたのコンバージョン率を最適化することであるのはこの理由のためです。

この投稿では、ランディングページの主な特徴と、コンバージョン率を向上させるためのベストプラクティスについて説明します。

Eコマースランディングページの機能

すでに見てきたように、eコマースのランディングページは、マーケティング目的のために特別に作成されたスタンドアロンのWebページです。 これは、訪問者が広告、検索エンジンの結果、またはプロモーションキャンペーンのいずれかからリンクをクリックしたときに「アクセス」するページです。

ランディングページの目的は、顧客に特定のアクションを完了させることです。これは、eコマースの場合は主に購入を行うことです。 ウェブ上にある他のランディングページとの主な違いの1つは、特定の訪問者のプロファイルに合わせてカスタマイズされていることです。タイトル、テキスト、画像、および証言はそのプロファイルに固有であるためです。このプロファイルを持つ誰かが購入することをお勧めします。 一方、ランディングページには、常に1つ以上の行動を促すフレーズが含まれています。

たとえば、eコマースでコンバージョン率を最適化する方法を検索し、さまざまな結果を確認した後、eコマースのNelio A / Bテストのリンクをクリックした場合（上の画像のスクリーンショットの一部をご覧いただけます） ）、ページにアクセスすると、検索に一致する見出しが表示され、店舗の画像と、A/Bテストの作成を開始するように促すテキストと召喚状が表示されます。 このページでは、店舗での商品のプレゼンテーションを最適化する方法についても説明し、訪問者に自信を与えるための紹介文が含まれています。 最後に、データのおかげで売り上げを伸ばす方法を説明するセクションがいくつかあります。もちろん、彼らが私たちを信頼できる理由についての追加情報もあります。

上記の例でわかるように、ランディングページの目標は、潜在的な購入者が探しているものを数秒で正確に見つけることです。 ページのコンテンツは、重要な製品機能（ここでも特定のオーディエンスを念頭に置いて書かれています）、自信の追加、訪問者の購入のしやすさなど、購入者のペルソナに合わせて調整されています。

異なるランディングページを持つことの大きな利点は、特定の顧客をより適切にターゲティングできることです。 設計、価値提案、および行動の呼びかけは、市場セグメントに合わせてはるかに調整できます。

ランディングページで作成する必要があるテストの理由と内容

上記の機能を単に実装するのではなく、なぜA/Bテストの問題に取り組むのか不思議に思うかもしれません。 さて、1つはユーザーのコンバージョンを改善すると信じていることであり、もう1つは、Webサイトで実際に起こっていることです。 何が機能し、何が機能しないかを確認できる唯一の方法は、A/Bテストを実行することです。

すでにご存知かもしれませんが、A / Bテストは改善仮説から始まり（たとえば、特定の関連情報をより適切に表示するためにランディングページを再配布すると、より多くのコンバージョンにつながると思われる場合があります）、バリアントに仮説を実装します。このバリアントが元のページよりもパフォーマンスが優れているかどうかをテストします。 技術的には、A / Bテストでは、訪問者のそれぞれに1つのバリアントまたは他のバリアントが表示され、訪問者が何をしているかを追跡し、どれが最適かを判断します（存在する場合）。

これにより、最終的にサイトに適用する変更が実際の改善であるかどうかを実際のデータで確認したため、コンバージョン率が向上することが保証されます。

例を挙げて説明するように、A / Bテストで得られた結果は予想とは異なる場合があることを覚えておいてください。そのため、それらを実行することが非常に重要です。 さらに、A / Bテストは継続的に実行する必要があり、コンバージョン率最適化プロセスまたはCROと呼ばれるプロセスの一部である必要があります。

Webサイトのランディングページで使用を開始できるいくつかのベストプラクティスを見てみましょう。

ページを簡素化する

ランディングページはシンプルでわかりやすいものにする必要があります。 訪問者がテキストに圧倒されたり、迷子になったりして、[今すぐ購入]ボタンが見つからないことを確認してください。 ページを簡素化するためのヒントは次のとおりです。

• 簡潔で直接的な見出しを表示する
• 明確で目に見える行動の呼びかけを表示する
• チェックアウトページにつながらないナビゲーションリンクを削除します
• 箇条書きで製品の詳細を表示する
• 重要な情報のみを表示するテキストを減らします

ランディングページは、最初に一目でそのページにとどまるか、より良いものを見つけようとするかを決定するページと考えてください。 不必要なテキストを避け、訪問者に付加価値を与えるものに答えることに自分自身を制限してください。

理論は問題ありませんが、最も重要なことは、ページで作成した簡略化が実際に訪問者が好むものであることを確認するA/Bテストを作成することです。 たとえば、Nelio Softwareのホームページを簡素化して、そのA/Bテストを作成したいとしました。 私たちの目標は、コンバージョンを増やすために、よりシンプルで、より視覚的で、より簡潔な代替バージョンを設計することでした。

テストを実行しましたが、驚くべきことに、作成した新しいバリアントは、変換を改善するためのより良いソリューションではありませんでした。 テストしていなかったら、もっと良いと思っていたが実際にはそうではなかったページを適用していたでしょう。 この投稿で実行したA/Bテストの詳細を確認できます。

しかし、次の画像でわかるように、私たちはそこで止まらず、Nelioのホームページのさまざまなバリエーションをテストし続けました。 この投稿を書いている時点でのホームページのデザインは、以前の提案とは大きく異なります。より明確で、シンプルで、整理されています。 そして、それはより良いパフォーマンスを発揮します！

ランディングページの最初の折り目

ランディングページの最初の折り目は最も重要なセクションです。 これは、そのページにアクセスしたすべての訪問者が最初に目にするものです。 彼らがあなたのウェブサイトを閲覧し続けるか、下にスクロールしてもっと見るか、2秒以内にGoogle検索エンジンに逃げるかはそれに依存します。

残念ながら、この最初の折り畳みにすべての情報を含めることはできません。そこに入れるものを慎重に選択する必要があります。 訪問者に伝える必要のある最も重要な情報は何ですか？ 最初のフォールドのA/Bテストを作成すると、Webサイトのコンバージョンを改善するのに大きな影響を与える可能性があります。

たとえば、製品が説明されており、変換の目的がユーザーに製品の価格設定ページにアクセスしてもらうことを目的としたNelio A / B Testingのランディングページでは、最初のフォールドのさまざまなバージョンをテストしました。 ブロックにカーソルを合わせ、スライダーを動かして両方のバージョンを比較します。

バリエーションでは、タイトルを変更し、ロゴにすでに表示されている商品名の代わりに、訪問者の好奇心をかき立てるメッセージを追加しました。 別の色？ ボタンの形が違う？ そのすべての代替場所？

これに続いて、サブタイトルを、好奇心を満たすソリューションがあることを示すものに変更しました。「WordPressのさまざまなバージョンを作成してテストし、視聴者が最も気に入っているものを見つけて、コンバージョンを改善する」。 そして最後に、緊急のポイント「今すぐ開始」を追加して、アクションボタンのテキストを変更しました。 さらに、Webサイトの最初のセクションは、最初の折り畳み全体を占めます。 目標はメッセージに集中することでした。

この場合、A / Bテストの結果は、英語版とスペイン語版で異なっていました。 英語版では12％以上のコンバージョン改善が得られましたが、スペイン語版では最終的なデータを取得できませんでした。 この実験の詳細については、ここをクリックしてください。

この例は、ランディングページをA/Bテストすることの重要性をもう一度示しています。 テストするまで、変更がWebサイトにどのような影響を与えるかを知ることはできません。

注目の画像

訪問者の知覚に最も影響を与えるウェブサイトの最初の折り目の要素の中で、私たちが使用する特徴的な画像が重要です。 彼らが最初に目にしたのは、訪問者の一般的な感情が拒絶の1つである場合、私たちは彼らを失ってしまうでしょう。 さらに、コンテンツがソーシャルメディアで共有される場合、注目の画像は重要な役割を果たします。

このため、注目の画像のA / Bテストを作成するのと同じくらい簡単なことで、変換結果を見ると笑顔になります。 ユーザーが最終的に価格設定ページにアクセスすることをコンバージョン目標とするNelioContentsランディングページで、注目の画像のA/Bテストを実行しました。

このページの最初の折り目には、コンピューターの前で、額にポストイットと厚いあごひげを生やした笑顔の男性を示す注目の画像が含まれています。 コンピューターのモニターには、NelioContentの編集カレンダーが表示されます。 2つのバリエーションを追加してA/Bテストを作成することにしました。最初の選択肢は、ラップトップの前で作業する人々のチームを示す、より従来型の画像です。 2番目のオプションでは、編集カレンダーのスクリーンショットを表示しました。これには、その上のテキストを読みやすくするためにぼかし効果を適用しました。

この場合、他の画像よりも優れた画像はありましたか？ どう思いますか？ あごひげを生やした紳士は、他の2つの注目の画像バリエーションを打ち負かすことができますか？

さて、不思議なことに、勝利のイメージがありました。 完全なテスト結果ページは次のとおりです。

具体的には、コンピューターの前にいる人々のグループの画像は、ひげを生やした男性よりも25％優れた変換率を示し、スペイン語版ではほぼ90％の信頼性があり、優勝した英語版ではほぼ15％の改善率があり、現在はさらに高い統計的信頼性、95％を超える。

ご覧のとおり、仮説を裏付けるA / Bテストを作成していない場合、何が最も効果的かを推測することは非常に困難です。 このテストの詳細については、こちらをご覧ください。

また、さまざまな注目の画像をテストするのと同じように、別の興味深いタイプのテストは、ビデオの画像を変更する方がよいかどうかです。 この投稿では、この実験の詳細について説明します。

アクションボタンの呼び出し

ランディングページで試す必要のある別のタイプのテストは、そのページのさまざまなスタイルの召喚状ボタンをテストすることです。 ボタンのサイズ、スタイル、およびテキストをテストします。

召喚状のボタンに最適な色に関するいくつかの理論に従って、NelioContentランディングページのボタンの色でA/Bテストを行うことにしました。 この場合、Nelio A /BTestingを使用してCSSスタイルテストを実行しました。

実行したA/Bテストの各バリアントについて、CSSスタイルエディターから表示した場合のアクションボタンは次のようになります。 まず、ボタンがオレンジ色の元のバージョンがあります。 他の2つのバリアントには、ボタンをそれぞれ緑と赤に設定するCSSが含まれています。

この場合、私たちが得た結果（この実験の詳細はここで確認できます）は、英語のNelioコンテンツページの視聴者にとって最も効果的な色は緑であるというものでした。 しかし、スペインの聴衆にとって、私たちはすでに持っていた色よりもうまく機能する色を見つけることができませんでした。

これらのA/Bテストを作成するにはどうすればよいですか？

A / Bテストツールを使用すると、A/Bテストの作成は非常に簡単です。 特に、完全に統合されたWordPressプラグインであるNelio A / B Testingを使用すると、ブロックエディターでページに変更を加えるのと同じくらい簡単にテストのバリエーションを作成できます。

さらに、前の画像のいくつかですでに見たように、WordPress自体でも結果が得られ、コーディングの知識やWordPressの外部のツールを使用する必要はありません。

この完全なガイドでは、WordPressブロックエディターを使用してA/Bテストを作成する方法について説明します。

Eコマースのコンバージョンの改善を開始します

eコマースでのコンバージョンを改善することは、Webサイトへのアクセス数を増やすことと同じかそれ以上に重要です。 ランディングページは、訪問者が到達するページであり、訪問者を変換させることが最優先事項である必要があります。 それらすべてにいくつかの共通の特徴があることはすでに見てきましたが、A / Bテストを作成した場合にのみ、それらを改善する方法を知ることができます。 いくつかの例を示しましたが、それらをコピーする代わりに、独自の仮説を立てて実験を開始してください。

A / Bテストを継続的に作成した経験により、わずかな労力で売上を伸ばすことができました。 あなたはあなたのウェブサイトでのコンバージョンを改善するために何を待っていますか？

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