ランディングページ（LP）とは？効果・設計方法・デザインを徹底解説！

近年、EC市場の拡大やスマートフォン利用者の増加に伴い、インターネット広告市場は拡大し続けています。2018年のインターネット広告費用は、1兆7,589億円までに成長しており、地上波テレビ広告費の1兆7,848億円に迫ってきています。

インターネット広告市場が拡大しているということは、広告の受け皿となるランディングページのニーズも当然ながら高まってきていると言えます。

広告費をつぎ込み集客ができたとしても、集客先であるランディングページが魅力的でなければ、コンバージョンには繋がらず、結果的に売り上げにはインパクトしません。

インターネット広告を効果的に運用していく上で、ランディングページはとても重要です。
インターネット広告と合わせてランディングページは最適化していくことで、より効果を高めることができます。このランディングページ最適化のことを、LPOと言います。

今回は、そんなランディングページの効果を高めるためのデザインについてお話ししていきます。

そもそもランディングページとは？

ランディングページ（Landing Page/LP）とは、検索結果やWeb広告などを経由してサイト訪問者が最初にアクセスするページのことを指します。

下層ページを持つWebサイトの場合、サイトの中で、ユーザーが最初にアクセスしたページがトップページであれば、トップページがランディングページとなります。
企業情報ページに最初にアクセスしたのであれば、企業情報ページがランディングページとなります。

しかし、上記は広義的な意味でのランディングページです。

一般的に使われているランディングページは、インターネット上で配信されている広告を経由して訪れたユーザーの着地先である縦長レイアウトの1ページ完結型サイトのことを指します。

一般的なWebサイトは、トップページから複数の下層ページに分岐しており、情報の抜け漏れがないように網羅的に構成されています。

しかし、ランディングページの場合は、通常サイトのような下層ページは存在しません。
ページの目的に合わせて必要な情報だけを厳選し、1ページで問合せ・資料請求・購入を促すことができるように構成されているのです。

以下の図が、サイトとランディングページの違いです。

ランディングページの目的

一般的なWebサイトには、様々な目的を持ったサイトが存在します。

例えば、企業の顔として自己紹介の役割を持つ「コーポレートサイト」や、企業や商品の世界観を伝えるための「ブランディングサイト」、人を採用することを目的とした「採用サイト」などがあります。

そのようなサイトと比べると、ランディングページの目的はいたってシンプルです。

ランディングページの目的は、広告を経由してページに訪れたユーザーに「お問い合わせ」や「資料請求」などのコンバージョンを得ることです。

ランディングページの特徴

階層式のコンテンツと遷移（リンク）で成り立っている一般的なホームページの構成とは違い、LPは１ページ完結型の構成になっていると前述で解説をしました。LPはCVに必要な情報のみを厳選して掲載し、ページ遷移によるユーザーの離脱を防ぐ仕組みになっています。また、ユーザー心理を分析し、購入を後押しする情報の配置が重視されます。

一般的なホームページと違い下記がLPの特徴となります。

• リンクが1か所しかない

一般的なホームページの作りの場合、リンク先を複数設定し導線を作ることでユーザー滞在時間を長くすることができます。一方で、ランディングページにはリンク先は入力フォーム1か所しかありません。

• 縦長で、縦スクロール

問合せや購入などを促すため多種多様な情報を提供する必要があるので、コンテンツのボリュームが増えます。また、1ページものではなくページを分割すれば、他ページへのユーザーの離脱の可能性もあるのでランディングページは1ページ縦スクロールで構成されています。

• テキストより、イメージ画像を多用する

画像を多用する理由は、ページを読みやすくするためです。一方で流し読みされやすいとデメリットもあるので、画像中心で構成するにしても、ユーザーにじっくり読ませたい箇所はテキストで補足するとより良いです。

• 購入を後押しする情報の配置があり、デザインが派手である。

キャッチコピーや権威性を示すメディア実績などが目立つようにデザインされ、ユーザーの興味関心をかりたてるようになっています。

• ボタンサイズが大きく、ページの複数箇所に設置されている。

ランディングページはコンバージョンとなるお問合せや購入を獲得するために特化したページです。そのため、ユーザーにコンバージョンを求める問合せや購入ボタンは視覚的に目立つように大きく赤や緑といった認知しやすいカラーとなって配置されています。また、ユーザーがコンバージョンしやすいようにページの複数箇所にボタンが配置されています。

