クリック後のランディングページデザインのインスピレーションを得るための12のテクニック

公開: 2017-07-14

クリック後のランディングページのデザインは重要です。これらのページはデジタルストアフロントであり、商品やサービスの宣伝と販売に不可欠だからです。 正しく最適化すると、ページのコンバージョン率を大幅に向上させることができます。 それらはビジネスの全体的な成功にとって重要であるため、プロフェッショナルでコンバージョン率の高いクリック後のランディングページを作成することは、マーケティング戦略に不可欠です。

アプリのクリック後のランディングページ、製品のクリック後のランディングページ、モバイルのクリック後のランディングページ、またはその他のインスピレーションを探しているかどうか。 クリック後のランディングページのデザインのインスピレーションはたくさんあります。

Instapageには、クリック後のランディングページの例に特化したブログカテゴリ全体があります。 私たちはこのトピックについて頻繁に調査および執筆し、世界最大のブランドのいくつかからインスピレーションを得て視聴者に提供しています。 Microsoft、Lyft、Marketo、Constant Contact、Oracle、Facebook、MailChimp、HubSpotを含みます。

この記事では、クリック後のランディングページをいくつか紹介し、ページを作成する際のインスピレーションを提供するために、いくつかの異なるデザイン手法に焦点を当てます。 それぞれの例について、ページがうまく機能することと、より良い結果を生成するためにA / Bテストを行うことができることについて説明します。

クリック後のランディングページはデジタルストアフロントであり、商品やサービスを宣伝するために不可欠です。

クリックしてツイート

クリック後のランディングページのデザインのインスピレーション

説得力のあるヒーロー画像

人間は通常、テキストよりも最大60,000倍高速に画像を処理します。 画像をページで正しく使用すると、訪問者はオファーを変換するのに十分な時間、ページを利用するようになります。 訪問者があなたのオファーを引き換えたときに何が得られるかを伝えるのをやめて、代わりに彼らに見せ始める時が来ました。 ヒーローショットは、見込み客がオファーのメリットを体験するのがどのようなものかを視覚化するのに役立ちます。

TaskEasyはこれを理解しており、ページ上のヒーロー画像を大いに活用しています。 訪問者がページにアクセスするとすぐに、TaskEasyを雇った場合に芝生がどのように見えるかを垣間見ることができます。

クリック後のランディングページのデザインのインスピレーションヒーローイメージ

ページがうまくいくこと。

  • CTAボタンの色は、[お問い合わせ]ボタンを除いて、ページの他の場所では使用されていないため、際立っています。
  • CTAボタンのコピーは一人称を使用しているため、見込み客はオファーに個人的につながっていると感じることができます。
  • 方向性の手がかり(CTAボタンの矢印とページを下向きの矢印)は、訪問者が次に注意を向けるべき場所を示します。
  • 図像学は、TaskEasyを採用することの機能と利点に注意を引くのに役立ちます。
  • 信頼のシグナルと社会的証拠(セキュリティバッジ、賞のシール、Facebookのようなカウンター)により、見込み客は快適で安全であり、TaskEasyを雇うことを余儀なくされる可能性があります。
  • お問い合わせスライドアウトフォームを使用すると、訪問者は簡単に会社に連絡してサービスについて問い合わせることができます。

A / Bテストの内容:

  • TaskEasyロゴはハイパーリンクされているため、訪問者はページから簡単に退出できます。
  • ページ上部のプロパティマネージャーのCTAボタンを使用すると、訪問者はこのページから離れます。 別のリードキャプチャページが開きますが、これとは完全に別の独自のキャンペーンが必要です。
  • コピー追加すると、見込み客がTaskEasyを使用する利点をよりよく理解するのに役立ちます。 現在、ページにコピーがないため、訪問者が会社やオファーをよく理解するのが難しい場合があります。
  • フッターナビゲーションは、訪問者が変換せずにページをエスケープする方法が多すぎます。
  • 電話番号はクリックツーコール対応にすることができ、訪問者がTaskEasyに連絡するのがはるかに簡単になります。特に、会社が「電話をかけたいですか? ここにいた!"

