LP（ランディングページ）制作の流れを解説。3つの構成要素や制作時の注意点

興味・関心度の高いリードに自社商品・製品をアピールできるLPは、企業の売上アップを行うための重要な施策のひとつです。

ただし、LPを単に制作するのではなく、ポイントをおさえて作らなければ成果はあげられません。そこで本記事では、LP制作全体の流れやLP制作時に注意したいポイントなどについて解説します。

目次

1. LP（ランディングページ）とは
2. LPの作成方法
3. LP制作全体の流れ
4. LPを構成する重要な3つの要素
5. LP制作時に注意したいポイント
6. LPO（LP最適化）のやり方
7. LPはブラッシュアップし続けることが大切

▼自分で簡単にLP作成ができるツールこちら

【月額9,800円〜】LPを自分でサクサク作り放題｜LP One

LPの改善と量産を外部業者やエンジニアに依頼せずに自分で完了。マーケティング機能も充実。PDCAが高速に回せます。

LP（ランディングページ）とは

LP（ランディングページ）とは、広義ではユーザーが最初に訪れるページ、狭義では流入したユーザーに特定のアクションを促すページを指します。LPは集客を目的としたページであることから、広告やSNSからの流入先として指定されている場合が多いです。

広告やSNSから流入してきた関心度が高い見込み客に対し、ターゲットに合わせたテキストや画像を用いて、自社の商品・サービスを訴求します。そのため端的に説明すると、「CVを増やすためのページ」と言えるでしょう。

LP制作で大切なことは、ユーザーニーズに合わせた内容にすることです。どんなにいいLPを作っても、ユーザーがCVに至らなければ成果につながりません。ユーザーがどのような情報を欲しているのか、どうすればCVへと導けるのかを考えながら取り組む必要があります。

関連記事：ランディングページ（LP）とは？作り方とBtoBで活きる構成

LPの作成方法

LPの作成方法は大まかに分けると、社内で作成するか、外部に依頼するかの2通りの方法があります。以下で、それぞれのメリットとデメリットをまとめました。

作り方1：社内で作成する

LP作成ツールやCMSなどを用いて、LPを社内で自作する方法です。

HTMLやサーバーなどに関する専門知識がなくても、こういったツールを利用することで、簡単にLPの作成・運用が可能です。

LPを社内で作成することで制作コストを抑えられるのが一番のメリットです。その一方でLP制作に精通した人材が社内にいない場合、効果的なLPO（LP最適化）やSEO対策の実施は難しく、成果につながりにくかったり、制作に時間がかかったりする傾向にあります。

▼社内でLP作成ができるツールこちら

作り方2：外部に依頼する

制作会社やフリーランスにLP制作を外注する方法もあります。費用の目安は以下です。

外部に依頼することで、プロのノウハウが詰まったユーザーに響くキャッチコピーやデザインのLPが作れます。その結果、SEO対策やCV率アップも期待できます。

制作会社やフリーランスに加えて、CMSサービスを提供している会社に依頼するのも候補として考えられるでしょう。CMSでは更新が簡単にできるため、キャッチコピーや画像の差し替えなどのABテストが容易に行えます。
なお、外部に依頼すると制作コストは高くなりやすいため注意しましょう。個人で制作を請け負うフリーランスでも制作費は5万円以上、企業へ外注する場合は10万以上、規模の大きい会社などは50万以上の制作コストがかかる場合もあります。

​関連記事：LP制作の相場とは？費用の内訳や発注先の選び方を解説

LP制作全体の流れ

LP制作全体の流れは以下の通りです。

1. 目的・目標の設定
2. ペルソナの設定
3. 競合調査・訴求方法の検討
4. 構成作成
5. ライティング・素材整理
6. デザイン
7. コーディング
8. 公開・ 効果測定

1. 目的・目標の設定

LP制作に取り掛かる前に、まずは目的・目標を明確化しましょう。「LPを通してどのような成果を得たいか」によって、LPの設計や内容が変わってきます。

