Webデザイン

最終更新日: 2022.09.28

LP(ランディングページ)制作の流れ!ツールや費用相場も解説

LP(ランディングページ)制作の流れ!ツールや費用相場も解説

ランディングページとは、訪問者が「最初に着地したページ」を指します。
ユーザーに効果的にアプローチできるランディングページを作成すれば、コンバージョン率のアップや売上の向上が期待できます。そのためには、ランディングページの制作ポイントや構成要素、注意点を押さえておきましょう。

この記事では、ランディングページの意味や、効果的なランディングページ制作の流れを初心者にも分かりやすくお伝えします。
加えて、おすすめのテンプレートやツール、外注する場合の費用相場についても解説しますので、ぜひ最後までお読みください。

ランディングページとは

ランディングページとは

ランディングページ(Landing Page)は「初めに着地するページ」という意味があり、「Webサイトに訪れたユーザーが最初に閲覧するページ」を指します。ランディングページと読むか、もしくは英語の頭文字から取って「LP(エルピー)」と呼ばれることもあります。

ランディングページには「広義」と「狭義」の2つの意味が存在します。それぞれ意味合いが異なるため、次項で詳しく解説します。

広義のランディングページの意味

広義のランディングページとは、「Webサイトに訪問したユーザーが最初に訪れたページ」を意味します。先述した「ランディングページ」の意味と同じです。

言い換えると、あるページから移動した際に、最初に目にするページを指します。
例えば、化粧品の口コミサイトを見ていて、Aという商品が気になったので商品サイトにアクセスしたとします。そしてAの商品サイトに流入したときに、最初に閲覧するページがランディングページです。

またGoogleなどの検索エンジンでキーワードを入力して、表示されたページや広告のページをクリックして最初にアクセスするページもランディングページです。

「トップページ」「採用情報」「お知らせ」など、どのページであっても訪問者が最初に閲覧したページのことを広義のランディングページといいます。

まとめると、広義のランディングページとして以下の2つがあります。

  • とあるWebサイトから別サイトに移動した際に、最初に閲覧したページ
  • 検索エンジンで表示されたページや広告をクリックして最初に閲覧したページ

狭義のランディングページの意味

狭義のランディングページとは、訪問者が何らかの行動(アクション)を起こすように設計された、1枚で完結する縦長のWebページのことです。

検索エンジン、広告、SNSなどから辿り着いたユーザーがアクションできるよう、1ページに多くの情報が載っているページがライディングページです。

「アクション」とは、以下のような行動が主に含まれます。アクションは、サイトの目的であるコンバージョンごとに設定されています。

  • 商品の購入
  • サンプルの依頼
  • お問い合わせ
  • 資料請求
  • 求人募集へエントリーする
  • イベント申し込み

狭義のランディングページには「このページで購入すれば〇%オフ!」「今ご注文いただけば3つのメリットがある!」などといった営業文句が書かれているパターンが多いです。

一般的に「ランディングページ(LP)」と呼ばれるものは、狭義のランディングページを指します。そのため、今回の記事内で取り上げる「ランディングページ」とは、「一枚で完結する特化型のWebページ」の方であると認識しておいてください。
ランディングページ(LP)とは?売れるランディングページの制作方法 ランディングページ(LP)とは?売れるランディングページの制作方法 商品販売、資料請求、セミナー募集…さまざまな目的で制作するランディングページの作り方を反響が出る、商品が売れるLPを数多く制作してきたWeb制作のプロが解説します。

効果的なランディングページ制作の流れ

効果的なランディングページ制作の流れ

成果につながりやすい効果的なLPは、以下の3つの流れで構成されていることが多いです。

「ファーストビュー」→「ボディ」→「クロージング」

それぞれ詳しい内容を解説します。

ファーストビュー

ファーストビューとは、ランディングページに訪れたとき、スクロールせずに見える範囲をいいます。
ユーザーが最初に見るページのため、第一印象を決める重要な部分のため、訴求力やインパクトがあることが大切です。
LPのファーストビューは超重要!売上アップのポイントと参考事例 LPのファーストビューは超重要!売上アップのポイントと参考事例

ボディ

ボディとは、ファーストビューや商品・サービスの内容について、詳しい説明や補足を足してあげることで、商品の魅力をアピールする部分です。
ファーストビューで興味・関心を引き、キャッチーなボディで一気に引き込みます。

