成果の出るランディングページ（LP）の構成案と改善ポイントのセオリー

ランディングページ（LP）とは、広義の意味では、GoogleやYahoo!などの検索結果ページやバナー広告などから訪問者が最初に訪れたページのことをいいます。

ページに到着（landing）するという意味でランディングページ、または略してLPと呼ばれています。
ランディングページ（LP）には上記のような広義の意味で捉えるランディングページと狭義の意味で捉えるランディングページがあります。
Webに携わる人が思い浮かべるランディングページとは、次で説明する狭義のランディングページと考えるのが一般的です。

では狭義のランディングページとはどのようなものなのでしょうか？

スポンサーリンク

狭義のランディングページとは

ここでいう狭義のランディングページとは、広告施策用に制作された1ページで完結する縦長のページのことをいいます。
つまりランディングページ（LP）とは、インターネット広告経由でやってきたお客様にサービスの紹介からお申し込みまでを担う、ネット上の営業マンと考えることができます。

営業のセールストークを1枚のページにまとめて伝えるため情報量が多くなり、縦長のページになることが多いです。

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

ターゲットにサービス（商品）をアピールしやすい

ターゲットユーザーが抱える課題や悩みに対して、意図した行動（予約・購入など）をしてもらうことに特化しています。
例えば、下記のような目的に特化したページとなります。

• 自社サービスのお申し込み
• 予約
• 資料請求
• 商品購入

ターゲットユーザーが抱えている課題と解決方法を紐付けて提案するため、ユーザーの期待値が上がりコンバージョンへとつながりやすくなります。

ページ遷移の必要がないため離脱が少ない

一般的に、ページ遷移ごとに最低でも30%のユーザーがそのサイトから離脱するといわれています。
ランディングページはユーザーに見てもらいたい内容を見てもらいたい順番で1枚にまとめることができるので、途中離脱なくコンバージョンにつながる確率が高くなります。

低コストで柔軟に制作できる

ページ構成の制限がないため自由度の高いデザインが可能になります。
既存のWebサイトを最適化するよりもランディングページを新規に制作したほうがコストが低くなることもあります。

このように商品やサービスを購入してもらうために活用されているランディングページですが、魅力を正しく伝えるにはいくつか見るべきポイントがあります。

次からは商品やサービスを魅力的に見せるランディングページの見せ方と構成内容についてご説明します。

ランディングページを構成する基本要素

ランディングページ企画するにあたって、どんなコンテンツを用意する必要があるかを説明します。

ランディングページは基本的に下記の6つの要素で構成されています。

• メインイメージ（キャッチコピー）
• 結果（速さ、簡便さ、メリット、デメリットの解消、ビフォーアフター）
• 実証（特徴、原材料、原産地、こだわりポイント、サービスの提供プロセス、Q&A、他社との違い、メリットを提供できる理由）
• 信頼（実績、資格、有名人の推薦、マスコミ掲載、所属団体での活動、担当者・開発者プロフィール、会社概要）
• 安心（お客様の声、インタビュー）
• クロージング（いま行動させる、いま行動したほうが得、行動しないと損）

メインビジュアル（キャッチコピー）

機能や特性ではなく、ターゲットにとっての価値やベネフィットを伝えたキャッチコピーを入れましょう。
メインビジュアルに入れるべき内容はこのあと詳しく説明します。

結果（速さ、簡便さ、メリット、デメリットの解消、ビフォーアフター）

購入するとどんなメリットがあるかを説明するコンテンツを用意します。
メリットを訴求するのに以下のコンテンツが考えられます。

速さを訴求する

いかに早く顧客の抱える問題を解決できるか。

例：営業マンが即訪問！

簡便さを訴求する

いかに簡単に顧客が抱える問題を解決できるか。

例：導入するだけ！

メリットを訴求する

それを利用することで得られるメリット。

例：電気代70%カット！

デメリットの解消を訴求する

それを利用することで解消されるデメリット。

例：初期投資0円！

ビフォーアフター

それを利用することでどのようは変化が起こるか。

例：電気代70%カット！

実証（特徴、原材料、原産地、こだわりポイント、サービスの提供プロセス、Q&A、他社との違い、メリットを提供できる理由）

