ホーム  /  すべて電子商取引ウェブサイト制作ワードプレス  /  Top Homepage Design Elements to Increase Conversions

コンバージョン率を高めるホームページデザインの要素

ホームページは、訪問者のコンバージョンに重要な役割を果たします。ランディングページを訪れた人は、あなたのことをよく知り、信頼できるかどうかを確認するために、ホームページ(そしておそらくアバウトページ)をこっそり覗き込む傾向にあります。

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

1.プロトタイプデザイン 

人々が考えるプロフェッショナルなウェブサイトとは、そのウェブサイトが標準的な規範やベストプラクティスにどれだけ適合しているかによって、大きく定義されます。 ある研究ある研究によると、ウェブサイトの原型性が高い(原型的なデザイン要素を多く含む)と、訪問者にとって美的に魅力的なものになるそうです。

あなたのウェブサイトが、プロがデザインしたプロトタイプのように見えるようにする必要があります。プロのウェブサイトのデザイン要素の一部をご紹介します。   

サイトの速度。 

ウェブサイトのパフォーマンスは、デザイン要素よりも優先されます。読み込みに数秒かかったり、操作に時間がかかったりすると、人々はあなたのウェブサイトに興味を失います。 4人に1人がの人が、読み込みに4秒以上かかるWebサイトを放棄すると答えています。Googleはウェブマスターに、モバイルデバイスでの読み込み時間を3秒以下にするようアドバイスしています。

ページロード時間が1秒から10秒になると、モバイルサイトの訪問者がバウンドする確率が 123%.

イメージ13

ナビゲーションです。

シンプルで直感的なナビゲーションメニューを用意しましょう。あなたのウェブサイトで探しているものを見つけようとするとき、人々が混乱してはいけません。 

ホームページのナビゲーションメニューには何を入れるべきでしょうか? 

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

しかし、「製品」や「サービス」といった一般的なキーワードを使うのではなく、検索エンジンがページをクロールしやすくするために、自分が上位表示させたいキーワードを使うのが良いでしょう。

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

商品だけでなく、あなたのことを知ってもらうためには、あなたが何者で、何を提供しているのかを説明する「About」ページが必要です。アバウト」ページは、あなたが信頼できる人物であることを人々に確信させる重要な役割を担っています。ですから、後回しにするのではなく、最高のページにしましょう。    

内容をご紹介します。

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

そのためには、テキストとビジュアルをうまく使い分ける必要があります。ホームページのコンテンツでは、テキストよりもビジュアルが重要視される傾向にありますが、メッセージを伝える上でテキストは非常に重要な役割を果たします。画像は誤解を招きやすいかもしれませんが、ウェブサイトのコピーは簡潔でわかりやすいものです。

一方、ビジュアルは、テーマを設定し、コピーのインパクトを高めるのに適しています。動画は、ランディングページのコンバージョン率を 80%増加します。.これらのコンテンツ要素をうまく組み合わせることで、最高のパフォーマンスを発揮するホームページを作ることができます。

ホームページのコピーで最も重要なのは、ヘッドラインとサブヘッドラインかもしれません。ここでは、訪問者に独自の価値を提案することができます。確かに、ヘッドライン・コピーはルールに縛られないクリエイティブな仕事と考えられますが、成功させるためには、明確で求められているベネフィットを提供する必要があります。オグルヴィは『Ogilvy on Advertising』の中でこう説明しています。

"最も効果的な見出しは、読者に利益を約束するものである。例えば、洗濯物が白くなる、1ガロンあたりの走行距離が伸びる、ニキビから解放される、虫歯が減るなど。雑誌を読み返して、どんな種類の利益を約束する見出しを持つ広告の数を数えてみてください」。

その方法とは PoptinUXに最適化されたヘッドラインで製品のメリットを表現しています。

イメージ1

ホームページのコンテンツは、何人の人がホームページを見て、他のページを見ずに終了したかを示す「ホームページ直帰率」に直接影響します。

適正な直帰率は、10%から30%と言われています。 10%~30%と言われています。.50%を超える場合は要注意です。ここでは、直帰率を下げるためにホームページのコンテンツを最適化するために必要な質問をいくつかご紹介します。

  • 一見して、何を提供しているのかわかりますか? 
  • ユーザーは必要なところでクリックしているか? 
  • そのページは、お客様がサイトを訪れる第1の目的に合わせているか?  
  • シンプルでわかりやすいページになっているか?  
  • ユーザーが求めているものを提供できているか?

2.社会的証明

