ランディングページを改良してみよう:10の具体例

by 町田 龍馬 on 2012年3月1日

リアルな店舗について考えてみよう。

こんなレストランを想像して欲しい。趣味の悪いインテリア、うるさい音楽、だらしのないスタッフ、わかりにくいメニュー、壁には数十年前の「最優秀○○」の賞状、なにより店内がガラガラ、こんな所に入ってしまったらどうするだろうか? 普通の人はすぐに店を出るだろう。

 

ネット上の店舗でも

実は、サイト上でも似たようなことは珍しくない。センスのないデザイン、動画が勝手に始まりミュートできない、 クレジットカード決済なのに信頼できる機関の認証もない、延々と続く入力フォーム、いかにもやらせっぽいレビューなどを見れば、多くの人はすぐにサイトを離れる。

米ブログメディアunbounceは、よくできたランディングページとして10社のサイトを取り上げ、さらに改善できる点を具体的に考察している。以下に重要な点を編集して翻訳したので、ぜひ参考にしてほしい。

 

※古い記事のため参照しているサイトのデザインは全て変わっているのでURLは載せていない

 

1. WebTrends Analytics - 入力フォームのデザインに注目

とても良くできたランディングページだ。入力フォームの配置など非常に参考になる。

このページの良い点

  • コンテンツの区分がわかりやすく、内容も整理されていて見やすい:一番目立つ写真とヘッドラインがマッチしていて、メッセージが明確に伝わる。同社の提供するウェブセミナーがどんなもので、どんなメリットがあるのか簡潔に伝えた上で、フォームへの入力を促している。
  • 入力フォームのデザインが良い:いくつかの必要事項は、矢印のついたタブをクリックして選択するだけで入力できるようになっている。

 

改善のための提案

・ デザインを統一する:特にボタンの色は、入力フォームのヘッダー「See It Now」の背景と同じブルーにした方が良いだろう。今のままでは背景のグレーに沈んでしまい目につきにくい。

・ フォームに入力する目的をはっきりさせる:入力後にクリックする一番下のボタンは、「Submit」(予約する)となっているが、これは「Register for webinar」(ウェビナーに登録する)とした方がわかりやすい。

 

2UPS - 小ウィンドウを活用

外部ページへのリンクが多くてコンバージョン率を下げてしまっているサイトがよく見られる中で、UPSのページは小ウィンドウを上手に活用して、そのような問題を避けている。

 

このページの良い点

  •  「MORE」のリンクはすべて小ウィンドウで表示:小ウィンドウを使うことによって、ユーザーはランディングページにとどまり、次々と他のページを開かずにすむ。結果としてコンバージョン率は上昇する。
  • ビデオの活用:ビデオはコンバージョン率(全体の訪問者のうち、実際の取引に結びつく割合)を上げるのに最適なコンテンツだ。eyeviewdigital.comのレポートでは、コンバージョン率を80%押し上げる効果が見られた。ビデオ制作を手がけるTurn Hereは、ビデオの活用によるコンバージョン率の上昇だけでなく、Google検索の上位に表示される可能性が53倍も高くなるという別のメリットも指摘している。

 

改善のための提案

  • この写真には写っていないが、ページの一番下のリンクは外部のマイクロサイト(ブランド化している商品など、ある情報に特化して展開している別サイト)を開くようになっていた。メインサイトで扱い切れない情報を紹介するためマイクロサイトも役に立つが、やはりすべてを小ウィンドウとして埋め込む方が良いだろう。

3The Future of Marketing - ソーシャル・プルーフの活用

ランディングページで、製品やサービスを利用している第三者の意見や感想を紹介することで、ユーザーの訪問数はかなり変動する筈だ。(悪くなることもあるが…)このような効果を、*ソーシャル・プルーフという。ソーシャル・プルーフの効果は自社のソーシャルフォロワー(TwitterやFacebookなど)の数をみれば、容易に想像がつくだろう。

 

*ソーシャル・プルーフ(Social Proof)…社会的証明。賛同者の声が顧客に信頼性を与え、結果として多くの人に受け入れられるようになるということ。

このサイトの良い点

 

・ ソーシャル・プルーフを最大限に活用:フォローしたり、申し込んだりした一般人を表示するのではなく、マーケティング分野の有名人をずらりと並べている。

・ コンバージョン率をアップさせる有名人の推薦:誰が企画したのかわからなくても、IBMがスポンサーでガイ・カワサキなどの有名人が講演に来るとセミナーがあれば、申し込みたくなる人はたくさんいるはずだ。

・ わかりやすいCall to Actionボタン:スクリーンショットを見るとわかるように、このセミナーが終了していて、セミナー参加ではなく講演の一部を紹介する音声サンプルの申し込みだということが一目瞭然だ。