一般的にLPでは、以下のような目的・目標が設定されることが多いです。

• 申し込み
• 資料請求
• 問い合わせ
• メルマガ登録

目標を設定する際は「資料請求10件」「メルマガ登録20件」など、具体的な数字目標を含めると効果測定が行いやすくなります。

2. ペルソナの設定

LPを設計するにあたり、商品・サービスを利用する具体的なユーザー像（ペルソナ）を設定します。

「誰に向けたLPか」という点を明確にしておくことで、適切なユーザーニーズを踏まえたデザインやコピーを作成できるためです。

ユーザーの求めている情報をLPに含めるためには、年齢・性別・職業・趣味など、できるだけ細かくを​​ペルソナを設定すると良いでしょう。

関連記事：今さら聞けない「ペルソナ」とは。意味やマーケティングでの活用方法、作り方も解説！

3. 競合調査・訴求方法の検討

LPを訪れるユーザーは関心度が高く、比較検討の段階にいる可能性があります。そこで自社商品・サービスの独自性を訴求することで、CVが獲得しやすくなるのです。

そのためにも、LP制作に取り掛かる前に競合調査を実施しましょう。競合他社のLPもあらかじめ確認しておくことで、自社の強みを強調するなどして差別化が図れやすくなります。
ユーザーが魅力を感じる訴求ポイントの例としては、以下のようなものが挙げられます。

• 価格が安い
• 品質が高い
• 希少価値がある
• 効果が高い

比較表を用いて競合との違いをアピールしたり、コピーを工夫したりして、効果的に訴求するよう心がけましょう。

関連記事：競合調査のやり方とは？調査項目や基本的なフレームワークを詳しく解説

4. 構成作成

商品・サービスをどのように訴求するかを明確にしたら、それに合わせてLPの構成を作成していきましょう。LPの構成で重要とされる3つの要素は、次の見出しで解説します。

LPにおいて構成は重要な役割を担います。どのような順番でどう情報を伝えるかによって、ユーザーへの訴求度が変わってくるためです。

CVにつながるLPを作るためには、伝える情報の優先順位を考え、キャッチコピーやコンテンツ、画像などの整理・設計を行いましょう。

5. ライティング・素材整理

続いて、LPに載せる具体的な文章や写真を準備します。

商品・サービスの特徴や魅力、強みを伝えることはもちろん、ユーザーの悩みに寄り添い共感を得られる内容にすることが重要です。

特に、冒頭に載せるキャッチコピーは、ユーザーの興味や関心を惹くために最も重要な要素となります。キャッチコピーは一目で商品・サービスの魅力を理解できるもので、その後のページを読み進めたくなるようなものでなくてはいけません。

6. デザイン

LPの構成とLPに載せるライティングや素材が決まったら、ページ全体のデザインを進めましょう。

デザインはLPを見やすく、ユーザーの印象に残るようなレイアウトに仕上げる重要な工程です。とりわけ「ファーストビュー」と呼ばれるページの最上部は、インパクトのあるものにする必要があります。

LP全体のデザインは以下のポイントに注意して作成しましょう。

• サービス・商品のイメージにマッチするデザインにする
• 設定したペルソナが好む色使いや画像を意識する
• ユーザーが快適に読み進められるよう視線を誘導する
• 画像や写真を使い分かりやすくする
• 1ページに入れる情報は適切な量にする
• リンクやボタンは目立つ場所に配置する

関連記事：デザインのコツがわかる！オススメお役立ち資料5選

7. コーディング

デザインが完成したら、ブラウザで見られるようにHTMLやCSS、JavaScriptを使ってコーディングをします。

構成で決めた順序に従い、キャッチコピー・画像・イラスト・文章・リンクなどを配置していきます。その後、文字のフォントやページの背景色、画像の大きさなどのデザインを反映させます。

一通りコーディングを終えたら、パソコン・スマートフォン・タブレットなどあらゆる端末や環境で正しく表示されるかを確認しましょう。

