販売するランディングを作成するための完全なガイド

最高のWebデザインの記事を引き続き紹介します。 本日、効果的なランディングページの作成に関する最近のメディア記事を翻訳しました。 「 I love SP 」による翻訳。

ランディングページは、特定のコンバージョン目標を達成するために特別に作成されたランディングページです。 メインページがランディングページとして機能する場合があります（多くの人は、実際のランディングページにはなり得ないと考えています）。 しかし、多くの場合、特定のマーケティングキャンペーン用に特別なランディングページが作成されます。

コンバージョンの目標には、チェックアウトから無料の情報の注文まで、必要なものを含めることができます。 特定の目標を設定し、市場を理解したら、目標の達成に最も役立つランディングページを作成、テスト、最適化できます。

ランディングページが必要な理由

マーケティング担当者が広告またはPRキャンペーンからサイトのメインページにトラフィックを送信する最大の間違い。 ほとんどの場合、ホームページはこのキャンペーンとは無関係です。 そして、これはあなたの訪問者を混乱させるだけです。

それどころか、ランディングページは広告キャンペーンに直接関連しています。 彼女は言語を繰り返し、同じ画像を使用できます。 そして、訪問者がこのページに着いたら、あなたが望むように正確にそれを指示することができます。 このような体験は、ユーザーにとってより全体的で快適で理解しやすいものです。

ランディングは、通常のホームページでは方法がわからないような方法で訪問者の注意を引き付けて保持するために存在します。 彼らは、訪問者にメインページにたくさんの情報を残すのではなく、あなたが望む情報に正確に注意を引きます。

ターゲットオーディエンスを知りましょう。

ランディングページを作成するために最初に学ぶ必要があるのは、ターゲットユーザーです。 もちろん、これはWebページを作成するために必要です。 しかし、いくつかの特徴があります。 知っておくべきこと：

• ユーザーはどこから来たのですか？ 彼らは広告をクリックしますか？ これはどのような広告ですか？ コンテキスト、バナー、または他の何か？
• または、彼らはPRキャンペーンに付属していますか？ ソーシャルネットワークから？ ニュースですか？ ブログ？ フォーラム？
• 彼らはどんな情報を探していますか？ 彼らは何かを買いたいですか？ 登録しますか？ 詳細情報を取得しますか？ それとも完全に異なるものですか？

これらすべての質問に対する答えがわかったら、設計を目標に合わせて調整することができます。

ランディングテキストの仕組みを理解する

着陸の仕組みには、主に2つのアプローチがあります。

「古い学校」の代表者は、長いランディングページが最適に機能すると考えています。 それらは、ダイレクトメールの時代からの長い複数ページの手紙に相当します。 このようなランディングページを見たことはあります。特別なデザインなしで、ページ上の情報とアクションの呼び出しを無限にスクロールするだけです。 （これらは、白い背景、明るい黄色のハイライト、赤い見出し、そして私たちが長い間知っている行動を促すフレーズを備えた古典的なランディングページです。）

PickEventは、長い着陸の良い例です。



他の人は、短いランディングページは、いくつかのページに分割されて販売ファネルを形成する可能性があり、長いページよりもはるかに優れていると考えています。 それぞれのアプローチには長所と短所があり、それぞれが異なる目的により適しています。

短いランディングページは、行動を促すためにユーザー側で大きな費用や義務を必要とせず、明らかなリスク（ニュースレターや試用版の購読など）を負担しない場合に最適です。 短いランディングページは、インパルスベースの目的にも適しています。 または、会社または製品がすでに有名で、長い説明を必要としない場合。

長いランディングページは、ニーズに基づいた目的で、より高いリスクでより適切に機能します（ユーザーはアクションを完了するためにより多くの自信が必要です）。 新しい製品や複雑な製品にも適しています。 言い換えれば：

より多くの時間、エネルギー、神経、またはお金を費やす必要があるほど、着陸は長くなります 。

長い着陸はより多くの潜在的な質問に応答し、それによって不安を軽減します。 また、より多くの潜在的な顧客を説得して、より多くの情報を得るためにあなたに連絡する必要なく、プロセスをスピードアップし、コストを削減する必要があります。 多くの場合、長い着陸は短い着陸よりも多くのコンバージョンにつながる可能性があります。 これはほんの一例です。CrazyEggはコンバージョンを363％増加させ、メインページを20倍長くしました。

見込み顧客が既に探しているものを知っている場合、逆に短い着陸はコンバージョンを増やすことができます。 約3分の1のページ削減によりコンバージョンが11％増加した別の例を次に示します。

