効果の高いランディングページの作り方をマスターしよう【図解たっぷり】

ランディングページ（LP）とは、成果を獲得する為に作られたページを指します。そして、縦長の構造で成果獲得というゴールまで一直線に向かう作りになっています。

 

• ランディングページとは
• 効果的なLPの作り方
• 成果を上げるLPの制作手順
• まとめ

 

ランディングページとは

ランディングページ（LP）という言葉には、以下のような２つの意味があります。

①ユーザーがサイトに訪れた時に一番最初に表示されたページ

②成果を獲得する為に作られたページ

今回は、②の意味でのLP製作について学んでいきます。この場合のLPは、成果獲得の為に必要な情報をメインコンテンツとします。そして、縦長の構造で成果獲得というゴールまで一直線に向かう作りになっています。

 

コンバージョンとは

この「成果」はコンバージョンとよばれています。コンバージョンが何を指すのかは、どのようなサイトかにより異なります。

登録がコンバージョンの場合もあれば、購入がコンバージョンの場合もあるのです。また「契約」と「無料体験」というように２つのコンバージョンが存在する場合もあります。

 

効果的なLPの作り方

LPは、１ページで作られているものも多いですが複数ページ用意した方が効果的な場合があります。たとえば、ターゲットユーザータイプが複数存在する場合です。

新規顧客からのお試し商品の申し込みと、リピーターからの継続契約という２種のコンバージョンがあるときなどは、それぞれのターゲットユーザーに合わせた内容のLPを用意すべきでしょう。

片方のユーザーに焦点を絞ったLPのみだと、もう一方のユーザーにとってそのLPは有益なコンテンツではなくなってしまいます。

また、ユーザーは数秒でLPを読み進めるか離脱するか決めてしまいます。ファーストビューには、メリットを伝えるキャッチコピーを配置しましょう。そして、商品に関するワードを盛り込むことも重要です。

 

そして、LPの効果の高さはコンバージョンを元に判断します。たとえば、コンバージョン数やコンバージョン率などから分析を行います。

コンバージョン数とは、例えば購入というコンバージョンであれば、１つの購入でコンバージョン数１という事です。それに対し、コンバージョン率とは「コンバージョン数 ÷ LP閲覧人数 ×１００」という計算で導いた数字です。

コンバージョン数が１で、閲覧人数が５０人であればコンバージョン率は２％という感じですね。

 

成果を上げるLPの制作手順

では、具体的な制作手順についてみていきましょう。

 

コンテンツの決定

LPに載せるコンテンツを決定していきます。ユーザー情報などを元に決定していきます。まず、掲載順序は意識せずにアピールポイントなど挙げていきましょう。では、「小学生用の教材」という商品でコンバージョンは「無料体験申し込み」という例で挙げてみますね。

• 低価格で始められる
• 専属講師とのマンツーマンレッスン付き
• 専用タブレットで楽しみながら勉強できる
• 学力が上がらなければ全額返金
• 中学校合格実績

これらの要素を訴えていきたいとしましょう。では、次にこれらの配置を考えていきます。レイアウトについては、基本的に以下の３つのエリアに分けて決めていくと良いでしょう。

 

ファーストビュー

ファーストビューの部分には、以下３点を配置するとよいでしょう。

• ユーザーの心を掴む為の内容
• コンバージョンボタン
• メインビジュアル(画像)

 

ファーストビューのみをチェックして離脱してしまうユーザーも多く存在します。商品の良さを知ってもらいコンバージョンにつなげるには、瞬時に「読み進めてみよう」と思わせる必要があります。

 

ボディ

このエリアには「商品の特性・詳細」や「信頼や安心に繋がる情報」などを配置します。商品の良さについて「納得」させる部分になります。

「興味」という段階から「行動してみようかな」という段階まで持っていく事が必要です。行動とは購入や申し込みですね。

 

クロージング

最後の一押しを行う部分です。「また今度…」となってしまわないよう、「限定」や「お得感」などで「行動」のハードルを下げましょう。

