ホーム  /  すべてeコマースウェブサイトの開発ワードプレス  / コンバージョンを増やすためのトップのホームページ デザイン要素

コンバージョンを増やすためのトップのホームページ デザイン要素

ホームページは訪問者のコンバージョンに重要な役割を果たします。 人々があなたのランディング ページを訪問するときでさえ、あなたのことをよりよく知り、あなたが信頼できるかどうかを確認するために、あなたのホームページ (そしておそらく自己紹介ページ) を覗いてみる傾向があります。

ホームページの最適化は、コンバージョン率を最適化するための最初のステップの XNUMX つです。 この記事では、標準的なホームページ要素のいくつかを分析し、それらを最適化する方法を示します。

1. 試作設計 

プロフェッショナルな Web サイトに対する人々の考えは、その Web サイトが標準規格やベスト プラクティスにどの程度準拠しているかによって主に決まります。 勉強 Web サイトのプロトタイプ性が高い (多くのプロトタイプ的なデザイン要素を含む) ことで、訪問者にとって見た目がより魅力的になることがわかります。  

Web サイトがプロがデザインした Web サイトのプロトタイプのように見えるようにする必要があります。 プロフェッショナルな Web サイトのデザイン要素には次のようなものがあります。   

サイトの速度: 

Web サイトのパフォーマンスは、いかなるデザイン要素よりも優先されます。 読み込みに数秒かかる場合、またはアクションの実行が遅い場合、ユーザーは Web サイトへの興味を失います。 1で4 Web サイトの読み込みに 4 秒以上かかる場合、人々は Web サイトを放棄するだろうと言います。 Googleはウェブマスターに対し、モバイル端末での読み込み時間を3秒未満に抑えるようアドバイスしている。

ページの読み込み時間が 10 秒から XNUMX 秒に増加すると、モバイル サイト訪問者が直帰する確率が XNUMX 秒ずつ増加します。 123%.

image13

ナビゲーション:

シンプルで直感的なナビゲーション メニューがあることを確認してください。 人々があなたの Web サイトで何を探しているのかを調べようとするときに混乱してはなりません。 

ホームページのナビゲーション メニューには何を含めるべきですか? 

ホームページのナビゲーション メニューは、最も重要なページを表示するのに適した場所です。 製品ページが良い例かもしれません。 最も重要な製品をナビゲーションに挿入する必要があります。 

ただし、一般的なキーワード「製品」や「サービス」を使用する代わりに、検索エンジンがページをクロールしやすくするために、ランク付けしたいキーワードを使用することをお勧めします。

「ホームページの最適化」サービスと「コピーライティング」サービスを提供している場合は、ナビゲーション メニューで (一般的な「サービス」キーワードではなく) これら XNUMX つのキーワードを使用する必要があります。 メニューにドロップダウン レイアウトを使用する必要がある場合は、必ず使用してください。 メガメニュー 一般的なドロップダウンではなく。 

製品とは別に、人々にあなたのことを知ってもらいたいと考えています。あなたが誰なのか、何を提供しているのかを説明する「自己紹介」ページが必要です。 「自己紹介」ページは、あなたが信頼できる人物であることを人々に納得させる上で重要な役割を果たします。 したがって、結果論として考えるのではなく、それを自分にとって最高のページにしましょう。    

内容:

ホームページのコンテンツは、訪問者にメッセージを伝えるという最も重要な役割を果たします。 

テキストとビジュアルを活用してこれを実現します。 ホームページのコンテンツに関してはテキストよりもビジュアルが重要であると考える傾向がありますが、テキストはメッセージを伝える上で非常に重要な役割を果たします。 画像は誤解されやすいかもしれませんが、Web サイトのコピーは唐突で単純です。

一方、ビジュアルはテーマを設定し、コピーのインパクトを高めるのに最適です。 動画 ランディング ページのコンバージョン率を高めることができます 80%。 これらのコンテンツ要素を適切に組み合わせることが、最高のパフォーマンスを誇るホームページを実現するための完璧なレシピとなります。 

