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