変換するように構築–ランディングページデザインのベストプラクティス

ランディングページとは、訪問者がマーケティングの召喚状をクリックした後にアクセスするページです。 これは、検索広告またはディスプレイ広告、電子メール、ソーシャルメディアの投稿、またはアフィリエイトリンクである可能性があります。

一部の企業は、それらの参照元からホームページにトラフィックを送信します。 それは間違いです。 ランディングページには、参照元が何であれ、それに合わせた明確なオファーなど、いくつかの利点があります。 これにより、単に新しい訪問者をホームページに送り、クリックしたときに提供されたものを見つける方法を彼らが理解することを期待するよりも、コンバージョン率が高くなります。

設計者は、ここに含まれているようなランディングページデザインのベストプラクティスに従うことで、より効果的に変換するランディングページを作成できます。

メリットを強調してください

製品設計者は機能に焦点を合わせたいと思う傾向があります。 消費者はそのメリットについて知りたがっています。 彼らは、それらの機能が自分たちの体験にどのように影響するかを見たいと思っています。 人は300馬力のために車を買わない。 300hpで速く走れるので、彼らはそれを購入します。 そのため、多くの車の広告では、馬力の数値だけでなく、0〜60回の言及があります。

ランディングページでは、これは見出しや箇条書きなどの要素を使用して製品の利点を強調することを意味します。 これは、ユーザーが最初に知りたいことです。この製品は、私の人生やビジネスにどのように役立ちますか？

関連する画像を使用してください

人は視覚的な生き物です。 画像の不足は、ランディングページを表示している人を不安にさせる可能性があります。 良い画像は、消費者と会社の間の信頼感を高めます。

ランディングページに効果的に使用できる画像には多くの種類があります。 製品画像が最も明白な選択です。

ユーザーが実際の人の写真によく反応するにつれて、製品を使用している人の画像はさらに魅力的です。 一方、モデルのストックフォトは、必ずしもユーザーエクスペリエンスに追加されるわけではありません。

ランディングページのデザイナーは、ランディングページにアクセスする人々に感情的な反応を生み出す画像の使用を目指す必要があります。

CTAをテストしてください

おそらく、ランディングページの最も重要な部分は、行動を促すフレーズです。 それらの重要性のために、設計者は、訪問者から最も多くの肯定的な応答を得るように最適化されていることを確認するために、CTAをテストする必要があります。

A / Bテストは、CTAをテストする最も簡単な方法です。 設計者は、CTA自体の違いを除いて、それぞれが同一である2つのランディングページを一定時間訪問者にランダムに表示することができます。 そこから、CTAが目的の結果を得るまで、改良とテストを続けることができます。

設計者は、CTAボタンの色、CTAを囲む言語（およびボタン自体）、ページ上のCTAの配置などをテストすることを検討する必要があります。 （ランディングページの他の部分も、全体的な結果を向上させるためにA / Bテストを行うことができます。）

モバイルフレンドリーにする

モバイルデバイスでWebを閲覧する人の数を考えると、デザイナーがランディングページが小さい画面でどのように表示されるかを見落とすのは間違いです。 モバイルで見栄えのするデザインを作成することもできますが、ランディングページを簡素化して、モバイルでより効果的にすることもできます。

モバイルフレンドリーは、ソーシャルメディアの投稿や広告または電子メールが指すランディングページにとって特に重要です。 2017年には、電子メールユーザーの75％がモバイルデバイスで電子メールをチェックしていると報告しました（そしてその数はそれ以来増加しています）。 また、世界中の42％の人々（インターネットユーザーだけでなく）がモバイルデバイスからソーシャルメディアサイトを使用しています。 さらに、2018年には、ブラックフライデーの売上の40％がスマートフォンまたはタブレットからのものでした。

人々はソーシャルメディアを閲覧したり、スマートフォンでメールを読んだりするだけではありません。 彼らは購入をしたり、サービスにサインアップしたり、その他の方法で企業が望んでいる行動を完了したりします。 市場のこの巨大な割合を見落としているデザイナーは、せいぜい近視眼的です。

参照元と一致させてください

誰かが電子メールの広告またはリンクをクリックするとき、彼らが最終的に到達するランディングページとの一貫性があることが不可欠です。 これは、参照元が何であるかに応じて、いくつかの異なる方法で実行できます。

たとえば、参照元が検索広告の場合、広告とユーザーが最終的に表示されるランディングページの間で同じ言語を使用すると、一貫性が保たれます。 参照元が電子メールの場合、同様の画像と配色を使用すると、訪問者が必要とする一貫性を保つことができます。

ランディングページをデザインするとき、デザイナーは、少なくともいくつかの方法で一致することを確認するために、参照元が何であるかを知っている必要があります。

社会的証明を含める

購入を検討している商品が他のお客様を喜ばせていることを知りたがっています。 社会的証明は、その安心感を提供するための最良の方法の1つです。

社会的証明を提供する方法はいくつかあります。 1つは、ランディングページに目立つように証言やレビューを含めることです。 別の方法は、製品に関するソーシャルメディアの会話を含めることです。 ただし、すべてのソーシャルメンションを自動的に表示すると、良い点と悪い点の両方が表示される可能性があるため、設計者はこれを行う際に注意する必要があります。

ランディングページに複数の仕事をさせないでください

