インターネット上で最高のホームページのデザインとそれらをコピーする方法

人々は何年もの間「ホームページの死」を予測してきました。

しかし、ホームページが消えることはありません。

各サイトには、新しいユーザーを初めて歓迎し、彼らに土地を提供するための玄関ドアが必要です。

しかし、ホームページは進化しています。

ほんの数年前でも、ホームページには会社のあらゆる側面に関するさまざまな情報が含まれていました。

彼らはリンクや行くべき場所でいっぱいに詰まっていた。同社は、その活動のさまざまな側面をすべて強調したいと考えていました。

問題はそれが裏目に出たということです。

選択肢が多すぎただけです。それはユーザーにとって圧倒的で気を散らすものでした。

ウェブサイトのデザイン変換を迅速に改善するための最良の方法の1つは、ユーザーエクスペリエンスを損なう機能を捨てることです。

ルーセルスライダーは完璧な例です。これらは通常、一度に複数の異なるものを紹介するために使用されます。

しかし、その汎用性には多くの場合コストがかかります。テストでは、コンバージョン、SEO、ページの読み込みに悪影響があることが示されています。

image02 1

上の画像でクリック率が低いことがわかりますか?それは良い兆候ではありません。

実際、それが私がCrazyEggを作成した理由です。ユーザーが想定どおりにクリックしていないことがわかる場合は、手遅れになる前にデザインを変更できます。

ニール・パテルとの協議
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください

SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する

最高のホームページは、ユーザーエクスペリエンスを考慮に入れています。

これが私のお気に入りのホームページのデザインのいくつかです。それらのコピーを開始して、同様の結果を得ることができます。

1. Bills.com
注目すべき最初の主要な傾向は、「ランディングページとしてのホームページ」です。

あなたがそれについて考えるとき、それは非常に理にかなっています。

あなたの最終的な目標は、リードと売上を伸ばすことです。 「オンラインパンフレット」のウェブサイトは、何年も前から存在していません。

トリッキーな部分は、ホームページでリードを生成するための最善のアプローチを知っていることです。そうすることで、全員を怖がらせてバウンスさせないようにすることができます。

たとえば、あなたのことを聞いたことがない新しい訪問者に、大きな商品を購入するように依頼することはたくさんあります。

したがって、代わりに、最終的に必要なものを取得するには、より単純で侵襲性の低いアプローチが必要です。

そのため、Bills.comが行っていることが大好きです。

たとえば、彼らのサイトにアクセスすると、次のスライダーが表示されます。

スクリーンショット20170725 at 4.55.19 PM

これで、インタラクティブに前後にスライドして、借りている可能性のある債務額を選択できます。とてもシンプルなので、子供でもできます。

これは、彼らがこれまでに提供した唯一のオプションでもあります。そうすれば、圧倒されたり気が散ったりすることはありません。

[続行]をクリックすると、支払いが遅れているかどうか(遅れている場合はどのくらいの期間)かを尋ねられます。

スクリーンショット20170725 at 7.34.33 PM

彼らはここであなたを修飾しています。あなたが支払いに遅れをとっていない場合、彼らはあなたを大いに助けることができないかもしれません(読んでください:あなたからお金を稼ぐ)。

彼らはこの質問を使用して、最終的にあなたに与える回答をパーソナライズすることができます。それは、あなたが顧客になった場合に、どの人または部門があなたのケースを処理するのに最適であるかを内部的に分割するのに役立ちます。

次のステップは、あなたが住んでいる州を選択することです:

スクリーンショット20170725 at 7.34.53 PM

繰り返しになりますが、これはさらに資格を与え、州の制限に関する潜在的な問題を引き起こします(後で対処しなければならない可能性があります)。

最後のステップは、彼らがずっと望んでいたステップです。あなたの個人情報です。

スクリーンショット20170725 at 7.35.12 PM

KlientBoostは、これを「ブレッドクラムテクニック」と呼んでいます。これは、最初のフォームで人々を怖がらせる代わりに、小さなコミットメントを行わせるためです。

それぞれのマイクロコミットメントは、彼らがすでに投資されてプロセスを完了しなければならないまで、彼らを少し先に進めます。

たとえば、彼らが前もってあなたの名前と電話番号を尋ねたとしたら、それはあなたを怖がらせたかもしれません。

ただし、最初にこれらの他のステップにコミットすることで、最終的には新しい顧客に転向するためのより良いショットが得られます。

KlientBoostは、この手法を使用して、コンバージョン率を1%からほぼ20%に上げることに成功しました。

