HubSpot Marketing Blog

2017年05月16日

2017年に参考にしたい優れた海外ランディングページ16選

執筆者: | @

website-example

優れたランディングページを作るのは、それほど単純ではありません。

最高のランディングページを作成したければ、さまざまな要素を検討する必要があります。そしてそれらの効果を最大限に高める方法は、ランディングページの目的に応じて変わってきます。

例えば、フォームの長さについて考えてみましょう。これもランディングページにおいて最適化すべき要素の一つです。しかしベストプラクティスを見てみると、短いフォームと長いフォームのどちらも成果を上げています。ただ、何をもって成果とするのかは目的によって異なります。質が低くなる可能性があってもできるだけ多くの顧客情報を収集したい場合もあれば、数が少なくなっても質の高い顧客情報を集めたい場合もあるでしょう。

ですから、ランディングページの効果を高めたければ、まず優れたランディングページにどのような要素があるのかを知りそうした要素を絶妙に使いこなしている実例に学ぶことが役立ちます。しかし驚いたことに、今回私が調査した限りでは、モダンで印象的なランディングページの実例を紹介しているサイトはほとんどありませんでした。そこで今回は、私たちが厳選したランディングページを16ほどをご紹介したいと思います。

重要なご注意:当然ながら、私はこれらのランディングページの統計データにアクセスすることはできません。そのため、それぞれのページがどれほどの訪問者、リード、顧客をコンバージョンできているのかは分かりません。ただ、私がこれまで見てきた数多くのランディングページの中でも、重要要素を組み合わせているページを厳選しました。もちろん、ここで紹介したページがそのまますべての企業に使えるわけではありませんが、そこで使われているテクニックを参考にし、自社にとって何が最も効果的かをテストしてみてください。

秀逸なランディングページデザイン16

1)Wistia

最初にWistiaのランディングページを紹介したいと思います。ページを一目見ただけでアカウントの作成フォームであることが分かるレイアウトで、すっきりとした青色の背景と明るい白色の入力フィールドが良いコントラストになっています。

フォームを短くしページの中央に配置することで、アカウントの作成時に邪魔になったり注意を逸らしたりするものをほぼ完璧に排除しています。その一方で、不安や心配を感じたユーザーのために、スクロールダウンすれば「よくある質問(FAQ)」が読めるように配慮されています。そしてこの2つのセクションを背景の色で区切ることにより、ユーザーが気を逸らすことなくフォームを入力できるようにしています。

wisita-landing-page-example.png

2)Unbounce

Unbounceがこのリストの上位に来るのは不思議ではありません。何と言っても同社は、コンバージョン率の高いランディングページに関する書籍を発行しているのですから。

このランディングページには優れた点がいくつもありますが、特に私が素晴らしいと思う点が、1)関連画像からCTAボタンに向けて表示された上矢印と、2)フォームの下に表示されている詳細ながらも読みやすくまとめられている情報の2つです。

1つ目の矢印は、このページの目的であるフォームに、訪問者の意識を誘導しています。2つ目の詳細情報は、ページのSEO向上に役立っているうえ(検索エンジンがクロールできるコンテンツを増やしているため)、個人情報を入力する前にコンテンツの詳細を知りたいと考える訪問者のニーズに応えています。そしてこれだけのことを実現しつつ、フォームの入力から注意が逸れないレイアウトになっています。

unbounce-landing-page-example.png

3)IMPACT Branding & Design

正直に言いましょう。IMPACTはHubSpot(ハブスポット)のパートナーです。しかし、ここで紹介する理由はそれではありません。IMPACTのランディングページは、これまで長い間デザインのインスピレーションでありつづけてきました。シンプルなレイアウト、大きなヘッドラインコピー、緻密な関連画像、フォームまわりのアウトライン、色使い、目に心地よいフォント。参考にしたい点は数多くあります。

さらにブログの購読用チェックボックスがフォームに含まれている点にも注目してください。こうしたチェックボックスを含めるのは購読者数を増やす素晴らしい方法です。ただ、含める場合はデフォルトではチェックされていない状態にし、ユーザーが自分の意志で購読を選択できるようにしましょう。

