効果的なランディングページ(LP)を構成するパーツと目的、デザイン参考を紹介

フリーランスでWeb制作のお仕事を始めて、最初の方に受注することが多いのがランディングページ(LP)の制作案件。案件数が多く、ページ単位のお仕事のため未経験者OKなことも多いです。

ですが、いきなりLP制作と言われても困りますよね。
発注者側がワイヤー等を用意してくれていないと、企画資料や発注者の“ページに載せたいことリスト”などを見ながら、構成から考えなくてはいけません。

今回は基本的なランディングページ(LP)の構成と、よく使われてるパーツの目的を紹介します。お手本になるランディングページも確認しながら、ユーザーが望むアクションを起こしてくれるLPを作るために必要な工夫を学びましょう。

• ランディングページ(LP)と基本構成
• ランディングページ(LP)とは
• ランディングページ(LP)の構成
• トップ（ファーストビュー）
• ファーストビュー作成のポイントと参考サイト
• ボディ（コンテンツ）
• ①問題提起・共感
• ②結果・解決策
• ③実証
• ④信頼
• ⑤安心
• クロージング
• まとめ

ランディングページ(LP)と基本構成

ランディングページ(LP)とは

ランディングページ（Landing Page/LP）は、広義ではホームページのなかで訪問者が最初にアクセスしたページを指します。ユーザーが着地する（Landing）ページ（Page）でランディングページです。

ただし、Webマーケティングで使われる狭義のランディングページは別。
こちらは、サイトを訪れたユーザーに対して運営者が期待するアクションを起こしてもらうよう誘導するページのことを指します。ここでのアクションは、商品購入や予約申し込み・資料請求などが代表的です。

これ以降、本記事では、狭義のランディングページのことをランディングページ（LP）と記載して構成要素を紹介していきます。

ランディングページ(LP)の構成

ランディングページは大きく分けると３つのセクションで構成されています。

• トップ
• ボディ
• クロージング

ページを開いたユーザーに対して「うちの商品を買ってください」と言っても、いきなり買ってくれる人はほとんどいません。商品もしくはサービスのどこが優れているのか、使うことでどんなメリットが得られるのかをしっかりと伝える必要があります。

加えて、ユーザーが途中で興味を失わないようにする工夫も必要となってきます。そのために各パートごとに役割を分け、分かりやすく、かつ購買意欲をそそるように構成していく必要があるのです。

トップ（ファーストビュー）

ランディングページ(LP)の一番上、ページを開いたユーザーが真っ先に目にする部分をファーストビューと言います。

ファーストビューの役割は、一瞬でユーザーの気持ちをつかむこと。

インターネットを見ていて、開いたページのタブを数秒で閉じた経験がある方がほとんどでしょう。ページを表示したからと言って、ユーザーがそのページを最下部まで読んでくれるわけではないのです。

このため、ユーザーが興味を持つイメージ画像やキャッチコピーを掲載し、下のボディパートへ読み進めてくれるように促します。ユーザーが「もっと詳しく知りたい」とページをスクロールダウンしてくれれば、ファーストビューのデザイン・構成は成功と言えます。

ファーストビュー作成のポイントと参考サイト

ファーストビューは、下記２つを主体に構成されています。

• 目をひく画像（メインビジュアル）
• キャッチコピー（トップコピー）

使用するキャッチコピーは、ページ内で最も重要なコピーと言っても過言ではありません。「私の求めていたものだ」「このページを読んでみたい」と思わせるために、ユーザーにベネフィット(利益)を示す内容のコピーが使われます。

https://www.cr.mufg.jp/apply/app/account/card/mucard/index.html
誕生！三菱UFJカード - 三菱UFJニコス

https://gommage.rosette.jp/
ロゼットゴマージュ | ロゼット

完結した形でベネフィット(利益)を示すのではなく、大きな表現でキャッチコピーを作るのも効果的です。興味を持ったユーザーは「どんなサービスか」「何ができるのか」を知るために、ページをスクロールしてくれます。