クロージング

クロージングは、ランディングページのまとめの部分です。クロージングには、ユーザーが抱える悩みを解決できるようなコンテンツを設置しましょう。

「この商品・サービスを購入すれば、あなたが持つ悩みが解消できるかもしれません!」などといった、ユーザーに伝わりやすいコンテンツにすることで、アクションを促します。

ランディングページの基本の構成要素

ランディングページの基本の構成要素

ランディングページの構成は、基本的に以下の7点で成り立っています。これらの7つの要素を組み合わせながら、LP制作をおこないます

  • アイキャッチ画像・キャッチコピー
  • CTA
  • 導入文
  • 商品概要
  • 実績・お客様の声
  • よくある質問・契約までの流れ
  • 申し込み・購入ボタン

それぞれの項目を具体的に説明します。

アイキャッチ画像・キャッチコピー

「アイキャッチ画像」とはユーザーの目線(eye)を惹きつけるため(catch)の画像をいいます。記事のサムネイル画像として検索一覧で表示されたり、記事を開いたときに最初に表示したりします。ユーザーは画像を見てクリックを決めるほど、アイキャッチ画像は重要なポイントです。

「キャッチコピー」とは、ユーザーの興味を引くための文言です。ユーザーはキャッチコピーを見て、「面白そう」「読んでみたい」「自分の悩みが解決できそう」などと判断し、ページを読み続けるかどうかを決めます。

アイキャッチ画像・キャッチコピーともに、ユーザーの興味を惹きつけられるかどうか決まる、重要なポイントです。
売れるキャッチコピーとは?作り方を具体例を交えて分かりやすく解説 売れるキャッチコピーとは?作り方を具体例を交えて分かりやすく解説

CTA

CTAとは、「Call To Action(コール トゥ アクション)」の略語で、「行動喚起」といわれています。言い換えると、サイト内でユーザーに求める行動を促すことです。

CTAの多くは、ボタンやリンクなどを設置することで実現させています。例えば、商品・サービスの資料請求が目的であれば「資料請求する」というボタンでユーザーを誘導するのがCTAです。

導入文

導入文とは、記事タイトル後の本文における初めの部分です。
読者は導入文を読んで「自分が求める情報があるのか」を判断するため、記事の内容を端的に分かりやすく記載する必要があります。

あまりに長文すぎると読みづらくなってしまい、ページ途中で離脱してしまう可能性が高いです。なので、できるだけ分かりやすく端的な文章にしましょう。
「〇〇な悩みをお持ちではないでしょうか?」「この記事では〇〇を解決します」など、呼びかけや内容をまとめることで、ユーザーも理解しやすく、さらに読み進める意欲も上がります。

商品概要

商品概要とはその名の通り、商品やサービスを詳細に説明します。
他社にはない、自社ならではの特長やメリットを織り交ぜながら解説すると、ユーザーの興味や関心を高める効果が期待できます。

実績・お客様の声

これまでの販売実績や商品・サービスを購入したお客様の声を掲載します。
使用感が想像しやすくなるほか、実績が多いことで安心感が持てたりなどと、さまざまな効果が期待できるでしょう。

インターネットの買い物は店舗で購入する時とは異なり、商品のイメージやメリットなどが伝わりづらい点があります。そのため、実績やお客様の声を掲載することで、購入に対する不安を解消する効果も期待できます。
近年では、口コミから商品の購入を判断するユーザーが増加傾向にあるので、お客様の声があるという信頼性を持たせることが大切です。

よくある質問・契約までの流れ

契約の流れを表記したり、よくある質問をQ&A形式で端的に表記したりしましょう。
契約の流れは、現状がどこにいるのかも可視化できるため、その後の行動が取りやすくなります。
Q&Aは、本文に書かれている内容をまとめることで、より理解しやすくなります。

申し込み・購入ボタン

申し込み・購入ボタンは、その名のとおり、CATやコンバージョンの目的を果たすために設置されたボタンです。

ランディングページの最後や章の間に設置されることが多く、思わず押してしまうようなカラーやボタンのキャッチコピーなど、オリジナリティあふれる工夫をしましょう。

効果的な構成を作るためのポイント

効果的な構成を作るためのポイント