そうでなければ、自社のコンテンツリストに質の低い購読者が多数追加されてしまう可能性があります。(質の低い購読者を多数抱えることが、ビジネスにもたらす悪影響についてはこちらのブログをお読みください。)

impact-landing-page-example-2.png

4)WebDAM

WebDAMのランディングページにも優れた機能が多々ありますが、その中でも群を抜いて優れているのがフォームです。各フィールドの先頭に表示されているアイコンを見てみてください。そのフィールドに何を記入すべきかがすぐに分かります。特に秀逸なのが「名(First Name)」と「性(Last Name)」のアイコンです。さらに青色の背景により、後ろにあるヒーロー画像に埋もれることなくフォームが目に入ります。

そして所謂「提出」ボタンはオレンジ色(青色の補色)になっています。ボタンのテキストも単に「提出」とするのではなく、カスタマイズされた説得力のあるコピーと矢印により、フォームを記入することでガイドのダウンロードに進めることがはっきりと分かります。

これらすべてに加え、フォームの下には、詳細情報が簡潔にまとめられており、著名な顧客による「お客様の声」が含まれています。まったく脱帽のランディングページです。

unbounce-landing-page-example.png

5)Bills.com

多くの人が、ランディングページはウェブサイト上の静的ページであると考えていますが、適切なツールを使えば、パーソナライズされたインタラクティブなページにすることも可能です。

Billes.comの例を見てみましょう。まず同社のコンサルティングが役に立つかどうか確認できるよう、フォームに先立ってに3つの質問が表示されます。最初の質問はこれです。「負債金額はおいくらですか?」

bills-dot-com-landing-page-example.png

最初の質問に答えると以下のような質問が2つ表示されます。「支払いが滞っていますか?」

bills-dot-com-landing-page-2.png

そして最後のランディングページで、情報入力フォームが表示されます。

bills-dot-com-landing-page-3.png

何らかのアルゴリズムが使われているのか、使われているとしたらどのようなアルゴリズムなのか、私には分かりませんが、実際に自分で質問に答えているとき、「自分にはコンサルティングを受ける資格がないのではないか」という不安な気持ちになりました。 しかし、コンサルティングを受けられることが分かると、うれしくなり意気揚々とフォームを記入しました。

負債があってこのページを訪れた人の大部分は、私と同じような心理状態になるはずです。ランディングページにフォームを表示する前に、コンサルティングのオファーが一部の人にしか提供されないことを示唆することにより、Bills.comはコンバージョン数を大幅に伸ばしたに違いありません。

6)Trulia

不動産売買を行っているTruliaも、Bills.comと同じようなテクニックをランディングページで使用しています。フォームで最初に聞かれるのは「住所」だけです(「ご住所」と聞かれるより個人情報感が薄れています。入力する内容に変わりはないのですが)。その下に配置されている大きなオレンジ色のボタンは、後ろのヒーロー画像とのコントラストがはっきりしています。さらにボタンのテキストにより、「パーソナライズされた見積もり(Personalized Estimate)」を出してもらえることが分かります。

unbounce-landing-page-example.png

もちろん、住所だけでは不動産の価値を算出するのに十分ではありません。住所を入れただけでは、その物件がどの地域にあるかが分かるだけです。そのため次のページで、寝室やバスルームがいくつあるかなど、物件自体の情報を入力するつくりになっています。

その下には「レポートの送付先(Tell us where to send the report)」というコピーと共に、「情報を提出することで不動産業者から連絡がくることに同意することになる」という免責条項が表示されています。これは、企業が訪問者に最初から価値を提供しつつ、次に何が起きるのかを明確に伝えている優れた一例と言えます。

trulia-landing-page-2.png

7)Basecamp

Unbounceと同様にBasecampも、スクロールすると表示される位置に多くの情報を記載した非常に長くて詳細なランディングページを用意しています。しかし私の目に止まったのは、最上部にあるイラストです。吹き出しには「2016年、新しくなったバージョンです」という情報が含まれています。このイラストがシンプルなページの良いアクセントになっていて、訪問者の目は自然とそこに引きつけられます。