8. 公開・ 効果測定

LPは作成してリリースしたら終わりではありません。LPを公開したら、アクセス解析ツールを使って効果測定を行いましょう。

初めに設定した目的・目標を達成できるか、どんな成果をもたらしたかを、運用しつつ検証していきます。想定通りの結果が出なければ、適宜LPに改修を加える必要があります。

さらに、SEOで評価の高いページとLPを連携させることで、ホームページ全体のCV率アップを目指せる可能性があります。

LPの効果を最大化させるためにも、PDCAを素早く回して改善を目指しましょう。

▼LP改善の基本ノウハウはこちら

【BtoB向け】LP作成の入門書！ランディングページ作成・改善ガイド

本書は、LPの基礎について一から学びたいというマーケティング担当者様必読の1冊です。

LPを構成する重要な3つの要素

LPは大きく分けて以下の3つから構成されています。それぞれについて以降の項目で詳しく説明します。

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

1. ファーストビュー

ファーストビューはLPに訪れたユーザーが真っ先に目にする場所で、ページの第一印象を決める重要な要素です。ユーザーはここを見てLPを読み続けるかどうかを判断します。

一般的に、ファーストビューの直帰率は70％と言われています。ファーストビューからCVに結びつけることがいかに難しいかが分かるでしょう。そのため、ファーストビューにはユーザーの心を掴む訴求力やインパクトが必要です。

キャッチコピーやアイキャッチ画像には、ユーザーの知りたい情報やメリットを盛り込み、しっかりとユーザーの興味を引きましょう。

2. ボディ

ボディとは商品・サービスについて、キャッチコピーよりも詳しい説明や補足を行う部分です。ボディは「興味・関心」「説得・エビデンス」「信頼」の順番で必要な要素を入れて作成するのが定石です。

● 興味・関心

導入部分にユーザーの興味・関心を惹きつける文章を入れることで、LPを最後まで読み進めてもらいやすくなります。

ここで盛り込むべき要素は以下の3つです。

• 効果・効能・結果の提示
• 悩みや課題への寄り添い
• 興味のきっかけとなる気づきや発見

まず、商品・サービスを利用することでユーザーにどのような利益があるのか、その効果・効能・結果を分かりやすく伝えます。事例を交えるなど、できるだけ具体的に示すことが大切です。

どんなに魅力的な商品でも、ユーザーに初期段階で「自分にとって不要なもの」と捉えられればすぐに離脱され、その魅力が伝わりません。

「こんな悩みを持つ人におすすめ」「こんな課題を抱える人に向いている」といった風にユーザーの悩みや課題に寄り添い、ユーザーが「自分向けの商品・サービスだ」と感じられるような文章にします。

それに加え、ユーザーの興味を引くような気づきや発見を提供することも効果的です。

多くの人が知らないような珍しい情報や新事実を掲示し、興味のきっかけを作ることでLPを読み進めてもらいやすくなり、他社との差別化も図れます。

● 説得・エビデンス

次に配置するのがエビデンス（証拠）です。CVに結びつけるためには、LPで謳っている商品やサービスの効果・効能がどれほどのものなのか、その根拠や実例をユーザーに示し納得してもらう必要があります。

説得・エビデンスでは以下のような情報を示します。

• 実績・実証結果
• 利用者の声
• 監修者による説明
• 機能・活用例

● 信頼

このパートでは、ユーザーの不安や疑問を払拭できる情報を載せます。商品・サービスの品質、またそれを扱う会社への信頼がなくては、商品・サービスの導入・購入といったユーザーの行動にはつながりません。

以下のような情報でユーザーに安心感を与え、信頼を獲得することがこのパートの要です。

• 購入・導入した顧客の声
• 著名人のお墨付き
• 開発者の声
• よくある質問
• 料金表
• 購入・導入の流れ

3. クロージング

クロージングはLPのまとめとなる部分です。ここでは、契約や購入、問い合わせなどユーザーのアクションを促し、実際の商品・サービスの利用へつなげます。