デザイナーとしてテキストを直接書かない場合は、それをする人に指示して、ターゲットオーディエンスに応じて長いテキストまたは短いテキストを書くことができます（特にこの誰かがプロのコピーライターでない場合）。

テキストを断片に分割する

テキストの長さに関係なく、読みやすい（またはスキャンしやすい）ように、テキストを分割することが重要です。

通常、着陸は4つの部分で構成されます。

• 見出し。
• 字幕
• 必須情報（ 知っておく必要がある情報）。
• 追加情報（ 知っていると便利です ）。

短時間の着陸では、これらの部分で十分です。 長い着陸は、追加のパーツに侵入する方が良いです。 これを行うには、リストまたは追加の小見出しを使用できます。

デザイン要素を使用してテキストを分割することもできます。 画像、線、異なるフォーマットの領域などは、コンテンツを分解し、同時により美しく、読みやすくするのに役立ちます。

テキストの分割に関する別のポイント：ページ全体に特定の間隔でアクションへの呼び出しをいくつか追加します。 ユーザーがアクションを実行する準備ができたら、ボタンを見つけるために上下にスクロールする必要はありません。 理想的には、ページのすべてのセクションに行動を促すフレーズを含める必要があります。

目標は1つだけです。

各着陸には1つの目標のみが必要です。 この目標は、情報を要求し、購入し、試用版などにサインアップすることです。

さらに目標がある場合、注意がそれらの間で分割され、効果がぼやけます。 したがって、どの目標が最も重要かを判断し、その目標のみに焦点を合わせてください。 メインの目標に到達した後、確認ページで追加の目標（ニュースレターのサインアップなど）を追加できます。

注目率

ランディングページのアテンションファクターは、コンバージョン目標の数に対してページ上にあるリンクの数に等しくなります（常に1）。 したがって、目標に直接結びつかないページ上のリンクが多いほど、注意率は高くなります。 理想的には、1：1である必要があります。

だからこそ、単にメインページに人を送るのではなく、ランディングページが必要です。 メインページでは、アテンション比を10：1、25：1、または100：1にすることもできます。 これは、あなたの主な目標に加えて、あまりにも多くのものがユーザーの注意を引くのに苦労することを意味します。

覚えてください ：ランディングページには1つの目標のみがあるべきです。 複数の目標がある場合は、複数のランディングページと複数の広告キャンペーンが必要です。

競合他社を探す

ランディングページの作成を開始する前に、競合他社を調べてください。 彼らはどのようなランディングページを使用しますか、長いテキストの束、または短いページ、複数のページにまたがって、販売ファネルの形で？ 彼らは全く着陸しますか？

その後、業界標準との差異を決定できます。 わずかに、またはまったく異なることを行うことができます。

トラフィックはどこから来ますか？

通常、ランディングページへのトラフィックは2つのソースのいずれかから送信されます。 これは、有料広告またはPR /マーケティングキャンペーンです。

広告には以下が含まれます。

• ビデオ広告
• ソーシャルメディア広告
• コンテンツ広告
• バナーなど

PR /マーケティングキャンペーンの結果としてのトラフィックのソースは次のとおりです。

• プレスリリース
• ソーシャルネットワークへの無料投稿、
• ブログの投稿（あなたまたは他の人の）
• ニュースなど

これが広告である場合、サイトにトラフィックを送信する広告メッセージを完全に制御できます。 これがPRキャンペーンのソースの1つである場合、それはより困難です。 この場合、訪問者がすでに持っている情報が分からないため、着陸はより簡単で理解しやすいものにする必要があります。

テキストは一致する必要があります

ユーザーが広告キャンペーンから来ている場合は、ランディングテキストが広告のテキストと一致していることを確認してください。 たとえば、広告で無料試用版を提供している場合、ランディングページでもニュースレターの購読ではなく無料試用版を提供する必要があります。

バナーまたはビデオ広告を使用する場合は、ランディングページがそれらのスタイルと一致していることを確認してください。 キャンペーン全体で同じ配色、写真、その他の要素を使用します。

これが単なるテキスト広告である場合は、その見出しがランディングページの見出しと一致していることを確認してください。

ソーシャルネットワークまたは企業ブログ（または他のブログの有料投稿）からユーザーをサイトに送信する場合も、同じ制御を使用できます。 メッセージがこれらのソースのすべてに一致することを確認してください。

ユーザーがあなたが制御できない他のソースから来ている場合、この場合、着陸の見出しは、彼らがここにいる理由とここで見つけるものを明確に示すことが必要です。 プレスリリースからのメッセージを繰り返してみることもできますが、ソースによって変わる可能性があることに留意してください。

