ランディングページの作り方を6つの手順で徹底解説!制作手段や外注の考え方も分かる


ランディングページを作る必要があることは分かったが、具体的にどのように制作をしていけばいいか分からないという悩みはないでしょうか。

LP制作と聞くと専門知識が必要と感じる人もいるかもしれませんが、最近では非デザイナーでも作れるツールが出てきており、裾野が広がっています。

ネットビジネスにおいてLPは売上を左右する重要な要素なので、ネットビジネスに関わる全ての人がランディングページの作り方を(自分が作らないにしても)理解しておいた方がいいでしょう。

本記事では、ランディングページの作り方を6つの手順で解説します。また、デザインで参考にできるまとめサイトや制作手段の4つの選択肢、外注する際に押さえておくべきポイントについてもお伝えします。

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

ランディングページ(LP)は商品を売ることを目的としたWebページのことです。ネット上のセールスマン的な役割を持ちます。

1ページ完結の縦長レイアウトで構成されていることが特徴で、購入やお問い合わせ等のユーザーに促したいアクションが明確です。

リスティング広告やSNS広告など、広告から流入させることが一般的で、ランディングページのクオリティが売上を大きく左右します。よって、インターネット上でビジネスを展開する企業の多くが、ランディングページ制作には力を入れています。

ランディングページの基本知識については下記の記事で詳しくまとめているのでご覧ください。

ランディングページ(LP)とは?特徴、メリット、作り方を初心者向けに徹底解説

ランディングページの作り方の手順

ランディングページの作り方の手順は6ステップあります。

1. 目的を決める
2. ペルソナを決める
3. 情報設計の作成
4. デザイン制作
5. コーディング
6. サーバーアップロード・公開

それぞれの工程を具体的に解説していきます。

1. 目的を決める

まずは目的の設定です。何のためにランディングページを作るのかを決めましょう。目的は「ビジネス目標」と「LPのゴール」の2つの観点で決めます。

ビジネス目標

LPを作るという施策がどうビジネスの成果に直結するのかという観点で考えます。マーケティング目標にも紐づくもので、「月間売上100万円」「月間問い合わせ30件」など具体的な数値で決めることがポイントです。

おすすめはCPA目標を設定することです。つまり、LPのゴールを1件達成するのにいくらまで広告費をかけられるかという指標です。

究極的にはこのCPAの採算が合わなければ継続して施策を実施することができません。特に、広告を出稿してLPに集客をする場合はCPAを目標にすべきでしょう。

目標とすべきCPAの決め方については下記の記事で詳しく解説しています。

広告の費用対効果はどう考えるの?限界CPAの考え方や算出方法を徹底解説

LPのゴール

LPのゴールは、LPを通じて何を達成したいのかを考えます。例えば下記のようなものが挙げられます。

  • 商品の購入
  • 問い合わせ
  • 資料請求
  • メルマガの無料登録

日用品などの場合は直接商品の購入に促しても問題ありませんが、高単価な商材になるほどいきなり購入の意思決定はしてくれないため、資料請求や問い合わせなどハードルの低いゴール設定をすることが必要になります。

目的が定まったら次はペルソナを決めます。

2. ペルソナを決める

ペルソナとは、商品やサービスを購入するユーザー像のことを指します。こういう人がいそうとふんわりイメージするのではダメで、その人になりきったつもりで特定の1人を想定しましょう。

具体的には下記のようなイメージです。

ペルソナは2つの切り口で考えると決めやすいです。それが「デモグラフィック」「サイコグラフィック」です。デモグラフィックは人口統計学的な観点で考えるもので、サイコグラフィックは心理的な観点で考えます。

ペルソナの性格や行動習慣を知るために、ユーザーインタビューを行ったり、データ分析をすることも欠かせません。

ペルソナを絞り込めれば絞り込めるほど、LPでその人にぶっ刺さる鋭い訴求を作ることができます。逆に絞り込みが甘い場合は、当たり障りのない訴求になって誰にも刺さらなくなってしまいます。

3. ワイヤーフレームの作成

