コンバージョン率の最適化のためにあなたのウェブサイトを設計する方法
公開: 2020-12-16ウェブサイトがあなたのビジネスの成長をどのように助けることができるかについてはいくつかの方法があります。 しかし、ウェブサイトだけを持っているからといって、より多くの顧客を保証することはできません。 老舗企業は、顧客を引き付けて転換するために、自社のWebサイトを販売機に変える必要があることを知っています。 HubSpotによる最新の調査によると:
ページ読み込み時間の最初の5秒間は、コンバージョン率に最も大きな影響を与えます。 ウェブサイトのコンバージョン率は、読み込み時間が1秒増えるごとに、平均4.42%低下します。
第一印象の二度目のチャンスはないと彼らは言う。 そしてそれはあなたのウェブサイトのデザインであり、最初の1秒から訪問者をつかみ、彼らが変換するまで決して彼らを手放さないようにする必要があります。 しかし、どのようにしてあなたのウェブサイトをあなたのためにこのように「機能させる」のでしょうか? デザインの基本をお見せしましょう。
クリックしてフルサイズで表示します。 下にスクロールして記事全体を読みます。
知っておくべき重要な用語
まず最初に、このチュートリアルで説明されているいくつかの重要な用語を理解して、トピックをよりよく理解する必要があります。
A / Bテストまたは分割テストは、Webページの2つのバージョン(AとB)を比較して、どちらがより適切に変換されるかを知る科学的なプロセスです。 見出し、画像、行動を促すフレーズのボタン、色などをテストできます。
行動を促すフレーズ(CTA)は、訪問者に行動を促すボタンまたはテキスト行です。 それは彼らがあなたのウェブサイトを訪問しているときに何をすべきかを彼らに伝えます。 この例としては、Webページの[サインアップ]ボタン、eコマースショップの[購入]ボタン、アプリの[ダウンロード]ボタンがあります。
コンバージョンは、訪問者またはリードが目的のアクションを完了したときに発生します。 これは、訪問者がWebサイトに正常にサインアップしたか、ショップのアイテムをチェックアウトしたことを意味します。
コンバージョン率は、サイトで目的のアクションを実行した訪問者の割合です。 コンバージョンの合計数をウェブサイトの訪問者の合計数で割ると、コンバージョン率を得ることができます。
コンバージョン最適化またはコンバージョン率最適化(CRO)は、Webサイトを改良する体系的なアプローチであり、目的のアクションを実行するサイトへの訪問者の数を増やします。 あなたの目標があなたの電子メール購読者を増やすことであるならば、あなたはあなたの訪問者にあなたのニュースレターにサインアップして欲しいでしょう。 または、売り上げを伸ばしたい場合は、その購入ボタンを押すようにする必要があります。
ランディングページは通常、Webサイトのホームページですが、訪問者がリードまたは顧客に変換するためにランディングするサイト上の任意のページにすることができます。
多変量または多変量テスト(MVT)は、特定のページで複数の変数を同時にテストするプロセスです。 どの組み合わせが最も変換されるかを見つけるために、さまざまな要素を作成する必要があります。
変換するWebデザインの要素
あなたがあなたのウェブサイトを作成または再設計したいならば、ここにあなたが変換する視覚的に魅力的なウェブサイトを作る際に考慮すべき事柄があります:
1.画像
画像はすべてのウェブサイトで重要な役割を果たします。 常にそうであるとは限りませんが、訪問者を簡単に引き付けて引き付けるために使用されます。 画像を適切に使用してその可能性を最大化する方法を知っておく必要があります。
サイトで画像を効果的に使用するためのヒントを次に示します。
- 人間の顔で画像を選ぶ
あなたがあなたのサイトで人の画像を使うとき、それはあなたの訪問者に共感と強いつながりを与えます。
「私たちが顔を見ると、何かを感じたり、その人に共感したりするように自動的にトリガーされます。 問題、ジレンマ、習慣など、ウェブサイト上のコンテンツを認識した場合、私たちはつながり、理解されていると感じます。」 (きれいなだけではありません:Sabina Idlerによるあなたのウェブサイトへの感情の構築)
PayPalがランディングページでこの手法をどのように使用しているかを見てみましょう。
- 画像を最適化する
ウェブサイトを作成するときは、使用する画像を最適化して、サイトの読み込み速度に影響を与えないようにすることが重要です。 さらに、調査によると、ページの応答が1秒遅れても、コンバージョン率が7%低下する可能性があります。
画像を最適化するという考え方は、画像の品質に影響を与えることなく、画像を圧縮して明るくすることです。 無料で使用できる画像最適化ツールには、次のものがあります。
- 小さなPNG
- Compressor.io
- JPEGオプティマイザー
- オプティマイザ
- Kraken.io
- 簡単なランキング
- 写真のサイズを変更する
- 写真を圧縮する
- 画像を変換する
- ヒーロー画像を使用する
明確にするために、ヒーローの画像はスーパーヒーローの画像ではありません。 ヒーロー画像は、ウェブサイトの上部に配置される大きなウェブバナー画像です。 これらは通常、テキスト行または行動を促すフレーズのボタンとともに背景に配置されます。
次に例を示します。
ボーナスのヒント:訪問者に優れたユーザーエクスペリエンスを提供するために、使用する画像がレスポンシブであることを確認してください。
2.タイポグラフィ
ウィキペディアによると、タイポグラフィは、書記言語を表示時に読みやすく、読みやすく、魅力的にするためにタイプを配置する技術と技法です。 これには、書体、ポイントサイズ、行の長さ、行間隔、文字間隔の使用、および文字のペア間のスペースの調整が含まれます。
このビデオでは、タイポグラフィが紙からスクリーンにどのように進化したかを説明しています。
フォントがいくつあるか知っていますか? 答え—誰も知りません。 これが、正しいフォントの組み合わせを選択することが簡単な作業ではない理由です。
したがって、使用する組み合わせを決定するのに役立つフォントペアリングツールを次に示します。
- タイプ接続
- Googleタイプ
- フォントペア
- タイプ天才
- タイプウルフ
- 美しいウェブタイプ
- 使用中のフォント
- ジャストマイタイプ
- Typ.io
- ブレンダー
- フォントコンビネーター
- タイプミス
- Adobe Typekit
- マッチャーレーター
- Typespiration
あなたのウェブサイトに最適なフォントを選択する方法
3.空白
Googleがウェブサイトのスペースを最大化しない理由を疑問に思ったことはありませんか? それは彼らが空白の力を使っているからです。
ネガティブスペースとも呼ばれる空白は、空白または空のままになっているWebサイトの一部です。 ランディングページでこれを使用すると、訪問者は行動を促すフレーズに集中してコンバージョンを増やすことができます。 空白は、必ずしもサイトの背景が白であることを意味するわけではありません。 色で遊んだり、画像を背景として使用したりすることもできます。 目標は、シンプルでありながら最高のユーザーエクスペリエンスを提供することです。
注意:すっきりとしたウェブサイトが訪問者の注意を引き付けます。 きちんと整理されたサイトを閲覧することは、彼らにとって楽しい経験です。
4.色
ウェブサイトを作成するときに考慮すべきもう1つの重要な要素は色です。 色には意味があるので、どの色を選択しても、聴衆に伝えたいメッセージを反映する必要があることに注意してください。
たとえば、米国のほとんどの銀行は、信頼を表すために青色を使用しています。
適切な色の組み合わせを選択するときは、色が表すポジティブな感情とネガティブな感情のいくつかに注意してください。
- 黒–物理学では、黒は色ではありませんが、人に心理的な影響を及ぼします。 それは力と強さを象徴しますが、死、不幸、そして悪を表すこともできます。
- 白–一般的に、白は純粋さと無垢を表します。 病院は白を使用して不妊感を作り出しています。 しかし、それはまた、冷たく、当たり障りのない、孤立した何かを表す場合があります。
- 赤–この色は私たちの感情を呼び起こします。 それは愛、興奮、そして自信と関連付けることができます。 マイナス面では、それは攻撃性と怒りを象徴しています。
- 青–それは空、海の色であり、男性に最も好まれています。 青は落ち着き、静けさ、安定性、信頼性を象徴しています。 しかし、それは悲しみを表すこともあるので、「青く感じる」という言葉が使われます。
- 緑–それは森の色であり、しばしば自然を表しています。 緑は静けさ、楽観主義、そして幸運を意味します。
- 黄色–太陽と同じように、黄色は明るさと暖かさを表します。 それは最も注目を集める色であり、それが道路標識で一般的に使用されている理由です。 ただし、反射する光の量によって眼精疲労を引き起こす可能性もあります。
- 紫–ラベンダーの色です。 紫は王族と富を象徴していますが、エキゾチックまたは人工的なものと解釈する人もいます。
- ブラウン–素朴で自然な色です。 それは、回復力、信頼性、および安全性を意味します。 それはまた、悲しみと孤立を意味することもあります。
- オレンジ–黄色と同様に、オレンジも注意を引くために使用されます。 それは暖かさ、興奮、そしてエネルギーを表しています。 それはしばしばハロウィーンに関連しています。
- ピンク–この色は落ち着く効果があります。 それは優しさ、育成、そして女性らしさに関連しています。 ブランドをフェミニンに見せたくない場合は、この色の使用を避けてください。
ボーナスのヒント: Webデザインに最適な色を決定できない場合は、A / Bテストまたは多変量テストを使用できます。 どの色がよりよく変換されるかを知るのに役立ちます。
5.モバイルフレンドリー
ウェブサイトでのコンバージョンを最大化するには、モバイルフレンドリーであることが非常に重要です。 スマートフォンの利用が増加しているため、最近ではデスクトップ、タブレット、携帯電話など、複数の画面でウェブサイトにアクセスしています。 10人中8人がスマートフォンを介してインターネットを使用していることに注意してください。
モバイルトラフィック用にWordPressレイアウトを最適化する方法
次のツールを使用して、さまざまな画面サイズに対するWebサイトの応答性を確認します。
- Google SearchConsoleによるモバイルフレンドリーテスト
- MobileTest.me
- Bingによるモバイルフレンドリーテストツール
- MobiReadyモバイルフレンドリーチェッカー
- Urlitor
- Browserstack
- ランクウォッチ
- GoogleによるPageSpeedInsights
注意:モバイルフレンドリーなウェブサイトは、そうでないウェブサイトよりもランクが高くなっています。
結論
コンバージョン率の最適化を行うときは、Webデザインがトラフィックを利益に変える上で大きな役割を果たしていることを覚えておく必要があります。 上記のヒントに従って、サイトでの直帰率が高くならないようにしてください。