スクリーンショット20170219 at 7.17.19 AM

これらのマルチステップランディングページの秘訣は、可能な限り脅威の少ない質問から始めることです。

それは、あなたが最終的に彼らをどのように助けるつもりであるかに関連している必要があります。ただし、誰かが提供するのは信じられないほど簡単なはずです。

明らかに、現時点では価格や個人データについての言及はありません。

郵便番号を要求するのと同じくらい簡単なこともあります。

次のステップはもう少し具体的になり、必要なサービスのレベルを示唆します。

最初の2つのステップにコミットしてもらうと、さらにいくつかの個人的な質問をして、後でフォローアップすることができます。

Bills.comもインタラクティブなコンテンツを使用して、サイトへの関心を維持していることに気付くでしょう。

Qzzrはあなたができる1つのツールです

 

n自分のサイトでこれを実現するために使用します。彼らはすでに数分でセットアップできる構築済みの「ウィジェット」を持っています(開発者にカスタムメイドを支払うのとは対照的です)。

ヴィクトリアズシークレットは、「あなたのフィットネスペルソナは何ですか?」と尋ねるものを使用しています。フードネットワークは、「あなたの食べ物の好みに基づいてあなたの年齢を推測できますか?」と尋ねます。

スクリーンショット20170725 at 5.12.34 PM

いずれの場合も、これらのブランドはあなたを魅了する楽しい質問を使用しています。これらの質問に最初に答えることに脅威はありません。

別の代替ツールはSnapAppです。また、インタラクティブな計算機や、人々がポイント、クリック、調整して新しい結果を表示できるインフォグラフィックも作成します。

これは、フローチャート形式で質問に答えることができるマーケティングがいかに無駄であるかを示す面白い例です。

画像198

最後のツールの推奨事項の1つはBrackifyです。その名前は「ブラケット」のように聞こえますよね?

まあ、それがまさにポイントです!ほぼすべてのインタラクティブなブラケットやコンテストを作成して、顧客やサイト訪問者がアクションに参加できるようにすることができます。

誰かがあなたの好きなディズニー映画を尋ねた場合、次のようになります。

スクリーンショット20170725 at 5.20.25 PM

2.キバ
Kivaはマイクロファイナンスプラットフォームです。

彼らは、第三世界の国々の起業家を世界の他の地域からのドナーやスポンサーと結びつけています。

たとえば、インドの起業家が2倍の数の製品を製造および販売できるように、新しい商用ミシンに1,000ドルが必要だとします。

そのため、世界中の人々が少量を寄付し、この起業家が生み出すことができる新しいキャッシュフローから1〜2年の間に返済することができます。

スクリーンショット20170725 at 5.24.46 PM

Kivaのホームページは、正直なところ、比較的基本的なものです。

しかし、これまで見てきたように、それは問題ありません。

シンプルで直接的なことで、人々は重要なことに集中できます(価値のあるものと引き換えに情報を提供します)。

問題は、人々があなたのホームページにアクセスしてあなたの行動に興味を持っているかもしれないが、そのプロセスを開始する説得力のある理由が常にあるとは限らないということです。

時には、彼らが得ることができる驚くべき価値について彼らに知らせるために、あなたはもう少し積極的または断定的でなければなりません。

この場合、Kivaはポップアップオーバーレイを使用して、メールマガジンのオプトインを取得することにしました。


彼らは小さなことから始めたいと思っていました(そして最後のステップで学んだような脅迫的なものは使わないでください)。

そのため、Kivaは、バウンスしてサイトを離れる前に、少なくとも誰かから何かを取得するための簡単な電子メールオプションを使用しました。

新しいオファーオーバーレイは次のようになりました。

Kiva UnbounceConvertable

このようなオーバーレイは、外すのが難しいです。

明らかに、一部の聴衆はそれらを嫌います。しかし、あなたがあなたのコンテンツを位置づけて、うまく提供するならば、それは莫大な利益を支払うことができます。

また、表示方法や表示時期を制御することもできます。たとえば、新しい訪問者に対してのみ(リピーターに対して)、カーソルがウィンドウの外に移動し始めたときにのみトリガーするように決定できます。

終了遅延トリガーv21

これらは多くの場合、バックグラウンドで他のすべてを強調しない「ライトボックス」効果を作成し、人々があなたの新しいオファーをまっすぐに見られるようにします。

今後のウェビナーで使用する別の例を次に示します。

スクリーンショット20170725 at 7.40.03 PM