箇条書き

人々は、探しているものを見つけるために無限のテキストを読みたくないことがよくあります。 彼らは特定の情報を見つけるためにページをすばやくスキャンしたいと思っています—箇条書きのコピーはこれを可能にします。 箇条書きのコピー(チェックマーク、矢印、図像などを活用)は、訪問者がページをすばやくスキャンして探しているものを見つけることができるため、効果的です。

このYodleの例では、箇条書きのコピー(チェックマーク)を使用して、ソフトウェアの利点を強調しています。 空白のあるページの残りのコピーからも目立ちます。

クリック後のランディングページのデザインのインスピレーション箇条書き

ページがうまくいくこと。

  • Yodleのロゴはホームページにリンクされていないため、訪問者はページから離れてクリックするリスクを冒すことなく、自分が閲覧しているWebページを確認できます。
  • クリックして電話をかける電話番号により、訪問者は会社に簡単に連絡できます。
  • 見出しと小見出しは、訪問者にオファーとは何か、そしてそれがどのように彼らに利益をもたらすかを知らせます。
  • イタリック体のコピーは他のコピーよりも目立ち、訪問者にそれを読ませる。
  • カプセル化されたフォームは注目を集め、訪問者がデモをリクエストするためにどこに行く必要があるかを示します。
  • 「パーソナライズされたデモ」は、オファーが彼らのために特別に提供されているように見込み客に感じさせます。
  • オレンジ色のCTAボタンの色rがページに「ポップ」し、注目を集め、ユーザーがクリックする可能性を高めます。
  • CTAボタンの矢印は方向性の手がかりとして機能し、フォームの背後にあるものへの人々の関心を刺激します。
  • 信頼のシグナル(顧客の声、会社のロゴ、賞の印章)は、見込み客がYodleに対して抱く信頼のレベルを高め、訪問者に個人情報を入力するように説得するのに役立ちます。

A / Bテストの対象:

  • CTAボタンのコピーはパーソナライズされておらず、多くの訪問者にクリックを促すことができない場合があります。 「デモが必要」や「デモのスケジュール」などに変更すると、より良い結果が得られる可能性があります。
  • 顧客とのヘッドショット含めて、証言はそれをより人懐っこく見せ、見込み客への信頼をさらに植え付けます。
  • フッターの細かい印刷は、見込み客を圧倒し、変換を思いとどまらせる可能性があります。

Fパターン

ページをデザインするときは、訪問者がどのようにページを表示する可能性が高いかを考えてください。 そうすれば、それに応じて最も重要な要素を配置できます。 人々は上から下、左から右に読む傾向があるので、Fパターンに従うようにページを設計するのは賢明です。

以下のオラクルのデモのクリック後のランディングページは、明確なFパターンのレイアウトに従います。 重要な各要素は、訪問者がページを表示するときに自然に見るFパターンパスに沿って配置されています。

  1. 視聴者はまず、左上隅にあるコンピューターの画像を見つけます。
  2. その後、彼らの目は水平の茎をたどり、人々が笑っているのを見るでしょう。
  3. ページの左側を下に移動して次の水平ステムに移動すると、訪問者は見出しに注意を向けてから、単一のフォームフィールドに移動します。
  4. 次に、Fパターンを垂直ステムに沿って続け、テキストの段落と箇条書きをスキャンします。
  5. 最後に、彼らの焦点は真っ赤なCTAボタンになります。

andingページデザインのインスピレーションFパターン

ページがうまくいくこと。

  • 笑顔の人はページをより人間味のあるものにし、訪問者をより快適に感じさせる可能性があります。
  • 箇条書きと太字のコピーは、オファーの主な機能に注目を集めます。
  • 1フィールドフォームを使用すると、すばやく簡単に入力できます。
  • 訪問者の視線はフォームとCTAボタンに向けられます。これは、訪問者がそこに焦点を合わせて変換する必要があることを意味します。