効果的なランディングページの構成を作成するために、大切なポイントを3つ紹介します。

  • わかりやすいことが重要
  • ユーザーの目線の内容
  • 複数LPを作成し、テストする

わかりやすいことが重要

ランディングページを長い時間をかけてじっくりと読み込んでくれる読者はほぼないと考えるのが賢明です。長文でぎっしりと最初から商品の魅力をすべて伝えようとするのではなく、キャッチコピーや見出し、短文を効果的に用いて要点を分かりやすく伝えることが重要です。

また先述した通り、「ファーストビュー」で訪問者の興味関心をひきつつ、「ボディ」で内容を詳しく解説し、「クロージング」で訪問者の行動を誘導するという流れを作り、ランディングページを作成します。

特にLP制作未経験という方は、上記の流れを意識してパターン化してもいいでしょう。
また、画像や図を用いて視覚的に理解させるデザインを加え、オリジナリティ溢れるページに仕上げる方法も効果的です。

ユーザーの目線の内容

「ユーザー目線」で自社のサービス・商品の特長やメリットを伝えられるかが大切です。
そのためにもランディングページを訪問するユーザーが「どのような悩みを抱えているか」をしっかりと分析し、その悩みを「これで解決できる!」という一連の流れとして、コンテンツを作ります。

特に、内容が複雑で専門用語が多い業界のランディングページは、できるだけ難しい言葉を使わずに説明することも大切です。

例えば化粧水のランディングページの場合、「グリセリン」「ヒアルロン酸」などと成分を羅列するのではなく、「長時間保湿できる成分を配合!」「まるで赤ちゃんようなもっちり肌を目指せる!」など、誰でもわかるような例えなどを用いて分かりやすく伝えることが重要です。
一目見ただけでユーザーが理解できるようなランディングページにしましょう。

複数のLPページを作成し、テストする

ランディングページを自分で作る際は、さまざまなパターンのランディングページを作成し、CTAボタンの位置や配色などの改善を繰り返しながら、最適化していきましょう。

ランディングページの公開後はA/Bテストなどを実施し、コンバージョン率の向上を狙います。
そのためにも、作成して終わりではなく、修正と改善を繰り返してブラッシュアップし続けられるかが大切です。
ABテストとは?おすすめABテストツールをご紹介 ABテストとは?おすすめABテストツールをご紹介 商品購入や問い合わせ、1人あたり閲覧数などWebサイトにはさまざまな改善したい指標があります。各指標を改善するにあたって良く行われるABテストについて、実施のポイントやABテストツールをご紹介します。

ランディングページ制作に活用したいテンプレート・ツール

ランディングページ制作に活用できる便利なテンプレートやツールを、以下の3つの項目に分けて紹介します。

  • HTMLテンプレート
  • WordPressテンプレート
  • LP作成ツール

HTMLテンプレート

「HTMLテンプレート」は、LP制作に必要なHTMLやCSS、画像などのファイルがセットになったテンプレートです。
ランディングページを制作する際、一からHTMLで記述するのは専門知識が必要だったり、時間がかかったりします。しかし、HTMLテンプレートを元にカスタマイズすれば、独自性あるランディングページを作れるでしょう。

テンプレどん

テンプレどん

テンプレどん

「テンプレどん」は、無料で商用利用可能なHTMLテンプレートです。著作権表示がないフリー扱いなので、面倒な申請手続きがありません。

シンプルなデザインでありながら、スマホ対応も可能です。さらに、ランディングページ用テンプレートの他にも、お店のサイトやコーポレートサイトにおすすめな「シンプルコーポレート」、ビジネス用にもおすすめな「ベーシックコーポレート」、写真の掲載などポートフォリオに活用できる「ポートフォリオ」が用意されています。

自由にカスタマイズすることができるため、テンプレートながら独自性を表現したランディングページが作成できます。シンプルで使いやすいため、LP制作初心者にもおすすめです。

LPCreate

LPCreate

LPCreate

「LPCreate」はブラウザ版でありながら、無料で使えるランディングページ専用のHTMLテンプレートがあるサイトです。
ランディングページ専用テンプレート」から、フリーのテンプレートをダウンロードできます。商用にも利用可能で、著作権表記もフリーなため、汎用性も高いのが魅力。