これらのことを嫌う聴衆の割合は常に存在します。

したがって、それらの使用方法に注意する必要があります。 (また、SEOを台無しにする設計ミスにも注意する必要があります。)

ただし、多くの場合、結果はリスクに見合う価値があります。

Kivaは、このオーバーレイを分割テストして、自分の視聴者がどのように反応したかを確認することにしました。

彼らはUnbounceをMailChimp(最終的な電子メールオプトイン用)に接続し、最初はトラフィックの50%にのみ新しいオーバーレイを表示することにしました。それは約5,000人の訪問者に出ました。

その単一のオーバーレイだけで、訪問者の3〜4%がすぐにキャプチャされました。

勇気づけられて、Kivaはより良いデザインとさまざまなオプションを繰り返し続け、その数を2倍の6〜7%にしました。

「迷惑な」ポップアップには悪くありませんよね?

3.H.Bloom
H.Bloomとは正確には何ですか?

彼らは豪華な花の配達サービスです。先に進んで好みを打ち込むと、残りは彼らがやってくれます。

ですから、彼らは働き過ぎの起業家が彼らの愛する人を決して忘れないのに最適です。

彼らのホームページをざっと見てみましょう。それから、なぜ私がそれがとても好きなのかをお話しします。

スクリーンショット20170725 at 5.53.11 PM

何よりもまず、それらは折り目の上の形をしています。

これにより、このページの目標がすぐに明確になります。顧客はこのページにアクセスし、次に何をすべきかを推測する必要はありません。

正面と中央にあるフォームは、物事をすっきりとクリアに保ちます。

ほとんどのWebサイト訪問者は、(下にスクロールすることに慣れてきたとしても)まだ折り目の上に注意を集中する傾向があります。

image4012

リード生成フォームの最適化を改善する最も簡単な方法は、CTAを人々がすでに使用している通常のアイパターンに保つことです。

たとえば、何年も前に行われた調査では、人々の目がいつどこで追跡されたかを追跡しました。

 

yページをヒットします。彼らは人々があなたのウェブサイトを「F」字型にスキャンする傾向があることを発見しました。

1oFKmittepaRKz3957Hsxfg

そのため、H.Bloomのホームページの最初のセクションでは、ページで何をすべきかをすぐに読者に伝えます。

そして、真ん中の次のセクションでは、プロセスがどのように機能するかを正確に説明します。

画像202

論理的で段階的な進行は、人々が自分に何が期待されているか、そしてこのようなことがどれほど困難または時間のかかるものであるかを理解するのに役立ちます。

これは、すぐに期待を設定し、開始するには時間がかかりすぎる可能性があるという潜在的な反対意見を克服するため、非常に重要です。

プログレスバーと同じように機能します。

たとえば、プログレスバーには、コンバージョンを28%増やす力があります。これは、「報酬」を得るためにやるべきことがあまり残っていないことを視聴者にすばやく保証するためです。

oSVQ2WDUY WuaEaEBPfQBVR5u9 Y8X2A2vBlil9WP T0jMtaTapnAxHUaWDRXBi9J444dHkIhTEl2aQYvilRiatX5gUs0 1

このページの最後のお気に入りの部分は、視聴者をあるセクションから次のセクションに移行するのに役立つ視覚的な手がかりとして使用される微妙な矢印です。

画像199

細かい部分ですが、特にフォームに記入してできるだけ早く開始する準備ができていない場合は、ページを読み続けるためのメッセージをユーザーに提供するのに役立ちます。

4.ベースキャンプ
Basecampが「Basecamp」になる前は、複数の異なるソフトウェア製品を備えた37Signalsでした。

そして何年にもわたって、彼らは新しい無料トライアルの申し込みを促進するために何が最も効果的かを見るために絶えず繰り返してきました。

これは、数十年前から存在している古典的なコピーライティング手法を使用する現在のホームページのバリエーションの1つです。

スクリーンショット20170725 at 6.11.04 PM

そのページの最初の行をすばやく読んでください。

「あなたのビジネスは成長していて、あなたは圧倒されています。あなたの働き方はもう機能していません。」

彼らはあなた(過労の事業主)がおそらく予想している様々な問題や問題のいくつかをリストアップし続けます。

これはPASコピーライティングテクニックの教科書の例です。仕組みは次のとおりです。

