A+クラスのランディングページを作る。一筋縄ではいきません。 

最高級のランディングページに必要な要素はたくさんあります。多くの場合、それらの要素をどのようにすれば「ベスト」なものになるかは、ランディングページが何を目標とするかで違ってきます。

 たとえば入力フォームの長さ。もちろん、ちょうどよいサイズにしたいですが、短いフォームも長いフォームもそれぞれに良さがあることは、経験を積むうちにやがてわかってくるでしょう。多少質が悪くても大量の情報を送信してほしいのか、それとも、数はともかく質の高い送信を期待するのか。どちらを望むかでフォームの長さも変わります。

 これからランディングページを作るという人にとって、よいランディングページとはどのようなもので、どのような要素の使い方が微妙な差を生むのかを見ることは大きな刺激になるはずです。

実在するランディングページを調べて初めてわかったのですが、単なるサインアップ用フォームでしかないものが大半で、センス良く印象的なランディングページを持つサイトはほとんどありません。そこで今回は、これは素晴らしいと感じたランディングページを集めてご紹介します。 

最初にお断りしておきます。ここで紹介するページに関する統計を入手できないため、訪問者、リード、顧客のコンバージョン率については何も言えません。とはいえ、いずれもランディングページの要素を巧みに駆使した好例であることは断言できます。

あたりまえですが、ここで紹介した戦略から得たヒントを自社サイトに取り入れる場合、ご自身でテストする以外にその有効性を確かめる方法はありません。

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

また、こちらのWebページでもランディングページのデザインを紹介されています。

お手本にしたいランディングページデザイン15例

1) Wistia

最初の例は、無料プランを紹介するWistiaのランディングページです。見てのとおり、アカウントを作るための1フィールドのフォームがあり、非常にシンプルなブルーのセクションと真っ白の明るいフィールドが、見事なコントラストを見せています。

フォームフィールドの長さ、そして巧みな配置のおかげで、アカウントを作成することへの抵抗感をほとんど感じさせません。仮に疑念があっても、いつでも画面をスクロールしてFAQに答えを求めることができます。アカウント作成フォームとFAQセクションを区別する色分けが明確で、コンバージョンを目的とするコピーに目が引き寄せられます。 Wistiaのランディングページ例

2) Unbounce

Unbounceがこのリストの上位にランクインしたのは、コンバージョン率の高いランディングページの作り方を本に書いた実績があることを考えれば当然でしょう。このランディングページには感心する点が多々ありますが、特に素晴らしいのは、1) タイトルの部分、およびフォールド(スクロールしないで表示できる画面領域の下端)からフォームに向かって矢印が入っている、2) フォームの下にも詳細な情報が記載されている、この2点に尽きます。

最初に挙げた矢印ですが、これはページの目的がフォーム入力してもらうことになりますので、注意を引き付ける効果があります。実にわかりやすく、それでいて流動性の高いデザインです。そして、2)の詳細情報は、このページにSEOブースト(検索エンジンによってクロールされるコンテンツの増大)を与えると同時に、個人情報を渡す前にコンテンツについてもっと知りたいと思う人の不安を解消する効果もあります。詳細な情報に目を通している間も、フォームへの関心が失われないよう考えられたレイアウトです。

Unbounceのランディングページ例

3)IMPACT

実はIMPACTはHubSpotのパートナーです。ただし、それが理由で紹介するわけではありません。そもそも、IMPACTのランディングページは、この記事を書くきっかけとなったものです。ページのレイアウトは絶妙で、eブックの改訂を知らせる左上のバナーから、ローテーションで表示される推薦文、フォームの周辺に配置された簡潔な説明に至るまで、とにかく素晴らしいの一語です。このような美と機能性を兼ね備えたデザインこそ、ランディングページで目指すべきものです。

IMPACTのランディングページ例 

4) WebDAM

気の効いた機能が満載のWebDAMのランディングページで、ダントツに気に入ったのがフォームです。アイコンを見るだけで何を入力するのか一目瞭然ではないですか。"First Name"(名)や"Last Name"(姓)の隣にあるアイコンを見てください。フォームの背景色はブルーで、背後のかっこいい画像との対比が鮮やかです。