デザインのプロトタイプが信頼性を暗示するものであるとすれば、社会的証明は、あなたの主張や約束のための確固たる事実を訪問者に提供するものです。あなたがウェブサイト上で主張しても、有効な社会的証明が伴っていなければ効果はありません。 

のパフォーマンス・マーケティング・リードであるVicky Jain氏は、次のように述べています。 エアミートは、顧客のケーススタディをホームページに掲載することで、デモ依頼が300%増加したと説明しています。

"社会的証明とは、見込み客にとってのソリューションのようなもので、より良い決断をしたり、自信を持ったり、主張を比較したりするのに役立つものです。適切なページ/セクションに適切なものを配置することができれば、他の要素に頼る必要はあまりなく、さらにページをセールス的でないものにすることができます。"

社会的証明は、どんな形であれ(証言、数字、ケーススタディ、評価、ピアレビューサイトのバッジ)、慎重に配置すれば、評価指標を400%改善することができます。ある実験では、お客様の強力なケーススタディを配置し、「次の成功するケーススタディになる」というCTAを設定したところ、製品のデモ依頼が3倍になりました。

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

ケーススタディ。 

謳い文句や約束事に確かな事実を示すには、過去の成功事例に勝るものはありません。最も強力な社会的証明の要素であるケーススタディは、ホームページのデザインに加えるとよいでしょう。ただし、いくつかの点に注意が必要です。

  • 社会的証明は、簡潔で要点を押さえたものにしましょう。クライアントのために行った仕事の結果を記述しますが、ケーススタディの詳細は別のページに記述します。あなたのホームページからケーススタディの全文にリンクします。 
  • 顧客からの引用やイメージを使う
  • ビフォーアフターの状態を記述し、数字を使って比較する。お客様からの見積もりを活用して、最も成果が出るようにしましょう。 

お客様の声

お客様の声とは、あなたやあなたの製品を支持するお客様の言葉です。これらの引用は、あなたのニッチな分野のトップ企業の高額顧客からのものであれば、あなたの訪問者に最も効果的なものとなるでしょう。 

この分野では積極的に行動する必要があります。積極的に声をかけて積極的に声をかける必要があります。本当の声と引き換えに、割引などの報酬を提供することも有効です。

あなたの顧客には、あなたと仕事をしたことで得られた結果を述べてもらい、他の人々があなたの顧客になるべき理由を説明してもらうといいでしょう。実際のデータを引用すれば、彼らの主張はより説得力のあるものになるでしょう。 

信頼のアイコンです。 

信頼のアイコンは、自分が関わった企業のロゴや、自分が取り上げられた出版物のロゴです。

ある調査によると、社会的証明の中で最も人気のあるものは、このようなものです。 研究した研究によると、社会的証明として最もよく使われています。手に入れるのが簡単で、視覚的な性質を持っているため、訪問者に印象的な効果を与えることができます。お客様の声と同様に、著名なお客様のロゴが掲載されていれば、最も高い効果が期待できます。

イメージ4

データ/数字 

これまでに多くの人々と仕事をしてきたり、彼らと一緒に素晴らしい結果を出してきた場合、そのデータや数字をホームページに表示することができます。印象的な数字であれば、あなたのビジネスに関連するものであれば何でも構いません。

ZeroBounceは、Inc.5000リストの40位に入っているという事実に触れています。5000リストの40位にランクインしており、かなりの信頼性があります。 

ソースZerobounce
ソースZerobounce

ソーシャルメディア。 

ソーシャルメディアを社会的証明として活用するには、単にフォロワーの数を紹介するだけでは不十分です。ソーシャルメディアの真のメリットは、顧客のポジティブな感情を蓄積することにあります。 

ベン・アストンは 次のように説明しています。 "センティメントとは、表現の中の感情的なメッセージであり、人の行動、文章、スピーチに込められた感情、意見、態度のことである。"

この感情的なメッセージは、第三者のプラットフォームに投稿され、より本物らしく見えるため、(一般的な証言と比較して)ソーシャルメディア上でより強い力を発揮します。結局のところ、ユーザーが作成したコンテンツは 2.4倍消費者が本物と見なす可能性が高くなります。

これらのポジティブな感情をホームページに記載しましょう。その際、元の投稿のスクリーンショットがあれば理想的です。 

レビュー 

製品やサービスについて、信頼できるソースからのリアルなレビューを掲載することができます。これらのレビューは、AmazonカスタマーレビューやTrustpilotなどの信頼できるレビューサイトで紹介されており、ソーシャルメディアと同様に、ユーザー生成コンテンツの良い例となります。ホームページにレビューを掲載する簡単な方法は、第三者のレビューサイトにリンクすることです。以下はその方法です。 MailBirdはこれを行っています。