第一印象は最も重要です

リンク先ページの最初の印象は重要です。 悪い場合、訪問者は何かをする前にサイトを離れます。 うまくいけば、すべてが正反対になります。

着陸の良い経験の秘密は非常に簡単です：

• 見出しをクリアします。
• 素敵で思いやりのあるデザイン。
• 関連する視覚要素。
• アクションへの強い呼びかけ。

これらの4つの要素により、訪問者はサイトが何であり、サイトに何が期待できるかをすぐに理解できます。 もちろん、コンテンツも重要な役割を果たしますが、彼らは第一印象の後、それに注意を払います。

たとえば、 Ghostのメインページ。 これは、言及されているすべての要素を含む良い第一印象の良い例です。

行動を促す

着陸の全体的な目的は、ユーザーに特定の行動を促すことです。 したがって、行動を促すフレーズはページ上の最も重要な要素です。 ほとんどの場合、これはボタンであり、場合によってはリンクまたはフォームです。 この1つの要素のみを最適化することにより、コンバージョンを大幅に増やすことができます。 行動を促すにはいくつかの要因が影響します。 このデザイン（ボタン、フォーム、またはリンク）、ページ上の場所、通話のテキスト、および周囲のコンテンツ。

コンバージョンを増やす簡単な方法は、所有代名詞を置き換えることです。 あなたのものまたはあなたのものの代わりに、私のものを使用してください。 多くの研究は、この単純な変更が変換をほぼ倍増できることを示しています。 これにより、行動を促すフレーズがパーソナライズされ、確立された関係が非常に微妙に表現されます。

行動を促すフレーズのボタンの色も、人々の行動に根本的に影響を与えます。 各着陸に最適な色はありません 。 しかし、行動を促すフレーズは対照的であり、ページ上の他のすべてのものとは異なっていなければならないことは確かです。

カラーパレットは主に青または緑で構成されていますか？ ボタンを赤またはオレンジにします。 中間色を使用しますか？ 明るい色は、他のグレーよりもあなたに似合います。

ボールパークは、行動を促すフレーズがどのように際立っており、ページ上の他の要素と対照的であるかを示す良い例です。



赤は「危険」を意味し、ユーザーを停止させると考えられています。 しかし、研究により、状況によっては赤が緑よりも優れていることが示されています。 Performableでは、行動を促すフレーズのボタンの色を緑から赤に変更することで、コンバージョンを21％増やすことができました。 考えられる説明の1つは、ページ全体で緑色が積極的に使用されているため、緑色のボタンは赤色ほど対照的ではなかったという事実にあります。

行動を促すフレーズに関する他の多くのコンテンツは必要ありません。 目立つように十分な空白で区切り、注目を集めます。

行動を促すフレーズを配置する場所も重要な役割を果たします。 ページの長さに応じて、特定の間隔で行動を促すフレーズを表示するのが理想的です。 着陸が短い場合、行動を促すフレーズは1回あれば十分です。 時間が長い場合は、訪問者がすぐにアクションに進むことができるように、アクションを数回呼び出してページに均等に配置する（ または1つを修正する ）価値があります。

時間をかけて行動を促すフレーズをテストし、最適化します。 これにより、コンバージョンを最大化できます。 着陸テストにわずか1週間（または1か月）費やすだけで、キャンペーン全体でまったく異なる結果を得ることができます。

行動を促すもう1つのタイプは、ページ上のフォームです。 ここでも同じ原則が適用されます：色、テキスト、行動を促すコントラスト。 しかし、成功にはもう1つ重要なことがあります。ユーザー側の義務を減らすために、フォームにはできるだけ少ない情報を含める必要があります。

メールアドレスが目標を達成するのに十分な場合は、それだけを求めます。 さらに情報が必要な場合（支払いなど）、フォームを2つの部分に分割するか、次のページに転送して、メインページにボタンのみを残してください。

デザイナーではなくコピーライターが着陸のためのテキストを書くことに従事しているという事実にもかかわらず、タイトルがどうあるべきかを知ることはあなたにとって役に立つでしょう。 着陸のための良い方向は、対象となる観客と彼らが探しているものを考慮に入れるべきです。 見出しで、製品がもたらす主な利点を強調する必要があります。

また、見出しはアクションとダイナミックに焦点を当てる必要があります。 明確で前向きでなければなりません。 負の見出しに集中しないでください。 タイトルは必要な長さでかまいませんが、長すぎません。 最も効果的になるまで減らしてください。