"Submit"(送信)ボタンを見てください。このオレンジ色の背景(ブルーの補色)、訪問者によって内容が変わる、思わず引き込まれるコピー、ガイドをここからダウンロードできることを告げる矢印。まさにお手本だらけです。 

WebDAMのランディングページ例

5) Basecamp

Unbounceと同じく、Basecampのランディングページも広大で深いコンテンツを持ち、大量の情報が下の方にも用意されていますが、特に感心したのは男性キャラクターがフォームを指差していることです。

ややそっけないページに目を奪うアクセントを与えるだけでなく、実際にフォームへ視線を誘導する効果があります。IMPACTのデザインでもそうでしたが、こうした工夫は目を楽しませ、ランディングページの訪問者を次の行動に促すのに効果があります。 

Basecampのランディングページ例

6) Bills.com

ランディングページはウェブサイトにある静的なページだと思われがちですが、ツールの選び方を間違えさえしなければ、インタラクティブでパーソナル化されたページも作成できます。

その好例をBills.comに見ることができます。Bills.comのコンサルティングがあなたの役に立つか確認する2つの質問に答えた後で、初めてフォームが表示されます。どんなアルゴリズムで応答しているのか(そもそもアルゴリズムがあるのか)、そのあたりは不明ですが、とにかく質問に答えながらお断りされないかとドキドキしました。

パスしたとわかった瞬間、大喜びでフォームに入力を始めてしまいました。負債を抱え、このページにやってきた人のほとんどは間違いなくそうするでしょう。選ばれた人にだけオファーが提供されると思わせてからフォームを表示するようにした結果、Bills.comのコンバージョン率はうなぎ昇りに増えたに違いありません。

Bills.comのランディングページ例

7) Contently

Chartbeatの調査データによれば、ほとんどの人はフォールドの周辺やその下にあるコンテンツに目を通したりすることに時間の大半を使います。つまり、フォームをフォールドのあたりに配置するのが効果的ということで、まさにそれをやっているのがContentlyです。

訪問者は2種類のコンテンツページに進むことができますが、フォームの位置は不変です。フォームを画面の下端に配置し、詳細な情報を訪問者が見やすいよう前面に出して置いた点は高く評価できます。

Contentlyのランディングページ例 

8)Webprofits

大きなランディングページも、若干のトリックを使って、小さく感じさせることができます。

その方法を教えてくれるのがWebprofitsのランディングページです。最初にWebサイトのアドレスを入力する目立つフォームフィールドが表示されますが、背景とのコントラストの妙でひときわ目を引きます。ここにアドレスを入力すると、魔法のようにフォームの全体が姿を現します。フォームの全容を最初に見せないことで抵抗感を減らすことに成功しています。 

また、Webprofitsが実際に何をするのかがわかりやすく示されています。ページの残りの部分には、個人情報と引き換えに得られるものについて詳しい説明があります。さらに、Call-To-Action(CTA)が戦略的に配置され、ページの最上部へ誘導してフォームへの入力を促します。

Webprofitsのランディングページ例

9)Inbound Emotion

これはHubSpotのパートナーでスペインのサイトですが、そのコンバージョンの力は賞賛に値します。特に気に入った機能は、フォームが固定され、サイトをスクロールしても常に同じ場所から動かないことです。また、フォームの入力中に長い腕がフィールドを指し示してくれたり、ページを誰かと共有できることを教えてくれるのも、なかなか気がきいています。

Inbound Emotionのランディングページ例 

10)H.BLOOM

ときにはランディングページで立ち止まり、その美しさに感心してしまうことも。解像度の高い写真と白い空間を多用したH.BLOOMのランディングページはまさに目の保養です。

美しいばかりか、コンバージョン要素も優れています。フォールドの上の方に配置されたフォーム、フォーム入力後の手続きをわかりやすく伝える説明、そして明るいオレンジ色の"Submit"(送信)ボタン。1ヶ所だけ変えるとしたらこのボタンのコピーでしょうか。Submitはやめて、もっと具体的にオファーの内容が伝わるものにするのが良さそうです。