ユーザーの意欲を下げないよう、手順をシンプルにしておく、申し込みボタンを分かりやすい場所に配置しておくなどして、アクションを起こしやすくしておきましょう。

また、「期間限定」「数量限定」「特典付き」などのフレーズで行動を後押しすることも効果的です。

LP（ランディングページ）制作時に注意したいポイント

LP制作時に注意したいポイントを以下の2つに分けて解説します。

• 構成・ライティングにおけるポイント
• デザインにおけるポイント
• コーディング・実装のポイント

構成・ライティングにおけるポイント

構成・ライティングで注意したいポイントは以下の通りです。

● 「分かりやすさ」が最優先

LPでは分かりやすいキャッチコピーや見出しで商品・サービスの魅力を端的に伝えることが重要です。

LPの内容全てに目を通し、じっくりと読んでくれるユーザーはほとんどいません。目につくフレーズだけを読み、本文は斜め読みという人がほとんどでしょう。

文章だけで説明することが難しければ、表や画像を多く用いて視覚に訴える方法も有効です。

● 構成は「ストーリー」を意識

ページ全体の構成要素を意識することもLP制作において大事なコツです。ページ全体の流れが崩れていると、違和感を覚えたユーザーはすぐに離脱してしまいます。

ストーリーが押さえられた構成は、全体の流れが下記のようになっています。

• 誘起
• 結果
• 証拠
• 共鳴
• 信頼
• ストーリー
• クロージング
• PS.（追伸）

商品・サービスのジャンルを問わず、上記の流れに沿って構成を組むと、読まれるLPになる可能性が高いです。

特に、PSの部分は非常に重要になります。クロージングだけでLPを終えてしまうと、得た情報に満足してすぐにページを閉じてしまう可能性があるからです。

ユーザーをしっかりCVにつなげるためにも、ページ全体の構成の流れを考え、より効果的なLPを作っていきましょう。

▼LPの詳しい構成内容についてはこちら

成果の出るLPデザインのポイント【チェックリスト付き】クリエイティブ例も紹介

LPのデザインについて具体的にどんなことを意識して作ればユーザーに伝わりやすく成果の出やすいにLPなるのか？具体的なクリエイティブ例と共に解説しています。!

● ライティングはユーザー視点で

商品・サービスのメリットはユーザー視点を持って伝えましょう。ユーザーの悩みや課題をどのように解決できるのか、できるだけシンプルかつ明快な言葉や例えを使って説明します。

いくら効果や効能のあるものでも馴染みのない業界用語や専門用語が羅列されていれば、ユーザーは読む気を無くしてしまいます。

機能や成分の説明も重要ですが、「○○できる」「○○になる」「○○を目指せる」等のフレーズでユーザーにもたらすメリットに注目したライティングを心掛けます。

デザインにおけるポイント

LPのデザインにおいて気を付けたいポイントを解説します。

● フォント・画像を吟味する

フォントはLPの内容に合わせ、ユーザーが見やすく理解しやすいものにしましょう。

LPにおいてメインとなるのは文字による情報です。文字が小さかったり背景と同化した色だったりと説明文が見づらければ、ユーザーは読むのをやめてしまうでしょう。文字に関して、具体的には以下の点に注意します。

• 文字が見やすい大きさになっているか
• カラーやフォントがLPのデザインに馴染むか
• 文字の間隔や配置に違和感がないか

また、使用する画像素材にも注意が必要です。画像は文章による説明を補完するものですが、それと同時に画像はユーザーの視覚に訴え、商品のイメージや雰囲気を強く印象に残す効果があります。

画像が解像度の低いものや、LPのイメージにマッチしないものではユーザーの目を引くことはできません。またインパクトを重視するあまり、悪印象を与えるような画像を選ぶのも控えましょう。

使用した画像がパソコンはもちろん、スマホ・タブレットなどでも正しく表示されるかを確認してください。

● 配色パターンに気をつける