目的とペルソナが決まったら、ワイヤーフレームを作成していきます。ワイヤーフレームとはLPのライティングのことです。単にライティングをするだけではなく、LPのレイアウト情報の優先順位もフォントのサイズや太さ、配置を工夫して表現します。

ワイヤーフレームを作るのにおすすめのツールはWordやGoogleドキュメントのような文章作成ソフトです。

下記がワイヤーフレームのサンプルイメージです。

横並びにしてレイアウトを決めたり、文字のフォントサイズや太さを変えて情報の優先順位を指定していることが分かると思います。

このように情報を整理することで、マーケター(ディレクター)とデザイナー間でクリエイティブ制作における認識の齟齬を削減することができます。

ワイヤーフレームの作り方について、もっと知りたいという方は下記の記事で詳しく解説しています。

ワイヤーフレームの作り方を初心者向けに徹底解説!おすすめツールも紹介

ワイヤーフレームで売れるランディングページになるかどうかが9割決まります。特に大事なのはLPの構成です。情報を伝える順番によって、読み手が受け取る印象が全く異なるからです。

下記の記事では売れるランディングページの構成を解説しているので、ワイヤーフレームを作ったことがないという方はこの構成を参考にして作ってみてください。

売れるLPの構成に必要な9つの要素を教えます。【テンプレートを覚えよう】

4. デザイン制作

ワイヤーフレームが完成したら、次はデザイナーにデザイン制作の依頼をします。デザイン次第でLPに来訪したユーザーが受け取るイメージが決まります。

よって、デザイナーにもLPを制作する目的やペルソナの情報を共有しましょう。目的やペルソナを起点にしてデザインを考えるべきだからです。

例えば、下記2つはどちらもスイーツ関連のLPですが、左側は明るいトーンの色を使って優しい表情の女性を前面に出すことで親近感が湧くデザインになっています。一方、右側は黒と金色を基調とた高級感漂うデザインになっていることが分かります。

親近感が湧くデザイン

参考:https://rdlp.jp/archives/otherdesign/lp/118282

高級感漂うデザイン

参考:https://rdlp.jp/archives/otherdesign/lp/107244

このように、デザインが違うだけで受け取るイメージが全く変わってくるのです。

LPデザインのポイントはたくさんありますが、最低限下記のような点はチェックしましょう。

  • 全体的にペルソナを想定した統一感のある色味にする
  • 強調する文言は色を変えたり、フォントサイズを大きくする
  • ビジュアルで伝えるために写真やグラフィックを使う
  • アクションボタン(CTA)は目立つ配色にする
  • PCだけでなく、スマホで見た時も最適化されたデザインにする

ゼロから自作するのではなく、競合商品のLPデザインや似たペルソナを想定しているLPデザインを参考にしながら作るといいでしょう。

5. コーディング

デザインができたら、コーディングと呼ばれるコードを書いてWebページを作成する工程が必要です。Webページ制作に必要なプログラミング言語(HTML/CSSやJavaScript)を使います。

デザイナーがコーディングを兼務している場合もあれば、デザイナーとコーダーで人が分かれている場合もあります。

また、コーディングを依頼する段階で、下記のような点も決めておく必要があります。

  • ランディングページのURL
  • メタ情報(メタタイトル、メタディスクリプションなど)
  • LPから購入や問い合わせのアクションがあった際に通知されるメールアドレス
  • LPから購入や問い合わせのアクションがあった際のメール文章

簡易的なランディングページであれば、最近はほとんどコードを書かずに制作できるローコード / ノーコードのランディングページ制作ツールがあります。これについては後ほど解説します。

6. サーバーアップロード・公開

コーディングまで完了したら、あとはサーバーにアップロードして公開するだけです。レンタルサーバーを利用してLPをアップロードしましょう。

この時、LPを配置する場所としては下記の3パターンがあります。

