ランディングページ(LP)の作り方とは?構成、ワイヤーフレームの作成方法、注意点や重要ポイントも解説!

  • このエントリーをはてなブックマークに追加
  • Pocket

公開日:2022.08.30 / 最終更新日:2024.02.08


ランディングページの作り方 注意点や重要ポイントとは?

「ランディングページ(LP)を作っても全然成果がでない…」
こんなふうに頭を抱えているWeb担当者も多いのではないのでしょうか。

ランディングページ(LP)は、ただ作っただけでは、成果が出ることはありません。
成果を出すためには、ポイントやコツを抑えておく必要があります。

そこで今回は、ランディングページ(LP)の作り方や制作を進める上での注意点、抑えておくべきポイントについて解説していきます。

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

ランディングページとは
ランディングページ(LP)とは、広義的な意味に置き換えると、“ユーザーが一番最初に訪れるページ”のことです。

しかし、今回紹介するランディングページ(LP)は、デザインや訴求力が強く、訪問したユーザーに対して資料請求や商品の購入といったアクションを促す狭義的な意味のランディングページ(LP)のことで、Webマーケティングで一般的に使われています。

訪問したユーザーのアクションを促すためにも、インパクトのあるデザインやわかりやすいストーリー設計、離脱率を防ぐための無駄なリンクを設置しないなどの工夫が必要です。

また、ランディングページ(LP)は画像のみで構成されていたり、テキスト量が少ないので、ページ設計上でSEO対策によって上位表示することは難しいです。

そのため、SNSでランディングページ(LP)のリンクを掲載したり、メディアサイトのページにリンクの掲載、検索結果上に表示することのできるリスティング広告やアフィリエイトなどの成果報酬型広告などを活用する必要があります。

LPの基本を知りたい方は、以下の記事も参考にお読みください。

ランディングページ(LP)を制作する流れ

ランディングページ(LP)を制作する流れ
ランディングページ(LP)を制作する大まかな流れとしては以下の通りです。

1.目的の明確化
2.ペルソナの設定
3.ストーリー設計・構成作成
4.ライティング
5.デザイン作成
6.コーディング
7.公開後の修正・改善

順番に説明します。

1.目的の明確化

ランディングページ(LP)を制作する前に目的を明確化する必要があります。
「自社サービスの資料請求」、「自社の商品を購入」、「お問い合わせの数を増やしたい」など、企業によって目的は異なります。

目的によって、ユーザーに求めるアクションやランディングページ(LP)の情報量も変わってくるので、まずはどのような目的にするのか決めておきましょう。

2.ペルソナの設定

目的を明確にしたら、ペルソナの設定を行いましょう。

ペルソナとは、サービスや商品を使用する典型的なユーザーを表すために作られる仮想の人物のことを指します。

マーケティングにおいて、ペルソナの設定は欠かせません。

ペルソナを設定することで、ランディングページ(LP)のデザインや内容、訴求方法をより明確にしていきます。

ターゲットとペルソナは似ている言葉でもありますが、意味は異なります。

Webマーケティングでは、ターゲットは実際に存在している集団のことを指しますが、ペルソナは実際に存在しない架空の人物を設定することを指します。

架空の人物ではありますが、具現化するためにより詳細な人物像を設定することが必要です。

また、担当者の間でもリアルな人物像をイメージすることで、認識の相違が無くなることもメリットとして上げられます。

ユーザー視点での正確性も高めることができるので、無駄を省いてより効果的な訴求が可能です。

ペルソナ例 年齢: 25~28歳 性別:女性 住居地: 東京23区内 (職場から通勤1h) 職業: OL (デスクワーク) 年収 : 300~350万円 世帯: 一人暮らし 金銭的に余裕は大きくはないので、機能面・金額面でコストパフォーマンスを重視する傾向がある。ペルソナの設定をおこなう場合には、以下の内容を参考にしてみましょう。

年齢
性別
出身地
性格
職業
価値観
現在の悩み
普段の生活パターン

ただし、ペルソナの設定は一度おこなっただけでは完璧とは言えません。

ニーズも日々変化していくので、実際の販促状況なども確認しながら定期的にペルソナを調整する必要があります。