商品やサービスを購入してもらうには、メリットを提供できる理由を説明するコンテンツを用意して、ユーザーに納得してもらう必要があります。

特徴

商品やサービスの特徴

原材料、原産地

商品・サービスの構成要素を入れる。

例：国産、無添加！

こだわりポイント

インパクトのある数字でこだわりポイントを伝えると効果的です。

例：しじみ200個分のオルチニン！

サービス提供のプロセス

商品・サービスの提供プロセスを説明する。

例：採れたての魚を独自の瞬間冷凍で旨味を閉じ込め、その日のうちに出荷！

Q&A

よくある質問とその回答

他社との違い

他社との違いを比較検討できる魅せ方を用意する。

信頼（実績、資格、有名人の推薦、マスコミ掲載、所属団体での活動、担当者・開発者プロフィール、会社概要）

メリットを提供できる根拠を客観的に証明するために、取得した資格や実績、専門家の意見を掲載することで信頼性が高まります。

また、有名人の紹介やテレビ、雑誌での紹介実績も効果的です。

実績

会社や店舗の歴史、年数、実績数などの数字で表現できる客観的な事実。

資格

所有している専門知識

有名人の推薦

誰もが知っている有名人やその業界の権威による推薦文を入れる。

例：○○大学名誉教授推薦

マスコミ掲載

テレビ、雑誌、新聞、ラジオ、その他各種メディアで取り上げられた実績。

例：テレビのワンコーナーの動画、雑誌での特集記事など

所属団体での活動

所属している専門団体やそこでの役割、特筆すべき活動内容。

例：○○学会で公演実績など

プロフィール

開発担当者のプロフィールと会社の所在地や代表名などの会社情報。

例：顔写真や経歴・実績、想いなど

会社概要

例：会社の所在地や写真

安心（お客様の声、インタビュー）

自分と同じ立場のユーザーがどう評価しているか気になるものです。
ユーザーは得したいというよりも損をしたくないという心理が強く働くため、精神的な負担を取り除いてくれるコンテンツを用意します。

お客様の感想

アンケートや感想文、実際のアンケート用紙を掲載など

インタビュー

購入者に取材した記事

クロージング

いま行動させる、いま行動したほうが得、行動しないと損と思わせるひと押しです。

希少性をアピール

100人限定、100個限定、3日間限定、本気の人限定

保証をアピール

送料無料、30％割引、特典付き、効果がなかったら返金、無償交換、アフターサポートなど

成果を出すためのランディングページ（LP）改善ポイント

効果のあるランディングページの表現や見せ方について解説します。

広告と整合性があるか

インターネット広告と飛び先のランディングページの内容は一致させる必要があります。

広告をクリックして訪問してきたユーザーは、その時点ではそのサービスに興味を持っています。
広告文と関連のあるキャッチコピーをファーストビューに表示したり、関連コンテンツを用意して、「まさに求めているランディングページ」だと認識してもらえるようにします。

広告バナーとランディングページの内容を一致させる

広告キーワードとLPのキャッチコピーを統一する

広告文と関連のあるキャッチコピー・コンテンツを用意して、ユーザーの求めているランディングページにします。

各デバイスに対応しているか

PCだけでなくスマートフォンに対応したランディングページを用意しましょう。

PCのみに最適化したランディングページだけですとスマートフォンで表示した際に表示が小さくなるなど可読性に欠けたランディングページになります。

各デバイスに対応する方法として「レスポンシブ」と「PC用、スマホ用を別で用意」する方法があります。
それぞれメリット・デメリットがあるため一概にどれが有利かは難しいところですが、PC用とスマホ用をそれぞれ別で用意したほうが柔軟なサイト設計をすることができます。

レスポンシブでランディングページを用意する場合、変形することを前提としてページを設計するので、レイアウトなどデザイン上なんらかの制限がかかることがあり、柔軟な対応が難しいといったデメリットがあるからです。

レスポンシブサイトをスマホで表示した際に、キャッチコピーや画像、ボタンなどが小さく表示されているページも見受けられます。
これらを読みやすく、見やすく改善するだけでコンバージョンが増えることもよくあります。

