ランディングページのデザイン方法とは

ここに興味深いデータがあります。HubSpotの2012年のマーケティングレポートよると、複数の企業でランディングページの数を10から15に増やしたところ、リードが55%増加したという結果が出ています。

また同レポートで、どのような要素がランディングページへの影響を与えているかと調査をしたところ、ウェブサイトのパフォーマンスの主要要素のひとつはデザインだということがわかりました

ランディングページはインバウンドマーケティング戦略で成功を収めるための基本中の基本、避けては通れない要素です。リード獲得の取り組みにおける要であり、それゆえにキャンペーンやオファー毎にカスタマイズしたランディングページを用意することが重要になります。

せっかくキャンペーンやオファーを用意しても、それらを曖昧なホームページにリンクしたのでは、訪問者が次にすべきアクションが分かりづらく、リード獲得のチャンスを逃してしまいます。

つまり、より多くのランディングページを用意することがリード獲得に役立つわけですが、ここでもうひとつ忘れてはならないのは、ランディングページのパフォーマンスを上げるためには優れたデザインが必要であるということです。

コンバージョン率を高めるランディングページ作成のノウハウをまとめた無料ガイドはこちらからダウンロードできます。

そうは言っても、優れたデザインというのは簡単に作れるものではありません。デザイナーでもなければなおさらです。そこで今回は、ランディングページのデザインを改良するためのコツをご紹介しましょう。

皆さんが秀逸なデザインのランディングページを作成しコンバージョン率を増加できるよう、デザイン面でのベストプラクティスをまとめてみました。

また、LIGさんの「LPでコンバージョンを高めるために実践したい基礎テクニックまとめ【実例解説付き】」でもわかりやすく解説されています。

訪問者に優しいランディングページをデザインする方法

優れたランディングページを作るためのコツをまとめたHubSpotのインフォグラフィック

コンバージョン率を高めるランディングページデザイン:7つのベストプラクティス

1)ずばり要点を伝える

ご存知のとおり、人間の集中力というのはそう長く続きません。ランディングページを作る際には、このことを念頭において作成しましょう。オンラインのオーディエンスがページに書かれている情報をすべて読むことは稀です。むしろ、画面を視覚的に一瞥しただけで求めている情報がないか「探し」ています。

ですからランディングページを作成する際には、要点を簡潔に伝えることが大切になります。ランディングページにたどり着いた人は、理由があってそのページに来ているわけですから、その理由に明確に簡潔に対処しましょう。

あなたのオファーの価値と、それがどのように彼らのニーズや関心を満たし問題を解決するのかを強調するのです。明確なヘッダーやサブヘッダーを使う、オファーから得られる利点がすぐに分かるよう箇条書きにする、太字やイタリック体で重要な部分を強調する、全体に簡潔に留めるなどの工夫をしてください。

2)対比色を使う

メインのcall-to-action(CTA)は、必ずすぐに目につくようにしてください。訪問者にフォームを記入してもらい「送信」ボタンを押してもらうには、それをどこで行えばよいのか分かりやすく伝える必要があります。補色や対比色を使うなどして訪問者の注意を引くようにしましょう。

例えば、以下のランディングページの例を見てください。ページは全体的に青と白の色合いですが、提出ボタンだけはくすんだ明るいピンクになっていて目に飛び込んできます。こうすることで容易に訪問者の注意を引くことに成功しています。

ランディングページの配色の例

3)ロゴで印象付ける

訪問者がコンテンツやオファーをダウンロードする際、あなたのブランドのページからダウンロードしていることを思い出してもらいましょう。すべてのランディングページに戦略的にロゴを配置してください。ロゴをページの焦点にする必要はありませんが、そのランディングページを公開したのがあなたのビジネスであることを認識してもらえるような配置にすることが大切です。

これは特に、ソーシャルメディアや検索など、ブランドの外部ソースからランディングページにたどり着いた訪問者にとって非常に重要です。ロゴの配置場所を決めたら、一貫性を保つためにすべてのランディングページで同じ場所に配置するようにします。インバウンドマーケティングで簡単に成果を出しましょう!