またランディングページ制作の外注も可能で、原稿は自社で用意するテンプレートプラン(55,000円)やサポートも付いたランディングページ制作+サポート料金(月額22,000円)など、様々なプランが用意されています。
ランディングページ制作の初心者にもおすすめですが、「自分で作る!」と思っていたけれどうまくいかなかった方でも、専門家に依頼できるので、うまく活用できるでしょう。

Wires.jp

Wires.jp

Wires.jp

「Wires.jp」は、Adobeが提供するAdobe XD用の日本向けテンプレートです。海外向けランディングページのテンプレート「Wires」の日本版となります。
日本国内に特化した、LP制作に必要なパーツが豊富に提供されています。
このツールを使用するためには、アプリケーション「Adobe XD(税込月額:1,298円)」が必要ですが、7日間の無料体験版が用意されているので、まずは無料体験版から使い勝手などを見極めるのもおすすめです。

WordPressテンプレート

自社サイトでWordPressを使っている場合は、WordPressのテンプレートを利用するのもおすすめです。
WordPressには、ランディングページ向けのテンプレートやプラグインが多数用意されているので、自社の目的に最適なテンプレートが見つかります。
無料のテンプレートも存在しますが、今回は有料テンプレートの中でおすすめのツールを紹介しましょう。

Colorful

Colorful

Colorful

「Colorful」は、ランディングページ専用のWordPress用テンプレート。
15,000本以上という豊富なラインナップと、高いカスタマイズ性が特徴です。機能も充実しており、直感的に使えるインターフェースも魅力的です。さらには、LP制作・集客講座も提供しているため、ランディングページ制作後の集客に関してもサポートがあります。

■価格

8,760円(税込)

OOPS!

OOPS!

OOPS!

「OOPS!」は、ファーストビューにアプローチできるデザインの高さが魅力です。さらに気になる機能として、クリック数やコンバージョン率などを計測できるCTA機能を搭載しています。
ほかにも、TwitterやFacebook、Instagramアカウントの設定機能もあるため、自社のSNSアカウントとの連携も可能です。

■価格

19,800円(税込)

LIQUID LP

LIQUID LP

LIQUID LP

「LIQUID LP」はこれまでに30,000ダウンロードを突破するなど、実績があるツールです。直観的な操作をしながら本格的なLP制作を簡単にできます。さらに、LP作成後に成果を上げるためのマニュアルも整っているので、初心者の方でも心置きなく活用できるのです。

■価格

10,890円(税込)

Danganページビルダー

Danganページビルダー

Danganページビルダー

「Danganページビルダー」は、LP制作用のWordPressプラグインです。このプラグインは、既に使用しているテンプレートを変更することなく、ランディングページを作成できるのが魅力的なポイント。12種類のパーツを組み合わせるだけで、デザイン性の高いランディングページが作成できます。またメール配信サービスとの連携やカウントダウン機能、ポップアップ表示などもあるため、購買力が求められるLP制作に特におすすめです。

■価格

12,800円(税込)

LP作成ツール

「LP作成ツール」とは、簡単にランディングページが作成できるツールのことです。
HTML、CSSなどのWebサイト制作の専門知識が無くても、テキストや画像を挿入するだけでLP制作が可能となります。特に「簡単にランディングページを作成したい」「取り急ぎランディングページを手に入れたい」という方におすすめです。
ただし、金額が比較的高い場合が多いので、自社の予算と相談しながら決めましょう。

ペライチ

ペライチ

ペライチ

「ペライチ」は、たったの3ステップでランディングページの作成ができるツールです。

  1. デザイン選択
  2. 内容作成
  3. 公開

この3つのステップでランディングページ制作ができます。
オンライン決済のサービスもあり、手数料は売上の3.5%のみという分かりやすい料金設定も魅力。
また「予約システム」「メルマガ配信」「SNS連携」「アクセス解析」などの機能が充実しており、特に店舗経営やECサイトの運営におすすめのツールとなります。

■プラン

スタートプラン:0円

ライトプラン:月額1,465円

レギュラープラン:月額2,950円

ビジネスプラン:月額3,940円

ビジネス+プラン:6,910円

※30日間無料トライアルあり

■登録ユーザー数

300,000人以上

Jimdo(ジンドゥー)

Jimdo(ジンドゥー)

Jimdo

