高変換ランディングページの背後にある8つの設計原則

公開: 2020-05-08

それで、あなたはDiviを発見し、ウェブサイトを作成する探求を続けました。しかし、ウェブサイトが公開されると、見た目は素晴らしいものの、考えていたコンバージョン目標を達成していないことがわかりました。

これはあなたがあなたの努力を放棄するべきであるという意味ではありません。 Diviを使用すると、美しいWebサイトを作成するために必要なすべての学習をスキップできますが、変換するデザインを作成する原則を理解する必要があります。

これを行うには、基本原則を学び、自分のWebサイトでそれらを実装してみる必要があります。確かに、しばらくの間アプリケーションを試してみる必要があります。A/ Bテストを行うと、より早くそこにたどり着くことができます。ただし、これらの原則がなければ、Webサイトの変換を大幅に長くするためにWebサイトをどうするかを理解することになります。

問題は、ランディングページの完全なコンバージョン率に到達するまでの道のりは、ほとんどの場合、速い道のりではないということです。ランディングページを0％から50％のコンバージョン率にジャンプさせる魔法の公式はありません。

ただし、自分で適用する場合、Webサイトのコンバージョン率を100％、さらには300％上げることは珍しいことではありません。それが1％から3％に成長したとしても、それは100人の訪問者あたりさらに2つのリードであり、あなたのビジネスにとってゲームチェンジャーになる可能性があります。

これらの結果を達成するために必要な唯一のことは、ランディングページの収益性を高めるためのいくつかの一般的なルールを学ぶことです。

この投稿では、ランディングページをより効果的にするのに役立つ8つの設計原則を発見します。

人々のためのデザイン

すべての企業の聴衆は異なります。彼らは異なる人々であり、製品から異なるものを求め、異なる考え方をしています。あなたは彼らが聞く必要があるメッセージを届けるためにあなたについてのすべてを学ぶ必要があります。

まだバイヤーペルソナを開発していない場合は、ランディングページで開発する必要があります。完全な初心者の方が記事全体をチェックしたほうがよいでしょうが、購入者のペルソナについてすでに少し知っている場合は、ここでオーディエンスに関する情報を見つけることができます。

GoogleとFacebookの分析。
Googleのキーワードで意図を検索します。
RedditとQuoraに関する世論を探しています。
ユーザーのソーシャルメディアプロファイルの調査。
個人面接の実施。

さて、個人的な面接を行うことは、ほとんどの中小企業にとってやり過ぎかもしれません。顧客調査をこれまで行う必要はありません。最初の4つの方法で、ランディングページをアップグレードできます。

最も重要なことは、オーディエンスのためにそれぞれの特定の着陸を設計することです。価値の高い生涯顧客リードと割引買い物客のために、2つの異なるマーケティングキャンペーンを実施していますか？あなたは同じ着陸を持つことはできません

一貫性

このアドバイスは、「混同しないでください」のように聞こえるかもしれません。まあ、それはそれだけです。ランディングページのデザインとメッセージをソースリンクのデザインとメッセージと一致させる必要があります。

一部のランディングページは検索結果からトラフィックを取得し、一部は有料広告から取得します。後者の場合は、バナー、メッセージ、ランディングページのデザインが揃っていることを確認してください。

大きな違いがある場合、ユーザーはそれが詐欺だと思うかもしれません。しかし、悪意のあるものとして外れることだけがあなたが心配すべきことではありません。ページへのリンクとページ自体の間でメッセージに一貫性がない場合、多くのリードは、探しているものが見つからないため、単にバウンスします。

ミニマリズム

この設計原則は、現代アートを作成するときに役立つだけではありません。また、あらゆるものからランディングページをデザインするのにも非常に便利です。

重要なのは、ランディングページは、訪問者にできるだけ多くの情報を提供することではないということです。変換を合理化することです。ページに追加される要素が少ないほど、優れています。

ページに気を散らすものがないことを確認してください。ユーザーはCTAセクションに直接誘導されます。

このNGOのウェブサイトは最小限です。上の直線は、下にスクロールして詳細を表示する手がかりになります。

ソース：カリフォルニアの呼び出し

しかし、このカリフォルニアのNGOのように、ランディングページで完全に芸術的なミニマリストになる必要はありません。 Shopifyのように、要素の数を最小限に抑えることができます。

ソース：shopify

リードがランディングページでCTAや気晴らしに襲われていない場合、リードはあなたが提供した小さな情報を読み、スクロールし続けます。

フォアグラウンド

この設計原理は非常に単純なので、すでに日常生活で使用しています。ランディングページを学生の教科書として扱います。本のすべての情報は重要ですが、最も重要な部分は見逃しにくい黄色のマーカーで強調表示されています。

背景とフォントの色、フォントのサイズと形状、および空白を使用して、ページ上の最も重要な要素を前景にします。

前景の最も簡単な例は、小見出しを大きくして異なる色を付けることです。

重要なCTAに対照的な色を付けることも一般的な方法です。

注意を引く

新しいリードが広告からページに到達したとき、あなたは彼らの注意を引くための短い時間枠を持っています。一部の情報筋は、時間枠が2.6秒と短いと主張しています。 3秒足らずで見知らぬ人の注意を引くにはどうすればよいですか？ここに4つの提案があります。