LP全体の配色パターンに気をつけましょう。LPを作る際には、3つのカラーが大切になります。

• ベースカラー：全体の70％を占める背景色
• メインカラー：主役となる全体の25％の色
• アクセントカラー：ページの引き締め役の色（5％）

まずは上記の比率を守ることが、ページ作りでは鉄則です。全体の配色が悪いと、ユーザーに不快感を与えてしまう可能性があるため、離脱につながりやすくなります。

また、配合するカラーの色味も、サービスに合わせた色味を選ぶのがおすすめです。

● 中間部分にもCTAボタンを設置する

CTAボタンを、ページ全体の中間部分に設置するのも大切なポイントです。ファーストビューとクロージング部分だけでなく、中間部分にも設置することで、訴求ポイントを増やしてCVのアップにつなげます。

ここで注意して欲しいのが、ページ全体のバランスを考えることです。訴求ポイントは多い方がいいと思い、極端にCTAボタンを増やしすぎてしまうと、コンテンツの内容が見えづらくなるので、かえって逆効果になります。もちろん、少なすぎてもCVにつながらない可能性が高くなります。

CTAをどこに設置したらいいかは、実際にページを運用して分析していかなければわかりません。そのため、まずは全体に3つほどCTAボタンを設置して、ユーザーの反応や全体のバランスを見ながら、設置場所を考えていきましょう。

● レスポンシブ対応にする

基本的にデザインはレスポンシブ対応にしましょう。

レスポンシブ対応にしておくことで、パソコンやタブレット、スマートフォンなど、いずれのデバイスにおいてもレイアウトが最適化された状態で表示されます。

デバイスによってページの見やすさが変わってしまうと、ユーザーの離脱率が高まります。

LP制作においてコーディングの段階で、HTML・CSSを用いてレスポンシブ対応のデザインにしておきましょう。

コーディング・実装のポイント

LPのコーディング・実装において注意したいポイントは以下の通りです。

● 目的に合わせてコーディング方法を選択

コーディングには、以下の2種類があります。

• 画像コーディング：文字の画像化
• テキストコーディング：テキストベースでのコーディング

画像コーディングはテキストが全て画像化されているため、ユーザーはスマホ画面でもストレスなくLPを閲覧できます。ただ、テキストが入らないためSEO対策としては不利です。そのため画像コーディングは、ユーザーの流入元が広告である場合に有利な手法です。

一方のテキストコーディングはテキストを用いるため、SEO対策が可能です。ただテキストでコーディングを行うと、最新のHTMLやCSSに対応していないスマホ等ではデザインの一部が崩れて綺麗に表示されなくなる可能性があります。

どちらのコーディングを選ぶかはLPの目的によって決めましょう。

コーディングを終え実装の段階に移ったら、できるだけ多くの人に見てもらい、デザインに違和感がないか、問題なく表示されているかを確認しましょう。

実装後も、構成・ライティングやデザインの改善を行い、ブラッシュアップしていきます。

LPO（LP最適化）のやり方

LPOとは「Landing Page Optimization」の略で、LP最適化とも呼ばれます。実装後も目標達成に向けてLPの改善を行い、完成度を上げていく工程のことを指します。

CV率や離脱率などを参考に、コピーの文言を変えたりボタンの配置を変えたりするだけで大きく成果が上がる場合もあります。

ここからは、以下のLPO（LP最適化）の方法について紹介します。

• ヒートマップ・アクセス解析の活用
• 内容の見直し
• 公開して一定期間経ったらA/Bテストを実施する

ヒートマップ・アクセス解析の活用

出典：Hatena Blog

ヒートマップ・アクセス解析で得られたデータをLPOに利用する方法です。ヒートマップとはLPのどの部分がよく読まれているか、どこでユーザーが離脱しているか、どこでクリックなどのアクションを取ったかを、色や濃淡の違いで視覚的に分かりやすく表したものです。