H.BLOOMのランディングページ例

11)Velaro Live Chat

ときに、ごく小さな要素が大きな違いを生みます。このランディングページが傑出している理由がそこにあります。 

T目立つ場所に置かれたイメージの上に、小さなPDFシンボルが見えます。このページで何かをPDFフォーマットでダウンロードできることがすぐにわかります。また、かっこいいキャラクターが矢印の付いたサインボードを手にしているので、自然と視線がフォームへ誘導されます。

フォームの見出しの背景色がオレンジ色になっていることも、さらに視線をここへと向かわせます。このように一連の、1つ1つは些細に見える工夫が、全体として一体感のある見事なランディングページデザインを作り上げるのです。

Velaro Live Chatのランディングページ例

12)Conversion Lab

いつもなら、ランディングページに関する記事ではフォームがあるホームページは取り上げませんが(理由を知りたい方はこちらをクリック)、このウェブサイトは特別です。ウェブサイト全体がホームページに収められ、ナビゲーションリンクをクリックするとページの下部にある情報へ移動します。

"Get Connected"(問い合わせ)をクリックすると、サイト全体がスライドしてフォームに場所を譲ります。フォームに入力するためにページから離れる必要がなく、しかもこのウェブサイトをふらりと訪ねた訪問者にもフォームを邪魔と感じさせません。 

Conversion Labのランディングページ例

13)Litmus

Litmusは筆者が愛読するEメールニュースレターの送り主ですが、ランディングページでこのニュースレターを宣伝する方法が出色です。とりわけ色使いには独特のセンスを感じます。 

ランディングページで一番重要なエリア、つまりメールアドレスを入力する白いフィールドの背景色が暗いので、自然と目がそこへ引き寄せられます。"Subscribe"(購読)ボタンもこの背景色の補色で塗りつぶされているので、このエリアがいっそう際立って見えます。

さらにニュースレターのサポートイメージにアニメーション効果を与えたのは、十分に美味しいパフェの上にイチゴまで乗せたようです。

Litmusのランディングページ例

14)Industrial Strength Marketing

いきなり目に飛び込んでくるのは、"Don't make me zoom"(ズームしないと読めない)という、思わず引き込まれる、パンチのあるキャッチコピーです。スマホやタブレットでページを閲覧するときに頻繁に感じる不満をストレートに言い表しています。少しストレートすぎるぐらいです。

このランディングページに注目した理由は他にもあります。それは、赤いカラーリングが周到に考えて配置されている点です。フォームの上下で赤が使われているので、コンバージョンへの吸引力が増しています。 

さらに、このデザインはモバイル端末でも表示と機能が変わりません。

Industrial Strength Marketingのランディンページ例

15)Shopify

この記事で紹介してきた他のランディングページの多くもそうでしたが、Shopifyのトライアルランディングページもシンプルに徹しています。段落ではなく箇条書きで、トライアルの詳細とメリットを簡潔に伝えています。

先へ進むために入力が必要なフィールドはごくわずかです。いずれも、このページの目的、つまり独自のオンラインストアを作成することを容易にする上で役立っています。

それに輪をかけて素晴らしいのは、このランディングページがどのデバイスでも豪華に見え、実用性があることです。 

Shopifyのランディングページ

またこちら「お手本にしたい優れたランディングページ11選」の記事では、お手本にしたランディングページを集めております。

HubSpot(ハブスポット)のランディングのランディングページ機能では、レスポンシブ対応をしている綺麗かつコンバージョン最適化されたランディングページを手軽に作成することができます。

あなたのお気に入りのランディングページはどれですか? 効果的なランディングページを作成する方法を無料ガイドにまとめましたのでこちらもぜひどうぞ。

New Call-to-action

著者注: この記事は、2014年3月に公開された内容に加筆・訂正したものです。元の記事はGinny Soskeyよって執筆された記事で、元の記事をご覧になられたい場合はこちらからどうぞ。

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

トピック::

ランディングページ