4)過度なビジュアルは逆効果

意匠を凝らしたビジュアルをランディングページに載せるのは素晴らしいアイデアのように思えるかもしれませんが、HubSpotで行ったA/Bテストによると、画像を過度に載せるのはコンバージョンに効果がないことが分かっています。

多くの場合、ランディングページの目的から訪問者の注意をそらしてしまい、コンバージョン率を向上させるどころかランディングページに不協和音を招いてしまいます。

また、グラフィックは魅力的である一方、読み込みの時間を増加させてしまいます。Alberdeen Groupによると、ページの読み込み時間が1秒長くなるごとに閲覧数は11%減少、顧客満足度は16%減少、コンバージョンの損失は7%にものぼるそうです。

ランディングページはシンプルに保ち、注意をそらしてしまうような画像ではなく、コンバージョンの促進に役立つ画像を使うようにしてください。

5)フォーマットを侮るなかれ

整然としたランディングページを作成するにあたり、一番簡単に実行できるベストプラクティスがフォーマットの改善でしょう。これは簡単なわりに大きな効果が期待できるものでもあります。ヘッドライン、画像、キャッチコピー、フォーム等をすっきりとレイアウトし、コンバージョンアクションが完了しやすいビジュアルフレンドリーなユーザーエクスペリエンスを提供することで、オファーの価値を強調し、コンバージョン率を高めることができます。

ここで、もう一つ例を見てみましょう。このテンプレートでは、明確なヘッドラインとサブヘッダー、そしてより詳しい説明を含んだコールアウトボックスが表示されています。説明はやや長めですが(この部分を箇条書きにすればさらに良いフォーマットになるでしょう)、見た目のレイアウトのおかげで分かりやすく理解の容易なページになっています。

ランディングページのレイアウト例

6)ソーシャルプルーフを追加する

ケーススタディーや推薦コメントを掲載するのと同じように、ソーシャルメディアプルーフをランディングページに追加しましょう。これにより、あなたのコンテンツとオファーに第三者からの信頼という価値を付加することになり、コンバージョン率の増加につながりやすくなります。

ランディングページに載せられるようなケーススタディーやお客様の声はありませんか? またTwitterやFacebookやその他のソーシャルネットワークを検索してみてください。

あなたのコンテンツをダウンロードしてポジティブなコメントをしているユーザーのツイートを埋め込んだり、あなたの会社のFacebookページに良いコメントを残してくれている人にサイトで引用しても良いかどうか尋ねたりしてみましょう。

またそのオファーをすでにダウンロードした人数のデータがあれば、それをランディングページで強調するもの良いでしょう(例:2000人がすでにこの電子書籍をダウンロードしています!)。これもソーシャルプルーフの一つです。

7)一貫性を保つ

最後にボーナスヒントです。冒頭でMarketingSherpaの調査について触れましたが、同調査でサイトの全体的なパフォーマンスに最も大きく影響するランディングページの要素は何かを分析したところ、ページのレイアウトが第一位という結果になりました。

これはおそらく、1つのページにレイアウトを大きく変えてしまうようなページ要素があると、サイト全体のナビゲーションが難しくなるためだと思われます。

最大限の結果を出すために、ランディングページの要素に関してA/Bテストを継続的に行っていくことは重要ですが、ランディングページのレイアウトを毎回大幅に変更するのは避けたほうが無難です。

ある程度の一貫性を保つことで、長期的に見て訪問者がナビゲーションしやすくなりますし、毎回新しいレイアウトを理解しなければならない訪問者の戸惑いとコンバージョン率の低下を防ぐことができるからです。

New Call-to-action

 編集メモ:この記事は、2013年4月に投稿した内容に加筆・訂正したものです。Anum Hussainによる元の記事はこちらからご覧いただけます。

元記事発行日: 2015年11月12日、最終更新日: 2019年10月29日

トピック::

ランディングページ