ソースMailBird
ソースMailBird

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

人々はモバイル機器を使って、インターネットにアクセスするだけでなく、オンラインで購入することも以前より増えています。 41.32%のオンライン小売業のコンバージョンが、2019年にはモバイルデバイスで行われました。

2015年にGoogleが展開した モバイルフレンドリーアップデートは、「モバイルフレンドリーなページのモバイル検索結果での順位」を高めるものでした。その余波は明らかで、読みやすさや使いやすさに最適化されたウェブサイトのページが、(検索全体の半分以上を占める)モバイルで行われるGoogle検索で優先的に表示されるようになったのです。

モバイルフレンドリーなデザインには、以下のような特徴があります。 グーグルとアンサーラボの調査によると:

コールトゥアクションはフォールドの上と中央に配置する

最優先の情報や要素に、フォールドの上から簡単にアクセスできるようにします。 

イメージ8

メニューは短く、シンプルで、操作しやすい。

長くて複雑なメニューは、モバイル端末では管理しにくいものです。短く、シンプルで、操作しやすいメニューを使うようにしましょう。 

イメージ9

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

It’s industry-standard that you can create a logo for your website that should lead back to your homepage.

イメージ11

気が散らないようにする

ウェブサイトでは、インタースティシャル(コンテンツを隠し、ユーザーにアプリのインストールを促す全面的なプロモーションなど)を使用せず、ウェブサイトのコンテンツが見やすくなっている必要があります。 

イメージ7

オンサイト検索が簡単で効果的

高度な検索フィルターを備えた可視化された検索バーを提供し、検索結果を適切なものにします。 

訪問者が垣根を越えてウェブサイトを見ることができる

お客様は、サインインしなくてもウェブサイトを閲覧し、購入することができます。

イメージ10

フォームへの入力が簡単に 

フォームへの入力が手間にならないようにしましょう。効率的なフォームを使用し、合理的な情報入力、日付選択のためのカレンダーなどのオプションを提供します。

イメージ6

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

Make sure all your website’s elements (including images, texts, menus, etc.) are optimized using an efficient responsive design. Test your website using cross-browser testing tools. This could help a lot in identifying and fixing errors on different devices and operating systems.  

イメージ2

4.フォールドの上のCTA

Above the foldという考え方は、インターネットのページを説明するために生まれたものではありません。何世紀にもわたって、新聞の活字に使われてきました(そのため、「fold」という言葉が使われています)。新聞では、最も重要な見出しや画像は、容易に認識できるように、常に紙面の上半分に使用されていました。 

今日では、同じ考え方が、スクロールを必要とせずにページの見える部分をすぐに表現するためにも使われています。

と主張する専門家もいます。 CTAをを追加すると、訪問者がスクロールダウンしてページのコンテンツをもっと見るようになるかもしれないと主張する専門家もいます。折り返しの下にCTAを追加することには何らかのメリットがあるかもしれませんが、視認性とわかりやすさに勝るものはありません。

メインCTAを最も見やすく、メッセージを素早く伝えることができるフォールドの上に追加することに興味を持つ人が増えています。  

の調査によると ニールセン・ノーマン・グループの調査によると、人々は折り目の上の100ピクセルを折り目の下の100ピクセルよりも102%多く見ています。これは、この研究がその主張を裏付けるために示したヒートマップです。

イメージ14

赤い点は、人々が最も注目している場所です。黄色い点は人々があまり見ていない場所、白い点は人々がほとんど注目していない場所を表しています。このように、「オーバー・ザ・フォールド」という考え方を支持するマーケターは、データに基づいた調査に関して何か言いたいことがあるのでしょう。

ページの中で最も重要な要素をより多くの人に見てもらい、クリックしてもらいたいのであれば、人々が最も注意を払うフォールドの上に配置する必要があります。 

フォールドの上に載せるもの

今では、折り目の上のコンテンツが最も多くのビューを獲得することを確信しているはずですが、では、折り目の上に何を入れるべきかという問題があります。今すぐ購入」ボタンを入れれば、売上アップが期待できるでしょうか? 

答えはそれほど簡単ではありません。有名な商品を扱っている人気のあるウェブサイトでは、折り返しのすぐ上で購入を促した方が売上が伸びるかもしれません。

例えば メールチンプは、ホームページ上で「プランを選ぶ」ことを推奨しています。

ソースMailChimp
ソースMailChimp

これは、ほとんどのメールマーケティングプラットフォームが、無料トライアルへの登録や機能に関する詳細情報の提供を促しているのと同じです。ほとんどのビジネスウェブサイトでは、訪問者がリードとしてファネルに入ることを促したり、製品についてより詳しく知ることを促すCTAを含めることがより合理的だと考えています。