おそらく、ホームページの最も重要なコピーは見出しと小見出しでしょう。 ここは、訪問者に独自の価値提案を提案できる場所です。 確かに、ヘッドラインコピーはルールに縛られるべきではない創造的な作品と考えられていますが、成功するには、明確で求められるメリットを提供する必要があります。 オグルヴィ氏は「広告に関するオグルヴィ氏」で次のように説明しています。

「最も効果的な見出しは、洗浄力が白くなる、ガロンあたりの走行距離が増える、ニキビがなくなる、虫歯が減るなど、読者に利益を約束するものです。 雑誌をざっと読んで、見出しに何らかの利益が約束されている広告の数を数えてください。」

ここに ポプチン は、UX に最適化された見出しで製品の利点を紹介します。 

image1

ホームページ上のコンテンツは、ホームページの直帰率に直接影響します。直帰率とは、ホームページを閲覧して他のページを見ずに離脱した人の数を示します。

良好な直帰率は次の範囲であると言われています。 10%と30%。 50% を超える場合は注意が必要です。 直帰率を下げるためにホームページのコンテンツを最適化するには、次の質問を行う必要があります。 

  • 一目見ただけで私たちが提供しているものは明らかですか? 
  • ユーザーはクリックすべき場所をクリックしていますか? 
  • ページは、顧客がサイトにアクセスする最大の目的に合わせて調整されていますか?  
  • ページはシンプルで分かりやすいですか?  
  • ユーザーが求めているものを提供しているでしょうか?

2.社会的証拠

デザインのプロトタイプ性が信頼性の暗示を与える場合、社会的証明は訪問者にあなたの主張や約束に対する確かな事実を提供します。 ウェブサイト上での主張は、有効な社会的証明が伴っていない場合、効力を持ちません。 

Vicky Jain として、パフォーマンス マーケティング リーダー エアミートは、顧客の事例紹介をホームページに掲載すると、デモのリクエストが 300% 増加する可能性があると説明しています。 

「ソーシャルプルーフは、あらゆる見込み顧客にとってのソリューションのようなもので、顧客がより良い決定を下し、自信を持ち、請求を比較するのに役立ちます。 適切な要素を適切なページ/セクションに配置することができれば、他の要素にあまり依存する必要がなくなり、さらにページが売りっぽくなくなります。」

社会的証明は、どのような形式(推薦文、数字、ケーススタディ、評価、査読サイトのバッジ)であっても、慎重に配置すれば指標を 400% 向上させることができます。 私の実験の 3 つでは、顧客の強力なケーススタディを掲載し、「次の成功するケーススタディになる」という CTA を設定したところ、製品デモのリクエストが XNUMX 倍増加しました。

ランディング ページで使用できる社会的証明の種類には、次のようなものがあります。 

ケーススタディ: 

自分の主張や約束について確かな事実を提供するという点では、過去の成功の実例に勝るものはありません。 最も強力な社会的証明要素として、ケーススタディはホームページのデザインに素晴らしい追加となる可能性があります。 考慮する必要がある点がいくつかあります。

  • 社会的証明は簡潔かつ要点を押さえたものにしてください。 クライアントに対する仕事の結果を説明しますが、ケーススタディの完全な説明は別のページに保管してください。 あなたのホームページから完全なケーススタディへのリンクを貼ってください。 
  • クライアントからの引用や画像を使用します。
  • 前後の状態を数値で比較して説明します。 最大限の結果を得るには、顧客からの見積もりを活用してください。 

お客様の声:

お客様の声は、あなたとあなたの製品を支持する顧客からの引用です。 これらの引用は、あなたの分野のトップ企業の高額なチケットを持っている人からのものである場合、訪問者に最も大きな影響を与える可能性があります。 

この分野では積極的に取り組む必要があり、 届く 証言を求めて人々に。 引き換えに特典(割引など)を提供する 本当の声 ここでは長い道のりを行くことができます。 

顧客に、あなたからの仕事で得た成果について言及し、なぜ他の人があなたの顧客になるべきなのか説明してもらうのは良い考えです。 実際のデータを引用すれば、彼らの議論はより説得力を持つ可能性があります。 

信頼アイコン: 

トラストアイコンは、あなたが協力した会社や、あなたが特集された出版物のロゴです。