離脱率が高いコンテンツはその内容がユーザーの求める情報でなかったり、説明が不親切で分かりづらかったりといった理由が考えられます。その場合は、離脱の多い箇所のコンテンツ内容の見直しや、差し替えなどの施策が必要です。

また、ユーザーがどこからLPにアクセスしているのか、アクセス解析によって流入元のWebサイトを知ることもLPOに役立ちます。

LPの内容が流入元のWebサイトとあまりにかけ離れていれば、CVが伸びないばかりでなく、流入元の企業のイメージダウンにつながる恐れもあります。もし広告からの流入であれば、広告の出稿場所が想定したペルソナに合っているかも調査しましょう。

内容の見直し

先の項でも述べたように、実装後も定期的にLPの内容を見直し、ブラッシュアップしていくこともLPOのひとつです。見直しのポイントは以下に挙げる3つです。

• デザインやライティングを見直す
• ターゲティングを見直す
• キーワードを見直す

● デザインやライティングを見直す

LPにはユーザーの印象に残り、クリックしたくなるようなキャッチコピーやデザインを用意する必要があります。

しかし、そのような文章やデザインはそう簡単に生まれるものではありません。定期的にLP全体を見直し、デザインや文言の一部を変えながら、アクセスの推移を観察し内容を調整しましょう。

● ターゲティングを見直す

LPのCV率を上げるためには、商品・サービスを利用する層のターゲティングが適切にできているかも重要なポイントです。

運用しているうちに、いつの間にか広告出稿元のWebサイトの内容が変わり、LPで訴求する商品・サービスのターゲット層と乖離が発生しているケースもあります。

定期的に出稿元のWebサイトをチェックし、商品・サービスのターゲット層とマッチしているかを確認しましょう。

● キーワードを見直す

検索エンジンで作成したLPページが上位に表示されるためには、キーワード選定にも注意しましょう。商品・サービスの内容と合っていないキーワードや、ユーザーの検索意図を無視して設定したキーワードでは、CVはおろかアクセス数も伸びません。

いくら質の良いLPを制作したとしても表示されないのでは無駄になってしまいます。ビッグキーワードだけでは何万とある競合サイトに埋もれやすいため、サブキーワードも1〜2つ設定し、ユーザーの検索網に引っかかるような工夫が必要です。

公開して一定期間経ったらA/Bテストを実施する

LPの公開後に一定期間経ってからA/Bテストを行いましょう。A/Bテストとは、Webマーケティングで行われる施策のひとつです。

元々のページ（A）と変更を加えたページ（B）の2つのページを用意します。その後、ユーザーの反応はAとBどちらの方が高いかを数値結果をもとに検証していき、反応がよかった方を最新のページとして更新していきます。

A/Bテストを行うことで、ユーザーの反応に合わせた改善を行うことができ、その結果CVのアップにつなげられます。

効率的にA/Bテストを実施したい人は、LP作成ツールを利用すると良いでしょう。​​テキスト編集・画像やパーツの差し替えは感覚的に編集できるので、スピーディーに改善しやすいのが特徴です。

▼改善策をすぐに実行できるLPツールこちら

LPを自分でサクサク作り放題｜LP One

LPの改善と量産を外部業者やエンジニアに依頼せずに自分で完了。マーケティング機能も充実。PDCAが高速に回せます。

LPはブラッシュアップし続けることが大切

LP制作は、主に以下の流れで進めていきます。

1. 目的・目標の設定
2. ペルソナの設定
3. 競合調査・訴求方法の検討
4. 構成作成
5. ライティング・素材整理
6. デザイン
7. コーディング
8. 公開・ 効果測定

制作したら完了ではなく、ユーザーの反応を見ながら適宜修正していく必要があります。 LPOを実行する際は、以下の方法を試してみましょう。

• ヒートマップ・アクセス解析の活用
• 内容の見直し
• 公開して一定期間経ったらA/Bテストを実施する

効率的にLPOを進めたい人は、LP作成ツール等を利用して業務の効率化を図りましょう。

▼ 自分ですぐにLP制作できるツール