見出しからフッターまでの完璧なランディングページの構造

公開: 2021-01-12

すべてのランディングページは、特定のビルディングブロックで構成されています。 最も説得力のあるページを作成し、漏れのある販売ファネルを持つリスクを冒さないためには、それらすべてを知る必要があります。 基本を学んだら、これらのブロックを試すことができます。 この記事では、優れたランディングページの主な要素を見て、ページのコピーとデザインをレイアウトするためのヒントをいくつか紹介します。

コンテンツ
  1. ランディングページの構造は何ですか?
  2. ランディングページの重要な要素
    1. 見出し
    2. ボディコピー
    3. 画像、アニメーション、またはビデオ
    4. リードフォーム
    5. CTAボタン
    6. カウントダウンタイマー
    7. 社会的証明
    8. 利点
    9. 特徴
    10. よくある質問
    11. フッター
  3. もっと準備はいいですか?

ランディングページの構造は何ですか?

すべてのランディングページは、訪問者に決定を促すことを目的とした一種のポストクリックページです。

あなたはあなたの申し出のすべての利点と特典を説明し、いくつかの望ましい行動を取るようにユーザーを招待します。 目標到達プロセスの非常に重要な段階であるため、ナビゲーションバーや他のページへのリンクなどの気を散らすものがあってはなりません。

しっかりとしたランディングページ構造は、全体像を伝えるのに役立ちます。 それがないと、ページが信頼できる、または説得力がないように見えるため、リードは最終的に跳ね返ります。 訪問者にコンバージョンをもたらしたいことを忘れないでください。それを行うのに十分な理由を訪問者に与えるようにしてください。

ユーザーを夢中にさせる心理的なトリックがあることをご存知ですか? ランディングページのコンバージョンを促進するための秘訣に関する記事をご覧ください。

検討する必要のある主なランディングページ要素は次のとおりです。

  • ユニークなオファー。
  • 魅力的なビジュアルコンテンツ。
  • シャープで簡潔な本文のコピー。
  • あなたの申し出の利点;
  • 特徴;
  • 社会的証明;
  • フォームをリードし、行動を促す明確な呼びかけ。

これらの要素の意味を説明しますが、最初に、あなたのオファーはあなたのランディングページ全体の本質であるべきだとすぐに言いましょう。 比喩的に言えば、それは単なるバニラのアイシングではなく、ケーキ全体です。 ランディングページのいくつかのコンポーネントを使用して提案を伝えることができます。その方法について説明します。

シンプルでありながら強力なランディングページビルダー

Instagramのランディングページ、オンラインストア、またはバイオリンクページを作成し、単一のプラットフォームで電子メール、SMS、またはチャットボットメッセージを介してサブスクライバーにリンクを送信することで宣伝します。

ページを作成

ランディングページの重要な要素

ここでは、前にリストしたよりも多くの要素を見つけることができます。 どうして? まあ、それらのすべてが必須というわけではありません、そしてあなたは最後の発言権を持っています。 たとえば、製品がプレーンで利益率が低い場合は、FAQを完全にスキップすることをお勧めします。 いずれにせよ、これらすべてのブロックをランディングページ構造に含めることをお勧めします。単純で、要点をまっすぐにするだけです。

見出し

すべてのオファーは1つの文に要約されます—あなたのものを取り、それを見出しとして使用してください。 大胆、表現、または簡潔にすることができますが、その背後にある中心的なアイデアを不必要な言葉で薄めないでください。 あなたにできることは、新しい解決策を紹介したり、誰もが直面している厄介な問題を特定したり、迅速な修正を求める人々の欲求を利用したりすることです。 詳細を提供し、主張を裏付けるために、小さな補足コピーを追加します。

これにより、リモートコラボレーションをより利用しやすくするサービスが提供されます。 そして、これは訪問者が自分のページにアクセスしたときに最初に学ぶことです。

landing page structure headline
これにより、簡単な見出しとサポートテキストを使用します

Perspective APIのように、見出しをより感情的にし、ユーザーの問題点にアピールすることができます。

landing page headline example
Perspective APIは、ユーザーが見出しでデジタル空間をより安全にすることを奨励します

デザイナーの観点からは、見出しを主要な焦点の1つにすることが重要です。 美しいタイポグラフィがメッセージの配信とムードの確立に役立つため、エレガントなフォントの組み合わせを使用してください。 見出しとサポートテキストに対照的なフォントサイズ(30pxと15pxなど)を選択します。

ボディコピー

ベストプラクティスは、聴衆の言語を話すことです。 段落を短くします—それぞれ2つまたは3つの文。 番号付きリストと箇条書きを自由に使用して、コピーを簡単に消化できるチャンクに分割してください。 主なルールは、リードが必要な情報を取得するために長い読み取りを通過する必要がないようにすることです。