A / Bテストの内容:

  • 商品画像はもっと大きくなる可能性があります。 現在、画面上で何かを見るのは難しいです。
  • 見出しは、オファーがどのように彼らに利益をもたらすかについての情報を訪問者に提供しないため、説得力がありません。
  • CTAボタンのコピーが弱い。 「続行」はオファーについて何も言っておらず、クリックするように誘惑していません。
  • 顧客の声のように社会的証明を含めることで、会社とそのオファーの信頼性を高めることができます。
  • フッターナビゲーションリンクは、訪問者の注意をそらし、ページから遠ざけ、コンバージョン率を低下させる可能性があります。

Zパターン

Fパターンと同様に、Zパターンも閲覧者がページをナビゲートするのに役立ち、ページデザインのもう1つの優れたレイアウトオプションになります。

これは、明確なZパターンに従ったBusiness-Software.comの例です。

  1. 訪問者は最初に左上隅に太字の見出しが表示されます。
  2. 上部の水平Zステムに沿って移動すると、赤い「RegistertoDownload」スタンプに到達します。
  3. 斜め下に左下に移動すると、視聴者はレポートの画像に注意を向けます。
  4. 最後に、Zパターンを別の水平ステムで完成させ、ページの最も重要な要素であるCTAボタンに配置します。

クリック後のランディングページのデザインのインスピレーションZ-Pattern

ページがうまくいくこと。

  • 左上のロゴはリンクされていないため、訪問者がすぐに気を散らされてページから離れることはありません。
  • 見出しと小見出しは、このレポートがマーケティングオートメーションベンダーのトップ10を提供し、レポートをダウンロードすることでどのように利益を得ることができるかを訪問者に伝えるのに効果的です。
  • 最小限のコピーで箇条書きを使用すると、視聴者はページをすばやくスキャンして、多くのテキストを読むことなく重要なポイントを学ぶことができます。
  • 「無料」という言葉は2か所で使われています。 白いスペースに囲まれ、非常に注目を集めている赤いスタンプと、太字のフォーマットで画像の真上にあるコピー。
  • レポートのプレビューにより、見込み客はレポートをダウンロードすることを選択した場合に、レポートがどのように表示されるかを垣間見ることができます。
  • 黄色のCTAボタンはページの他の部分とよく対照的であり、より多くの訪問者がボタンをクリックする可能性があります。

A / Bテストの内容:

  • 右下隅にある会社のロゴはホームページにハイパーリンクされており、訪問者はオファーを変換する前にページから離れることができます。
  • 13のフォームフィールドは、マーケティングファネルの認識段階でのオファーに最適です。 購入者の旅の早い段階で非常に多くの情報を求めることは、人々が回心するのを簡単に思いとどまらせる可能性があります。
  • 最も重要な要素の周りの空白を増やします。 画像やCTAボタンなどは、より多くの注目を集め、訪問者にレポートをダウンロードするように促します。
  • 社会的証明追加することで、より多くの見込み客に改宗するよう説得する可能性があります。 それは彼らがBusiness-Software.comで働くという考えについてより快適で興奮していると感じるようになるからです。
  • ページフッターを削除できます。 小さな活字は不要のようで、会社のロゴは出口リンクとして機能し、訪問者をこのページから遠ざけます。

ホワイトスペース

訪問者に注意を集中させるもう1つの方法は、空白を追加することです。 特定の要素の周りに十分な空白を含めることにより、それらの要素はページ上でより目立ちます。

特定の要素への注目を高めることに加えて、空白も役立ちます。

  • 煩雑さを減らす
  • あなたのページを美的に心地よいものにします
  • 読みやすさと理解力を高める
  • ユーザーエクスペリエンスを向上させる

以下のMarcomCentralの例で、リードキャプチャフォームを囲むすべての空白を見てください。 フォームの周囲のスペースは実際には白ではないことに注意してください。 空白は、さまざまなページ要素を分離し、強調表示されている要素と対比できる限り、任意の色にすることができます。 この場合、次の形式になります。