https://www.brother.co.jp/product/biz/business-navi/special/hakadoru/index.aspx
ブラザー ビジネスNAVI｜ブラザー

https://subcli.com/
月額定額制×美容医療のSUBCLi（サブクリ）

ちなみに、ページ内での販売等をコンバージョンとしていない、キャンペーン用のランディングページでは、よりユーザーに「なんだろう？」と思わせるキャッチコピーが使用される事もあります。目的とターゲット層によって、コピーの雰囲気も変わってきますね。

https://brand.lipton.jp/yellowmonday/
イエローマンデー - リプトンオフィシャルサイト

ボディ（コンテンツ）

トップに続くボディは、興味を持ってくれたユーザーを説得する部分になります。

• メリット（自社商品のウリ）
• ベネフィット（ユーザーが得られる利益・恩恵）
• 商品の権威付け・信頼性

などを掲載することで、ユーザーの信頼を得て「自分の問題解決にふさわしい」と購買意欲を高めていく役割があります。

ユーザーの信頼感と購入意欲を高めるため、ボティパートでは『問題提起・共感』『結果・解決策』『実証』『信頼』『安心』という５つのパーツがよく使われています。

LP作成時にはターゲットや訴求ポイントに合わせて、これらのパーツは省略されたり、合体されたり、分割して配置されることもあります。
それぞれのパーツの役割と意味を見ていきましょう。

①問題提起・共感

問題提起は、ファーストビューを見て興味を持ったユーザーに、より強く「私のための商品/サービスだ」と思わせるパーツです。共感を持ってもらうために、ユーザーが今現在抱えているであろう問題を記述することが多いです。

こんなことでお悩みでは？という“あるある”を掲載してユーザーを共感させ、②以降のメリットや商品の特徴へと繋げていく構成がよく使われています。

https://glp1-medicaldiet.com/
GLP-1｜AIMビューティメディカルクリニック

http://kyouinoeigo.com/lp/
驚異の英文法

②結果・解決策

結果は商品やサービスを使うことによって得られる結果・ユーザーが得られるメリットを掲載します。ユーザー目線で「利用することで私・私の生活がどう変わるか」という結果が見えるようにすると効果的です。

先程、問題提起で紹介させていただいた“驚異の英文法”では、下記のように結果パーツが配置されています。お悩みが解決された「結果」が赤い背景の部分に書かれており、ユーザーは自分もそうなれるかも（なりたい!）と希望をもつことが出来るのです。

http://kyouinoeigo.com/lp/
驚異の英文法

下記のランディングページも、結果＝商品やサービスによって得られるメリットを紹介する部分がしっかりと確保されています。

https://www.c-c-j.com/feature/dnlp/pet_kango_ver01.html
ペット看護士＆セラピスト講座 - キャリアカレッジジャパン

解決方法を提案する場合も

例えば、薬事法との兼ね合いがある健康食品や化粧品のように、「〇〇になれる」と言い切ることが出来ない場合もあります。
その場合は結果ではなく、ユーザーの悩みにピッタリな解決策があること、解決には自社の製品が役立つということをアピールするケースもあります。

下記ランディングページは解決策タイプです。解決方法の提示から、実証や信頼パーツへと繋げていく構成になっています。

https://brand.taisho.co.jp/livita/lineup/kaimincare/
快眠ケア｜「リビタ」(Livita)

https://www.shinyakoso.com/yoruoso/healthyonswitch/
夜遅いごはんでも｜ヘルシーオンスイッチ

健康・美容系以外にも、同じような構成のランディングページはあります。
特に、結果と実証がセットになっている構成の場合には「こんな方には当社のサービスがオススメ、なぜならば...」という流れを作るのに使われることが多いです。

https://guitto-service.info/cms-lp
ぐいっと「CMS-LP」プランのご紹介

https://gatcya.kijima-p.co.jp/
データベース作成支援/フォームセキュリティ Gatcya

③実証