自分たちの都合の良いペルソナに設定すると、実際のユーザーに刺さらずに、失敗することもあります。

ペルソナを設定するときは、より”リアルにいそうな人物像”を考えることが重要です。

3.ストーリー設計・構成、ワイヤーフレーム作成

3-1ストーリー設計・構成

ランディングページ(LP)の構成を制作する場合には、情報の内容や伝える順番(ストーリー)を決めていきます。

ランディングページ(LP)は、コンバージョン(CV)を獲得することが最終目標となります。

そのためには、ユーザーの悩みや課題を、自社の商品やサービスで解決できることを訴求する必要があります。

一般的なLPのストーリー構成 1.ユーザーの悩み・問題 2.サービス・商品提案 3.ベネフィット 4.ロジック・エビデンス 5.権威性口コミ 6.オファー

上記はストーリー構成の一例ですが、自然に引き込みやすいストーリー設計をすることで、離脱率を下げながら読了率を高めていくことができます。

そして、自社のサービスの強みやメリットをよりわかりやすく説明するために、優位なストーリーを構成することで、よりオファーへのアクションを促しやすくなります。

3-2ワイヤーフレーム

構成が出来上がったら、ワイヤーフレームを作成しましょう。
ワイヤーフレームとは、「WEBページのレイアウトを決める設計図」です。

ワイヤーフレーム

ワイヤーフレームをあらかじめ決めておくことで、ストーリーや画像・ボタンなど配置する項目や構成が一目でわかるようになります。

そのため、ランディングページ(LP)の制作側のディレクターやデザイナーはもちろん、サービスご担当者も同じ共通認識で制作を進めることができるようになります。

ランディングページ(LP)におけるワイヤーフレームは、以下の内容が王道です。

例:BtoCでの健食や化粧品の場合 1.FV (ベネフィット・サービス内容) 2.悩み・課題の表面化 (共感・共鳴) 3.課題の原因(注意喚起) 4.課題の解決方法 (サービスの開示) 5.解決のロジック (証明) 6.オファー (購入促進) 7.サービスの強み (比較・ 差別化) 8.口コミや評判(第三者からの評価) 9.よくある質問 (疑問点の払拭) 10.クロージング (購入への後押し) 11.オファー (特典、 クロスセル)

ただし、自社サービスやペルソナによってワイヤーフレームの内容は異なります。
あくまでもユーザー目線に立って考えることが重要です。

先程のストーリー構成より詳細になり、設計図のように具体化していることにより複数人で作業する場合にもワイヤーフレームがあることで、役割分担がしやすく、作業効率も向上できます。

また、不要な項目や必要な項目を確認することできたり、完成前にユーザー視点で視線誘導もチェックすることができるので、大幅な修正を防ぐことにも繋がります。

4.ライティング

ライティングをする際のポイントとして、誰に向けて書いた文章なのかを明確にしましょう。
抽象的な文章は誰にでも当てはまりますが、逆にいうと誰の心にも刺さりません。

そのため、せっかく訪問したとしても、自分には関係のないことだと感じてしまい、すぐに離脱する原因になります。

設定したペルソナに基づいて、ユーザーに響くような文章を心がけましょう。

また、専門用語の多用は難解だと感じやすく離脱率を高める原因にもなります。
誰が見てもわかりやすい文章を心がけましょう。

サービスの内容や、どのような広告からの流入かによってコンテンツの深堀りが必要な場合もあります。

仮に健康サプリを販売するのであれば、「商品を使うメリットをどう伝えるべきなのか」など、取り扱う商品やサービスによって深堀する内容が異なります。

商品やサービスに合ったライティングを行いましょう。

終盤では、CVへの後押しを意識したライティングが必要です。
最後まで読んだユーザーが、購入やお問い合わせをしたくなる文章を考えましょう。

もちろん、最初から完璧な文章を書くことはできないので、何度も修正を重ねていきましょう。

5.デザイン作成

デザインは、ランディングページ(LP)においても非常に重要なポイントです。
デザイン次第では、コンバージョン(CV)率も大きく異なります。

特にFV(ファーストビュー)でのインパクトが大切で、訪問者はFVが表示されて1〜2秒で離脱するかを判断します。