クリック後のランディングページのデザインのインスピレーションホワイトスペース

ページがうまくいくこと。

  • Click-to-Call電話番号は、訪問者にカスタマーサービスに連絡する便利な方法を提供します。
  • 50秒のビデオにより、見込み客はコピーを読まなくても迅速かつ簡単に情報を入手できます。
  • フォームのタイトルと最初のCTAボタンの「無料」は、誰もが無料を愛しているため、非常に説得力のあるコピーです。 パーソナライズされたコピーを追加すると、このページがさらに説得力のあるものになる可能性があります。
  • アンカータグを使用すると、訪問者はクリックするとフォームに直接戻ることができるため、訪問者はフォームを簡単に見つけて入力できます。
  • 社会的証明は、訪問者に信頼と自信を植え付けます。 顧客の声にヘッドショットを含めると、さらに価値が高まります。
  • 「仕組み」セクションの画像により、見込み客は各ステップの説明をよりよく理解し、想像することができます。

A / Bテストの内容:

  • ハイパーリンクされた会社のロゴは、訪問者がオファー全体を見る前にページから離れてしまう可能性があります。
  • 大きくて目立つのに説得力がないので、見出しを変更する必要があります。 それは見込み客に何の利益ももたらさないからです。
  • オレンジはページ全体で複数回使用されているため、オレンジのCTAボタンはそれほど目立ちません。
  • ページの下部にあるソーシャルメディアボタンは、訪問者の注意をそらし、コンバージョンを妨げる可能性があります。

アンカータグ

アンカータグは同じページの別の場所にリンクしているため訪問者はスクロールせずにページの特定の部分にジャンプできます。 アンカーリンクは、訪問者をそれほど労力をかけずに行きたい場所に連れて行くので、全体的なユーザーエクスペリエンスの向上に役立ち、変換プロセスに役立ちます。

PRWebのページには、2つのアンカータグが含まれていました。どちらも「GetStartedNow!」です。 折り目の下のCTAボタン。 クリックすると、訪問者をフォールドの上のリードキャプチャフォームに戻します。

ページがうまくいくこと:

  • 見出しは具体的で、二人称のコピーを使用します。これは、訪問者にオファーをさらに読んで最終的に変換するように説得するのに最適な2つの品質です。
  • フォームカプセル化すると、より注目を集めることができ、フォームを完成させる見込みがあります。
  • フォームのオプトインボックスをオフのままにすると、PRWebが意思決定を行うのではなく、見込み客が自由に意思決定できるようになります。
  • 「方法」セクションと「理由」セクションの画像とフォーマットされたコピーは、PRWebの仕組みと、見込み客がPRWebを選択する理由に関する最も重要な詳細に注意を向けます。

A / Bテストの内容:

  • 終了リンク(会社のロゴ、ソーシャルメディアボタン、およびフッターナビゲーション)はすべて、変換せずにページから人々を遠ざける可能性があります。
  • 箇条書きのコピーはもっと目立つ可能性があります。 インデントしたり、矢印を拡大したりすると、より注意を引くことができます。
  • ガイドの画像が切り取られているため、デザインエラーのように見えます。 クリックも可能ですが、画像を開いても画像全体またはそれ以上ではありません。
  • 7フォームのフィールドは、訪問者を脅迫し、フォームへの入力を思いとどまらせる可能性があります。 特に、彼らはまだ購入者の旅の検討段階にある可能性が高いためです。
  • ページ全体で赤と青が使用されているため、(3つのボタンすべての) CTAボタンの色は目立ちません。
  • CTAボタンのコピー(ここでも、3つのボタンすべて)はあいまいです。 「マーケティングガイドが欲しい!」のようなものです。 より説得力があり、クリック数が増える可能性があります。
  • お客様の声は最適化されていません。 Craig Kasnoffの顔写真や会社名はなく(メディアコンサルタントの後にコンマを付けないでください)、紹介文自体には、見込み客が会社と協力することを奨励するための具体的なことは何も書かれていません。

GIF