ある調査によると、これらは社会的証明の最も一般的な形式です。 研究 少し前にやりました。 これらは入手が簡単で、その視覚的な性質により、訪問者に顕著な影響を与えます。 お客様の声と同様に、知名度の高い顧客のロゴを掲載すると、最大の効果が得られます。 

image4

データ/数値: 

非常に多くの人々と協力したり、素晴らしい結果を達成したりした場合は、そのデータや数字をホームページに掲載できます。 これらの数字は、印象的であれば、あなたのビジネスに関連するものであれば何でも構いません。

ZeroBounce は、Inc. 40 リストの 5000 位にあるという事実に言及しており、非常に信頼できるものとなっています。 

出典: ゼロバウンス
情報源: ゼロバウンス

ソーシャルメディア: 

社会的証明の一形態としてソーシャル メディアを活用することは、単にフォロワー数を示すだけではありません。 あなたにとってソーシャル メディアの真のメリットは、ソーシャル メディアが提供する顧客のポジティブな感情の宝庫であることです。 

ベン・アストン役 説明して 「センチメントとは、表現に含まれる感情的なメッセージ、つまり人の行動、文章、またはスピーチに組み込まれた感情、意見、態度のことです。」

この感情的なメッセージは、サードパーティのプラットフォームに投稿され、より本物に見えるため、(通常の体験談と比較して)ソーシャル メディア上でより強い影響力を持ちます。 結局のところ、ユーザー生成コンテンツは 2.4回 消費者から本物だと思われる可能性が高くなります。 

これらのポジティブな感情をホームページで言及してください。 元の投稿のスクリーンショットがこれに最適です。 

レビュー: 

信頼できる情報源による製品やサービスの実際のレビューを紹介することができます。 これらのレビューは、Amazon カスタマー レビューや Trustpilot などの信頼できるレビュー サイトで紹介されているため、ソーシャル メディアと同様に、ユーザー作成コンテンツの良い例となる可能性があります。 ホームページでレビューを使用する簡単な方法は、サードパーティのレビュー サイトにリンクすることです。 その方法は次のとおりです メールバード これを行います。 

出典: メールバード
情報源: メールバード

3. モバイルフレンドリーなデザイン: 

人々はモバイル デバイスを使用してインターネットにアクセスできるだけでなく、これまで以上にオンラインで購入するようになりました。 41.32% 2019 年にモバイル デバイスでオンライン小売のコンバージョンが発生した割合。

2015 年に Google は モバイルフレンドリーなアップデート 「モバイル検索結果におけるモバイルフレンドリーなページのランキング」を高める。 その余波は明らかでした。モバイルで実行される Google 検索 (検索全体の半分以上) では、読みやすさと使いやすさが最適化された Web サイトのページが優先されました。 

による調査によると、モバイル フレンドリーなデザインには次のような特徴があります。 GoogleとAnswerLab

CTA はスクロールせずに見える範囲の中心にあります

人々が最優先の情報や要素にスクロールせずに簡単にアクセスできるようにします。 

image8

メニューは短く、シンプルで、操作が簡単です

長くて複雑なメニューをモバイル デバイスで管理するのは困難です。 短く、シンプルで、ナビゲートしやすいメニューを使用してください。 

image9

ホームページに戻るのも簡単です

できるのは業界標準です ロゴを作成する あなたのホームページに戻る必要があるウェブサイトの場合。

image11

気晴らしを避ける

Web サイトではインタースティシャル (コンテンツを隠してユーザーにアプリのインストールを促すフルページのプロモーションなど) を使用してはならず、Web サイトのコンテンツは見やすくなければなりません。 

image7

オンサイト検索の実行は簡単かつ効果的です

高度な検索フィルターを備えた表示される検索バーを提供し、検索結果を関連性の高いものにします。 

訪問者は何の障壁もなくウェブサイトを閲覧できます

ユーザーはサインインせずに Web サイトを閲覧して購入できる必要があります。

image10

フォームへの入力が簡単になりました 

フォームへの記入が面倒にならないようにしてください。 効率的なフォームを使用し、合理化された情報入力、日付選択用のカレンダーなどのオプションを提供します。

image6

ウェブサイト全体がモバイル向けに最適化されています 