動き（私たちはそれに不本意に反応します）または折り目の上の人間の顔を使用します
あなたが前景にした一文であなたの申し出を説明してください
おそらく無料トライアルを提供することにより、関心を刺激する
重要な統計または数値を表示する

このAirbnbのランディングページは、リストから3つのことを行います。

出典：Airbnb

やさしい顔で自動的に注目を集めます。人が次に目にするのは、お金を稼ぐという申し出です。 Airbnbが彼らに毎月の見積もりを示すとき、会社はそのリードの完全な注意を払っています。

UXライティングのためのグリッドとビジュアルコミュニケーション

良いウェブサイトのデザインは多かれ少なかれ均一です。良いピッチはそうではありません。オーディエンスに関するすべての知識を考慮し、ユーザーにコンバージョンを促すメッセージを作成します。あなたが学んだあなたの顧客の社会的要因、苦痛、そして価値観を利用してください。

ただし、製品が優れている理由について1,000語のエッセイを書かないでください。できるだけ簡潔にし、グリッドを使用して、言わなければならないことを構造化します。

Diviを含むすべてのフレームワークとテンプレートにそれがあるので、それはあなたがすでに知っているかもしれない設計原理です。これがShopifyが使用する3列のグリッドです。

ソース：shopify

これがAirbnbのランディングページからの2列のグリッドです。

出典：Airbnb

グリッドは誰もが使用するため少し退屈に見えるかもしれませんが、それはあなたの主張を理解するのに役立つ数少ないものの1つなので、妥協点です。アイコンとテキストを含む単純なグリッドが退屈すぎるように見える場合は、空白と異なる前景でスパイスを加えてください。 Diviを使用すると、外出先でデザインして、グリッドパターンを適切に表示できます。

UXライティングに使用できるもう1つの重要な設計原則は、ビジュアルコミュニケーションです。 UXの記述には、テキストだけが含まれるわけではありません。画像、アニメーション、またはビデオを使用して、製品が顧客のために何ができるかを説明します。

これは、そのカリフォルニアNGOからのミニマルで大胆な例です。

ソース：カリフォルニアの呼び出し

簡単な変換

実店舗を設計する人々は、顧客に食料品の代金を支払うためにフープを飛び越えさせません。また、顧客が購入するために10分の登録プロセスを経ることを要求するべきではありません。実際、ランディングページにあるフォームフィールドが多いほど、取得するコンバージョンは少なくなります。

変換をできるだけ少なくし、行動の呼びかけを前景にして非常に明白にするために、人が行う必要のある動きの数を維持します。ある種の無料トライアルを提供する場合、必要なCTAボタンは1つだけです。結局のところ、このオファーはすでに非常に少ない労力で済みます。

そうでない場合は、ユーザーが今すぐ変換する準備ができていない場合に備えて、2番目のオプションを残してください。選択は、「はい」と「いいえ」の間ではなく、「はい」と「はい」の間である必要がありますが、後で行う必要があります。

バックアップCTAとしてチャットボットを使用することも素晴らしいアイデアです。

人々がデザインとどのように相互作用するかを研究する

これらの原則から始めて、Google UXガイドラインについてさらに学ぶことは、ウェブサイトを変換するための確固たる基盤です。ただし、デザイナーとして卓越したい場合は、ユーザーがデザインしたものとどのように相互作用するかを研究する必要があります。特に、数十万ドルの収益が危機に瀕している場合はそうです。

どうやってそれをしますか？あなたはあなたのクライアントの視点からウェブサイトがどのように見えるかを探求することから始めることができます。

ChromeまたはFirefoxの開発ツールを使用してブラウザウィンドウのサイズを変更し、さまざまなサイズの画面でデザインがどのように変化するかを確認します。あなたのウェブサイトは世界中のさまざまな場所からの顧客をターゲットにしていますか？より良いテストのために、VPNを追加で使用する必要があります。たとえば、Mac、AndroidなどのVPNは多数あります。これにより、顧客を失うことはありません。

また、日本またはニュージーランドからの訪問者の場合、読み込み速度を確認するのにも役立ちます。サーバーが米国のみにある場合、他の国からの訪問者は読み込み時間が長くなる可能性があり、それはあなたが望むことではありません。

最後に、実際の人々があなたのウェブサイトとどのように相互作用するかを見る必要があります。ランディングページの複数のバージョンを設計し、Diviの分割テストツールを使用して、何が最も効果的かを確認します。

さらに詳しい洞察を得るには、Hotjarなどのヒートマップツールを入手して、ユーザーがマウスをクリックしてホバーしている場所を確認します。 CTAが希望する注目を集めていない場合は、改善する必要がある兆候です。

最終的な考え

これらの8つの設計原則は、ランディングページを改善するのに大いに役立ちます。しかし、そのうちの8つを知ったからといって、学習をやめないでください。ランディングページのデザイン原則の詳細を学び、Diviで視差の背景を作成してリードの注意を引く方法を学ぶことで、UIデザインの知識を向上させます。

PureSolution /Shutterstock.com経由の注目の画像