クリック後のランディングページ(画像、動画、またはGIFの形式)にメディアを組み込むと、商品やサービスを説明すると同時に、ページをより視覚的に魅力的にするため、コンバージョンを増やすことができます。

GIFは、オファーをよりインタラクティブに説明するのに役立つアニメーション画像です。 そのため、ソフトウェアダッシュボードのスクリーンショットのように静止画像をページに追加するのではなく、GIFを追加して、見込み客がさまざまなアクションを実行する方法を視覚的に示します。

ActiveCampaignは彼らのページでこれを行います:

ページがうまくいくこと。

  • 見出しと小見出しは説得力があります。 見出しは二人称のコピーを使用し、小見出しは見出しをうまく補足し、15万人以上の他のマーケターがActiveCampaignを使用していることを見込み客に知らせます。
  • 「クレジットカードは必要ありません」は、このオファーが完全に無料であることを訪問者に保証します。
  • フォームフィールド2つしかないため、より多くの見込み客がフォームに記入する可能性が高くなります。
  • 顧客の声は社会的証明を追加するのに最適ですが、Twitterのハンドルは、最初に変換せずに訪問者をページから遠ざける可能性があります。
  • スクロールフォームとCTAボタンは、ページのどこにいても表示されるため、訪問者が行動を起こす可能性が高くなります。

A / Bテストの内容:

  • CTAボタンは目立ちません。 色はページ上の残りの青と混ざり合い、コピーは印象的ではありません。
  • CTAボタンの下のコピーには「[作成]をクリックして…」と表示されますが、CTAボタンには[作成]とは表示されません。
  • フッターのナビゲーションリンクは、訪問者をページの目的から簡単にそらす可能性があります。

視覚的な手がかり

クリック後のランディングページのデザインでは、視覚的な手がかりが大きな役割を果たします。 それらは視覚的な階層を維持するのに役立つため、訪問者の関心を維持し、重要な要素の方向に向けます。 一般的に使用される3つの視覚的な手がかりには、矢印、視線、戦略的に配置されたオブジェクトがあり、これらはすべて、コンバージョンの目標に不可欠な要素の方向を指しています。

矢印

矢印は、シンプルでわかりやすく、理解しやすいため、クリック後のランディングページで頻繁に使用されます。 これらはアニメーション化することも静止させることもでき、訪問者をリードキャプチャフォームに誘導するために最も一般的に使用されます。CTAボタンは、この例のBridgelineDigitalのように次のようになります。

クリック後のランディングページのデザインのインスピレーション視覚的な手がかり-矢印

ページがうまくいくこと。

  • コンバージョン率の増加に関する統計を含めると、マーケティングの自動化に対する訪問者の興味をそそる可能性があります。 また、太字のフォーマットはそれに注意を引くのに役立ちます。
  • 「無料」は2つの異なる場所で言及されており、見込み客はこのホワイトペーパーにお金を払う必要がないことを強調しています。
  • 箇条書きのコピーを使用すると、見込み客はテキストのブロックを読むことなく、ホワイトペーパーに何が含まれるかを簡単に見つけることができます。
  • オレンジ色のCTAボタンが目立ち、フォームのタイトルや矢印とうまく調和しています。
  • 会社のロゴはページに信頼の価値を追加し、訪問者に「これらの有名な会社がBridgeline Digitalと提携しているなら、私もそうすべきだ」と思わせます。

A / Bテストの内容:

  • ハイパーリンクされた会社のロゴとフッターのリンクは、訪問者にページから離れる方法を提供し、バウンス率を高める可能性があります。
  • 商品画像の周りの空白を増やすと、より目立つようになります。
  • 「ホワイトペーパーのダウンロード」について説得力のあるものは何もないため、 CTAボタンのコピーを改善する必要があります。 利益志向のコピーや一人称のコピーを追加すると、より多くの見込み客がクリックするようになる可能性があります。

視線