良いランディングページとは？

ランディングページの目的が、コンバージョンの獲得と明確なので、制作をする際は、どれだけコンバージョンが獲得できるページにするかが重要となってきます。

いくら格好良いデザインであっても、いくら情報整理ができているページであっても、コンバージョンがとれなければ良いランディングページとは言えません。

では、どのようなランディングページが、コンバージョンを獲得することができるのかと疑問でしょう。
ランディングページには、広告を目にして、広告の内容に興味を持ったユーザーが流入してきます。

つまり、ユーザーは表示された広告に惹かれて、商品やサービスについて詳細が知りたいと感じていると言えます。
その知りたいという要求に対しての解答を、ランディングページ上に準備できているかどうかが、良いランディングページかどうかを判断する基準の一つになります。

ランディングページは1ページに情報をまとめているページであるため、手軽に制作できるものと思われがちですが、いざ制作を進めていくと簡単ではありません。

ランディングページを制作していく流れ

ランディングページを制作する時に、何も考えず、行き当たりばったりで進めてしまうと、作業の効率が悪くなるだけでなく、効果の出ないランディングページが出来上がってしまいます。

LPOを行うことで効果を出していくことは可能ですが、折角ランディングページを制作するのであれば、設計段階から効果を出せるように考えることが大切です。
そのためには、全体の流れを把握しておく必要があります。

※LPO（Landing page optimization　＝　ランディングページ最適化）とは、ランディングページの効果を高めるため、ページのデザイン・レイアウト・テキストを、調整する作業を言います。

先ほど述べたように、ランディングページの最終目的はページに訪れたユーザーに定めたコンバージョンをしてもらうことです。
その最終目的を達成することを念頭に置きながら、全ての工程を進めていく必要があります。

一般的なランディング制作の流れは以下になります。

それぞれの工程で何をしていくのか、詳細を説明します。

①戦略設計（要件定義）

戦略設計では、これからプロモーションしようとしている商品やサービスにとって、どのようなランディングページが必要なのかを考えていきます。

そのために、

・どのようなユーザーがランディングページに訪れるのか
・ユーザーに何を伝えたいのか
・ユーザーにどのような行動を起こしてもらいたいのか（コンバージョンポイント）

などを、明確にしていきます。

また、競合となりうる商品やサービスのランディングページが、どのような訴求をしているのか、どのようなコンバージョンポイントを用意しているのかを調査する必要があります。

競合を調査することは、自社のランディングページを制作するための参考にするだけでなく、競合と自社を差別化をするためにも必要です。

競合他者が、どのようなユーザーに対して、どのような施策を行なっているのかをあらかじめ頭に入れておきましょう。

ユーザー目線になって競合と自社を比較することで、今まで気がつかなかった自社の商品やサービスの魅力発見にもつながります。

②情報設計（ワイヤーフレーム作成）

情報設計とは、ランディングページを作る上で必要な情報を整理することです。

ここでは、戦略設計で想定したユーザーやコンバージョンポイントに合わせて、全体のストーリーを設計し、またそのストーリーに必要なコンテンツの情報を具体化し、最終的にその内容をワイヤーフレームに落としていきます。

ストーリーを設計する際は、「どのようなサービスなのか。」「誰のためのサービスなのか。」「サービスを受けた時にユーザーにはどんなメリットがあるのか。」「競合との違いは何なのか。」といった、ユーザーに伝えるべきポイントを洗い出し、それらの話をどういった順番で提示するかを決めていきます。

この時に重要なのは、いかにユーザー目線になって考えられるかです。

どのような順番で情報を提示すればユーザーが欲しい情報に到達でき、結果コンバージョンに至るのかを考えていきます。

提示する順番が決まったあとは、コンテンツごとに見出しや本文などのテキスト内容を決めていきます。

テキストの内容まで詰めることができたら、そのテキストを元にレイアウトを詰めていきましょう。
この時のレイアウトとは、情報の強弱をつけたり、グループ化をしたりと言う意味で、あくまでの情報整理のためのレイアウトです。
この段階でワイヤーフレームに落とし込むことをオススメします。

ワイヤーフレームはデザインをする上での設計図となるので、テキスト内容以外のグラフやイラストに必要な数値データなども用意します。

③デザイン

ワイヤーフレームが出来上がったら、いよいよデザインです。
ただし、すぐに作業に入るのは危険です。