問題:見込み顧客が直面している主な問題を明確に確認することで、問題の核心にすばやく切り込みます(例:「あなたは圧倒されています」)。
かき混ぜる:次に、その問題の結果として現在発生しているさまざまな問題点と症状のすべてに名前を付けることに移行します(たとえば、「乱雑なメールやテキスト」、「隙間をすり抜ける」など)。
解決策:ここで、解決策を、これらの問題をすべて取り除く救世主として提示します(例:「Basecampの時間です」)。
彼らが従う式を特定できるようになったので、そのホームページをもう1つ簡単に見てみましょう。

スキッチ17

あまりにも多くの企業が、ホームページで自社製品の機能と利点を直接紹介したいと考えています。

ただし、それに関する問題は、サイトの訪問者がまだそこにいないことです。

これらの人々は彼らの生活の中で同じ問題を認識していないかもしれないので、あなたが彼らを売っている「解決策」は彼らと共鳴しません。結果として、彼らは変換せずにあなたのサイトを去ります!

また、このホームページはテキストが多いことに気付くでしょう。これは、他のソフトウェアWebサイトと比較すると珍しいことです。

これは、過去数年間にさまざまなバージョンをテストした後に学んだもう1つのトリックです。

数年前、彼らは古典的な長い形式のランディングページをテストし、最初はコンバージョン数が大幅に増加しました(37.5%)。

706まとめ

しかし、彼らはまだ満足しておらず、もっとうまくやれると思っていました。

そこで彼らは別のテストを試みましたが、今回は元のデザインに対する顧客の声を使用しました。

顧客の1つは、102%のコンバージョン増加でトップになりました。

709人がトリミング

その後、コピーの長さが結果と関係があるかどうかを確認するために、もう1つのテストを行いました。 (回答:そうではありませんでした。)

708長身の人

したがって、全体的にテキストが多い形式に固執していることがわかります。ただし、違いを生むのは必ずしもそのコピーの長さではありません。

代わりに、使用される特定の単語と、Basecampが解決する問題を顧客が正確に把握できるようにするための巧妙な公式にすべてがかかっています。

5. MailChimp
メールマーケティングソフトウェア会社のMailChimpのホームページは、変換するホームページを設計する方法の最良の教訓の1つを示しています。

ただし、最初は赤面しているように見えますが、それほど多くはありません。

画像200
最初に気付くのは、折り目の上にボタンが1つあることです。

文字通り、ここをクリックするものは他にありません。

オプションと選択肢を減らすと、コンバージョン率が向上することが示されています。訪問者に強制する決定が多ければ多いほど、訪問者が何をすべきかを決定するのに時間がかかるという考え方です(もしあれば)。

HicksLawgraph

MailChimpのホームページでは、空白(またはネガティブスペース)でのレッスンも提供しています。

たとえば、私たちは皆、ウェブサイトのブログ投稿を読み込もうとしましたが、それがあまりにも「窮屈」または雑然としているように感じました。これは、ブログのデザインが悪臭を放つ大きな危険信号の1つです。

代わりに、適切に設計されたページは、MailChimpのようにオープンで風通しの良いものにする必要があります。

プライマリCTAの周りのネガティブスペースは、

 

ページ。そのため、人々はほとんどそれにもっと注意を払うことを余儀なくされています。

ページを少し下にスクロールして、水平方向の間隔でどのように再生されるかを確認して、注意を独占しましょう。

画像206

彼らは、「三分割法」と呼ばれる写真のトリックを使用しています。これは、最も重要なページ要素を十字線の中央に配置する必要があるというものです。

三分割法11

ホームページのそのセクションのコンテンツは、理由により中心がずれています!最終的には、重要度の高い順にページコンテンツを表示する方法を形成または制御します。

そうすれば、「これはオプション#1、これはオプション#2など」というページ階層に微妙に優先順位を付けるのに役立ちます。

結論
今日のウェブ上の最高のホームページは、異なる目的を持っているかもしれません。

ただし、彼らが戻ってくる大きなものは常に1つあります。リードジェネレーション。

今日のすべてのウェブサイトは売る必要があります。

それは彼らが人々にすぐに購入させなければならないという意味ではありません。しかし、最終的にはそのポイントに到達する必要があります。

最高のホームページは、インタラクティブな機能からデザインまで、さまざまな要素を使用して、ユーザーに次に何をすべきかを微妙に指示します。

信じられないかもしれませんが、これも訪問者の最善の利益になるはずです。

意思決定を減らすことで生活を簡素化すると同時に、目的の目的地にすばやく到着できるようにします(これにより、発生している問題や問題点を解決できます)。

お気に入りのホームページの例は何ですか?それについて何が好きですか?