人々は他の人が見ているものを見る傾向があるので、方向の手がかりとして人間の視線を使用することは、クリック後のランディングページで特に効果的です。 たとえば、ページ上の人間の画像が見出しを見ている場合、訪問者の注意は見出しにも引き付けられる可能性があります。 したがって、この手法は、訪問者に希望の場所を見せるために役立ちます。

下のページに、Vistageには、リードキャプチャフォームの方向を見ている女性の画像が含まれていました。 訪問者が彼女を見るとき、彼らは無意識のうちにフォームを見なければならないと感じます:

andingページデザインのインスピレーション視覚的手がかり-視力

ページがうまくいくこと:

  • (プライバシーポリシーを除いて)終了リンクがないため、訪問者はブラウザの「X」をクリックするか、フォームに入力せずにページを離れることができません
  • 対照的な色は視覚的な手がかりとして機能し、ページの最も重要な要素である見出し、女性、CTAボタンに注意を引き付けます。 ページの残りの部分は灰色のトーンであるため、これらの3つのコンポーネントは他の何よりも際立っています。
  • プライバシーポリシー含めることは、訪問者への信頼を植え付けるのに役立ち、訪問者に彼らの情報が会社にとって安全で安全であることを知らせます。

A / Bテストの内容:

  • 顧客の声や会社のバッジなどの社会的証明を追加すると、より多くの訪問者がオファーの対象かどうかを確認するようになります。
  • オファーに関する最小限の情報は、人々が変換するのを妨げる可能性があります。 提供のメリットを強調するために箇条書きまたはテキストの小さなチャンクを追加すると、より良い結果が得られる可能性があります。

オブジェクト

3番目に一般的に使用されるビジュアルキューテクニックは、オブジェクトがページの特定の領域に直接向けられるようにオブジェクトを配置することです。 これを行うと、特定の重要なページ要素に見込み客の注意が集中します。

Lyftは、以下の例で、車両をリードキャプチャフォームに直接、そしてほとんど接触するように配置することでこれを行います。

クリック後のランディングページデザインのインスピレーションビジュアルキュー-オブジェクト

ページがうまくいくこと:

  • 情報を渡すように人々を説得するのに最適なフォームフィールド1つだけです。
  • 同意チェックボックスをオフのままにすると、見込み客は変換プロセスをより制御し、快適に感じることができます。
  • 「あなたがどれだけ作ることができるかを見る」セクションは、見込み客が彼らの情報を入力し、ページを離れることなく「計算」CTAボタンをクリックすることを可能にするので便利です。 毎週の支払い額が計算された後、ボタンは別の「今すぐ適用」ボタンに変わり、変換プロセスを支援します。
  • 「LyftDrivingの仕組み」セクションでは、Lyftの仕組みに関する段階的な情報を提供できます。また、Lyftは水平方向にスクロールするため、ページがコピーで乱雑になることはありません。

A / Bテストの内容:

  • いくつかの終了リンクを使用すると、訪問者はオファーに変換せずに気を散らしてページから離れることができます。
  • 見出しと小見出しは、忙しい背景のために読みにくいです。 それらがより目立つ別の場所でそれらをテストすると、より多くの注目を集め、より良い結果を生み出す可能性があります。
  • CTAボタンのコピーはあいまいです。 「次へ」はオファーについて何も言っておらず、多くの人にクリックを強いることはないでしょう。

視覚的階層

クリック後のランディングページはすべて、特定の視覚的階層(最も重要なものから最も重要でないものへと編成されたコンテンツ)に従う必要があります。 最初に訪問者の注意を引くことを目的とした要素(通常は見出し)はページの上部に配置する必要があります。これは階層の最上位であり、残りのコンテンツは優先度の高いものから低いものへと配信されます。

以下を含むがこれらに限定されない多くの特性が、視覚的な階層を作成する上で役割を果たします。

  • サイズ
  • 色/コントラスト
  • 密度/近接性
  • ホワイトスペース
  • テクスチャ/スタイル

SendGridは、ページ上でこれらのコンポーネントのいくつかを利用します。 彼らが使用しているものと、改善を検討すべきものを見てみましょう。

