美しいランディングページのヒントと例

ランディングページのトピックに関して何百という気の利いた記事が書かれています。私たちは皆、基本的な事実を知っています - これらはバナー広告や宣伝リンクをクリックした後に訪問者が到達するページであり、ビジネスのためにリードを顧客に変えることによって重要なマーケティングの役割を果たします。ランディングページを自分でデザインすることになると、ハウツードキュメンテーションを経て予想していたよりもはるかに微妙なことが起こるようです。これが、今日、インスピレーションを得るために実際のランディングページの例のコレクションを共有することを選択した理由です。.

あなたがウィキペディアで見つけることができるかなり学術的な分類によると、ランディングページは2つの主要なカテゴリーに分類されます：参照とトランザクションです。それらが参照と呼ばれることになっているならば、ページは訪問者にとって魅力的で関連している両方の情報を表示しなければなりません（テキスト、マルチメディア）。「トランザクション」ランディングページは、即時販売を目指している、または少なくとも強力な販売促進を狙っているページです。.

あなたがおそらく私に賛成するように、すべてのランディングページは両方の基準を満たしています：それらは訪問者に申し出と彼の側からの侮辱的な行動について知らせるものです。そうでなければ、どのランディングページでも行動を起こす必要はありません。?

WWWでランディングページを開く前に明確にする必要があるのは、希望する訪問者の行動の性質です。ニュースレターの申し込みを増やすことがあなたの目標ですか。次に、「今すぐニュースレターに登録する」というメッセージでCTAを設計します。訪問者からの試用購入を目指しますか？そう言いなさい。一般的に言って、基本的なレシピはあなたのランディングページにこの申し出をできるだけ明確にそして魅力的に表現させることです.

リンク先ページを設計するためのヒント

ランディングページをデザインするときに始めるべきいくつかの簡単なヒント：

1. AIDAの原則を使う

これは、促進された製品またはサービスを表示するプラットフォームにリードが到達したときに発生することを望んでいる一連のイベントです。主に、手順は次のとおりです。

意識 - 訪問者から注目を集める
興味 - これは顧客への利点を強調することによって喚起することができます
慾望 - 顧客に彼らが 欲しいです 製品またはサービス
アクション - 購入プロセスを実行する顧客

あまりにも多くの気を散らすことはありません。逃げる

考え方は簡単です。ランディングページにCTAボタン以外のナビゲーションオプションが実質的にない場合、訪問者は強制的に退出します。ナビゲーションを提供していないのであれば、去る方法を見つけることができないとは思わないでください - おそらくブラウザをシャットダウンしてもそうなるでしょう。そしてこれらの訪問者は ではない 戻って.

それはまばたきテストに合格する

通常、ランディングページは最初の3秒間のエントリーで訪問者の注意を引く必要があります。ゲストが点滅していて、自分がページ上で見つけるべきものを明確に見ることができない、または自分が見たものに興味がない場合、彼は空手で跳ね返る可能性が最も高いです。.

誤った期待を抱かないでください。

ランディングページは、元の広告によって提供されたヒントと一致している必要があります。訪問者は、クリックした広告で最初に約束されたものをランディングページで見つける必要があります。.

約束したように、B2BとB2Cのうまく設計された効果的なランディングページを見てみましょう。私達はそれらの長所と避けられない弱点を探ります。下のギャラリーで次のことに注意してください。ビジュアルコミュニケーション、ブランディングと信頼の指標、コンテンツの有効性、行動を促す行動.

ショーケース：美しい着陸ページ

99デザイン

これはデザイナーと学生を対象としたランディングページのバージョンです。 99Designsはまた反対側のためのランディングページを持っている：デザインを必要とするビジネス。これに関しては、それは支持の点で非常に効果的であり（大胆な証言を見よ）そして数字と信頼指標（コミュニティのメンバーの数、彼らが稼いだ金額）で本当に観客の言葉を話す。 1つのCTAボタンの真っ赤な色合いに注意してください - これは通常避けるべきものですが、この特定のケースではロゴの色と一致するので邪魔にはなりません。.

123RF