・ はっきりしたカラー・コントラスト:モノトーンの背景に明るいピンクのCall to Actionボタンはよく目立つ。

・ Call to Actionの繰り返し:ページが縦長でスクロールが必要な場合、Call to Actionを繰り返すことは効果的だ。ページトップにもページの最後にも、ユーザーに申し込みを促すボタンが配置されている。ページの最後までスクロールしたユーザーもそこで申し込みができる。

・ Twitterのシェアボタンを配置:ソーシャルネットワークが普及するにつれ、ネット上の口コミの影響力はますます大きくなっている。Twitterのシェアボタンがあるので、ユーザーの宣伝も期待できる。

・ 申し込み後にも出て来るシェアボタン:申し込みフォームに記入し終えた後にも、Twitterのシェアボタンが配置されている。口コミマーケティングの効果的な活用だ。

 

4. Groupon - シンプルな入力フォーム

グルーポンのランディングページは非常にシンプルでとても良くできている。

このサイトの良い点

 

・ 位置特定サービスによるセグメント化を活用し、ユーザーに合わせて魅力的で目を引く広告(50%-90%オフ)を表示。

・ 上手な色使い。全体の明るい色使いは魅力的で、ユーザーが入力するエリアの白とはっきりしたコントラストを成している。

・ 使いやすい:入力フォームの下にはインジケータ(番号表示)があり、3つのステップのうち何番目にいるかがすぐわかる。

・ シンプルな入力フォーム:例えばフォームのステップ2ではメールアドレスの入力しか求められない。ためらわずに入力できるよう気を配っている。

 

改善のための提案

 

・ グルーポンを知らない人が、50-90%オフというコピーを見ると怪しいと思う可能性がある:入力フォームの背景をカクテルにするよりも、50-90%オフの意味をもっと具体的に説明する方法を考えたが良いだろう。

 

参照:Groupon

 

5. Oprah Magazine - 懸賞で見込み客獲得

アメリカで人気の司会者オプラ・ウィンフリーのメールマガジンの宣伝キャンペーンを取り上げよう。オプラの人気もあり魅力のあるキャンペーン・ページだが、改善の余地がある。

このサイトの良い点

 

・ ユーザーのメリットを強調:魅力的な休暇が当たるという内容で、これに応募する人は大勢いるだろう。インパクトがあるのでページの一番下まで見てもらうのもそれほど難しくはないだろう。

・ 人気のあるオプラ・ウィンフリーのキャラクターをセールスポイントにしている:懸賞に応募することで、オプラのライフスタイルを少し味わってみたいという気持ちにさせている。

・ 懸賞は見込み客獲得に有効:メールマガジンのお試し版を申し込むだけで、キャンペーンに応募できるというのは魅力的。

 

改善のための提案

 

・ プレイバシーポリシーや応募規定などが新しいウィンドウで開く:これはちょっと煩わしい。上に取り上げたUPSのように小ウィンドウで開くようにする方が良いだろう。

・ Call to Actionボタンの説明が不親切:Call to Actionのことばは非常に重要だ。ユーザーがいくらかでもクリックに不安を感じると、こちらの望む結果が得られる可能性は低くなる。Call to Actionボタンには、何が起きるのかを間違いなくはっきり示すべき。このケースでは、1行目に「Enter the contest」(コンテスト参加)、2行目に「Start your subscription」(購読する)としておけば、ユーザーの不安はなくなるだろう。

 

6. Verisign - 信頼性をアピール

Verisignのランディングページはいかにも同社らしく、あらゆる面でセールスポイントである「信頼性」を強調している。

このサイトの良い点

 

・ わかりやすく簡潔:ページのどこをクリックしても、ユーザーの関心を高めて、コンバージョンにつながる興味深い情報が得られる。

・ 明確なメリット:どのCall to Actionも、ビジネスにどんなメリットがあるか非常にはっきりしている。どこをクリックしても、Verisignがどのように顧客の信用を高め、何ができるのかを説明している。

 

改善のための提案

 

・ Call to Actionボタンをもっと目立たせる:ページの本文とボタンの区別がつきにくいので、はっきりしたコントラストをつけてボタンを目立たせる方が効果的だろう。

 

7.Camera+ - カタログを見るような宣伝ページ

iPhoneアプリを宣伝するこのランディングページは、自社製品のメリットをひたすら強調したカタログのような構成になっている。

人によっては、代わり映えしない製品を売り込むためのセールストークのように感じるかもしれない。しかし、このページは間違いなく非常に良くできている

このサイトの良い点

 