では、先ほどのコンテンツをエリアごとに分けてみましょう。

ファーストビュー	低価格で始められる 中学校合格実績
ボディ	専属講師マンツーマンレッスン付き 専用タブレットで楽しみながら勉強できる
クロージング	学力が上がらなければ全額返金

レイアウトが見えてきましたね。では、次のセクションでもっと具体的にまとめていきましょう。

 

ワイヤーフレーム

続いて、ワイヤーフレームの制作です。ワイヤーフレームは出来るだけ詳細に作成しましょう。実際使用するテキストや画像も入れていきます。

早い段階で具体的に作りこむことで後々の修正の手間が省けます。また、「何故このレイアウト・デザイン・テキストなのか」という部分を、クライアントやチームで共有する事が重要です。

他にも「商品についての知識」や「事前準備部分で得た情報」も共有した方が良いでしょう。こういった部分を共有する事で、的確な改善点などが上がりやすくなります。ではこれらを踏まえたうえで、ワイヤーフレームの例を見てみましょう。

このようなワイヤーフレームを共有したとき、漠然と改善点を探すのは効率が悪いかもしれません。ですので事前に「どの部分を注意して見るか」という事を決めておくと良いですね。以下は、チェックリストの例です。

✓ファーストビューのインパクト＆分かりやすさ

✓情報の順序

✓重要コンテンツが埋もれていないか　　　　　　　　　　　　　　　　　　　

 

ルールの決定と実際のデザイン

次に、デザインルールなどを決めていきます。カラーやトーン、フォントなどですね。色やフォントの持つ印象なども考慮し決定していきましょう。以下は、カラールール例です。

• フォントは親しみやすいゴシック体を使用
• トーンは明るいイメージの「ブライト(下２つ)」と「ライト(ベースカラー)」とする

では続いて、実際のデザイン制作に移ります。先ほどのルールに則ってデザインしていきましょう。また、分かりやすさ・行動を起こしたくなるデザインを意識し制作していきます。以下は、実際のデザイン例です。

ここで、再度チェックを行っていきます。特にファーストビューは重要です。しっかりチェックしましょう。以下チェックリスト例です。

✓統一感があるか

✓競合と差をつけることが出来ているか（商品イメージから外れない程度に）

✓色やフォントの持つ印象は情報と合っているか

✓重要順に目立たせられているか

✓画像が商品とマッチしているか

 

コーディングと最終チェック

デザイン面が完成したら、次はコーディングです。この時、気を付けたいのが「表示スピード」です。LPの表示に時間がかかってしまうと、ユーザーは離脱してしまいます。以下の点に気を付けてコーディングを行っていきましょう。

• 画像の多さ
• 画像のサイズ
• 不要な記述

 

これらを意識しコーディングを行ったら最終チェックに入ります。今までのチェックリストの項目や「使い勝手」をチェックしていきましょう。以下例です。

✓ファーストビューのインパクト＆分かりやすさ

✓情報の順序

✓重要コンテンツが埋もれていないか

✓統一感があるか

✓競合と差をつけることが出来ているか（商品イメージから外れない程度に）

✓色やフォントの持つ印象は情報と合っているか

✓重要順に目立たせられているか

✓画像が商品とマッチしているか

✓縦長過ぎないか

✓表示スピード

これらをチェックし問題がなければひとまず完成です。しかし、１度完成しても実際にユーザーがどのように感じるかは予想と異なる場合もあります。

また、コンバージョン率も思ったように得られないかもしれません。ですので、テストと改善を重ねていかなければなりません。

 

まとめ

ランディングページには２つの意味があります。１つ目は「ユーザーがサイトに訪れた時に一番最初に表示されたページ」２つ目は「成果を獲得する為に作られた１つの長いページ」という意味です。

また、購入や申し込みなどの成果のことをコンバージョンと言います。LPの効果は、コンバージョン率を出し検証します。

みなさんも、分析や改善を重ねて「成果を上げられるLP」を作成していきましょう。