ランディングページ自体をスクロールダウンしてみると、右側のコンテンツと共にフォームが移動するのが変わります。これは、フォームが常に目に入るようにしておく素晴らしいテクニックです。こうすることで、訪問者がページの下の方を読んでいるときにフォームを記入しようと決めた場合にも、スムーズに記入を開始することができます。

basecamp-landing-page-example.png

[ランディングページ全体を見るにはこちらをクリックしてください。]

8)Zendesk

Zendeskの無料トライアル用ランディングページは、コピーもデザインもとてもシンプルです。ページの中で目を引くのは2つのCTAボタンと、卵の絵だけ。卵は今にも孵化しそうで、何かの始まりを予感させます。フォーム自体はシンプルで、アカウントを作成するのに必要なのは、職場のEメールアドレスとパスワードだけです。さらにGoogle Appsを使ってログインすることも可能で、コンバージョンパスを一層短縮しています。

zendesk-landing-page-example.png

9)Webprofits

このあたりで、長めのランディングページについても見てみましょう。ちょっとした工夫をするだけで、長いランディングページも短く感じられるようにすることが可能です。Webprofitのランディングページがその好例です。

最初に、Eメールアドレスを入力するフィールドが中央に表示されています。背景とのコントラストをはっきりさせ、フィールドが目立つようになっています。そして訪問者がEメールアドレスを入力すると、フォームの残りのフィールドが表示される仕組みです。最初から全フィールドを表示しないことで、フォームの記入に取りかかりやすいようにし、コンバージョンを促進しています。

さらに、Webprofitのサービス内容も分かりやすく記載されています。ページの残りの部分では、フォームを入力することで得られるオファーが詳しく説明されており、さらに「今すぐ無料分析を受ける」などのCTAを戦略的に配置して、閲覧者がいつでも画面最上部のフォームに戻れるようにしている点も参考になります。

webprofits-landing-page-example.png

10)Inbound Emotion

ハブスポットのパートナーであるInbound Emotionのランディングページはスペイン語のページですが、言葉が分からなくてもコンバージョン率を高めるテクニックが使われていることが見て取れます。Basecampと同様、スクロールダウンしてもフォームは常に画面右側に表示されたままです。またフォームの記入とページの購入を促す矢印のような役割を担っている手のイラストも秀逸です。

inbound-emotion-1

11)H.BLOOM

H.BLOOMは、非常に美しいランディングページを用意しています。高解像度の写真とふんだんな余白で、目に心地よい仕上がりです。

また、ただ美しいだけでなく、コンバージョンを高める素晴らしい要素もいろいろと備わっています。スクロールしなくても表示される位置に配置されたフォーム。フォーム記入後の流れに関する明確かつ簡潔な説明。そして明るいオレンジ色の「提出」ボタン。1点だけ直すとしたら、「提出」ボタンのテキストを、よりオファーに関連したテキストにすれば完璧です。

hbloom-1

12)Velaro Live Chat

時には、ほんの小さな工夫が大きな違いをもたらします。その好例であるVelaro Live Chatのランディングページを見てみましょう。

関連画像に表示されている小さなPDFのシンボルにより、どのフォーマットでコンテンツをダウンロードできるのかが一目瞭然です。また、サブヘッドラインの前に矢印を表示することで、読んでもらいたい他の重要なコピーに訪問者の視線を誘導しています。IMPACTと同様、ニュースレターの購読チェックボックスもフォームに含めています。これは購読者数を増やす素晴らしいテクニックです。

ただし、デフォルトでチェックせず訪問者にチェックさせるようにしたほうが良いでしょう。これらはどれも非常に小さな、取るに足らないように見える工夫ですが、組み合わせることで、堅実で見事なランディングページデザインを実現しています。

velaro-landing-page-example-1.png

13)カリフォルニア大学デービス校