・ ページデザインがユーザーの好みにぴったり:このランディングページはアップルユーザーになじみ深いスタイルで構成されている。アプリのターゲットであるiPhoneユーザーの気を引くにはうってつけだ。

・ アプリを使う場面を具体的に紹介:これは非常に重要なコンセプトだ。トップにあるiPhoneのイメージをクリックするとビデオが始まり、このアプリを使うシチュエーションを具体的に映し出す。アプリのクールなイメージを伝えるには最高の方法だ。ページの下では、思わず欲しくなるような機能が次々と紹介される。

・ アプリ購入のボタンをページのトップとボトムに配置:ユーザーがサイト内をしっかり見た後でアクションを起こせるようになっている。

・ 有名人の推薦:有名な写真家でMacの愛好家としても知られるLisa Bettanyと、Masableの創設者Pete Cashmoreの2人は、ユーザーにアプリの価値を納得してもらうのに申し分ない組み合わせ。携帯電話用のアプリを探しているプロのカメラマンにとっても、この2人の推薦は説得力を持つはずだ。

・ アプリの活用例:ページの下にあるフォト・ギャラリーは、このアプリを活用してどれほどの写真が取れるのかを十分に見せてくれる。

・ iPhoneの写真の下にあるレビューは、バックが赤でこのページに来た人の目をまずここに引きつける:一般的にはCall to Actionボタンにこのような目に付くデザインを用いることが多い。だが説得力のあるレビューなど、購入の決断に直接結びつくコンテンツをこのように目立たせるのは効果的。

 

改善のための提案

 

・ 説明文が長い:実際にリンクを辿ってご覧になればわかるが、実はこのサイト、説明文がかなり長い。ぜひ、このページの短いバージョンを作ってA/Bテストをしてみたいところだ。10ページ分もスクロールさせるのではなく、同じ内容をビデオで宣伝してサイトをシンプルにすると効果があると思う

 

8. SEOmoz - 価格一覧表をランディングページに

一見すると独立したランディング専用ページの体裁をとっているが、実際はそうではなく、主要製品の価格表が掲載されている。ランディングページに価格表を掲載し、コンバージョン重視のデザインを採用したわけだ。さらに価格表と並べて、推薦文も掲載されている。このようなアプローチはコンバージョン率向上に役立つだろう。

このサイトの良い点

 

・ 信頼性をアピール:支払いボタンのすぐ横にVerisignのマークを配置している。さらにその下には顧客として世界的なビッグブランドをずらりと並べて、信頼性をアピールしている。

・ 簡潔な見出し

・ 顧客の数をさり気なくアピール:ビッグブランドに採用されているだけでなく、「さらに数千」の顧客がいることを付け加え、製品の信頼性をさらにアピールしている。

・ タイプの異なる読み手にアピール:目立つ副見出しと細かい説明文をうまくミックスして、色々なタイプのユーザーに訴えている。

・ 本物のレビュー:画像のページの下部には、利用者のレビューが載せられている。そこに添えられている写真はソーシャル・プロフィールから取られたもののようだ。氏名と会社名から、実在の人物のレビューであることをすぐに判別できる。

 

改善のための提案

 

・ Call to Actionボタン:「Pro版を試してみる」とあるが、具体的にはヘッドラインの下に赤字で「30日以内返金保証」と書かれている。申し込み完了前にもう一度はっきり表示するべきだろう。

 

9. New York Times - 使用場面を具体的にイメージ

言うまでもなく世界最大の新聞社の一つだが、時代に取り残されないために、かなり力を入れてマーケティングの見直しに取りかかっている。電子版の宣伝ページを分析してみよう。

このサイトの良い点

 

・ 最新のライフスタイルを反映:社会のニーズや時代にあったニュースの読み方をうまく伝えている。例えばMacBook Proの画像やビデオを使って、ユーザーがどんなシチュエーションでニュースを読むのかを具体的にイメージさせている。

・ ビデオが非常に良くできている。ビデオの持つ影響力を如実に感じさせてくれる。

 

改善のための提案

 

・ 9番目に挙げたSEOmozと同じ点だが、「お試し」の条件(この場合2週間無料)は、Call to Actionボタンの横にもう一度はっきり書いて欲しい。

 

 

関連記事

町田 龍馬

著者プロフィール

25歳 起業家。米国向けにFacebook解析ツールを「ZenMetrics」を開発しながら、NetConcierge.jpのインバウンドマーケティングとFANCAM.comの日本進出を支援(http://t.co/DX58UjKS)。過去に倖田來未FANCAMと学研カレンダーアプリの企画/ディレクション、マイクロソフトのコンサル。モットーは「海外経験者や起業家精神を持った人を増やして日本を元気にする」

Leave a Comment