読者になるブログ作成2022-05-03コンバージョンを損なう7つの一般的なウェブサイトデザイン機能ほとんどの人はウェブサイトのデザインがあなたが見るものだと思います。スティーブ・ジョブズは何年も前に「デザインはそれがどのように機能するか」を私たちに思い出させたときに私たちを訂正しました。同じ原則があなたのウェブサイトのデザインにも当てはまります。ウェブサイトの見栄えが重要です。ウェブサイトが正しく機能していることがさらに重要です。トラフィックを温かいリードに変え、まったく新しい顧客になります。残念ながら、常にそうとは限りません。上位のWebサイトの一部に見られる多くの一般的なデザイン機能は、コンバージョンを妨害することが示されています。信じられない?以下の7つのデータに裏付けられた例を見て、同じ潜在的に危険な間違いを犯していないかどうかを確認してください。1.ストックフォトこれがおなじみのように聞こえるかどうか教えてください。Themeforestで美しい新しいWordPressテーマを見つけます。それはあなたが探している機能の完璧な組み合わせです。現代的なデザインです。これは、基本的なカスタムデザインよりも数千ドルも安いです。あなたはそれをできるだけ早く購入し、それを設定し始めます。ほんの数時間で...まあ、それは正確に正しく見えていません。指を置くことはできませんが、何かが気分が悪くなります。したがって、元のバージョンに戻って2つを比較し、購入を促した元のコピーと自分のバージョンが一致しない理由を確認します。私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧くださいSEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。有料メディア-明確なROIを備えた効果的な有料戦略。電話を予約するそして、それがあなたを襲うときです:画像!今日のデザイントレンドは比較的最小限です。あなたが今読んでいるこれを見てください。いくつかの大胆なアクセントカラーとすっきりとしたタイポグラフィを備えた空白がたくさんあります。画像37そうでなければ、それを際立たせる他の唯一のものは高品質の画像です。彼らは、誰かがサイトを設計する前にこれを考え抜いたかのように完全に一致します(彼らはそうしました)。インターネット上の最高のWebサイトには、通常、全体的な美観を高めるように設計されたプロの写真とカスタム画像があります。それが起こらない場合は、ランダムに異なる場所からの写真を平手打ちするのは難しいかもしれません。それで、あなたが取る一番の近道は何ですか?いくつかの無料の高品質の画像を見つけるためにPixabayを起動します。このようなブログ投稿にはストック画像で十分です。多くの場合、サイトのコンバージョン主導型のページで裏目に出る可能性があります。Optimizerは、実際の写真をストック写真と比較する簡単な分割テストを実行しました。これが唯一のページバリエーションでした。これは、(新規登録の場合)CTAクリック数が増えた理由を確認したかったためです。1024x566当初、実際の画像は、161%多くのCTAクリックを促進することにより、ストック画像を上回りました。登録も改善され、38.4%増加しました。ストックフォトは、全体的なエクスペリエンスと美しさを損なうだけではありません。Webサイトの信頼性を損なう可能性もあります。これは小さなウェブサイトでよく起こります。この例を見てください:貼り付けた画像0282これは、彼らの信頼性を損なう可能性があるほど悪いように見えますが、今見たようにコンバージョンを低下させる場合は特に悪いことです。人々が無意識のうちに画像を理解するのに13ミリ秒しかかからないため、画像は強力です。画像にはエンゲージメントを94%向上させる力もあるため、画像はアクションとコンバージョンを促進するための最良の方法の1つです。常に最高、最大、最高の解像度の写真を使用する必要がありますか?まあ、正確ではありません。その理由は次のとおりです。先ほど見たように、コンバージョン重視のページのストックフォトは、信頼性を損なうことでコンバージョンを減らすことができます。それは必ずしも大規模で美しいビジュアルが完璧な選択であることを意味するわけではありません。1つのサイトでこの素敵なフルスクリーンビデオの背景を見てみましょう。081934のスクリーンキャプチャよさそうですね!それはあなたの大きなデスクトップモニター全体に広がり、ピクセルパーフェクトに見えます。それで、それについて何が悪いのでしょうか?これ。20170711の083A273A13のスクリーンショット残念ながら、それは信じられないほど遅いです。ロードには12秒かかります。トラフィックの31%が失われる可能性があります。ウェブサイトがどんなに良く見えても、人々は待つのが好きではありません。それが十分に悪くない場合、Googleの最近のモバイルページ速度ベンチマークレポートは、「ロードに7秒かかると、誰かがサイトからバウンスする確率が113%増加する」ことを発見しました。幸いなことに、Googleは最近、進捗状況をテストするための新しい改善されたツールであるTestMySiteを提供してくれました。上記のサイトでテストを実行したところ、業界の底辺に向かってパフォーマンスが向上していることがわかりました。Siteレポートは、ページの読み込み時間を最も長く引き下げている問題を確認するためのいくつかの推奨事項を提供します。見てみましょうこのサイトがすべきこと。20170711の083A283A11のスクリーンショット「画像の最適化」はリストの一番上にあります。これは、以前のビジュアルを参照するために戻ったときに驚くことではありません。コンバージョンではなく速度について話しているのですか?トラフィックを強制的に離脱させるだけでなく、速度が遅いとSEOやコンバージョンに悪影響を与えることが証明されています。以前に参照した同じGoogleレポートでは、「ページ上の要素(テキスト、タイトル、画像)の数が400から6,000になると、コンバージョンの確率が95%低下する」ことがわかりました。95パーセント?!ページの読み込み時間を短縮することは、独自の投稿に値する複雑なトピックですが、次の3つのヒントを覚えておいてください。可能であれば、サイトの特定のサイズに合うように画像を切り抜いてサイズを変更します。次に、可能であればWPSmush.itなどでファイルサイズを圧縮します。最後になりましたが、CDN(CloudFlareなど)を使用して画像をホストおよび配信します。3.均等に重み付けされたCTA質問:以下の2つのCTAのどちらを最初にクリックしますか?貼り付けた画像0280あなたの推測は私のものと同じくらい良いです!どちらもお粗末です。ここで考えられる唯一の節約の恩恵は、一方のCTAがもう一方のCTAの下にあることです。それ以外の点では、ほぼ同じように見えます。それらの全体的なサイズは同じであり、「ここをクリック」のコピーは、努力しながら、同じ正確な重量と背景を備えています。言い換えれば、どのオプションがプライマリかセカンダリかを読者に視覚的に示す手がかりはありません。どちらをクリックすればよいか、一見正確にはわかりません。「人々を導く必要がある」ので、それは問題です、とMarketingExperiments.comは言います。ある実験では、研究者は3つの均等に重み付けされたCTAを含む1ページを取得し、このように1つの主要なCTAにマージしました。1024x505この決定の背後にある論理は単純でした。「人々は、どこで最大の価値を得ることができるかを知る必要があります。彼らを明確で決定的な方向に向けて、主な行動を呼びかけましょう。Experimentsは同様のテストを実行し、CTAボタンのデザインを変更するだけで発生する可能性のある即時の影響を示しました。これら2つの違いを見てください。image08今回のテストでは、訪問者がより簡単に決定できるようにすることで、コンバージョンが64%増加しました。4.混乱したメッセージングもう1つの大きな問題があります。あなたのウェブサイトのメッセージはどれくらい明確ですか?例を見てみましょう。このランディングページの何が問題になっているのか理解できるかどうかを確認してください。貼り付けた画像0272手始めに、誰もこのテキストの壁全体を読んでいません。第二に、専門用語と洗練された「企業」言語により、ほとんど判読できなくなります。あなたは常にあなたのウェブサイトの読解レベルを7年生または8年生の読解レベル未満に保つべきです。研究によると、理解しやすいもの(単語、名前など)は、実際にはより信頼できるものと見なされています。経営コンサルティング会社のマッキンゼーは、複雑な文章を「顧客の前で話す」と呼んでいます。基本的に、あなたは1つのことを言っていますが、顧客はまったく別のことを気にかけています。「メッセージング」はデザインとは何の関係もないと思いますか?この次の例を見て、それでもそう思うかどうか教えてください。良いctaランディングページの例これは前向きな例です。このページはシンプルで的確です。デザインはヘッダーの周りの空白を強調し、青い影付きのCTAセクションに注意を促します。Thinkは、コンバージョンを促進するためのデザインとユーザビリティに関する最高の本の1つです。本の前提はタイトルからかなり明白です。それは人々が彼らが期待するのとまったく同じようにウェブサイトが機能するべきであると言っています。子供が初めてiPadを手に取るのを見たことがありますか?彼らがそれを使い始める方法を理解するのに通常数秒しかかかりません。理想的には、ウェブサイトは同じ方法である必要があります。残念ながら、常にそうとは限りません。フラットなデザインの傾向が行き過ぎてしまうことがあります。実行すると(以下の例のように)、ページを簡略化できるため、すぐに理解できます。貼り付けた画像0273ただし、うまくいかない場合は、次に何をすべきかをユーザーに通知する信号が不足している可能性があります。ソフトウェアCrazyEggのヒートマップであるこの画像を見てください。スーツケースのスクリーンショットヒートマップは、それらの画像をクリックしているはずなのに、誰もクリックしていないことを示しています。ページ自体は見栄えがしますが、フラットなデザインでは、これらの要素をクリックする必要があることをユーザーに示すことはできません。その結果、これらのプロジェクトのケーススタディページは誰も閲覧していません。したがって、誰もその会社を雇っていません!見出し、ボタン、ホバー効果などの単純なものでも、ユーザーはそれらのページ要素をクリックすることになっていることを知ることができます。HubSpotからこの例を確認してください。貼り付けた画像0264これは画像CTAであることがわかります(前の例のように)。それが何であるか、またはなぜクリックする必要があるかを知っていると仮定する代わりに、あなたを助けるべき手がかりがあります。小見出し:「無料のマーケティング目標設定テンプレート」コピー:「この無料のExcelテンプレートを使用して、マーケティング目標を決定し、来年の期限を設定します。画像:目標設定テンプレートの例を含むMacラップトップ。CTA:次の「テンプレートを取得」ボタンと矢印。違いを見ます?彼らは偶然に何も残しません。あなたはそれを見たときに何をすべきかを正確に知っています。追加の詳細は、クリックする理由を判断するのにも役立ちます。6.クリーンで論理的な組織ページ構成が重要です。コンバージョンにとって重要です。Are」ではなく、単に「About」と呼ぶ必要があります。他のページタイトルは賢いかもしれませんが、誰もがそれぞれが何であるかをすぐに理解できるわけではありません。そのため、ナビゲーションのすべてのページは非常にシンプルで一般的に使用されています。画像39情報アーキテクチャ(IA)は、Webサイトの情報を整理するという点で似ています。特定のページも同様に整理して、ユーザーが以前にサイトにアクセスしたことがない場合でも、新製品を見つける方法を正確に理解できるようにする必要があります。これが私の言いたいことです。Zappos.comにアクセスして、新しい靴を探します。上部には、性別(女性と男性)、年齢(子供)、部門、ブランド、販売の順に分類されていることがわかります。これにより、開始が非常に簡単になります。次に、ドロップダウン(「女性」など)をクリックすると展開され、最初に「靴」、次に「衣類」、「アクセサリー」のタイプ別に整理されたオプションが表示されます。貼り付けた画像0271見る?あなたはこれまでこのサイトに行ったことがないかもしれません。彼らは何千もの製品を持っています。間の同様の内訳から始まります。次に、さらに1レベル進むと、「ユースケース」(新着、トレンド、休暇、結婚式)とカテゴリ(衣類、靴、ハンドバッグ、アクセサリー)に分かれます。言い換えれば、彼らは人々が持っている最も一般的な選択のいくつかを「表面化」するのを助けました。それらは今でははるかに簡単に(そしてより速く)見つけることができます。ユーザーが圧倒されないように、トップレベルのナビゲーションを可能な限りシンプルに保ちます。これらの大規模なeコマースWebサイトが、ページを単純で合理化された階層に整理できるのであれば、私たちもそうすることができます。B2Bオーディエンスは、長くて詳細なコンテンツページが大好きです。ユーザーは、自分がどこにいるか、またはこのコンテンツに関連する他の情報について混乱することがあります。以下の例のサブナビゲーションのように、視覚的な手がかりを少し使用して、ユーザーに正確な位置を微妙に知らせることができます。ユーザーが十分に下にスクロールするか、新しいページにジャンプすると、サブナビゲーションホバーが新しい選択に更新されます。これは、彼らがちょうど去った場所、彼らが今どこにいるのか、そして彼らが次にどこに行くべきかについての手がかりを彼らにすぐに提供します。私は最後まで最善を尽くしました。「最高」とは、最悪を意味します。カルーセルスライダーは、B2BからB2C、さらにはeコマースまで、考えられるほぼすべてのWebサイトで使用されています。1秒前にZappos.comを賞賛していましたが、ここでは、さまざまなオプションを自動的にスクロールするカルーセルスライダーを使用しています。貼り付けた画像0268私は彼らに対していくらかの偏見を持っていません。私はカルーセルのファンではありません。カルーセルは、コンバージョンを改善するのではなく、破壊することが(何度も)示されているからです。ハリソンジョーンズは、検索エンジンランドの調査を実施し、カルーセルをクリックする人がいないことを発見しました。これらのカルーセルのクリック率を見てください。それほど暑くないですよね?image02確かに、カルーセルスライダーが必要な理由は理解できます。あなたはあなたの会社、製品、またはサービスのユニークな側面のすべてを誇示したいと思っています。秘訣は一度に1つだけ実行することです。しないと、やりすぎ、早すぎて、結果として0.16%のクリックスルー率をかろうじて傷つけるリスクがあります。カルーセルは、特定のシーズンのすべての新しいブランドを強調または披露したいeコマース企業にとってはかなり一般的です。スライダーを使用したForever21は次のとおりです。貼り付けた画像0278H&Mは、彼らの名誉のために、少し違うことをしています。2つの静的セクションを使用して、ユーザーの注意をより集中させます。上部にセールの呼びかけがあり、下部に単一の製品があります。画像38結論あなたのウェブデザインは見栄えがするはずです。それもうまく機能しないという意味ではありません。理想的には、訪問者の共感を呼ぶ実際の(適切なサイズの)画像を常に使用する必要があります。することで、ユーザーがバウンスする前にメッセージングとCTAが沈むのに十分な時間を購入できます。次に、デザインの特徴を理解しやすいものにする必要があります。これは、単純な構成、通常の命名規則、および訪問者にページで何をすべきかを思い出させる小さな視覚的な手がかりを意味します。あなたが何をするにしても、カルーセルスライダーを捨ててください。他のページが失敗し...2022-05-01できるだけ早く実行する必要がある3つの収益を高めるリマーケティングキャンペーンリマーケティングの概念は、考えてみると非常に単純です。目標...2022-04-30コンバージョン率が非常に低い4つの主な理由ほら、わかった。1このブログについてプライバシーポリシーはてなブログをはじめよう!kolabさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。