Web サイトのすべての要素 (画像、テキスト、メニューなど) が効率的なレスポンシブ デザインを使用して最適化されていることを確認します。 Web サイトをテストする クロスブラウザテストを使用する ツール。 これは、さまざまなデバイスやオペレーティング システムでのエラーを特定して修正するのに非常に役立ちます。  

image2

4. スクロールせずに見える範囲の CTA:

アバブ ザ フォールドという概念は、インターネット ページを説明するために発明されたものではありません。 何世紀にもわたって新聞の印刷物で使用されてきました (したがって、「フォールド」という言葉が使用されます)。 新聞では、最も重要な見出しと画像は常に紙の上半分に使用され、簡単に認識できました。 

現在、同じ考え方が、スクロールすることなくページに表示される内容を即座に記述するために使用されています。

一部の専門家はそれを主張します CTAの追加 スクロールしないと見えない部分にあると、訪問者が下にスクロールしてページのコンテンツをさらに見るようになる可能性があります。 CTA をスクロールしないと見えない部分に追加することには多少の利点があるかもしれませんが、視認性と分かりやすさに勝るものはありません。 

最も目につきやすく、メッセージを素早く伝えるメインの CTA をスクロールせずに見える位置に追加することに興味を持つ人が増えています。  

によると、 ニールセン・ノーマングループ、人々は、スクロールせずに見える部分よりも上の 100 ピクセルを、スクロールしなければ見えない部分の下の 102 ピクセルよりも 100% 多く表示します。 これは、研究がその主張を裏付けるために提示したヒートマップです。 

image14

赤い点は人々が最も注目する場所です。 黄色の点は人々があまり注目していない場所であり、白い点は人々がほとんど注意を払っていない場所です。 したがって、明らかに、スクロールせずに見える範囲の概念を擁護するマーケティング担当者は、データ主導型リサーチに関しては言いたいことがあります。

ページ上の最も重要な要素をより頻繁に見てクリックしてもらいたい場合は、ユーザーが最も注目するスクロールせずに見える位置に要素を配置する必要があります。 

スクロールせずに見える範囲に何を含めるか:

ここまでで、スクロールせずに見える部分のコンテンツが最も多くのビューを獲得していることを確信できたはずですが、次に、スクロールしなければ見えない部分に何を含めるかという問題が生じます。 「今すぐ購入」ボタンを含めて、売上の増加を期待する必要がありますか? 

答えはそれほど単純ではないかもしれません。 有名な製品を掲載している人気の Web サイトでは、スクロールせずに見える範囲での購入を奨励すると、売上が増加する可能性があります。

例えば、 Mailchimp (おそらく最も有名な電子メール マーケティング プラットフォーム) は、ホームページのスクロールせずに見える部分で「プランを選択する」ことを奨励しています。 

出典:MailChimp
情報源: MailChimp

これは、電子メール マーケティング プラットフォームのほとんどが、無料トライアルへの登録を奨励したり、機能に関する詳細情報を提供したりする一方であります。 ほとんどの企業 Web サイトでは、訪問者が見込み客としてファネルに入るように促したり、自社の製品についての知識を深めたりすることを促す CTA を含める方が合理的であると考えています。

で 研究 トップ企業のホームページのホームページ要素を調査したところ、これらの Web サイトで最もよく使用されている CTA タイプは、「詳細情報」タイプ (詳細を学ぶ、今すぐ見る、もっと調べる、続きを読むなど) と「サンプル」タイプ (無料でサインアップ、ダウンロード、無料トライアルを開始するなど)。

Chanty は、ホームページのスクロールせずに見える領域をうまく活用しています。 私は、マーケティングマネージャーのアナスタシア・マトヴェエワに連絡しました。 チャンティそして彼女に、スクロールせずに見える範囲のダイナミクスについて説明してもらいました。

「Chanty.com のホームページでは、ウェブサイトのコンバージョンを増やすためにいくつかのデザイン要素を使用しています。 まず、ホームページの上部には、私たちのチームが開発した従業員の生産性計算ツールにつながるハローバーがあります。 この計算ツールを使用すると、ユーザーは時間当たりおよび従業員当たりの生産性を測定できるようになり、当社の Web サイトに多くのトラフィックが集まり、Google の最初のページにランクインできるようになりました。」