そのため極力短くわかりやすいキャッチコピーと、コピーに合ったビジュアルを設計、キャンペーンがある場合にはメリットをしっかり伝えることで興味をもたせスクロールしてもらいます。
また、権威性としての第三者機関のランキングや満足度などの評価、実績数としての数字を入れることも重要です。

LP全体としても同様に、長文ばかりでは読みにくく、大切なポイントが埋もれてしまうため、文章だけではなく装飾のある見出しや絵で視線を誘導させながら読ませることを意識して作成しましょう。

絵で読ませることによって、直感的に文章への理解を深めることができます。

また、視認しやすいフォントサイズや色のバランスを心がけることで、伝えたいポイントを強調することが可能です。

ランディングページ(LP)専用のデザイナーが存在するほど、ランディングページ(LP)のデザインは難しいです。

一般的なデザインの理解だけではなく、WEBの理解、訴求サービスの理解、マーケティングの知識なども兼ね備えている必要があります。

デザインが思いつかない場合には、競合のランディングページ(LP)をチェックするのもオススメですが、いっそのことプロにお願いした方が費用対効果が見込めるデザインが作成できます。

6.コーディング

デザインが完成した後には、コーディングを行う必要があります。

デザインをHTML、CSS、javascriptなどを利用し、デザインをブラウザで閲覧できるようにコーディングします。

LPの公開後はABテストで修正を行ったり、広告出稿審査で、媒体元から修正がかかることもあるので、コーディングは誰もが修正しやすいように作成することが重要です。

また、この作業で画像の表示速度や、ストレスの感じないエフェクト動作なのかも考えながら作成し、ユーザーの使いやすさを考慮して、メールフォームに郵便番号から住所を自動表示する機能や、入力補助としてバリデーション機能を加えるなど、ユーザビリティに配慮する必要があります。

カートシステムとの連携が必要な場合は、仕様を把握した上でカスタマイズの必要性があるのかも検討しておきましょう。

7.公開後の修正・改善

ランディングページ(LP)を公開は終わりではなく、スタートです。

今のランディングページ(LP)から、さらにコンバージョン(CV)を上げるにはどうすべきか仮説を立てて、修正や改善を行い最適化を図りましょう。
この仮説〜検証〜評価〜改善の一連のPDCAサイクルを繰り返すことでLPの最適化が行われていきます。

ランディングページ(LP)を最適化することを「LPO(Landing Page Optimaization)」と呼びます。

LPOでは、マーケティングやペルソナ、実際の購買者の心理などを考慮して仮説を立てていきましょう。

ABテストと多変量テスト

LPOでは、ページの一部を変更してAパターン・Bパターンのどちらが良い結果になるかを調査するABテストや、ベージの複数箇所を変更して最良の組み合わせ結果を導き出す多変量テストがございます。

ABテストや多変量テストを繰り返して、その中で最もコンバージョン(CV)が高いページをチャンピオンページといいます。

このチャンピオンページを作るために繰り返しテストを行うことが必要です。

LPOのテストでは効果が大きく変わりやすい箇所から順次テストを行っていきます。

特にコンバージョン(CV)が大きく変わる場所は、「ファーストビュー」「オファーエリア(CVボタンまわり)」「フォーム(購入/資料請求など)」となります。

LPOをおこなう場合には、GoogleアナリティクスやGoogleオプティマイズ、ヒートマップツールの活用、その他にも優良なツールを駆使して、ランディングページ(LP)を定期的にブラッシュアップしていきましょう。

ランディングページ(LP)の構成について

ランディングページ(LP)の構成について

ランディングページ(LP)の構成についても項目ごとに紹介します。

ファーストビュー

ファーストビューエリアファーストビューエリア 広告と連動したキャッチであるとコンバージョン率が 高くなる。 ペルソナへの訴求を意識する。 ・メインキャッチ ・サブキャッチコピー ・画像 ・コンバージョンボタン等 メインキャッチ サブキャッチコピー 画像等 コンバージョンボタン
ファーストビューとは、訪れたユーザーが一番最初に目に留まる部分です。
そのため、ランディングページ(LP)の中でも最も重要なパーツになります。

ファーストビューは以下の内容によって構成されています。

キャッチコピー
アイキャッチ画像
権威づけ
CTA

1-1キャッチコピー