良い例がDropmark Webサイトです。 「 すべてのものを1つのシンプルで視覚的なプライベートな場所に 」という見出しは、サービスの主な利点を伝えると同時に、明確で理解しやすいものです。



ページで使用する画像は、メインメッセージを確認する必要があります。 テキストの認識と一致する必要があります。

人間の顔は（たとえ漫画のキャラクターであっても）ページ上の他の要素よりも注意を引く可能性が高いことに注意してください。 これは、人間の顔が見出しから気を散らすことがあることを意味します。 これは必ずしも悪いことではありません。 ただし、そのような場合は、使用している人の画像がメッセージをサポートしていることをさらに確認する必要があります。

人を撮影することは1つの選択肢ですが、他にもあります。 アプリケーションまたはオンラインサービスに着陸する場合は、スクリーンショットを使用します。 彼らの助けを借りて、ユーザーが受け取るものを示すことができます。 同じことが通常の製品にも当てはまります。写真を見せびらかしてください。

主なアイデアは、 画像があなたのメッセージを確認し、潜在的なリスクを減らし、ユーザーが行動を起こすように動機付けることです。

ストック写真と従来型

製品の写真（またはスクリーンショット）を使用する場合、元の写真があります。 より一般的な写真を使用する場合は、ストック画像を使用するかどうかを決定する必要があります。 彼らには長所と短所があります。

• 通常、ストック写真は元の写真よりも安価です。 また、予算では撮影できなかった写真にアクセスできます。
• もちろん、これらの写真に対する独占的な権利はありません。 これは、競合他社が同じまたは類似の画像を使用できることを意味します。
• 通常、元の写真はストック写真よりも高価ですが、完全に管理下にあります。 余裕がある場合は、元の写真を選択することをお勧めします。

ビデオを使用する

製品とコンバージョンの目的に応じて、ランディングページで高品質のビデオを使用することは、コンバージョンを増やすための優れた方法です。 ビデオは、ユーザーがサイトで過ごす時間を増やします。多くのテキストを読む準備ができていない人にメッセージを伝える方が良いかもしれません。 また、ビデオはテキストよりも複雑な製品やサービスに関する情報を伝えることができます。

Grooveは、その申し出を伝えるためにビデオをうまく利用しています。



あなたまたはあなたの従業員を示すビデオは、訪問者間の信頼を高めることもできます。 人々は、サイトではなく他の人々を信頼します。

私がビデオで行うことをお勧めしない唯一のことは、誰かがサイトを訪れたときに自動的にオンにすることです。 この方法で得られるコンバージョンごとに、少なくとも3人のユーザーがそれを嫌い、サイトを離れます。

スクリーンキャストを録画する場合は、ビデオの準備ができたら音声を追加します。 これにより、一度に2つのことに集中する必要がないため、レコーディングがよりプロフェッショナルになります。

動画を使用するもう1つの方法は、行動を促すフレーズの背景として動画を配置することです。 これがうまくいけば、製品について話している間、行動を促すフレーズに注意を引くことができます。 この使用の優れた例は、 Dragdis Webサイトで見つけることができます。



動画はランディングページに追加するのに適していますが、使用する必要はありません。 ビデオなしでプロフェッショナルで効果的な着陸を作成できます。 しかし、場合によっては、ビデオは非常に便利です。

社会的証拠

社会的承認は大きな動機です。 他の人があなたの製品やサービスを使用していることを知ることは、最も優柔不断な人を納得させるのに役立ちます。

そのため、ページにユーザーレビューを含める方が良いのです。 ただし、メインコンテンツとは別にしてください。 行動を促すフレーズの近くのフィードバックは、さらに説得力があります。

レビューがない場合は、他にどのように社会的承認を実証できるかを検討してください。 これは、ページのいいね！または再投稿（アクティビティの範囲に応じて、数百から数千）になります。

A / Bテスト

A / Bテストは、ページのパフォーマンスを大幅に向上させるのに役立ちます。 コンバージョンは多くの要因に影響されるため、テストを行わないと、実際に機能するものとそうでないものを理解できません。

理想的には、一度に1つのアイテムのみをチェックする必要があります。 たとえば、2つの異なるヘッダー、ボタンの2つの異なる色、または2つのレイアウトをテストできます。 ただし、3つすべてを一度にテストしないでください。

A / Bテストが役立ついくつかのケースを次に示します。