製品自体についてではなく、製品のプラスの影響についてより多く話すことにより、ランディングページのコピーを利益中心に保ちます。 あなたの特別なソースは何ですか? あなたの製品はどのように誰かの生活を楽にしてくれるのでしょうか? 一言で言えば。 次に例を示します。

landing page copy
Letterは専用の銀行プラットフォームであり、彼らのランディングページのコピーはそれがどのように機能するかを説明しています

タイポグラフィの選択に注意してください。 フォントは魅力的であると同時に読みやすいものでなければなりません。 書体ごとに異なる行間隔と文字間隔を使用します。 本文のコピーに6pxのフォントサイズと薄い灰色のテキストを使用することは避けてください。モックアップではスタイリッシュに見えるかもしれませんが、テキストが読みにくくなります。

画像、アニメーション、またはビデオ

人々を夢見る魅力的なコンテンツを使用します。 関連性のある高品質の画像やアニメーションを使用して、特定の感情を伝えたり、比喩を作成したりできます。 空白を埋めるためだけに画像を使用しないでください。

複雑な製品の場合は、独自の抽象的なイラストを使用できます。

landing page images
Superhiはランディングページに明るい抽象的なグラフィックを使用しています

前に述べたように、高度に技術的な製品を扱っている場合は、比喩的なイラストを追加することも役立ちます。

landing page illustrations
Directusは、カラフルなスライドとボールピットの写真を使用して、データの分布を視覚化します

物理的な商品やオフラインサービスを販売する場合は、商品の写真や本当に幸せな顧客の写真を使用して、気持ちを伝えてください。

landing page structure
マックとプーヤは結婚式の写真を提供し、彼らのランディングページの画像を使用して訪問者を刺激します

すぐにユーザーを引き付けたい場合があり、画像だけでは不十分です。 これは、体験型サービスやテクノロジー企業に特に当てはまります。 彼らはしばしばビデオを使って彼らの申し出を説明したり、前の仕事を紹介したりします:

landing page structure video
Metomicは、ビデオを利用してユーザーと直接話すことを好みます

ステレオタイプのストックフォトを使用することは嫌われていることを忘れないでください。 ビジュアルを思い出深いものにし、信頼性を決して妥協しないことをお勧めします。

リードフォーム

ほとんどの場合、会話を開始してオーディエンスをよりよく理解するために、リードからデータを収集する必要があります。 この貴重な情報は、ユーザーのメールアドレスや役職と同じくらい簡単です。

シンプルで直感的なフォームビルダーを使用して、サブスクリプションフォームを作成できます。

リードフォームを最小限で直感的に保ち、サポートするコピーを追加します。

lead form example
Facultyは、リードフォームを使用して訪問者を顧客に変換するデザインスタジオです。

一部のマーケターは、ランディングページの上部にある折り目の上に配置する必要があると主張しています。 しかし、それは完全にあなた次第です。それを分割テストして、あなたのオファーに何がより効果的かを見つけてください。

CTAボタン

これは通常、折り目の上や適切なランディングページのフッターに表示されるものです。 考えは、あなたはあなたの製品を売り込み、購入の申し出をし、そしてその利点を詳細に説明し、そしてさらに説得力のある行動への呼びかけで終わる必要があります。

一部のユーザーは、すべての機能について読み、オファーの利点を探るのに時間が必要です。

また、一部のユーザーは、ページにアクセスした瞬間から変換する準備ができている可能性があります。このオプションも指定する必要があるため、ページ全体に2つまたは3つのCTAボタンを配置しても問題ありません。

通常、CTAボタンは次のようになります。

landing page structure cta button
Tomorrowは、ユーザーが数分で新しいカードを入手できるようにする銀行システムです。

CTAボタンをデザインするときは、アクティブな動詞と対照的な色を使用してください。 ユーザーの注意を集中させるために、5つ以下の単語を含み、否定的なスペースで囲む必要があります。 「クレジットカード不要」や「返金保証」などのクリックトリガーを追加することを忘れないでください。 そして、もちろん、それにいくつかの裏付けとなるコピーを与えてください。

説得力のあるCTAの作成についてもっと知りたいですか? ウェブサイトやメールでの行動を最適化する方法についてのブログ投稿があります。

カウントダウンタイマー

古いが金であるこのトリックはあなたの申し出に希少性を追加し、人々は大きな取引を逃すことを嫌います。 しかし、昔ながらのカウントダウンタイマーは、詐欺的なことは言うまでもなく、少し疑わしいように見えます。 今では、マーケターが訪問者がページに入った瞬間からカウントダウンする常緑のタイマーを使用していることを多くの人がすでに知っています。 そして、ユーザーの信頼は急落します。