もちろんレスポンシブにもメリットはあります。
それはワンソースで管理できるという点。
頻繁に更新するならレスポンシブは大きなメリットになると思います。

どちらにもメリット・デメリットはありますが、ユーザー視点で考えると各デバイスごとにランディングページを用意した方が、ユーザーに優しいサイト設計をしやすいといえます。

ファーストビューで魅力を伝えているか

ファーストビューとはページを開いてスクロールせずに見える範囲のことをいいます。
ファーストビューで訪問者の気持ちをしっかり捕まえられているランディングページは、ページ最下部まで読んでもらえる確率が高まります。

2018年現在、主流となっているPC、スマホの解像度は下記のとおりです。

PCの解像度

1920×1080、1366×768
PCサイトのファーストビューをデザインする際は1000px以内を目安にするといいでしょう。

スマホの解像度

375×667（iPhone 6系）、320×568（iPhone 5系）、360×640（GALAXYなど）

ファーストビューには、以下の内容を意識してメインビジュアルをデザインしましょう。

キャッチコピー

機能や特性ではなく、ターゲットにとっての価値やベネフィット（良い体験）を伝えたキャッチコピーにする。

ターゲットを意識したキャッチコピー例

〇〇コラーゲンの無料モニターに参加したい30歳以上の女性の方へ。

成功体験を意識したキャッチコピー例

〇〇SIMで毎月のスマホ代が4,000円節約できました！

瞬間的に効果を連想できるメインビジュアルになっているか

伝えたい内容とビジュアルイメージを一致させます。

例えば英会話教室のランディングページでしたら、外国人と楽しく会話をしているメインビジュアルなどを用意します。

ちなみにメインビジュアルに人物写真を使う場合は、男性よりも笑顔の女性のほうが信頼度が上がるといわれています。
また、商品を紹介するランディングページでは、人物写真よりも商品写真を載せたほうがコンバージョン率が高くなるという傾向があります。

権威付けがされているか

〇〇受賞、〇〇ノミネート、大手クライアント導入、公的機関の承認など、権威付けの表示はユーザーに信頼感を与えます。

実績を数字でアピールしているか

売上数、販売数、会員数、フォロワー数など具体的な数字があるとユーザーの目を引きつけ、安心感を与えます。

お問い合わせボタン

ファーストビューにお問い合わせボタンを置き、ユーザーのアクションを促します。
ただし、特にスマートフォンではスクロールの負担がそれほどかからないので、ファーストビュー内にムリに入れる必要はありません。
ファーストビューの下には配置しておきましょう。

「流し読み」でも内容が伝わるか

ユーザーの基本動作は「流し読み」です。　
何かが目に止まらない限り、中身を深く読んでくれることはありません。

じっくり読まなくても内容が伝わるようにするために、簡潔にメリットを伝える見出しや、イラスト、画像などでユーザーの興味を引くような工夫が必要です。

よい見出し文とは

• タイトル、小見出しでだけでも内容が伝わる
• 見出しにはメリットが盛り込まれている

長文を読みやすくする方法

長文は離脱の原因になります。
ユーザーの心理的な抵抗を少なくするために、読みやすさに配慮した見せ方をする必要があります。

• 箇条書きにする
• 句点で改行する（文章の始まりが行頭にくるようにする）
• 3〜4行で一行空きになるように改行する
• 一行の文字の長さを40文字以内にする
• 行間の広さを文字サイズの1.5〜1.8倍にする

CTA（コール トゥ アクション）ボタンは目立つか

コンバージョンに直結するCTAボタンは、確実に目立つものでなくてはいけません。

視認性が悪くないか（背景と同化していないか、小さくないか）

視認性が悪いとせっかく用意したボタンも無駄になります。
クリッカブルとわかるようにボタンらしくデザインしましょう。
より目立たせるためにアニメーションCSSで動きをつけてクリックを促す方法も効果的です。

クリックしたくなる文言が近くにあるか

ボタンの周辺に「今がお得！」「限定○○」「返品保証」「試供品の提供」「特別価格」「24時間電話対応可」などをいれて、クリックを促しましょう。

複数配置しているか