「Jimdo」には3つのプロダクトがありますが、その中でも質問に答えるだけで AIがLPを自動作成する「ジンドゥーAIビルダー」がおすすめです。
数分でサイト作成が可能なので、初心者のみならず、忙しい事業主にもピッタリのプラン。さらにスマホ対応もしており、さまざまなデバイスで美しく見せるデザインの高さも魅力的です。
シンプルなランディングページで、店舗運営やネットショップをはじめる方におすすめです。

■プラン

PLAY:0円

START:月額990円

GROW:月額1,590円

※「ジンドゥーAIビルダー」の場合

Wix

Wix

Wix

「Wix」は、デザイナーが手がけた800以上のテンプレートがあり、ドラッグ&ドロップの直観的操作でサイト作成できるLP作成ツールです。
ホームページ作成、管理、集客ができるうえに、国内外問わず世界中でビジネス利用されているクラウドベースのツールです。
デザイン、機能も自由に編集できます。

■プラン

ドメイン接続:月額500円

ベーシック:月額900円

アドバンス:月額1,500円

VIP:月額2,700円

※ホームページプランの場合

STUDIO

STUDIO

STUDIO

「STUDIO」は、0から自由にデザインすることが可能で、独自性あるサイトデザインを作ることができるLP作成ツールです。
STUDIO上で作成したLPデザインを、ボタン一つで公開できます。公開後は、リアルタイムでチーム全員が編集・入稿作業が容易にできます。
また分析やSEO対策もできるため、分析結果から、より効果的なランディングページに修正することもできるでしょう。

■プラン

Free:0円

Starter:月額1.280円

CMS:月額2,480円

Business:月額5,680円

フォームメーラー

フォームメーラー

フォームメーラー

「フォームメーラー」は、登録数40万アカウント以上の実績があるLP作成ツールです。
サイト作成から問い合わせなどのフォーム作成まで、あらゆるものが簡単に作成できます。
またフォームからの回答を集計・分析できる機能もあり、効果測定などに役立つでしょう。
さらに、注文フォームの作成や商品画像登録、送料設定など、ネットショップ運営に必要な機能もあります。

■プラン

Free:0円

個人向けプラン:月額1,375円

法人向けプラン:月額2,063円

参考にしたい!ランディングページの事例

参考にしたい!ランディングページの事例

ここからは、実際のランディングページで参考にしやすい2つのWebサイトを紹介し、解説します。

オルビスユー・トライアルセット

オルビスユー・トライアルセット

オルビスユー・トライアルセット

清潔感のある、シンプルですっきりしたデザインながらも、商品の魅力がアピールできているランディングページです。
特に「トライアルセット」のお得感が伝わるサイトになっており、CTAボタンへの導線が分かりやすい設定が魅力。公式ページで購入するメリットや、お客様の声、SNSの投稿などを掲載することで、購入後のイメージがしやすいのが特長です。

「ファーストビュー」→「ボディ」→「クロージング」の流れが分かりやすいため、ランディングページを初めて作成する方にとっては参考にしやすいと考えられます。

ライザップ

ライザップ

ライザップ

「ライザップ」のランディングページは、ポップなデザインやイラストを使いながら、ダイエットのきついイメージを払拭している構成です。
主人公の女性の心情から、ライザップの入会後の変化を4コマ漫画で分かりやすく伝えています。「トレーニングはきついのでは?」「どんな食事に気を付けるの?」「コスパは?」など、ユーザーが気になる情報をイラストで分かりやすく解決していくのが魅力です。
CTAのデザインは見やすく、簡潔な言葉でメリットや価格を伝えています。

作って終わりではない!ランディングページ制作後の注意点

作って終わりではない!ランディングページ制作後の注意点

 

ランディングページは、公開したら終了ではありません。効果を得るために「効果測定」をして、分析・改善する作業も大切です。

効果測定とは、訪問したユーザーの「性別や年齢などの属性情報」「使用しているブラウザ環境」「ユーザーの行動」を分析して、コンバージョンを高めるためにWebサイトを最適化する作業をいいます。
分析結果を踏まえてサイトを改善、修正することで、より高い効果を生み出すランディングページに仕上げられます。