ランディングページには1つのジョブのみが必要であり、これは設計前に決定する必要があります。 訪問者に何かを購入するように求めるだけでなく、ニュースレターにサインアップするランディングページは、その訪問者の注意を分割しています。 これにより、彼らが最も望ましい行動を取る可能性が低くなります。

設計者は、召喚状とは何かを検討し、ランディングページで他のアクションが促されないようにする必要があります。 他のナビゲーション要素のようなものでさえ、訪問者の注意を引き、彼らが望ましい行動を完了するのを妨げる可能性があります。

必要以上の情報を求めないでください

あまりにも多くの情報を求めることは、訪問者をランディングページから跳ね返らせるための迅速な方法です。 それでも、名前やメールアドレスだけでなく、電話番号、会社名、役職などを尋ねるフォームが表示されたランディングページを見るのはよくあることです。

訪問者がその情報を提供することの価値をすぐに理解できない限り、ページからバウンスする可能性が大幅に高まります。 ランディングページのバウンス率を下げるには、デザイナーはオファーを完了するために最低限の情報のみを要求する必要があります。

ランディングページフォームに共通するもう1つの重要なユーザビリティの問題は、モバイルデバイス用に最適化されていない場合です。 フォームフィールドは、各フィールドに適切なキーボードレイアウトを促す方法でコーディングする必要があります。

これは、たとえば、ユーザーが自分の電子メールアドレスを入力しているときに、キーボードのメイン画面に「@」記号が表示されることを意味します。 または、電話番号が要求されると、キーボードは数値入力に切り替わります。 この小さな詳細により、モバイルデバイスのUXが大幅に向上します。

ナビゲーションバーを含めないでください

ナビゲーションバーを含めないことは、単一目的のランディングページのアイデアに直接結びついています。 ナビゲーションはランディングページ上で視覚的に乱雑であり、ユーザーが目的のアクションを完了せずにサイトの別のページをクリックする可能性があります。

ナビゲーションバーを削除すると、訪問者の作業を継続できます。 デザイナーが訪問者により多くの情報を提供することに関心がある場合は、ランディングページ自体、またはページのさらに下のリンクに、できれば最初の召喚状の後に含める必要があります。

サインアップまたは購入する準備ができているユーザーに他のオプションを提供して気を散らすことには意味がありません。 それにもかかわらず、多くのランディングページには追加のナビゲーションオプションが含まれています。

ページを乱雑にしないでください

ランディングページには、そのページにランディングした人が目的のタスクを完了するために必要な情報のみを含める必要があります。 訪問者の側でより多くの投資が必要であり、ほとんどの場合、より多くの情報が必要になります。

たとえば、支払い情報を要求しない無料の試用版は、かなりリスクの低いオファーであり、提示するのにそれほど多くの情報を必要としません。

ただし、ユーザーに購入を要求しているページでは、通常、ユーザーにより多くの情報を提供する必要があります。 その情報量は、価格が上がるにつれて上がるだけです。

デザイナーは、他のページと同じように、ランディングページを作成する際に優れたデザイン原則に従う必要があります。 問題のブランドに適合する限り、ミニマリストでシンプルなデザインが一般的に好まれます。 コンテンツの周りの空白は、ユーザーが圧倒されるのを防ぎ、重要なことに集中できるようにします。

確立されたパターンから逸脱しないでください

ランディングページに関しては、人々は一定の期待を抱いています。 彼らはメリットについて知りたい、明確な価値提案を望んでいる、そして簡単に完了できる召喚状を求めている。

設計者が確立されたランディングページパターンから大きく外れると、ユーザーを遠ざけ、目前のタスクの完了を妨げるリスクがあります。 実験計画法は素晴らしいですが、他の種類のページやWebサイトに適していることがよくあります。

ジェネリックにならないでください

確立されたパターンに固執することは良い考えですが、それはランディングページが一般的である必要があるという意味ではありません。 デザイナーは、ランディングページに追加の詳細やデザイン要素を含めることで、ユーザーエクスペリエンスを向上させ、ユーザーの注意を引き付け、製品の価値を高める方法を検討する必要があります。

これには、ビデオコンテンツ、アニメーション、スライドショー、またはその他の多くのデザイン要素が含まれる可能性があります。 ある製品やサービスに適切なものが、必ずしも別の製品やサービスで機能するとは限りません。 デザイナーは、ランディングページで型にはまらないコンテンツを自由に試してみる必要がありますが、訪問者を遠ざけないように、従来の方法に対してA/Bテストを行う準備をしてください。

結論

ランディングページは、オンラインマーケティングキャンペーンの重要な要素です。 それらの唯一の目的は、訪問者の気を散らすことなくコンバージョンを促進するのに役立ちます。

ランディングページのベストプラクティスに従うデザイナーは、競合他社よりもコンバージョン率の高いページを作成することで、提供するブランドにより多くの価値を生み出すことができます。 ランディングページをシンプルに保ち、CTAに焦点を合わせ、フォームを短くするなど、すでに述べたガイドラインにより、ランディングページのパフォーマンスが向上すると同時に、UXも向上します。

•••

Toptal Designブログでさらに読む：

• 効果的なランディングページをデザインする方法
• これらのランディングページのインスピレーションで訪問者を変換する
• 美学と知覚–ユーザーエクスペリエンス画像へのアプローチ方法
• デザインの原則とその重要性
• デザイナーのための効果的なコミュニケーション戦略