コンテンツの合間に複数配置して、いつでもアクションできるようにしましょう。

角丸ボタンにする

「角丸は目に、そして脳に優しい」
鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。
人間の目は円形のものをより早く捉えることができる。
（ビジュアル認知の権威：Jürg Nänni教授）

※鋭角のイメージは「触るな」「立ち去れ」「引っ掻く」。
鋭いオブジェクトから連想されるネガティブなイメージへ展開する傾向があるとのこと。
脳神経学者は鋭角への嫌悪感を「回避反応」と読んでいます。

ボタンの色を緑色にする

各色が人にもたらすイメージは下記のとおりです。
信号機を考えるとイメージしやすいです。

• 赤：注意、危険、緊張、刺激的な
• 青：冷静さ、熟考、安定性
• 緑：信頼性、平和、安全

緑色が一番良いとされていますが、ページ全体のカラーも考慮して決めるようにしましょう。

お問い合わせフォームは平易か

フォームとランディングページを1ページに収める

ページ遷移するごとに少なくとも30%の訪問者が離脱すると言われています。
お問合わせはフォームはランディングページ内に入れた、一体型にしておきましょう。

フォームの入力項目は最小限にする

フォームの入力時に離脱するケースは少なくありません。
特にスマートフォンでの入力は大きな負担となるため、必要な情報のみ要求するようにしましょう。

サービス提供者情報を表示しているか

電話番号、メール、住所、責任者など企業情報を載せましょう。
以前、ユーザーテストをした際、企業情報をチェックするユーザーがとても多くいました。
意外とよく見られている箇所だと思われますので、しっかりと情報を入れておきましょう。

ネガティブな情報を入れる

特にコンプレックス系のサービスを扱う場合は、ネガティブな情報を入れるのも効果的です。。

例えば、アンチエイジング商品の場合、「30歳を過ぎるとコラーゲン数が20代の半分に！」など、危機感をあおるコンテンツを用意してコンバージョンへと促します。

高額商品の場合、まずは無料／格安のお試しを用意して集客する

高額商品の場合、最初はモニター募集・トライアル募集などの見込み客集めにフォーカスし、集客後にクロスセル・アップセルを狙います。

適切なタイミングでアップセル

アップセルをする場合は入力が完了し、気持ちに余裕ができた時に提案したほうが効果的です。
問い合わせフォームの確認画面で、よりお得感を訴求したサービスをアピールしてアップセルをおこないましょう。

サービス、商品の選択肢を多くしすぎない

基本的にユーザーは課題を早く解決したいと思っています。
選択肢が多いとどれを選択すべきか迷ってしまい離脱する原因となるため、できるだけ1つにしましょう。

お気に入りボタンを入れる

高額であればあるほど、比較検討する時間が必要です。
お気に入りボタンを入れてランディングページに戻りやすくする仕組みを用意しておきましょう。

他社と比較検討しやすい見せ方になっているか

特にBtoBを扱うサービスの場合、担当者が比較検討しやすいように機能を表組にするなど、閲覧しやすい見せ方をしましょう。

ランディングページの改善ポイントと構成案のまとめ

ランディングページを構成する5つの要素である「結果」「実証」「信頼」「安心」「クロージング」の掲載順もよく考えましょう。

基本的には紹介した流れで構成するとよいですが、芸能人などの有名人が推薦しているサービスは、あえてページの上部に推薦記事を配置することでユーザーの気持ちを引きつけ、後半のコンテンツをじっくり読む気にさせるなどの手法もよく使われます。

競合のランディングページをチェックして、どんな構成になっているかを調査してみるのも参考になります。

競合のランディングページを調査し、これまで説明してきた内容を抑えてランディングページを作成すれば、成果の出るランディングページとなるでしょう。

最後にこの記事を書くにあたって、とても参考になった書籍を紹介します。

ページ前半は、ランディングページを構成する要素を説明し、後半はリスティング広告に関する内容になっています。
特に「ペルソナ設計」と「カスタマージャーニー」「競合調査表」を紹介していますが、実際の現場でもすぐに使える内容となっており、私も実務で活用しています。

ランディングページで売上アップを考えているなら一読するのをおすすめします。

スポンサーリンク