キャッチコピーは、先ほども述べたようにユーザーが読むか読まないかを判断する重要なポイントです。

ファーストビューが刺さらなければ、スクロールされることもないので、訪問者の”ベネフィット”は何かを明確にし、このベネフィットを実現するキャッチコピーを作りましょう。

1-2権威付け

またサブキャッチとして、サービスの強みや、数字で実績を表したり、エビデンスを用いるなど、訪問者にとって”何が重要視されるているのか”を競合他社の売れているLPなどと照らし合わせながら慎重に選定することをおすすめします。

1-3アイキャッチ

アイキャッチ画像は、一目見ただけでどんなランディングページ(LP)か伝わるような画像・イメージにしましょう。

1-4CTA

CTAとは「Call To Action」の略で、直訳すると「行動喚起」です。

ファーストビューに購入ボタン(CTAボタン)を設置することで、他社と比較して再訪された方や、すでに購入を決めているユーザーのコンバージョン(CV)を高めることができます。

また、「初回限定〇〇円キャンペーン」などインパクトのあるキャンペーンの場合にも有効です。

FVではこれらすべての要素の見せたい優先順位とバランスが重要です。

ボディコピー

ボディエリア ユーザーへ商品を説明するコンテンツが中心。 商品特性、メリット、お客様の声などを掲載するエリア。 ・メリット ・差別化 ・お客様の声 ・メディア掲載事例等 こんな人におすすめ 画像等 お悩み状況設定等 この商品がオススメです! 商品の特性 テキストや画像 御客様の声、商品のこだわり等 テキストや画像 メディア掲載情報 テキストや画像 コンパージョンポタン
ボディエリアは、ランディングページ(LP)のメインとなる部分で、「共感・興味関心」、「エビデンス」、「信頼」などの要素を掲載していきます。
それぞれ解説します。

共感・興味関心

まずはユーザーが抱えている悩みを提示して共感してあげることが大事です。

悩みなどからの”課題の表面化”、”課題の原因はなにか”、”課題の解決方法(サービスの提示)”といった内容にすることで、ユーザーの興味を惹かせることができます。

エビデンス

興味を惹かせたら、ユーザーにどんな効果があるのか、こだわりやエビデンスを示しましょう。

実際の試験結果や権威性のある実績、具体的な数字を開示することでユーザーはイメージしやすくなります。

また、競合他社と比べた時の機能の豊富さや活用例も一緒に伝えることで、コンバージョン(CV)の獲得にも繋がります。

信頼

最終的にユーザーから信頼してもらう必要があります。
信頼してもらえなければ、ユーザーが商品やサービスを購入することはないからです。

信頼を勝ち取るために、メディア掲載の実績や実際に利用したユーザーの声やその業界に精通している有名人や、専門家のインタビューを使用するのが効果的です。

また、よくある質問コーナーなどを記載しておくと、購入するにあたっての懸念点を払拭することができます。

ベネフィットを明確にする

ランディングページ(LP)では、商品の特徴を伝えるだけではなく、ベネフィットを明確にすることが重要です。

ベネフィットとは、ユーザーが求めている「商品やサービスを利用することで得られる変化」のことを指します。

ベネフィットを明確にすることで、ユーザーが探している内容と求めている理想像に近づくイメージがマッチしていると伝えることができます。

その結果、ユーザーがページ内のコンテンツに興味を持ち、購買意欲を促進されることでコンバージョン(CV)の獲得にも繋がるのです。

オファー・コンバージョンエリア

クロージングエリア 今すぐ買いたいと思わせるエリア。 ・希少性 ・緊急性 ・プレミアム性(プレゼント、限定、キャンペーン等) 限定特典情報等 コンパージョンボタン
ファーストビューで興味を惹かせて、ボディコピーで自社の商品やサービスの効果も理解してもらったら、最後にクロージングをおこなう必要があります。

クロージングは、CTAとエントリーフォームの2つがあります。
CTAはボタンの色や配置場所、デザインなどによってクリック率が大幅に異なります。

実例として挙げると、スマホ用に右側のCTAボタンを用意していたデザインがありましたが、左利きの人は使いにくいという仮説を立て、どちらのユーザーにも利便性があるように横幅いっぱいのボタンにしたところ、コンバージョン(CV)率が改善されたケースもあります。