はるかに巧妙なツールを使用して、競合他社を凌駕し、希少性を追加することができます。 たとえば、訪問者に空きスポットがわずかしか残っておらず、迅速に行動する必要があることを示します。

limited time offer
Predesign studioは、緊急性を高めるためにCTAボタンの横に空きスロットの数を表示します

もちろん、ブラックフライデーなど、実際に限定されたオファーがある場合でも、通常のカウントダウンタイマーを使用できます。

効果的な期間限定のオファーを作成して、売り上げを伸ばし、利益を増やす方法を学びます。

社会的証明

ランディングページの構造は重要ですが、それが売り上げの原動力ではありません。 何かに取り組む前に、人々はあなたの製品をすでに使用しているのは誰か、そして彼らの経験は何であったかを知りたがっています。 信頼を得るために、レビュー、紹介文、ビデオなどの社会的証明を使用してください。 理想的には、社会的証明はマーケティングの主張を裏付け、約束を果たしていることを証明する必要があります。

あなたのリードがあなたの製品がすでに解決した問題を見つけることは役に立ちます。 短いフィードバックでも参考になる場合があります。

landing page social proof example
Tailwind CSSは、クライアントからの実際の紹介文を示しています

お客様からの実際の写真や実際の紹介文を使用することの重要性を十分に強調することはできません。 使いすぎで簡単に認識できるストックフォトは、絶対的な信頼のキラーです。 代わりに実際の写真を使用できるかどうかをクライアントに尋ねてください。

利点

あなたの製品はどのような影響を与えますか? このブロックでは、ソリューションがもたらすすべての前向きな変化について説明します。 たとえば、Elementorは、設計者が作業プロセスに関して混乱を秩序に変えるのを支援し、そのランディングページには、ツールの正確な利点が説明されています。

landing page structure
Elementorは、デザイナーがより効率的に作業する方法を示します

箇条書きまたは簡単な段落を使用して、利点をリストします。これにより、わかりやすく読みやすくなります。 ページのこの部分をより魅力的にするために、いくつかのビジュアルも追加します。

特徴

すべてのランディングページ要素の中で、これは最も製品指向です。 最後に、ここで詳細を説明し、製品自体を説明できます。 真にユニークまたは革新的な機能を強調します。 製品またはサービスの特定の品質をすべてリストしてください。

landing page elements
Hypersay Eventsは、ユーザーがすべての機能を利用する方法を説明しています

20の機能と長い説明のリストでユーザーを圧倒しないでください。シンプルで有益なものにしてください。また、よりアクティブな動詞を使用することを忘れないでください。

よくある質問

これは、よくある質問に答えたり、反対意見を解体したり、クライアントの恐れに対応したりできる重要なブロックです。 まず第一に、それはあなたにいくつかのリソースを節約します。 また、人々はあなたが彼らの前向きな経験を気にかけているのを見るので、それは信頼を築きます。

たとえば、Squarespaceは、よくある質問への回答を提供し、パーソナライズされたサポートの使用を提案します。

landing page elements
ランディングページでFAQを使用するSquarespace

FAQは、実際のフィードバックとカスタマーサポートデータに基づいて、新規参入者が最も関連性の高い回答を見つけて、恐れを克服できるようにします。

フッター

クリック後のランディングページのフッターは、リンクが詰め込まれた典型的な重いフッターであってはなりません。 連絡先情報を除いて、サイトマップや関連リンクは必要ありません(すぐにわかります)。 気を散らすものを取り除き、コンバージョン率の高いCTAボタンを追加する必要があります。

landing page footer
ナラティブBIは、ランディングページ全体でCTAを繰り返します

場合によっては、特にオファーがプレミアムまたは複雑な場合、訪問者は最初に会社の専門家に相談したいと思うでしょう。 フッターは、連絡フォームを追加して記入するのに適した場所です。 それらはネットワーキングプラットフォームでもあるため、ソーシャルメディアページへのリンクをいくつか保持できます。

もっと準備はいいですか?

ご覧のとおり、これらのランディングページ要素はすべて、オファーを展開し、ユーザーが最終的にコンバージョンするまでページをガイドするのに役立ちます。 バウンス率が低いということは、ランディングページの構造をマスターしたことを示しています。 次に必要になるのは、リードを育成し、顧客とのつながりを維持するためのツールです。 SendPulseは、その両方とはるかに多くのことを実行できます。自動化された電子メールを送信したり、FacebookやTelegram用のチャットボットを作成したりするのに最適です。 また、当社のサービスを使用して、Webプッシュ通知とSMSをクライアントに送信することもできます。