まずは、ワイヤーフレームを読み込み、全体の流れを理解していきます。
その上で、デザインのトンマナやレイアウトなどの全体的な方向性を考え、完成イメージが浮かんでから作業にはいりましょう。

私のオススメは、手書きでデザインラフを描くことです。

ワイヤーフレームはあくまでも情報整理を目的としたものなので、それぞれの情報をよりわかりやすく表現するためにどのようなデザインにするか、ラフを描くことで、頭の中を整理し、作業をスムーズに進められます。

④コーディング

デザインが完成したら、コーディング作業に入っていきます。

ランディングページ制作の中で、コーディングは最後の工程であるため、ここでのクオリティがランディングページ全体の品質に影響します。

基本的な動作の不具合がないか、レイアウトの崩れがないかを確認するだけでなく、ユーザーの目線からみて、使いやすいページになっているかを意識して組んでいきます。

なので、見た目以外の表示速度であったり、フォームの動作も、良いランディングページの判断基準の一つとなります。

実際に自分がランディングページに訪れたユーザーと仮定し、ページをみたときにストレスがないかを確認しましょう。

ランディングページで効果を出すために、デザインで気をつけるポイント

ランディングページの基本的な理解ができたところで、効果のでるデザインのポイントをお話していきます。

ランディングページ制作の流れを見ていくと、効果の出るランディングページ制作をするためには、デザインだけでなくその前段階の設計が重要ということはおわかりいただけたでしょうか。

ページに訪れるユーザーや、商品・サービスによって細かなデザインは異なってきます。

今回は、コンバージョンに大きく影響すると言われている「ファーストビュー」「コンバージョンエリア」「フォーム」の3つのエリアにおいて、デザインをする際に気をつけるポイントをお伝えします。

ファーストビュー

ファーストビューとは、ページに訪れたユーザーが初めてみる画面のことを指します。
ファーストビューの役割はユーザーの心を掴み、ファーストビュー以下のコンテンツを読んでもらうためのきっかけ作りです。

デザインをするときに気をつけるポイントは、訪れたユーザーが一目見て、何のサイトなのかがわかるようにすることです。
ファーストビューに載せる要素は優先順位をつけて、極力少なくした方が訴求力の高いファーストビューになると言われています。

少ない情報でいかにユーザーに伝えたい内容を伝えるかが重要なので、キャッチコピーの見せ方や、掲載する画像はこだわりましょう。

コンバージョンエリア

コンバージョンエリアとは、ユーザーをランディングページの目的（コンバージョン）に促すための、行動を後押しするテキストや、行動を起こすためのボタンを配置するエリアのことを指します。

デザインをするときに気をつけるべきポイントは、他のどの要素よりも目立たせるということです。

ランディングページは他のWebサイトと比べ、情報量が多く長いため、コンバージョンエリアが目立たないと、ユーザーの目に留まらず読み飛ばされてしまうこともあります。

他のどの要素よりも目立たせる方法はいくつかあります。
まずは色です。ランディングページで利用しているメインカラーと同系色は避け、印象に残るカラーを選びましょう。
次に大きさですが、エリアを広く取って差をつけましょう。
その他には、他の要素にはない装飾を施す方法などもあります。

エントリーフォーム

ユーザーがランディングページでコンバージョンするためには、コンバージョンボタンを押した後、エントリーフォームに記入する必要があります。

最後の最後でユーザーを離脱させないために、エントリーフォームのデザインはかなり重要となってきます。

デザインの際気をつけるポイントは、使い勝手を考えユーザーにストレスを与えないかということです。
入力項目が多かったり、入力がしづらかったり、ユーザーがストレスを感じるようなポイントは全て潰していきましょう。

また、デザインとは離れますが、ユーザーにストレスを与えないためには、システム部分での工夫も必要です。

・どの項目が必須なのか一目でわかるようにする
・入力漏れがある場合は、リアルタイムでエラーを表示する
・入力補助を行う

など、ユーザーの入力時の手間を減らすようにしましょう。

まとめ

いかがでしたでしょうか？

効果の高いランディングページを制作する上で一番大切なのは、「ユーザーの目線」に立つということです。

これを機に、広告を効果的に運用していくためにも、ランディングページを見直してみてはいかがでしょうか？

もし現在のランディングページに課題を感じているのであれば、弊社のLPO専門チームに一度ご相談ください！