実際に検証してコンバージョン(CV)率が高いデザインや配置場所を見つけましょう。

ランディングページ(LP)の制作手段

ランディングページ(LP)の制作手段

ランディングページ(LP)の制作手段を4つ紹介します。

自社で社内制作する

メリット
  • 費用を抑えることができる
  • 自分たちの好みに合わせて自由にカスタマイズが可能
  • エラーが発生してもすぐに修正できる
デメリット
  • 専門的な知識が必要になる
  • 人件コストや手間がかかる

1つ目は自社で制作する方法です。
自社でランディングページ(LP)を制作することで、費用を抑えることができます。

また、自分たちの好みに合わせて自由にカスタマイズをおこなったり、エラーが発生してもすぐに修正することが可能です。

しかし、一から制作する場合には専門的な知識が必要になります。
そのため、ランディングページ(LP)制作ツールを使う企業も少なくありません。

WEBサイト制作会社に依頼する

メリット
  • 自社の要望に沿ったクオリティの高いランディングページ(LP)の制作が可能
  • 一括して依頼できるので、専門的知識が不要
デメリット
  • 費用が高額になる可能性がある

2つ目はWEBサイト制作会社に依頼する方法です。

WEBサイト制作会社に依頼することで、自社の要望に沿ったクオリティの高いランディングページ(LP)を制作してもらうことができます。

ただし、費用が高額になるケースがあるので、依頼する場合にはあらかじめ予算を確保しておきましょう。

フリーランスやクラウドソーシングサイトに依頼する

メリット
  • 制作会社に依頼するよりもコストを抑えて依頼できる
デメリット
  • 依頼する人によってレベル差がある
  • クラウドソーシングサイトに登録して操作する必要があるので手間がかかる

3つ目は、フリーランスやクラウドソーシングサイトに依頼する方法です。
制作会社に依頼するよりもコストを抑えて依頼することができます。

そのため、予算が厳しい場合にはオススメです。

しかし、依頼する人によってレベル差があるので、自分たちが求めていたランディングページ(LP)が納品されない可能性があります。

また、クラウドソーシングサイトに登録して操作しなければ異型なので、面倒くさいと感じるかもしれません。

WEBマーケティングとWEB制作を一貫しておこなっている会社に依頼

メリット
  • ランディングページ(LP)の制作だけではなく、その後のLPOまで依頼することができる
デメリット
  • 制作会社に依頼するよりも費用が高くなる可能性がある

4つ目は、WEBマーケティングとWEB制作を一貫しておこなっている会社に依頼する方法です。

ランディングページ(LP)は完成した後の分析や改善によってCV率も変わってきます。

費用面だけで選んで制作した場合、効果が現れずにペルソナやストーリー設計などを一から修正しなければいけないケースも少なくなく、担当者にかかる負担が大きくなってしまいリリースが先延ばしになってしまったり、効果が大きく見られないことも少なくありません。
実際にそのようなご相談をいただくことが多くございます。

事前調査〜WEB制作〜マーケティング(運用)を一貫して行っている会社に依頼することで、ランディングページの完成度が高く、完成した後の運用までトータルで依頼することができます。

まとめ

まとめ
今回は、ランディングページ(LP)の作り方や作る上での注意点、制作を行う上でのポイントについて解説しました。

ランディングページ(LP)は制作ツールなどもあり、容易に制作することは可能ですが、売れるランディングページ(LP)を制作するためには専門的な知識が必ず必要になります。

また、ランディングページ(LP)の公開後にも、ABテストを始めとする定期的なブラッシュアップをおこなうことで、より効果的なランディングページ(LP)を完成させることができます。

ランディングページ最適化(LPO)は専門的な知識以外にも、WEBマーケティングの経験やユーザビリティ向上など、手間と時間がかかるので、専門的な人員とリソースを確保できない企業もいらっしゃいます。その際は専門で分析ができる企業に相談することをオススメします。

今回ご紹介したLP制作におけるルールやメリット、デメリットなどを正しく理解したうえで、自社のサービスにあうLP制作にご活用ください。

  • このエントリーをはてなブックマークに追加
  • Pocket
トップに戻る