ある研究では 調査トップ企業のホームページの要素を調査したところ、これらのサイトで最も使われているCTAタイプは、「詳細情報」タイプ(詳しく知りたい、今すぐ見たい、もっと知りたい、もっと読みたいを含む)と「サンプル」タイプ(無料で申し込む、ダウンロードする、無料体験を始めるなど)であることがわかりました。

Chantyでは、ホームページの折り返し部分のスペースを有効活用しています。私は、ChantyのマーケティングマネージャーであるAnastasia Matveyevaに連絡を取りました。 ChantyChantyのマーケティングマネージャーであるAnastasia Matveyevaに連絡を取り、同社のオーバーブ・ザ・フォールド・スペースのダイナミクスについて説明してもらいました。

"Chanty.comのホームページでは、ウェブサイトのコンバージョンを高めるためにいくつかのデザイン要素を使用しています。まず、ホームページの上部には、私たちのチームが開発した従業員の生産性計算機へと続くハローバーが設置されています。この計算機では、1時間あたりの生産性と従業員1人あたりの生産性を測定することができます。この計算機は、私たちのウェブサイトに大きなトラフィックをもたらし、Googleの1ページ目に表示されるようになりました。"

次に、見出しがあります。 その下には、"Get more things done, together "という見出しと、"サインアップして、私たちのツールを無料で試してみませんか "というメールの入力があります。3つ目のメインのホームページ要素は、Chantyの使い方を説明するビデオガイドです。会話の作成、タスクの割り当て、電話のかけ方、音声メッセージの録音など、Chantyの機能を3分間のビデオチュートリアルで紹介しています。"

ソースChanty

5.ハンズオンカスタマーサポート

訪問者は、様々な段階で商品に関する質問をしています。特にホームページの訪問者は、初めての訪問者が多いため、より多くの質問を持っています。

良いホームページのデザインと 良質なコンテンツしかし、万が一、疑問が解消されない場合には、コミュニケーションの手段を提供する必要があります。

お客様の質問に答えることで、収益が最大15%向上し、顧客満足度も約20%向上します。 約20%アップします。.

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

1.コンタクトページのデザイン

about」ページと同様に、「contact」ページはウェブサイトの信頼性を高めます。大胆に目立つようにして、訪問者があなたに連絡する理由を与えましょう。 

お問い合わせページには、さまざまなコミュニケーション手段を用意しましょう。ウェブサイトから直接利用できるシンプルなフォームや、メールクライアントから利用できるメールアドレスを挿入します。 

2.ライブチャットの利用

訪問者(またはリード)の問い合わせに対するレスポンスの遅さは、彼らを保存する能力に大きな影響を与えます。お問い合わせフォームへの回答が早ければ早いほど、成功の確率が高くなりますが、回答時間が長ければリードを逃してしまうことになります。A 調査は、「5分間応答がないだけで、リードと接触する確率が10倍も低下する」ことを発見しました。

イメージ16

また、この調査では、リードからの問い合わせに対して5分以内に回答した企業はわずか7%でした。これらの企業はすべて、サポートにライブチャットを使用していました。ライブチャットは、問い合わせに対応するための最速かつ最も簡単な方法であり、素晴らしいカスタマーエクスペリエンスを提供します。 カスタマーエクスペリエンス.

典型的なライブチャットソフトウェアが実際にどのように機能するかを示します。 実際に機能しています。

ソースライブエージェント

3.チャットボット

ライブチャットサポートで人が問い合わせに対応するなら、チャットボットで送信される問い合わせはロボットが担当します。そして、彼らはかなり良い仕事をしています。チャットボットには自然言語処理技術が搭載されており、問い合わせ内容を分析し、最適な回答を導き出します。 

これらのツールは、特定の機能、価格、統合など、単純で反復的な問い合わせにほぼ答えることができます。複雑な質問の場合には、人間のサポートエージェントに接続することができます。  

ここでは以下のリストをご紹介します。 トップチャットボットツールホームページで使用できる

最後に

ホームページは、あなたのビジネスの最前線です。良いホームページは人を惹きつけ、信頼できると思わせることができますが、悪いホームページは人を遠ざけてしまいます。良いホームページには5つの要素があります。 

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

著者の経歴

Mostafa Dastras is a writer at The Digital Project Manager, a leading digital project management resource hub and community run by the indie digital publishing team at Black & White Zebra. His work has appeared on some top publications such as HubSpot, WordStream, SmartInsights, LeadPages, Sendinblue, and MarketingProfs.