123RFは、このランディングページで、イメージスライダーと4つの中央ボックスを使用して目的を明確に説明しています。あなたは瞬時にそのサービスが何であるか、そしてあなたがそれをどのように利用できるかを理解しています（検索、申し込み、従量課金、購読の購入）。薄灰色の背景は目立たず、ハイライトをエッセンス、つまり画像に強調します。私が個人的に彼らが改善できると思うのは、ストックフォトグラフィーのカテゴリーのリストです、それは少し詰まっています。そしてクリック可能なボックスにとってCTAはちょっと微妙すぎる.

好意的

このランディングページのデザインが大好きです。各セクションにはコントラスト、優れたスローガンがあり、すべてを読むことを強要することなく多くの情報をもたらします（小さいフォントですべてが可能です）。それはナビゲーションを持っていますが、スクロールすることによって垂直方向のもの、それは跳ねる率をかなり減少させます.

BiznessApps

強力な行動喚起、強調されたスローガン、および印象的な推薦リスト - これはランディングページに適した組み合わせであり、このページにはあります。それは、人々が読むより短い映画を見ることを好むということが知られている事実であるので、それは最小量のテキストを含み、デモビデオを使う。フォームは、彼らが少し改善することができる要素です。通常、あなたが得ることができる前にあなたが最初に与えるべきであるので、訪問者がフォームを提出することと引き換えに無料の御馳走を受け取ることができるならば、そして「メッセージを送る」ボタンは「今あなたの無料のものをゲット！」のように言うことができる

Brusheezy

もう一つの証拠は少ないです。このランディングページは、単一のアイコンと目立つヘッダーで非常にきれいに見えます。上部と下部にある2つの行動を促す呼び出しに注意してください - これは、ページを混雑させずにメッセージを永続的にするための確実な方法です。製品の機能ではなく顧客にとっての利点を強調することは、もう1つの必要なことです。.

ジェイルブレイク

このページは少々混雑しすぎているかもしれませんが、それはアプリのためのランディングページの伝統にあります。ただし、ページをセグメントに分割するという決定により、すべての要素を簡単にナビゲートできます。あなたが探しているかもしれないすべてを見つけることができます：機能、利点、お客様の声そしてあなたが結果に満足していないならば払い戻しの保証さえ。最後のものは、サービスの質について疑問を投げかける可能性があるので、かなり危険です。そして、それを一番下まで配置するのは良い考えでした。

PageLines

ミニマリズムはここで重要な概念です。私は個人的にこのページがすぐにあなたにすべてを教えているのではなく、発見するようにあなたを誘っているのが好きです。しかし、あまり面白くないと思うのは、Andrew Powersが巧みであるだけでなくハンサムであっても、自動的に開始されるビデオです（私は一般的に避ける機能）。また、即時のCTAが存在しないという事実は、Webサイトにとって欠点となる可能性があります。.

ピコ

このランディングページはシンプルでありながら強力です。「大なり」の赤い印は、全体的な外観に対して塩とこしょうです。段落の配置は新聞のレイアウトに似ており、CMSの目的には非常に役立ちます。 CTAボタンは少し弱いですが、右下隅の女性は軽度の気晴らしをしています。彼女の顔にはあまりにも驚きがありますが、ビジネス上の問題について交渉することができるように見えますか。?

靴箱

各セクションの記述行は、記述言語の使用例です。あなたの視線はすぐに最初の行をスキャンしてCTAボタンに到着するので、あなたは一瞬でメッセージを理解します。それでも躊躇している場合は、強力な裏書とともに、支援する証言があります - あなたはForbesとTech Crunchで紹介されている会社を信頼しませんか？私は...するだろう.

SquareSpace

プロ並みのランディングページ、これです。大胆なスローガン、あなたがクリックに抵抗することができないCTAボタンと非常に良い支持、これは成功への組み合わせです。私はまた彼らが彼らのページがどのように見えるかのスクリーンショットとインフォグラフィックのような表示で、彼らの使用の文脈をページの中心に置くのが好きです。ページの3つの要素からなる構造はもう1つの長所です。.

編集者注： この投稿はによって書かれています ローラモイセイ Hongkiat.comのために。 Lauraは、コミュニケーション科学の学士号を取得しており、デザインと執筆に対する情熱を追求しています。彼女は123ContactForm、ユーザーが任意のWebページのための美しいフォームを作成するのを助けるオンラインフォームとアンケートビルダーのために働きます.