実証では、結果で記述したメリットをなぜ得られるのか、なぜその商品やサービスで問題を解決できるのか、その理由を説明し証明することが主になります。

結果と実証がセットで、1つのパーツとなっている構成もあります。
下記のランディングページでは、見出しが結果、その下の説明テキストが実証＝なぜ結果が出るかの説明と考えることができます。

https://biz.moneyforward.com/accounting/
マネーフォワード クラウド会計

KU-ORCASのLPは商品を売るタイプではありませんが、 beroreで問題（お悩み）、Afterで結果、その下が実証と３つのパーツで１つのセットになっています。コンパクトで見やすく、一連の流れが分かりやすいデザインですね。

https://www.ku-orcas.kansai-u.ac.jp/mystery/case/
CASE STUDY on KU-ORCAS｜関西大学アジア・オープン・リサーチセンター

結果と実証は境界線が曖昧ですし、ユーザーに対してメリットがある根拠の説明は多岐に渡ります。このため、実証は下記のように様々な方面からアプローチが行われています。

• メリットを提供できる理由
• 商品/サービスの特徴
• 他社との違い
• こだわりポイント
• 数値的根拠（改善率、満足度など数字で示せるもの）
• サービスの提供プロセス
• Q&A

サービスの特徴（ポイント）や、自社サービスが選ばれている理由として特徴や競合との比較を掲載しているランディングページも多いですね。

テキスト量が多くなりすぎるとユーザーが飽きて離脱してしまう可能性もあります。下記サイトくらいコンパクトに、分かりやすくまとめられていると良いですね。

https://www.cdc-de.ac.jp/basic-design/
中国デザイン専門学校

https://www.careearth.info/lp2/
Care Earth（ケアアース）

サービスの提供プロセス等は「面倒くさそうだな…」と思わせないようスッキリと見せることも重要です。実際には行う工程が多い場合でも、図を使ってコンパクトに表示するようにしましょう。

https://www.pressance.co.jp/crowdfunding/lp/
【プレファン】プレサンスの不動産投資クラウドファンディング

④信頼

信頼セクションでは、商品やサービスを提供する企業(人)への信用を高めるための情報を掲載します。「販売しているあなたは、信頼できる企業(人)」なのか、というユーザーの疑問を解決することで、購入するという決断を促すイメージです。

企業のブランディングが確立している場合はそこを、新規企業や個人の場合は信憑性のあるデータや専門家による推薦文などを掲載します。サービスを提供する人や、商品開発を行った人と開発コンセプトを紹介する事もあります。

• メディア掲載実績
• 表彰歴
• 科学的・医学的根拠（信憑性のあるデータ）
• 専門家による推薦文
• 実店舗の写真・創業年数
• 返金システムやアフターフォロー
• 社長や開発者の写真とメッセージ

サービス系のLPであれば、運営歴やメディア掲載実績が書かれていることが多いです。ここも単に列記するのではなく、デザインの統一感をしっかり保ったまま作成できるとクオリティが維持できますね。

https://taishoku.to-next.jp/otoko/
男の退職代行

健康食品系では、研究レビューなどのエビデンスを掲載しているページも多いです。エビデンス・メディア掲載・医師のコメントなど信頼材料を複数配置することもあります。

下は大正製薬のランディングページです。大正製薬は歴史と知名度がある企業。商品のエビデンス+企業紹介（創業年数等）で、ユーザーに十分な信頼材料を提供できています。

https://brand.taisho.co.jp/livita/lineup/kaimincare/
快眠ケア｜「リビタ」(Livita)｜ 大正製薬

⑤安心

安心のパートは価格に見合うだけの価値があるとユーザーが納得して、購入や資料請求に踏み切れるように促す役割があります。

代表的なものとして「お客様の声」があります。
数多くの利用者がいること、購入した人が満足していることを伝えて、価格に見合う価値があると“安心”してアクションに踏み切れるのです。更に、お客様の声では、自分と同じような人が問題から開放された、という共感・希望もユーザーに与えることが出来るでしょう。

https://kizuki.or.jp/futoko_lp/
キズキ共育塾

