CSSスタイルシートを使用した分割テスト

Webサイトを大幅に分割テストする最も簡単な方法は、サイト全体の実験でカスケードスタイルシート（CSS）に大胆な変更を加えることです。

CSSスタイルシートが重要な理由

WebサイトのメインCSSファイルは、すべてのWebページにまたがるすべての要素の共通のスタイル、位置、および動作を制御する中心的な参照ポイントです。

メインのCSSファイル内には、すべてのフォント、余白、色、配置などの設定があります。 これは、ほとんどのテンプレート化されたWebサイトで最も重要なファイルであり、わずかな編集でWebサイトの外観を大幅に変更できます。

毎回実行する必要があるサイト全体の分割テスト

Webサイト全体で、Webサイトの読み取り、使用、ナビゲート、行動の呼びかけの強調表示、およびすべての重要な情報の表示がいかに簡単であるかに大きな役割を果たす多くの共通要素があります。

ユーザーが連絡を取るか、おそらくWebサイトで購入するかを決定する場合、上記のいずれかがその変換を停止する決定要因になる可能性があります。 以下は、サイト全体の要素に関するいくつかの重要な考慮事項です。

召喚ボタン

オンラインでのすべてのコンバージョンは、召喚状（CTA）ボタン、リンク、またはウィジェットから始まります。 これらのCTAのサイズ、色、文言、さらには位置さえも、コンバージョン率に大きな違いをもたらします。 たとえば、CTAボタンの特定の色は、背景に溶け込みすぎたり、ネガティブな色として認識されるものによっては、無意識のうちにユーザーがボタンをクリックするのを妨げたりする場合があります。 リンクやボタンで使用されるテキストも違いを生みます。 たとえば、フォームの「送信」ボタンを「送信」に変更するだけで、「送信」は強力な単語として認識されるため、より良い結果が得られます。 これについて詳しくは、VWO.comのCTAの究極のガイドをご覧ください。

フォントサイズ

このめったにテストされない要素は、多くのユーザーのアクセシビリティに大きな役割を果たします。 フォントは小さすぎて一部のユーザーが読めないことが多いため、使い慣れている場合はズーム機能を使用する必要がありますが、モバイルデバイスではこれが常に可能または簡単であるとは限りません。 フォントサイズが大きすぎると、特にモバイル対応バージョンのWebサイトでは、読み取り速度が低下する可能性があるため、悪影響を与える可能性もあります。 imarc.comで、フォントサイズの背後にある科学について詳しく読んでください。

フォントタイプ

繰り返しになりますが、フォントのスタイルは多くのWebサイトでテストされることはめったになく、開発の初期設計段階で決定され、その後多くのWebサイトで忘れられているようです。 フォントのスタイルが異なれば、読みやすさのレベルも異なります。 また、一部のフォントは特定のデバイスでのみ使用可能であり、一部のフォントはフォントラスタライズなしで特定のサイズの特定のデバイスで非常にひどく表示されます。 フォントファミリーを使用して、お気に入りから始めて、すべてのデバイスに常に存在するArialなどのより単純なフォントに至るまで、一連のフォントを使用できます。新しいフォントは、JavaScriptまたは次のようなサービスを介してWebサイトに含めることができます。 Googleフォント。 TypeWolf.comの2016年のトップ10Webフォントに関するこの投稿で詳細を確認できます。

フォントスタイル

行の高さ、下線、太字、色、余白などのフォントスタイルも、アクセシビリティと読みやすさに影響します。 リンクは、青色で下線が引かれている場合にクリックされる可能性が高くなります。これは、2016年にGoogleが黒いリンクをテストすることでさえ、GoogleとeBayによって長年にわたって綿密にテストされてきたものです。 、次にそれらをテストする必要があり、変更された後、それらはしばしばより大きな関与を示すことがわかります。

背景色

多くの場合、Webサイトは白い背景で作成されますが、お気に入りのニュースWebサイトやソーシャルメディアプラットフォームを見ると、青または灰色のわずかな色合いであることがよくあります。 背景色は、情報ボックスや特別オファーバナーなど、Webページの特定の領域を目立たせるのに役立ちます。 また、背景色は表示される製品のブランドやタイプを強調することができ、コンテンツがより関連性があるように見えるため、この相関関係によりコンバージョン率が向上します。 Jimdo.comのこの記事で、Webサイトの色の心理学について詳しく調べ、オレンジなどの色がかなりの意味を示し（Amazonを考えてください）、青が中立性とテクノロジーを意味していることを確認してください（FacebookやTwitterを考えてください）。

要素の再配置または非表示

CSSファイルは、Webページ上のすべての一般的な要素の余白とパディングを制御し、「display：none」コマンドを使用して特定のアイテムを完全に削除することもできます。 これを利用できるいくつかの方法は、垂直方向に無駄になるスペースを減らすこと、不要な情報を削除すること、重要なCTA間の間隔を変更すること、またはコンテンツの特定のブロックを削除することを試すことです。 Webページでは少ない方が良い場合があり（keep-it-simple-stupidの原則）、コンバージョン率を向上させながらWebページからどれだけ削除できるかを確認することをお勧めします。

CSSファイルをサイト全体で分割テストするためのプラットフォーム

ユーザーがページ間を移動するときに、Webサイト上のテンプレートを個々のユーザーごとに一貫性を保つことが非常に重要です。 1ページだけがA / B分割テストされ、他のページは同じままである場合、それは有害である可能性があります（そして確かに不十分な実験です）。

CSSファイルの変更を個々のユーザーごとにページ間で一貫性を保つには、特別な分割テストソフトウェアが必要です。残念ながら、GoogleAnalyticsの無料の「コンテンツ実験」はこれらのタイプの分割テストに対応していません。 使用したいツールは次のとおりです。

• Visual Website Optimiser （VWO）– vwo.com –これが実装するのに最も簡単な分割テストソフトウェアであることがわかりました。 HTML、CSS、またはJavaScriptでのすべてのタイプの分割テストを処理し、必要に応じてユーザーヒートマップも生成します。 価格構造はここで見つけることができます
• Optimizely –optimizely.com –これは、HTML、CSS、またはJavaScriptでのすべてのタイプの分割テストも処理し、必要に応じていくつかの非常に高度な分割テストを実行できます。 価格情報はここにあります

結論

サイト全体のCSS分割テストの設定は簡単で効果的ですが、CSSに慣れていない場合は、開発者の15分の支援が必要になる場合があります。

ウェブサイトに適切なフォント、スタイル、CTAがあれば、ウェブサイトの主要なランディングページやその他のニッチな要素に集中できます。 これにより、コンバージョン率が向上し、余分なトラフィックを必要とせずにWebサイトがはるかに効果的になります。

ご不明な点がございましたら、お気軽にお問い合わせください。