Share on

LP(ランディングページ)とは?作成ツールと作り方を解説

LP(ランディングページ)とは?作成ツールと作り方を解説

「LPを作って広告を回せば売れるだろう」と簡単に考えてしまっていませんか?

たしかにLPは売るために作るWebページですが、作っただけでは成果につながりません。ユーザーが思わず納得してしまうページの構造と、継続的な最適化が必要です。

この記事では、「LPの作り方」「自社でも作れるWeb制作ツール」「最適化の方法」について、Web担当者になったばかりの方でもわかるように解説しました。

「LPの導入検討している」
「自社で作って運用してみたい」
と考えている方はぜひ最後までお読みください。

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

ランディングページとは、広い意味では名前のとおり「サイト訪問者が最初に着地するページ」のことです。狭い意味ではユーザーに商品やサービスの購入などを促す縦長1枚の Web ページを指します。 LP というとこちらの意味で使われることが多いです。

本記事では後者の LP について解説をします。

LP(ランディングページ)の目的

LP の目的はユーザーに行動を促すことです。 一般に消費者の購買行動は「認知」「関心」「購入」というプロセスを踏みます。LPが関わるのは「関心」から「購入」へのプロセスです。 商品やサービスをすでに知っており、ある程度関心を持っている人に訴求して成約につなげます。

LPが関わるのは「関心」から「購入」へのプロセス

LP(ランディングページ)のメリット

LPには以下のメリットがあります。

  • 成約しやすい構造になっている
  • 改善しやすい
  • SEO を考慮せずコンテンツが作れる

一つずつ見ていきましょう。

成約しやすい構造になっている

LP は「成約につなげる」というシンプルな目的で作られるものです。それゆえ成約しやすい構造を持っています。たとえば以下です。

  • リンクが少ない
  • 上から下へのシンプルな導線
  • 購買心理を踏まえたコンテンツ構成
  • クリックしやすいボタンデザイン など

上から下までスクロールして成約という流れは、有能なセールスマンの話をずっと聞いていたらつい買う気になってしまったのと似ています。ユーザーを納得させる話の流れが構造的に作られているのがLPなのです。

改善しやすい

縦長でシンプルなページであるため、問題点が発見しやすく早いサイクルで改善が可能です。

よく使われるのは「ヒートマップツール」。ページの中でとくに見られているところは赤く、さっと流されているところは青く表示します。クリックされた箇所やページごとの到達率も見られます。これにより離脱ポイントや注目されていないコンテンツなどがわかるため改善ができるのです。

LP は通常 Web 広告と紐付けて運用するため、SEO に比べて訪問者が集まりやすくデータが溜まるのも早いです。これも PDCA が早く回せる要因となっています。

広告と連動すればSEOは考慮しなくていい

Web広告と一緒に運用する場合、SEOを気にせずページを作れます。検索エンジンからの評価とは関係なく「売るためにベストなコンテンツ」が作れるのです。

そもそも売ることを目的に作られるLPは広告に近いコンテンツです。そのため検索エンジンに評価されにくく、SEO対策を行っても検索上位に表示させることはむずかしいです。できたとしても時間がかかりすぎます。

広告と一緒に運用するのであれば、SEOはひとまず考えなくていいでしょう。長期的には取り組んでみてもいいかもしれません。

LP(ランディングページ)のデメリット

LPの制作・運用にはスキルもしくはコストがかかります。詳しく見ていきましょう。

制作・運用にスキルがいる

売ることに特化したLPを作るにはセールスライティングなどの技術がいります。縦長1ページだから売れるわけではなく、適切なコンテンツを効果的な順番で見せられるからこそ狙った効果が得られるのです。

運用においてはWeb広告を扱うスキルが必要です。テキストやクリエイティブの作成はもちろん、データをもとに改善できる知識と技術がある人でないと成果を上げるのは難しいでしょう。

自社ですべてをやるならWebページの制作、ライティング、デザイン、広告、心理学など広範なスキルと知識をもつ人材が必要とされ、現実的には厳しい条件です。

制作・運用にコストがかかる

制作から運用までを業者に任せる方法もありますが、当然コストがかかります。ここで大事なのは、コストがかかること自体はデメリットではないということです。

考えるべきは、コストかけた上でどれだけの利益が得られるか。かけたコスト以上の利益が出るなら、コストをかけてでもやる価値があります。逆にコストに見合う利益が得られないなら、やるべきではありません。

すべて自社で行えばコストは安く済むかもしれませんが、成果につながらなければ割いたリソースは無駄になります。コストをかけてでもやる価値があるのかどうか評価しながら運用するべきでしょう。

LP(ランディングページ)に力を入れるべき理由