下記ランディングページでは、お客様の声とインタビューの両方が掲載されています。インタビューではリアルな問題と解決された結果が確認でき、ユーザーは安心だけではなく、自分の将来への希望も強く感じられそうですね。

https://item.pupustore.com/ad-sd
Adie+-アディエ- | ププストア【公式サイト】

お客様の声以外に、下記のような内容も安心材料となります。実際に売れている商品で、参加した・購入した人が満足しているということを伝えられれば良いのです。

• 過去の販売実績
• 累計販売数
• お客様満足度
• リピート率
• ユーザーによるSNSへの投稿

特に若い方がターゲットのランディングページでは、SNSを意識したハッシュタグ系のパートが設置されていることも多いですね。

https://shop.gb-life.jp/sp?ad_code=p7w9inmb
1DAY CLEANSE SET（ワンデイクレンズセット）

販売実績など数字が出てくる部分は、特立して１つのブロックとして使うことも、ファーストビュー等に組み込むこともあります。このあたりはユーザーに見て欲しい内容の優先順位と合わせて決定します。

https://glammyplus.com/lp?u=nad
グラミープラス

https://www.ownersbook.jp/
不動産投資クラウドファンディング『OwnersBook』

クロージング

クロージングには、ユーザーに行動を促す要素を配置します。
商品購入や資料請求のボタンなどです。

クロージングでは、ユーザーのアクションを後押しすることが重要。オファーと呼ばれる、購入や申込みで得られる特典を提示すると効果的です。

更に、ユーザーに「今、行動したほうが良い」と思わせるために、下記３つの要因を加えるケースもあります。

• 緊急性 -> ●日までにお申し込みで～
• 限定性 -> 限定10名様のみ、初回限定
• 特別性 -> ●●キャンペーン、●●フェア

https://www.mitsubishi-home.com/lp/smartorder-fit202109/
SMART ORDER Fit ご成約キャンペーン

https://seitai-kawashima.jp/asmy/
Asmy(アスミー) | 整体×エステ

まとめ

ランディングページ(LP)は大きくトップ、ボディ、クロージングの３エリアに分けられます。更に商品やサービスについて紹介するボディ部分では、ユーザーが納得・安心してアクションを起こせるよう、判断材料となる情報が配置されます。

ボディ内のパーツである『問題提起(共感)』『結果・解決策』『実証』『信頼』『安心』、これらの並び順は決まっていません。参考として紹介させて頂いたランディングページでも、それぞれ配置順や組み合わせは異なっています。

代表的な配置パターンとしては『結果』『安心』『実証』『信頼』の順番が上げられます。どんな良いことがあるのか、実際に役立ってている人がいる、ということをページ上部に配置することで、ユーザーの離脱を防ぐようなイメージです。

とは言え、ワイヤーフレームが完成した、デザインにGoが出たからと言って、ランディングページの構成が確定するわけではありません。

• ページ全体の流れを見て構成を見直す（改善する）
• リリース後に離脱率・クリック率を確認し見直す（改善する）

などなど、販売者が伝えたいことを伝えられているか、訪問ユーザーはエージを読んでくれているかを見直していく必要があります。リリース後もABテストを行うなどして、ベストな配置やデザインを探っていきます。

このため、実際に運用されているLPに“ザ・テンプレート通り”というものはあまりありません。各社それぞれ、ユーザーが自社商品やサービスに興味を持ちアクションを起こしてくれる構成を探りつつ制作しています。
似たような構成が多いとすれば、それは効果的な作りだからということになるのでしょう。

今リリースされていて、効果を出していそうなLPというのは全て私達にとって素晴らしい教材（お手本）と言えますね。
Webサイトを見る時は、ユーザーとしてだけではなく、作る側として「どうしてこういう配置にしたんだろう」「この順に並べたのはなんでだろう」と意識しながら見ると勉強になりますよ。

普段自分が見ないような業種のランディングページも見てみましょう。
きっと色々な発見があるはずです。