クリック後のランディングページのデザインのインスピレーションビジュアル階層

ページがうまくいくこと。

  • サイズのバリエーションと太字のフォーマットは、コピーの最も重要な部分に注意を引くのに役立ち、強力な視覚的階層を形成します。
  • 見出しは、 SendGridを使用している3つの有名企業に言及することにより、訪問者にSendGridの使用を強制します。
  • 複数の協力的なCTAボタンは、ページ全体のさまざまな場所でオファーを引き換えるいくつかの機会を見込み客に提供します。
  • 製品画像は、配信されたコンテンツがどのように見えるかのプレビューを示しています。
  • 最小限のコピーで箇条書きにすることで、見込み客は探しているものを見つけるためにテキストの段落を読む必要がなくなります。
  • 顧客の声と会社のバッジは社会的証明として機能し、他の人が成功を収めているため、SendGridを使用する見込み客を説得する可能性があります。 デイブトムバックのヘッドショットを彼の推薦状に追加すると、さらに効果的になります。

A / Bテストの内容:

  • 画像の女性は、見出し/ CTAボタンを見下ろして視覚的な合図を追加し、訪問者にもそのように見えるように促している可能性があります。
  • CTAボタンを拡大して別の色でテストし、より多くの注意を引くことができます。 ページの他の場所に青があるので、できるだけ「ポップ」しません。
  • CTAボタンや見出しなど、一部の要素の周囲の空白を増やすと、要素をより目立たせることができます。
  • 「プランと価格を表示」CTAボタンは、訪問者を別のページに移動させ、このページから注意をそらすため、削除する必要があります

注意を引くCTAボタン

完全に最適化された、注目を集めるCTAボタンは、クリック後のランディングページフレームワークに含める最も重要な要素です。 それは他のすべての要素よりも目立つはずなので、見込み客があなたのオファーを引き換えるためにどこをクリックする必要があるかについて混乱はありません。

WalkMeは、大きくて対照的なCTAボタンを備えた、2段階のオプトインページを作成しました。このボタンは、ページ上で確実に目立ち、訪問者の注意を引き付けます。

クリック後のランディングページのデザインのインスピレーションCTA

ページがうまくいくこと。

  • 背景画像は、訪問者にソフトウェアがどのように見えるかの現実的なプレビューを提供します。
  • CTAボタンは実際にページに表示されます。 大きくて対照的であることに加えて、ユーザーがスクロールを開始すると、ページの上部に再表示されます。
  • 2段階のオプトインフォームでは、ここに情報を入力する必要がないため、煩雑さが軽減され、ユーザーの不安が軽減されます。
  • 箇条書きのコピーを使用すると、見込み客はテキストを読みすぎずにオファーに関する情報を簡単に知ることができます。
  • 社会的証明(顧客の声とスクロールする会社のロゴ)は、見込み客にこの会社と協力することを強いられていると感じさせる可能性があります。

A / Bテストの対象。

  • CTAボタンのコピーをよりパーソナライズされたもの(一人称の書式設定)に変更すると、コンバージョン率が向上する可能性があります。
  • 画像をGIF (折り目の下)に置き換えると、ユーザーはページ上でよりインタラクティブなエクスペリエンスを提供し、製品をよりよく説明するのに役立ちます。
  • 顧客の声にヘッドショット追加すると、信頼性が高まり、効果が高まります。

クリック後のランディングページのデザインテクニックからインスピレーションを得たのはどれですか?

クリック後のランディングページを使用して製品やサービスを宣伝および販売することは、マーケティング戦略の不可欠な部分です。 これは、正しく最適化すると、上記の手法と、デザインのベストプラクティスガイドおよびクリック後のランディングページ最適化ガイドを使用して、コンバージョン率を大幅に向上させることができるためです。

広告のクリックをコンバージョンに変え、すべてのオファーに専用の高速読み込みのポストクリックページを作成します。 今すぐInstapageEnterprise Demoにサインアップして、すべてのオーディエンスにユニークなクリック後のランディングページを提供する方法をご覧ください。