LPの制作や運用には注力すべきです。
以下の理由で成果に結びつきやすいからです。

1. コンバージョン率の向上

LPの制作に力を入れる理由の一つは、コンバージョン率の向上です。LPは訪問者に特定の行動を促すために設計されており、一つの明確なコール・トゥ・アクション(CTA)に焦点を当てています。専用のLPを制作し、効果的なコピーとデザインを組み合わせることで、訪問者を顧客にしやすくなり、ビジネスの成果を向上させることができます。

2. ターゲットユーザーへのフォーカス

LPは特定の製品、サービス、キャンペーン、またはターゲットユーザーグループに焦点を当てたコンテンツを提供するため、効果的なターゲットマーケティングが可能です。訪問者がLPにランディングした時点で、そのコンテンツは彼らのニーズや関心に合致しており、内容次第でより関心を引き、アクションに結びつけやすくなります。

3. A/B テストと最適化の容易性

LPは構造がシンプルなため、A/B テストと最適化が容易です。LPを複数バージョン制作し、異なる要素(見出し、コピー、CTAボタン、デザインなど)をテストできます。データに基づいた改善を行いながら、コンバージョン率を最適化し、ROIを向上させることが可能です。

LP(ランディングページ)作成3つのコツ

LP作成で押さえるべきポイントは以下の3つです。

  • ファーストビューにこだわる
  • 構成にこだわる
  • LP制作は改善込みで考える

一つずつ見ていきます。

ファーストビューにこだわる

ファーストビューとはページの最上部で、ユーザーがページに訪れて最初に見る部分です。 ここを見た時点で「関係ない」「魅力がない」と思われたら一瞬で離脱されてしまいます。

一般にランディングページのファーストビューにおける離脱率は70%と言われています。ユーザーをいかに引き込むファーストビューにするかが成否の分かれ目です。

構成にこだわる

コンバージョンにつながる LP とつながらない LP。違いの一つが「構成」です。読む人の心の動きを先回りして情報を提示することで、ユーザーは気持ちよくページを読み進め、納得して成約してくれます。

もちろん最後まで読んだからといって成約につながるとは限りません。 しかし関心が高い人ほどしっかりとページを読む傾向はあります。

時間をかけて終わりまで読んでくれる人は購入する確率が高いはずです。それだけにストレスなく終わりまで読み進められる構成を作るのが重要なのです。

LP制作は改善込みで考える

LP は作ったところがスタートラインです。 結果がどうなるかは運用してみないとわかりません。どんなにファーストビューや構成にこだわっても一回で最適解が得られることはないでしょう。

運用しながらクリック率、コンバージョン率などの数値を計測し改善すべきポイントを特定。仮説に基づいた修正を加え、少しずつコンバージョンしやすいページにしていきます。

自社でLP(ランディングページ)が作れるツール

LPは自社でも制作できます。初めからプロに依頼してもいいですが、一度自分たちでやってみて依頼すべきかどうかを判断してもいいでしょう。

プログラミングの知識がなくても、LPが作れるツールを4つご紹介します。

STUDIO

STUDIO

参考

ノーコードでWeb制作ができる日本発のツールです。登録さえすれば、無料で使い始められます。

無料で使う場合は、STUDIOの共有ドメインを使用し、STUDIOのバナーが表示されます。しかし、バナーはとても控えめで、試しに作ってみるなら十分です。

STUDIOでできることは、こちらの記事を見ればわかります。

現役Webデザイナーと1から学ぶSTUDIOの使い方!【入門編】

現役Webデザイナーと1から学ぶSTUDIOの使い方!【入門編】

ペライチ

ペライチ

参考

ペライチは、名前のとおり1ページのLPから複数ページのWebサイトまでノーコードで作れるツールです。「セミナー」「サロン」など、分野ごとにデザインテンプレートが用意されており、ゼロからデザインする必要がありません。ちょっと試しに作ってみたいときに重宝します。1ページだけなら無料で作れます。

WordPress

WordPress

参考

すでにWordPressをお使いなら、固定ページを利用してLPを作成することができます。使用中のテーマによってはLPを作る機能が用意されており、非常に便利です。

LPは通常1枚ページで、ヘッダーがない、もしくは本サイトとは別のヘッダーを使用します。固定ページで作る場合は、このようなLP専用のレイアウトが可能かどうかチェックしましょう。

LP(ランディングページ)の作り方

LPは自社でも制作できます。初めからプロに依頼してもいいですが、一度自分たちでやってみて依頼すべきかどうかを判断してもいいでしょう。

プログラミングの知識がなくても、LPが作れるツールを4つご紹介します。

STUDIO

STUDIO

参考