1. サブディレクトリ(例:https://z-marketing.net/landing-page)
2. サブドメイン(例:landing-page.z-marketing.net/)
3. 新規ドメイン(例:landing-page-zmarketing.com/)

最も簡単なのは1です。2と3の場合は新規ドメインを取得する工数と費用がかかってしまいます。別サービスのように見せたい場合であれば2か3を選んでもいいですが、LPであれば基本的に1で問題ないです。

サーバーへのアップロードが完了したら、必ずPC・スマホ両方でデザインをチェックしましょう。予想外のところでデザインが崩れてしまうなんてことはよく起こります。

また、LPは公開して終わりではなくむしろスタートラインです。数値結果を見ながら改善点を洗い出し、LPをブラッシュアップしていく作業が発生します。

これをLPO(Landing Page Optimization)と言います。LPOのやり方は下記の記事で詳しく解説しています。

初心者でも分かるLPOとは何か?実践手順や必須のツールも紹介

ランディングページ制作の参考サイト

ランディングページを制作する際は、競合サイトや似たようなペルソナに向けて作られたLPを参考にすると良いとお伝えしましたが、LPのまとめサイトから探すと便利です。

丸パクリは当然NGですが、有名商品等のLPを見てなぜ上手くいっているのかを考えてエッセンスを盗みましょう

ここでは、LPの参考サイトを3つご紹介します。

ランディングページ集めました。

ランディングページ(LP)集めました。

名前のとおり、様々な種類のランディングページがまとめられています。

カテゴリーごとで選べるので、自社のLPと近い商品やサービスのLPをすぐに探すことができます。

LPアーカイブ

LPの最新デザインまとめ参考サイト|LP アーカイブ

PCデザインもスマートフォンデザインもどちらも探せるのが便利なポイントです。

また、楽天市場やヤフーショッピングでランキングに入っているようなハイクオリティのデザインがまとめられていることも特徴です。

毎日更新されているので、昔のLPから最近のLPまでデザイン制作の参考にできます。

LP幹事

ランディングページのデザイン・参考事例ならLP幹事

日本最大級のLPデザイン事例サイトです。

業界、LPの配色、LPのイメージといった軸でLPを探せるため、自社が参考にしたいLPを見つけやすいのが特徴です。

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

次に、ランディングページの制作手段について説明します。ここでいう制作とは主にデザインとコーディングの部分です。

制作手段は主に4つあります。

・自社のデザイナーに依頼
・ランディングページ制作ツールを使う
・フリーランスに依頼
・Web制作会社に依頼

一つ一つ、メリット・デメリットも解説していきます。

自社のデザイナーに依頼

自社にデザイナーがいる場合はデザイナーに依頼しましょう。

ベンチャー企業のようにスピード重視の企業は内製は必須と言えるでしょう。外注と比べると2~3倍は制作スピードを速くできます。

私の属する会社でも自社でクリエイティブ制作チームを抱えていますが、企画からLPの公開までを1週間かからずに実現することもありました。

メリット:
・コミュニケーションコストが低い
・外注に比べて2倍のスピードで制作できる

デメリット:
・採用コストがかかる
・固定費(人件費)がかかる
・経験が浅い人材を採用した場合、教育に時間がかかる

ランディングページ制作ツールを使う

最近では非デザイナーでも使えるランディングページ制作ツールがたくさん出てきています。有名どころだと「ペライチ」や「Wix」、「STUDIO」などがあります。

クオリティよりもリリースを優先したい場合は、このような制作ツールを使うことをおすすめします。

メリット:
・デザイナーやコーダー以外の人も制作できる
・制作コストが低い

デメリット:
・カスタマイズ性が低い
・ツールの使い方を覚える必要がある

下記の記事でおすすめのランディングページ制作ツールを5つ紹介しています。

【最新版】おすすめのLP作成ツール5選を徹底比較!特長や機能の違いも分かる

フリーランスに依頼

クラウドソーシングを活用したり、知り合いの紹介等でフリーランスのデザイナーに依頼するという手もあります。フリーランスは良い意味でも悪い意味でもその人次第という感じなので、誰に依頼するかは重要です。

できる限り、社内の人の紹介など信頼できる人にお願いしましょう。良い関係を構築できれば長きにわたって安定的に仕事を任せられるのが大きなメリットです。

メリット:
・固定費がかからない
・制作会社に依頼するよりは制作コストを抑えられる
・良い関係を築ければ長期的に安定して仕事を任せられる

デメリット:
・人によってクオリティにばらつきがある
・人によってはコミュニケーションコストがかかる
・自社で制作することに比べるとスピードが遅い
・万が一、途中で連絡が途絶えたりすると詰む

知り合いにフリーランスがいない場合は、クラウドワークスランサーズに仕事情報を掲載してワーカーを募集しましょう。

Web制作会社に依頼

Web制作会社に依頼すると、当然ですが一定のクオリティを担保できます。一方で、他の手段に比べると制作コストがかかってしまいます。

また、コミュニケーションコストがかかる分、制作スピードは内製に比べると落ちることは理解しておきましょう。

メリット:
・固定費がかからない
・安定したクオリティを期待できる

デメリット:
・制作コストが高い
・コミュニケーションコストがかかる
・自社で制作することに比べるとスピードが遅い

Web幹事のようなWeb制作会社の比較サイト等で探すのがおすすめです。

どの制作手段も一長一短があるので、自分たちの置かれている状況を考えて何を優先するかで決めましょう。

ランディングページの外注方法と費用

自社での制作が難しい場合は、外注を検討することになりますが、どのWeb制作会社に依頼すればいいか判断軸がなくて困ってしまうこともあるでしょう。

このような場合は、予算と外せない条件を決めた上で、数社に話を聞いて制作会社を決めましょう

具体的に外注する際の流れを解説していきます。

LP制作の予算を決める

LP制作予算は広告予算から出すことが多いでしょう。

例えば、300万円の広告予算で500件のCVを獲得することがミッションの場合、まず1件のCVを獲得するのにいくらかかるかを試算します。

仮に、1CVを獲得する際の目標CPAを5,000円とした場合、広告配信の予算は250万円(目標CPA5,000円 × 500CV)になります。残り50万円の広告予算が残る計算になるので、この50万円のお金でLP制作をするといった具合です。

もちろん出来るだけ安く作りたいという気持ちは理解できますが、現実的にいくらまでLP制作にお金をかけられるかは事前に決めておきましょう。

予算以外で外せない条件を決める

予算が確定したら、予算以外で外せない条件がないかを確認します。

例えば、下記のような点が考えられます。

  • 3週間以内に納品
  • パソコンとスマートフォン最適化両方行う
  • LP制作後の修正も対応してもらえること
  • サーバーのアップロードまで行ってくれる
  • WordPressで制作してくれる

このように、絶対に外せないLP制作の条件が何かを決めます。

外注先を決める

ここまでで予算と外せない条件が決まったので、この条件に当てはまる制作会社がないか探します。Web制作会社からしても予算と条件が決まっていた方が話を進めやすいはずです。

一つの制作会社しか見ないのは怖いので、少なくとも2~3社から話を聞いて相見積もりを取ることをおすすめします。

Web制作会社は下記のような制作会社の比較サイトから探しましょう。

制作会社の比較サイト


ランディングページを制作していると、どんな文章にしようかどんなデザインにしようかと迷ってしまうことが多々あると思います。しかし、これらに正解はありません。

結局はお客さんに見せて反応が良いものが正解なので、1つ制作するのに時間をかけ過ぎるよりはトライ&エラーの数を増やした方が良いです。

また、いくつか制作する中でコツや自分なりのノウハウを蓄積することができるため、初心者の方はまず最初の一本をスピード優先で作ってみてください。

内容のまとめ

  • ランディングページ(LP)とは、商品を売ることを目的としたWebページで、ネット上のセールスマン的な役割を持つ
  • ランディングページを制作する上での6つの手順
    • 目的を決める
    • ペルソナを決める
    • 情報設計の作成
    • デザイン制作
    • コーディング
    • サーバーアップロード・公開
  • ランディングページ制作の参考サイト
  • ランディングページの制作手段
    • 自社のデザイナーに依頼
    • ランディングページ制作ツールを使う
    • フリーランスに依頼
    • Web制作会社に依頼
  • ランディングページの外注方法と費用
    • LP制作の予算を決める
    • 予算以外で外せない条件を決める
    • 外注先を決める