効果測定する際は、「Googleアナリティクス」を導入して分析を進めましょう。
Googleアナリティクスは、無料のGoogleアカウントを作成するだけで使用可能です。サイトの流入経路やクリック数、掲載順位など、幅広い分析ができるため、最もおすすめのツールです。
【Googleアナリティクス】ランディングページを分析・改善・最適化する方法 【Googleアナリティクス】ランディングページを分析・改善・最適化する方法

ランディングページ作成を依頼したときの相場

ランディングページ作成を依頼したときの相場

ランディングページは、デザイン性が高いページを作成する必要があります。なぜなら、ファーストビューで好印象を残すためには、よりよいデザインで興味を引くことが重要だからです。

デザインはセンスや経験値も必要なうえにオリジナリティが求められるファーストビュー作成を、自社で対応できないという場合は、制作会社に依頼するのがおすすめです。

LP作成を外注した場合にかかる費用は、10万〜60万円が相場といわれています。価格帯によって、制作会社の規模やクオリティが大きく変わるので自社の予算に合わせて見極めましょう。

次に、金額の相場から依頼先やサポート体制に関して詳しく解説します。

ランディングページ制作費用:10万円以下の場合

依頼先:フリーランス、もしくは個人の制作会社

サポート:なし

制作費用が10万円以下の相場は、フリーランスや個人の制作会社に依頼するケースがほとんどです。
この価格帯は、質にこだわらず、とにかく格安で作成したい方におすすめ。しかし、作成した後のサポートがないことが多いため、公開後の運用や修正は自社でおこなう必要があり、自社における人材やリソースの確保が必要です。

デザインに関しても、少ない予算の影響でシンプルなものが多いです。こだわったデザインにしたいなどオリジナリティを求める場合は、予算の見直しが必要でしょう。

ランディングページ制作費用:10万~30万円の場合

依頼先:フリーランス~中小規模の制作会社

サポート:なし

制作費用が10~30万円の相場は、「多少はデザインにこだわりたい」「構成もお願いしたい」と、格安よりもグレードを求める方におすすめです。
しかし、文面に加え、公開後の運用や修正は自社でおこなう必要があります。そのため「制作費用が10万円以下」の時と同様に、社内の人材やリソースの確保をおこないましょう。

ランディングページ制作費用:30万~60万円の場合

依頼先:中小規模の制作会社

サポート:一部あり

制作費用が30~60万円の相場は、構成や文面、キャッチコピーなどのコンテンツ、デザインにこだわりたい方におすすめです。
より本格的なランディングページの制作が可能となります。加えて、競合調査や業界調査などの分析も依頼できます。
制作会社によっては、修正などのサポートに対応している企業もあるため、作成後のサポートを依頼したいときは、見積もりの段階で確認しましょう。

ランディングページ制作費用:60万円以上の場合

依頼先:中小規模~大手制作会社

サポート:あり

制作費用が60万円以上の相場は、ランディングページを使って成果を上げたい、Webマーケティングに取り組みたい方におすすめです。
マーケティングの実績が豊富な制作会社や、コンサルティングも対応している制作会社に多い相場です。

さらにLP公開後のサポートも充実しているので、ランディングページを作成から集客まで一任したい場合は、制作費用60万円以上をみておく必要があります。

あるいは、ランディングページ改善のコンサルティングを提供している企業もあるため、LP制作後にコンサルティングを依頼したい場合は、一度問い合わせをしてみるのもありです。

LP(ランディングページ)制作のまとめ

LP(ランディングページ)制作のまとめ

ランディングページは、企業の売上やコンバージョンの達成に欠かせない存在です。
より効果的なランディングページを制作するには、ファーストビューからボディ、クロージングに至るまでの構成設定やCTAを最適化する必要があります。

また「ユーザーの悩みや不安を解決できる」と、印象付けられるかが大切です。そのためにも「実績」や「お客様の声」を掲載して、購入後のイメージを想像できるような内容にしましょう。

ランディングページを自社で対応するのが難しい場合は、制作会社に依頼するのがおすすめです。株式会社ニュートラルワークスでは、「LP制作」のサービスも提供しています。

これまでに作成したランディングページは500以上です。制作から運用まで、マーケティングも含む内容となっています。無料相談もありますので、まずはお気軽にお問い合わせください。

QUERYY(クエリー)は、NeutralWorksが運営するWEB制作・WEBマーケ情報メディアです。EC・LPサイト制作やリスティング広告・SEOなどWeb制作~運用の情報を掲載しています。