ノーコードでWeb制作ができる日本発のツールです。登録さえすれば、無料で使い始められます。

無料で使う場合は、STUDIOの共有ドメインを使用し、STUDIOのバナーが表示されます。しかし、バナーはとても控えめで、試しに作ってみるなら十分です。

STUDIOでできることは、こちらの記事を見ればわかります。

現役Webデザイナーと1から学ぶSTUDIOの使い方!【入門編】

現役Webデザイナーと1から学ぶSTUDIOの使い方!【入門編】

ペライチ

ペライチ

参考

ペライチは、名前のとおり1ページのLPから複数ページのWebサイトまでノーコードで作れるツールです。「セミナー」「サロン」など、分野ごとにデザインテンプレートが用意されており、ゼロからデザインする必要がありません。ちょっと試しに作ってみたいときに重宝します。1ページだけなら無料で作れます。

WordPress

WordPress

参考

すでにWordPressをお使いなら、固定ページを利用してLPを作成することができます。使用中のテーマによってはLPを作る機能が用意されており、非常に便利です。

LPは通常1枚ページで、ヘッダーがない、もしくは本サイトとは別のヘッダーを使用します。固定ページで作る場合は、このようなLP専用のレイアウトが可能かどうかチェックしましょう。

LP(ランディングページ)の作り方

ではLPの作り方を見ていきましょう。LPは7つのステップで制作します。

  1. 目標を設定する
  2. ペルソナを設定する
  3. LP の構成を決める
  4. ワイヤーフレームを作る
  5. デザインを作成する
  6. コーディングする
  7. 効果検証と最適化

目標を設定する

目標として KGI と KPI を設定します。

  • KGI(Key Goal Indicator):全体の目標
  • KPI(Key Performance Indicator):全体目標を達成するための中間目標

たとえば KGIを無料相談のお申し込み10件/月とすると、KPIは以下のように設定できます。

  • 広告表示回数:20万回
  • 広告のクリック率:0.5%
  • ページ訪問数:1000
  • コンバージョン率:1%

これらの値がクリアできればKGIは達成できるはずです。運用しながら目標値が変わってきそうなら、その都度変更します。

ペルソナを設定する

ペルソナとはターゲットである顧客層を代表する人物モデルです。具体的に一人の人物を想定しましょう。

名前、年齢、居住地、職業などの基本情報から、抱えている悩み、購買行動、思考パターンまで細かく設定します。 実際にペルソナに近い顧客に直接インタビューして情報を集めるといいです。

ペルソナを設定することで、ユーザーが求めていることと企業が考える商品価値のズレを最小限にし、ユーザーにとって満足度の高いコンテンツが提供しやすくなります。

LP(ランディングページ)の構成を決める

LP は大きく分けて三つの部分から構成されます。

  • ファーストビュー
  • ボディ
  • クロージング

ファーストビュー

ファーストビューはもっとも重要なパートです。ユーザーが読み進めるか離脱するかはここで決まります。

ファーストビューの役割は以下の三つです。

  • 期待させる
  • 共感させる
  • 認知的不協和を与える

ファーストビューの役割は、ターゲットや扱う商品サービスによって適切なものを選択しましょう。たとえば「懐かしの歌謡曲全集」を売るのであれば、「知っている曲ばかり。懐かしくて涙が出ました」のようなキャッチコピーで共感させるファーストビューがいいかもしれません。

認知的不協和について説明しておきます。認知的不協和とは常識と思っていたことが覆って「え、そうなの?」となる心理状態です。理由が知りたくてつい先を読もうとしてしまう。そんなユーザーの心理をファーストビューで作り出すのです。

ボディ

ボディはユーザーの決断をアシストする部分です。読み手の行動や考えを変えるには、その根拠になる材料が必要となります。

パートごとに提示する材料は以下のものです。

パート 材料
共感を得る 「そう、それ!」と思わず声が出るようなユーザーの悩みを列挙する
解決法を紹介する 商品はサービスをベネフィットと一緒に紹介する
比較してもらう 価格や特典など他社と比較できる材料を提示する
信用してもらう お客様の声、販売する、販売者本人の動画など
不安を解消する ユーザーがもつであろう不安を取り除く。FAQや返金保証など。
感情を動かす 自分たちの想いや理念を伝え価格やスペック以外の価値を感じ取ってもらう
想像させる 商品やサービスを手に入れた後の世界を想像させる
買う理由を作る 自分以外の人のことを理由に「買うのはしかたない」と思わせる
必要性に気づかせる 今のままだと来るかもしれない「よくない未来」を想像させる