• フォームはどこにありますか？
• テキストの長さ
• 見出し
• 字幕
• 行動を促すボタンの色
• アクションボタンテキストの呼び出し
• 行動を促すフレーズのテキスト
• ページごとの画像
• ページの配色

最終的なオプションを決定する前に、これらの各要素が個々に変換にどのように影響するかをテストしてください。

重要な情報の分析を設定する

この段階では、テスト結果だけでなく、長期的なページの全体的なパフォーマンスも監視するために、最も重要な情報の分析を確立する必要があります。

追跡する指標：

• 現地時間
• 総コンバージョン
• 直帰率

ランディングページを販売目標到達プロセスとして使用する場合、最終的にそのページを閲覧したユーザーの数と残りのページを追跡します。

より効果的なランディングページを作成するためのツール

ランディングページをすばやく簡単に作成、テスト、最適化するために使用できるツールが多数あるため、ゼロから始めることはできません。

バウンス解除

Unbounceは、コードを記述することなく、ランディングページを作成、公開、およびA / Bテストするためのツールを提供します。 料金プランの費用は月額49ドルから始まり、30日間の無料トライアルが含まれています。



変換する

Convertは、A / Bテストアプリケーションです。 テストは、ビジュアルエディターを使用して作成でき、HTMLおよびCSSにアクセスできます。 サイトでテストを使用するには、小さなコードを挿入する必要があります。 このアプリケーションは、Google Analyticsとシームレスに統合されます。 価格は月額125ドルからで、15日間の試用版があります。



最適化

Optimizelyは、簡単なインストールで最適化ツールを提供します。 その助けを借りて、ランディングページを特定のユーザーごとに最適化することができます。これにより、コンバージョンが増加します。 また、無料版もあります。



ビジュアルウェブサイトオプティマイザー

Visual Website Optimizerは、ランディングページの最適化とパーソナライズを支援する別のアプリケーションです。 A / Bテスト、個別のURLテスト、多変量テスト、フィードバック、ランディングアナライザー、ヒートマップなどの機能が含まれています。 料金は月額49ドルから始まり、無料の試用版があります。



インスタページ

Instapageを使用すると、設計スキルなしで、数分でレスポンシブランディングページを作成できます。 ページは、多くの一般的なマーケティングツールと統合されます。 WordPressやGoDaddyに投稿することもできます。 彼らは月に何百人もの訪問者がいるサイトのための無料プランを持っています、有料の料金は月29ドルから始まります。



着陸機

Landerは、特に中小企業向けの着陸を支援します。 このアプリケーションには、シンプルなエディター、A / Bテスト機能、Facebookページとの統合があります。 価格は月額22ドルから始まり、30日間無料で試用できます。



ハブスポットのランディングページ

HubSpotランディングページを使用すると、ランディングページを数秒で作成し、頻繁かつ早期にテストできます。 アプリケーションには、ドラッグアンドドロップエディター、スマートフォーム、レスポンシブページ、スマートコンテンツなどがあります。 これはHubSpot Marketingアプリケーションの一部であり、その費用は月額200ドルからです。



Googleアナリティクスの実験

Googleアナリティクスの実験では、ユーザーに基づいてページのさまざまなバリエーションをテストできます。 それらはGoogle Analyticsアカウントにログインします。

ユーザビリティハブ

Usability Hubは、実際の人でデザインやレイアウトをテストできるサイトです。 デザインをダウンロードし、テストの種類（5秒のテスト、クリックテスト、テストの設定、またはナビゲーション）を選択すると、ユーザーに表示され、結果に関する詳細なレポートが表示されます。 ( , ) 99$ .

10

Basecamp

Basecamp . , . .



ベンチマーク

Benchmark — . , , . (« ») .



Manpacks

Manpacks , . .



WebDAM

WebDAM , , — . , , . , , .



Shopify

Shopify — . . , , .



Invision

Invision , .



Stripe

Stripe , , . , , .



Evernote

Evernote Work Chat : « Work Chat» , . .



SuperTasker

SuperTasker , , . , .



Acorns

Acorns , . , .

, , . , .

, , , .

— Flow . , . (Pricing, Features, Blog Log In) 1:1.

, . .

1. .
2. , .
3. . .
4. . , 1:1.
5. . , .
6. , .
7. , , .
8. A/B !
9. , .

適切に着陸すると、コンバージョンが指数関数的に増加します。このようなランディングページを作成するスキルは、特にクライアントのビジネスに大きな影響を与える場合、デザイナーとして役立ちます。

ランディングページの設計は、他のページほど複雑ではありませんが、このためには追加情報が必要であり、ベストプラクティスを知っている必要があります。