ランディングページの目的とはずばり、Webサイトの訪問者を購買プロセスの次の段階へコンバートさせることです。いたってシンプルに聞こえますが、効果的なランディングページを作成するには、綿密に計画を立て、データ分析やA/Bテストなどを繰り返す必要があるなど、決して簡単ではありません。
困ったら、まずは素晴らしいランディングページをできるだけ多く見ることをお勧めします。業種が違っていても、またコンバージョンの段階が同じでなくてもかまいません。ランディングページに「正」も「誤」もないのですから、さまざまなアイディアを見て何かを感じることが、効果的なランディングページの作成に必ず役に立ちます。
本稿では、１１の優れたランディングページをお見せします。
今回ご紹介するランディングページに関して分析データを入手できないため、訪問者、コンタクト、リード、カスタマーのコンバージョンに実際どの程度の効果があったのかを皆さんにご説明できません。
しかし、ベストプラクティスを実践しながら、一方で斬新な試みも取り入れた素晴らしい例をご紹介しますので参考にしてください。
さらに多くのランディングページのアイディアをご覧になりたい方は、「お手本にしたいランディングページデザインの11選」もどうぞ。
お手本にしたい優れたランディングページ11選
１）Lyft
Lyftは米国で急速に普及しているライドシェアサービスです。このランディングページには「Lyftで手軽にお金を稼ぎたい」と考えるドライバーたちがアクセスします。そこにフォーカスしている点が、このランディングページの素晴らしいところだと思います。
このページには「Apply Now（今すぐ登録）」と書かれたフォームのほかに、都市名と、Lyftで一週間に運転可能な時間を入力するフォームが画面左下にあります。この2つを入力し、「Calculate（計算する）」をクリックすると、画面に金額が表示され、隣に新しい「Apply Now」のCTAが表示されます。
ページの移動はありません。そして、このCTAをクリックすると、「Apply Now」の登録フォームにカーソルが移動する仕組みになっています。
このように、今すぐ登録する方法と、Lyftで得られる金額を見てから登録する方法の2通りを用意することによって、ドライバーとして登録するかどうかまだ少し迷っている人にもうまく対応しています。
２）Muck Rack
このランディングページは完璧です。人目を惹く画像、インタラクティブなデザイン、「THE EASIEST WAY TO FIND & CONTACT JOURNALISTS（ジャーナリストを簡単に検索してコンタクトできます）」というわかりやすいタイトルが目立つ場所に置かれ、ジャーナリストのTwitterアグリゲーターであるMuck Rackのサービス内容がすぐに理解できます。
業界の専門家のメッセージをソーシャルプルーフとして利用している点や、ページの構成が合理的で移動しやすい点も素晴らしいと思います。また、ページの上部に画像が左右2つあり、それぞれ「FIND JOURNALISTS（ジャーナリストを検索）」と「BUILD FREE PORTFOLIO（ポートフォリオを無料で作成）」のCTAを配置している点も見逃せません。
マウスをいずれかのCTAに合わせると、画面がスライドしてフォームが現れます。このようにして、2つのターゲットオーディエンスに対し、別々にコンバージョンを促しています。
３）MuleSoft
MuleSoftのランディングページはデザインがシンプルですが、画像が内容を上手く表しています。「SaaS Providers Handbook」のタイトルが明確ですし、その下のテキストもeBookをダウンロードすることによって得られる価値をわかりやすく示しています。CTAは「Download」の一つだけですが、鮮やかなグリーンを使用して目立つよう工夫されています。
一つだけ改善点を挙げるなら、画面上部にナビゲーションバーを表示しない方が良いと思います。訪問者の気が散って、フォームに入力する前に画面を移動する可能性があるからです。ランディングページのベストプラクティスとして、これを覚えておいてください。
４）Readitfor.me
Readitfor.meはホームページをランディングページとして使用しています。これだと、さまざまなタイプのオーディエンスに対応するのが難しいのですが、Readitfor.meはそれを非常に上手くやっています。
Readitfor.meのサービスをすでに知っていて登録しようとしている人も、まだ全く知らない人も、このページから始めればよいことが訪問者にはっきりとわかるデザインになっています。
アカウントを作成しようと思ってホームページを訪れた人のために、画面で最も目立つ場所にフォームが置かれています。そのすぐ隣にある再生ボタンをクリックすると、上記の「What could you accomplish… ?」に対する答え、つまりReaditfor.meのサービスについて少し詳しく知りたい人のために、数分間の動画が再生されます。
ページの残りの部分は、Readitfor.meをほとんど知らない訪問者に向けて構成され、サービスの4つの特徴を見やすく、また分かりやすく説明しています。また、各セクションの下にCTAがあり、訪問者が特徴を理解したと思ったらすぐにクリックし、スクロールしなくてもページのトップにあるフォームへ戻れるようになっています。
ページの最後にはReaditfor.meのチームプランを利用している知名度の高い企業のロゴを表示しており、ソーシャルプルーフとして申し分ありません。
５）Codecademy
続いて、デザインもコピーもシンプルなCodecademyのランディングページをご紹介します。フォールド（スクロールなしで表示される画面上部の領域）にある画像はコンピュータのディスプレイで、HTMLのブラケットに挟まれたカーソルが実際には点滅しています。右にあるフォームにぴったりの洒落たアイディアです。
フォームはメールアドレス、ユーザー名、パスワードだけを入力する簡単なもので、「I’m not a robot」というユーモアのあるメッセージで確認をしてアカウントを作成できます。FacebookやGoogle Plusのアカウントでもログインでき、登録の手間がさらに省けるようになっています。
アカウントを作成する前にCodecademyについてより詳しく知りたい場合は、フォールドの下に動画のスタートボタンがあり、サービスの概要と利点が利用者のサクセスストーリーをとおして説明されます。これも初めての人には近寄りがたい「コーディング」の印象を和らげるのに一役買っています。
さらに詳しく知りたい人のためには、画面をスクロールすると、利用者の声を紹介するソーシャルプルーフが表示されます。
６）Advanced Data Systems Corporation
このランディングページは見た目が華やかとは言いませんが、評価できるポイントがいくつかあります。タイトルの「Request a Live Demonstration」とサブタイトルの「Schedule your live, personalized demo.」はいずれもダイレクトで分かりやすいです。
また、サイズを大きくしたオレンジ色の文字が、フォームの位置と利用者の声を目立たせています。さらに、CTAのテキストが古典的な「送信」ではなく、「Schedule My Demo」となっているところも良いと思います。
７）Club W
ステキな言葉を短く添えることで、ランディングページの好感度が大幅にアップする場合もあります。コーポレートギフトのランディングページで「This year, give a gift everyone will love.（今年はみんなが喜ぶ贈り物を）」というコピーの下にある「Hint: It's Wine（ヒント： ワイン)」がそれです。人間味が加わり、好感度が増すことで、コンバージョン率にも良い影響がありそうです。
ワインの画像の下に置かれたテキストもやはり素晴らしく、このサービスを利用するメリットが簡潔かつ正確に説明されています。画面の下の方では利用者の声を載せてサービスを紹介し、さらには質問がある人のためにメールアドレスも最後に用意しています。
８）Grove Labs
ステキなコピーの入ったランディングページをもう一つ。フォームのフィールド内に薄く表示された「First and last」や「Probably just your first name（ファーストネームでもいいですよ）」などのマイクロコピーをご覧ください（関連記事はこちら：It's the Little Things : How HubSpot Writes Microcopy）。
個人的なメッセージのようにも見えますよね。Webサイトや商品を開発している人の姿が頭に浮かび、親近感がわきます。Grove Labsは室内で家庭菜園をするための商品を販売していますが、土をイメージさせるカラーパレットがそのイメージにぴったりです。
９）Startup Institute
登録して何が起こるのかも分からないまま個人情報を提供する人はいません。Startup Instituteのランディングページはフォームのすぐ隣にFAQを表示し、この疑問にはっきりと答えています。
登録後の流れが分からずフォームへの入力を戸惑っていた訪問者も、この計らいにはまるで自分の気持ちを見透かされたように感じて、不安が解消されるはずです。
１０）Edupath
Edupathは大学進学のためのサポートを提供しています。そのため、Webサイトの大半は学生をターゲットオーディエンスとしていますが、親をターゲットとするセクションもあります。下のランディングページもその一つで、大学への願書の作成やSAT（大学進学適性試験）の準備をサポートするサービスを、10代の子供を持つ親に向けて宣伝しています。
親が子供の名前、メールアドレス、携帯の電話番号をフォームに入力すると、Edupathのアプリをダウンロードするリンクが子供の方に送られてきます。「学生は親の言うことには逆らえないだろう。
しかもリンクからアプリをインストールするだけならなおさら」と考えたEdupathの賢いストラテジーによって、多くの学生のスマートフォンに親から与えられたこのアプリが入っていることでしょう。
１１）Vonigo
提供するサービスや商品が複雑だと、その特徴や機能をランディングページですべて並べて説明しようとするWebサイトを見かけますが、コピーが分かりにくかったり、画面がごちゃごちゃしたりすると逆効果で、訪問者が嫌になって離れてしまう恐れがあります。
そこを上手にまとめているのがVonigoのランディングページです。複雑な製品をシンプルなコピーとデザインで効果的に紹介しています。画面は落ち着いたカラーパレットでまとめられ、CTA ボタンの鮮やかなオレンジがひときわ目立ちます。読みやすいフォント、白を基調にした画面、シンプルなスクリーンショット。すべてが完璧に調和していて見事です。
素晴らしいランディングページを見つけたことはありませんか？コメントで紹介してください。
編集メモ：この記事は、 2015年8月に投稿した内容に加筆・訂正したものです。Lindsay Kolowichによる元の記事はこちらからご覧いただけます。