以上からいくつかを組み合わせてボディにします。たとえば以下のような順番です。

  1. 共感を得る
  2. 解決法を紹介する
  3. 信用してもらう
  4. 比較してもらう
  5. 不安を解消する
  6. 買う理由を作る

順番は反応を見て組み替えていきましょう。必要に応じてパートの削除、追加も検討します。

クロージング

ユーザーの行動を促すパートです。申し込みボタンやフォームを配置します。

ファーストビューとボディでユーザーの感情を強く揺さぶったとしても、フォームが使いづらかったら申し込む気が失せてしまいます。ユーザーの行動しやすさを第一に考えて入力項目を選定しましょう。

行動を後押しするには、最後の「もうひと押し」が必要です。簡便性、希少性、限定性、特典、保証などを訴求して「今申し込まなければ!「損したくない!」と思ってもらえるようにします。これもクロージングでやるべきことです。

ワイヤーフレームを作る

テキストで作った構成をワイヤーフレームで視覚化します。

ワイヤーフレームはWebサイトの設計図みたいなものです。各パートの順番だけでなくどんな要素を入れるか、どんな配置にするかを決めましょう。この時点でキャッチコピーなどのテキストができていると、次のデザイン作成の工程が進めやすくなります。

ワイヤーフレーム

LP(ランディングページ)のデザインを作成する

ワイヤーフレームをもとに具体的なデザインにしていきます。デザインはユーザーに快適に読み進めてもらうために必要なものです。ユーザー視点で考えてみましょう。

  • ターゲットユーザーが好むデザインになっているか?
  • ユーザーが動きやすいようにサイト内の誘導はできているか?
  • 1スクロールで表示される情報量は多すぎないか?

デザインも1回で正解は出ません。ボタンの色を少し変えただけで効果が大きく変わることもあります。つねにユーザーの反応を見て変えていくものなので、最初からこだわりすぎないようにしましょう。

LP の構成

ワイヤーフレームとデザイン作成にはFigmaがよく使われます。使い方はこちらの記事にまとめました。

勉強し始めるなら今!Web制作におけるFigmaの使い方〜超初級編!【XDから卒業】

勉強し始めるなら今!Web制作におけるFigmaの使い方〜超初級編!【XDから卒業】

LP(ランディングページ)をコーディングする

デザインができたらコーディングです。HTML、CSS、Javascriptなどを使ってネット上で表示できる形にしていきます。

自社で作る場合にはノーコードツールが便利です。WordPress、Wix、STUDIO、ペライチがよく使われます。

STUDIOは日本発のサービスです。管理画面の日本語表示はもちろん、チャットサポートも日本語で受けられます。サーバー管理はSTUDIO側でやってくれるので、自社での作業はありません。使い方や他サービスとの比較など、詳しくはこちらの記事にまとめました。

ノーコードツール「STUDIO」でサイト制作をする人に知ってほしいメリットとデメリット

ノーコードツール「STUDIO」でサイト制作をする人に知ってほしいメリットとデメリット

LP(ランディングページ)の効果検証と最適化

LPの効果検証と最適化のプロセスは、データに基づいて行われます。以下のステップを実行してデータを収集し、分析しましょう。

STEP1. ウェブ解析ツールの導入

まず、ウェブ解析ツールをLPに導入し、訪問者の行動、コンバージョン率、トラフィックソースなどのデータを収集します。
ツールで迷ったら、「GA4」と「ヒートマップツール」を入れておけば、とりあえずは大丈夫です。

STEP2. イベントトラッキングの設定

特定のアクション(ボタンクリック、フォーム送信など)が行われたときに計測できるように、トラッキングイベントを設定し、重要なデータポイントを収集します。

これはGA4での作業です。

GA4とは?メリットや設定方法、いつまでに対応すべきか?

GA4とは?メリットや設定方法、いつまでに対応すべきか?

STEP3. A/Bテストの実施

LPの異なるバリエーションを作成し、A/Bテストを実施して効果を比較します。
効果の比較ではヒートマップが有効です。ページのどこで離脱されているか、どこをクリックされたかがわかります。
この結果をもとに、LPのデザインやテキストに修正を加え、また様子を見るの繰り返しです。

まとめ

以上、LP(ランディングページ)について目的と作り方を解説しました。

見た目はシンプルなLPですが、制作にあたっては考えることも作業もかなりあるのがわかったかと思います。また運用しながら改善し、成果の出るページに近づけていく努力も必要です。

自社でやるか外注するかはリソース、予算、かけられる時間、得られる利益などを検討して決めてください。本記事がLP導入を検討する際の参考になりましたら幸いです。

お問い合わせはこちらから

Web制作デザイン、丸ごとお任せ

お問い合わせする

Share on

お問い合わせはこちら

CATEGORY LIST