美しいウェブサイトを作成している短大や大学は少なくありませんが、カリフォルニア大学デービス校の場合、その美しさはランディングページにまで及んでいます。以下は、スパークリングワインの生産に関する無料サンプルレッスンをオファーしているランディングページです。

特に素晴らしいのが、フォームの半透明で青色の背景を、最上部のヒーロー画像にまで重ねて表示している点です。これにより、訪問者の視線は自然とその下のフォームに向かいます。このテクニックを使用しているランディングページはあまり見かけません。明らかな矢印は使わずに、視覚的にフォームへの視線移動を促す優れたテクニックと言えます(「サンプルレッスンを見る」のCTAボタンの部分では矢印が活用されていますが)。

uc-davis-art-of-winemaking-landing-page-example.png

14)Conversion Lab

通常ランディングページに関する記事では、ホームページにフォームを含めているサイトは紹介しないのですが、このウェブサイトは例外です。このサイトはシングルページのサイトで、ナビゲーションメニューをクリックすると別のページではなくホームページの下のほうに移動するつくりになっています。

そしてこのページで、「ランディングページに関するサポートを受ける」をいうCTAボタンをクリックすると、サイトの上にかぶさる形でフォームが表示されます。以下はクリックする前のサイトです。

conversion-lab-landing-page-1.png

そしてCTAボタンをクリックすると、以下のようにフォームが表示されます。

conversion-lab-landing-page-2.png

ページを移動することなくフォームが記入できるというのは素晴らしいデザインです。またこの表示方法なら、ちょっとウェブサイトを覗いてみただけの訪問者にとってフォームが邪魔になることもありません。

15)Industrial Strength Marketing

このページで最初に目につくのが説得力のあるパンチの効いたヘッダー、「ズームさせないで(Don't Make Me Zoom)」です。スマートフォンやタブレットでサイトを閲覧しているときに、ズームしなければならないことは珍しくありません。誰もが経験のある感情に訴えかける強力なコピーです。

しかし私がこのランディングページに興味を引かれたのは、それだけが理由ではありません。非常に戦略的に赤色が使用されている点にも注目してください。フォームの最上部と最下部に赤色を使い、コンバージョンイベントへ視線の移動を促しています。

industrial-strength-marketing-landing-page-example.png

さらにこのサイトは、メタ要素により、モバイルデバイスでも最適に表示されます。多くの訪問者はスマートフォンやタブレットからランディングページにアクセスしますから、こうしたデバイスでうまく表示されなければ、せっかくのコンバージョン候補が離脱してしまうことになりかねません。

Industrial Strength Marketingはこの点をよく心得ており、モバイルデバイスの訪問者用にフォントとフォームのフィールドを十分な大きさで表示し、ズームしなくても読んだり入力したりできるようにしています。

industrial-strength-marketing-mobile-landing-page-1.jpg

industrial-strength-marketing-mobile-landing-page-2.jpg

16)Shopify

この記事の他のランディングページと同様、Shopifyのトライアル用ランディングページもシンプルな構成です。例えばユーザーにフォーカスしたヘッドラインはわずか数語の文ですし、トライアルの詳細と利点の説明も長い段落ではなくシンプルな箇条書きです。トライアルを始めるために入力しなければならないフィールドもいくつかしかありません。このようなシンプルに保つことで、ユーザーは簡単にShopifyのツールを使ってオンライン販売を始めることができます。

さらに、このランディングページはレスポンシブデザインで、どのデバイスでも美しく機能的に表示されます。

webprofits-landing-page-example.png

他にもランディングページのインスピレーションを得たい方は、ハブスポットのランディングページ事例をご覧ください。

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

コンバージョンに効くランディングページをデザインする方法

トピック: ランディングページ

メルマガ登録

1 コメント

申し訳ありません。過去のコメント履歴が削除されてしまいました。何か疑問やご質問がある方はこちららどうぞ。疑問や質問をツイートするにはこちら。

1 コメント
X

全世界で30万人のマーケターが購読中

マーケティングの最新情報をメルマガで配信します