次は見出しです 「一緒にもっと多くのことを成し遂げましょう」とそのすぐ下に電子メールの入力があり、サインアップしてツールを無料で試すことを提案しています。 ホームページの 3 番目の主要な要素は、Chanty の使用方法に関するビデオ ガイドです。 これは、会話の作成、タスクの割り当て、通話の発信、オーディオ メッセージの録音などの Chanty の機能を示す XNUMX 分間のビデオ チュートリアルです。」

出典: シャンティ

5. 実践的なカスタマーサポート

訪問者はさまざまな段階で製品について多くの質問をします。 ホームページの訪問者は、特にそのほとんどが初めての訪問者であるため、より多くの質問をします。

ホームページのデザインも良く、 質の高いコンテンツ 質問に対する答えを見つけるのに役立つ可能性はありますが、質問のいずれかが答えられないままになった場合に備えて、実践的なコミュニケーション手段を提供することが常に必要です。

顧客の質問に答えると、収益が最大 15% 増加すると同時に、顧客満足度も向上します。 20%の周りに

ホームページでカスタマー サポートを提供するには、いくつかの方法があります。 

1. お問い合わせページをデザインする

「概要」ページと同様に、「連絡先」ページは Web サイトの信頼性を高めます。 太字で目立つようにし、訪問者に連絡する理由を与えます。 

連絡先ページでさまざまなコミュニケーション手段を提供します。 Web サイトから直接使用できるシンプルなフォームと、電子メール クライアントから使用できる電子メール アドレスを挿入します。 

2. ライブチャットを使用する

訪問者 (またはリード) のクエリに対する応答時間が遅いと、クエリを保持する能力に大きな影響を与えます。 お問い合わせフォームのクエリへの応答が速ければ成功の可能性が高まりますが、応答時間が長ければ見込み顧客を逃す可能性があります。 あ 研究 「わずか 10 分間応答がなかった場合、見込み客とコンタクトできる確率は XNUMX 分の XNUMX に減少する」ことがわかりました。 

image16

この調査では、リードの問い合わせから 7 分以内に回答した企業は、調査対象企業の XNUMX% のみであることも判明しました。 これらの企業はすべて使用していました ライブチャット サポートのための。 ライブ チャットは、クエリに応答し、優れたサービスを提供するための最も速くて簡単な方法です。 顧客満足体験

一般的なライブチャット ソフトウェアの仕組みは次のとおりです。 実生活での機能:

情報源: LiveAgent

3 チャットボット

ライブ チャット サポートで人がクエリに応答する場合、チャットボットを通じて送信されたクエリはロボットが担当します。 そして彼らはそれをかなりうまくやっています。 チャットボット クエリを分析し、最適な応答を導き出すための自然言語処理テクノロジーが搭載されています。 

これらのツールは、特定の機能、価格設定、統合などに関するクエリなど、単純で反復的なクエリにほぼ答えることができます。クエリが複雑になる場合には、顧客を人間のサポート エージェントにつなぐことができます。  

こちらのリストです 人気のチャットボットツール あなたのホームページで使用できます。  

最後に:

ホームページはビジネスの店頭として機能します。 良いホームページは人々を惹きつけ、あなたを信頼できると印象付けることができますが、悪いホームページは人々を遠ざける可能性があります。 良いホームページには次の 5 つの要素があります。 

  1. 来場者の期待に応えるプロトタイプのデザインとなっている。
  2. 社会的証明を使用して信頼性を示します。
  3. 携帯電話の使用がデスクトップを超えているため、モバイルフレンドリーになっています。
  4. 彼らは、スクロールせずに見える範囲のスペースを利用して、最も重要な CTA を表示します。
  5. 訪問者の質問に答えるための実践的なサポートがあります

著者の経歴:

モスタファ・ダストラスは以下のライターです。 デジタル プロジェクト マネージャー、Black & White Zebra のインディーズ デジタル パブリッシング チームが運営する主要なデジタル プロジェクト管理リソース ハブおよびコミュニティです。 彼の作品は、HubSpot、WordStream、SmartInsights、LeadPages、Sendinblue、MarketingProfs などのトップ出版物に掲載されています。