基本ノウハウ

【初心者向け】LPの簡単な作り方|無料ツールや依頼相場も解説

【初心者向け】LPの簡単な作り方|無料ツールや依頼相場も解説

LP(ランディングページ)は、購買や登録など具体的な行動をユーザーへ促す際に効果的なWebページです。しかし「LPの作り方が分からない」という悩みを抱えた方や、「LP作成って何かコツがあるの?」と疑問に思う方もいるでしょう。

本記事ではLPの基本的な作り方や、効果的なLPを作るコツを紹介します。テンプレートも使える無料のLP作成ツールや外部へ作成依頼した際の費用相場も解説しているので、ぜひ参考にしてみてください。

目次

1.【初心者向け】LPの作り方を7ステップで解説

そもそもLP(Landing Page)とは、次のような特徴を持つWebページのことです。

LP(Landing Page)の特徴

LPの目的はコンバージョン(CV)、つまり自社製品やサービスの購入や資料請求など何らかの具体的な行動を起こしてもらうことにあります。ここではCVにつなげるLPの基本的な作り方について、7つのステップに分けて見ていきましょう。

  • 【1】目的や目標を決める
  • 【2】ターゲットや訴求軸を定める
  • 【3】LP全体の構成を考える
  • 【4】構成に沿ってライティングをする
  • 【5】デザインを整える
  • 【6】コーディングを進める
  • 【7】公開後はLPO改善を目指す

【1】目的や目標を決める

まずは、LPの目的や目標を明確にします。LPの目的は、自社製品・サービスの売上アップや見込み顧客の獲得などが挙げられるでしょう。

また、目標はKGIとKPIという2つの視点で考えます。KGI(Key Goal Indictor)とは、事業における最終目標です。売上20%アップやシェア率5%アップなどが、KGIに該当します。

一方、KPI(Key Performance Indicators)とは、KGIに至るまでの中間目標です。Webマーケティングであれば売上20%アップというKGIに対し、PV数やCV率を何%アップさせるかというのがKPIにあたります。

いずれにしても達成できたか否か判断できるよう、KGIやKPIといった目標は具体的な数値で設定することが大切です。

【2】ターゲットや訴求軸を定める

見込み顧客が抱える課題、どのような意図でLPにたどり着くのかを考え、それに基づいた訴求軸を定めます。ここでターゲットや訴求軸を明確にする理由は、訴求する対象やタイミングを間違えると、どんなに良い製品やサービスでも売れないためです。

例えば、身近な例でいくと暑い夏にホカホカの肉まんを売ろうとしても、なかなか売上につながりません。夏でも熱々の肉まんを食べたいというニッチな客層を狙うなら話は別ですが、基本は【1】で定めた目的や目標を達するために、必要なターゲットや訴求軸を探っていく必要があります。

【3】LP全体の構成を考える

【1】や【2】で定めた方向性に沿って構成を決定し、各コンテンツの土台を作ります。構成作りの途中で方向性がブレると広告とLPとの間にズレやギャップが生じ、ユーザーが途中で離脱しかねません。そのため構成を作る際は適宜LP全体を見返し、整合性が取れているか確認することが大切です。

構成作りの具体的な方法は、次項の「2.効果的なLPを作るコツ」をぜひ参考にしてみてください。

【4】構成に沿ってライティングする

構成が完成したら、テキスト部分のライティングをしていきます。基本的な文章構成はユーザーが理解しやすいように、PREP法を意識しましょう。

  • P:Point(結論)
  • R:Reazon(理由)
  • E:Exanple(具体例)
  • P:Point(結論を繰り返す)

また、ユーザーの興味・関心を引くキャッチコピーや論理展開も重要です。こちらも、次項の「2.効果的なLPを作るコツ」で詳しく解説します。

【5】デザインを整える

次に競合のLPをリサーチしながら、ターゲットに合ったデザインを施しましょう。特にBtoBはBtoCと違い、信頼性が重要な要素であり、トンマナが統一され洗練された印象のデザインが求められます。

デザインにおける具体的なコツは、次項の「2.効果的なLPを作るコツ」をぜひ参考にしてみてください。

【6】コーディングを進める

ライティングやデザインが形になったら、次に挙げるようなコーディングを進めてLPとして実装します。

  • HTML(基本の形を作る)
  • CSS(装飾を加える)
  • JavaScript(動きを加える) など

また、改行やスペースなど不要なものは削除し、コードを圧縮することも大切です。これにより、コードが軽量化され、LPの表示速度がアップします。

なお、コーディングは社内エンジニアや制作会社へ依頼するケースが少なくありません。ここできちんと共有したいのが、コーディングの進め方についてです。LPの作成では効果測定と検証を繰り返すため、改善を前提にコーディングする必要があります。

エンジニアや制作会社へコーディングを依頼する際はどこに何が書かれているか、どのような設定になっているか分かるように進めてもらいましょう。

【7】公開後はLPO改善を目指す

LPの公開後は効果測定しながら、LPO改善によるCV率向上を目指します。LPO(Landing Page Optimization)とはランディングページ最適化とも呼ばれ、ユーザーのニーズや興味の度合いに合わせてLPを改善する手法です。

ABテストや多変量テストなどの効果測定と仮説検証を繰り返し、より効果の高いLPを導き出しましょう。

2.効果的なLPを作るコツ

実は、基本的な作り方を押さえただけではCVにつながる効果的なLPは作れません。ここでは、効果的なLPを作るコツを次の2つに分けて解説します。

  • 構成作りのコツ
  • デザインのコツ

構成づくりのコツ

LP作成における構成づくりのコツは、主に次の4つです。

  • 訴求内容によって論理展開をアレンジする
  • ファーストビューには最も伝えたい内容を入れる
  • ボディコピーで信頼感や安心感を与える
  • クロージングで行動を促す

訴求内容によって論理展開をアレンジする

LPの構成づくりでは、訴求内容によって論理展開をアレンジしましょう。例えば、BtoBの実施数が多いセミナー集客は、次のような論理展開をもとにLPを作ります。

【セミナー集客を目的としたLPの場合】
論理展開 目的 具体的な内容
1 発見を促す どんなセミナーか、セミナーを受けることで自分たちがどう変化できるかなどを知ってもらう ・キャッチコピー
・ターゲットコピー
・自社製品やサービスの説明
2 信用を得る 「怪しい」と疑うユーザーの警戒心を解く ・過去に参加した方の感想や動画
・主催者/登壇者のプロフィールや実績
3 共感を得る ユーザーの悩みを顕在化させ、当事者感覚(自分ゴト化)を与える ・「〇〇についてお悩みではありませんか?」などの問いかけ
4 想像させる ①で伝えきれなかった魅力をとことん伝える ・メリットやベネフィット
・セミナーの詳細 など
5 不安や疑問を解消する 不安や疑問をあらかじめ解消し、セミナー参加への心理的ハードルを下げる ・支払い方法
・アフターフォロー など
(よくある質問としてまとめる方法もおすすめ)
6 参加する理由を与える ユーザーの背中を押してCVポイントへ誘導する ・「有料級のノウハウをゲット」など
7 行動を促す ユーザーにしてほしいことを明確に伝え、CVにつなげる ・問い合わせ
・登録 など

またセミナー参加者や既存顧客へメルマガ登録を促すLPは、上記の論理展開をアレンジした形を流用できます。

【メルマガ登録を促すLPの場合】
論理展開 目的 具体的な内容
1 発見を促す どんなメルマガか、登録することでどんな特典を受けられるかなどを知ってもらう ・キャッチコピー
・ターゲットコピー
・メルマガ内容の説明
2 信用を得る 継続的に情報を受け取る価値があることを伝える ・過去に参加した方の感想や動画
・メルマガのサンプル
3 想像させる ①で伝えきれなかった魅力をとことん伝える ・メリットやベネフィット
・メルマガの詳細 など
4 不安や疑問を解消する 不安や疑問をあらかじめ解消し、メルマガ登録への心理的ハードルを下げる ・登録の解除方法
・個人情報の取り扱い方法 など
(よくある質問としてまとめる方法もおすすめ)
5 登録する理由を与える ユーザーの背中を押してCVポイントへ誘導する ・「登録は無料」「1分で登録完了」など
6 行動を促す ユーザーにしてほしいことを明確に伝え、CVにつなげる ・問い合わせ
・登録

いずれにしても、顧客の心理的状況や叶えたい姿を予測し、説得力のある論理展開でCVへつなげることが大切です。

ファーストビューには最も伝えたい内容を入れる

ファーストビューには、LP全体を通して最も伝えたい内容を入れましょう。ユーザーは、自分にとって有益なページか3秒で判断するといわれています。つまり、3秒の間に「読み進める価値がある」と判断されるようなファーストビューを作る必要があるのです。

具体的には、次のような要素をファーストビューに盛り込みます。

  • キャッチコピー
  • ターゲットコピー
  • メイン画像
  • 問い合わせ先
  • CTA(行動喚起のボタンやバナー) など
ファーストビューイメージ

ファーストビューの見え方を確認する際はパソコンとスマホの両方でチェックし、どちらからでも見やすいように配慮しましょう。

ボディコピーで信頼感や安心感を与える

ボディコピーではベネフィットやエビデンス(実績、活用例など)を載せ、ユーザーに信頼感や安心感を与えることが大切です。

「買って!使って!」と、こちらの都合を押し付けるだけでは目的を達成できないどころか、ブランドイメージの低下につながりかねません。LPのボディコピーでは課題を抱えて悩むユーザーの気持ちに寄り添い、ユーザーの決断をアシストするような言葉選びや論理展開を心がけましょう。

またデメリットや欠点も正直に伝えることで、信頼性を獲得できます。支払い方法やサポート体制など不安要素を先んじて予測し、丁寧に取り除いて離脱を防ぐのも良いでしょう。

返金保証付きなど最も重要な不安解消要素は、ファーストビューに挿入するのも1つの方法です。

クロージングで行動を促す

LPの最後部ではCTAやエントリーフォームを設置し、ユーザーへ具体的な行動を促します。CTAは、次に起こすべき行動の内容が明確に分かるように示しましょう。例えば、「こちら」ではなく「資料請求はこちら」とすることで、資料請求するにはこのボタンをクリックすれば良いとユーザーが瞬時に判断・行動できます。

またエントリーフォームで入力させる項目は、多くても3つに留めるのがポイントです。入力項目が多くなるとユーザーの負担が大きくなり、離脱につながりやすくなります。

メインのCTAが購入など心理的ハードルが高いものの場合は、無料相談やカタログダウンロードなど、段階的なCTAも用意すると良いでしょう。サブのCTAであってもCVを得られさえすれば、見込み顧客との接点を持ち続けられ、次の施策につなげられます。

デザインのコツ

LP作成におけるデザインのコツは、主に次の3つです。

  • 集中しやすい画面づくりを意識する
  • 文字の大きさやスタイルは可読性を重視する
  • 適度に図やイラストを挿入する

集中しやすい画面づくりを意識する

LPのデザインでは、ユーザーが集中しやすい画面づくりを意識しましょう。人間の集中力は2000年で12秒だったのに対し、2015年は8秒にまで短縮しています。Webページを見るユーザーも集中力が徐々に短くなり、煩雑な画面では読む価値なしと離脱しかねません。

そのため、LPはユーザーが画面に集中できるように1カラムで作ることをおすすめします。2カラム以上になると視線がメインコンテンツから外れやすくなり、集中力が途切れてしまうためです。

カラム例

またテキストはスマホ・パソコン問わず、60〜100文字ほどで改行しましょう。適度に改行することでユーザーは画面に集中でき、読み進める可能性が高まります。

文字の大きさやスタイルは可読性を重視する

LPに載せる文字の大きさやスタイルは、可読性を重視します。文字の大きさはGoogleが16px、Androidが18pxを推奨しているため、16〜18pxにすると無難といえるでしょう。特に伝えたいフレーズや強調したい部分は、太字にするとメリハリが出て目に留まりやすくなります。

またテキストのスタイルは2種類あり、それぞれのメリット・デメリットは下表の通りです。

メリット デメリット
画像テキスト 目に留まりやすくなる 修正時はその都度作り替える手間がある
HTMLテキスト Googleに読み取られやすい(=SEO効果あり) インパクトが弱い

上記を踏まえると画像テキストはキャッチコピーなどの各要素に、HTMLテキストは本文テキストと使い分けると良いでしょう。

適度に図やイラストを挿入する

分かりやすいLPを作るためには、図やイラストの挿入も必要です。図やイラストは基本的に、メインカラーとアクセントカラーの2種類を使います。メインはコーポレートカラー、アクセントはメインの補色が基本です。色数が多すぎると見にくくなるため、使用する色の数は2~3色に抑えて濃淡で演出をつけましょう。

比較表は自社を真ん中に配置し、優位性をアピールするように装飾すると訴求力がさらに高まります。

比較表イメージ

ただし、画像やイラストは多用すると、表示速度が落ちて直帰率が上昇するため注意が必要です。表示速度が1〜3秒落ちた場合の直帰率は32%、1〜10秒に落ちた場合の直帰率は123%上昇するとGoogleは予測しています。

LPO改善のために画像やイラストを追加した際も、表示速度に影響がないか確認すると良いでしょう。

3.無料で使えるLP作成ツール3選【テンプレート付】

LPはデザインやコーディングなど、専門的なスキルを必要とする工程がいくつかあります。しかし、テンプレートを使えば、デザインやコーディングのスキルがなくてもクリエイティブなLPの作成が可能です。

ここでは、テンプレートも使える無料のLP作成ツールについて3つ解説します。

  • ペライチ
  • WordPress(ワードプレス)
  • Wix(ウィックス)

ぺライチ

ぺライチは、予約やメルマガなど集客機能がついたLP作成ツールです。ランディングページと検索すると、80件以上のテンプレートがヒット。販促セミナーや無料説明会など、さまざまなLPのテンプレートがそろっています。

料金プランは公開できるページ数やカスタマイズの自由度によって5つに分けられており、登録後は30日間無料で利用可能です。

  • スタートプラン:0円/月
  • ライトプラン:1,465円/月
  • レギュラープラン:2,950円/月
  • ビジネスプラン:3,940円/月
  • ビジネス+プラン:6,910円/月

LP作成は初めてという方も無料期間で試しやすいため、ぜひ利用してみてください。。

WordPress(ワードプレス)

WordPressは、世界で最も人気があるサイト作成ツールです。Lightning(ライトニング)という無料テーマでは、CTAボタンの設置などLP向けの機能も活用できます。無料を含めた料金プランは、次の5つです。

  • 無料:0円
  • パーソナル:1,100円/月
  • プレミアム:2,100円/月
  • ビジネス:4,600円/月
  • eコマース:8,000円/月

特に、WebサイトのSEO対策とLPのLPO対策を一括で管理したい方におすすめのツールといえます。

Wix(ウィックス)

Wixは、2億人ものユーザーに利用されている世界的にも有名なLP作成ツールです。LPのテンプレートは大きく分けて近日公開と宣伝の2パターンあり、全部で50件以上あります。Wixを使った基本的なサイト作成は無料で可能ですが、顧客アカウント機能などを利用したい場合は次のような有料プランも利用できます。

  • ビジネス:1,800円/月
  • ビジネスプラス:2,700円/月
  • ビジネスVIP:3,700円/月

スタイリッシュなデザインのLPテンプレートが多いため、BtoBのLPと相性が良いツールといえるでしょう。

4.LP制作の費用相場

LPはテンプレートを使えば初心者でも作成できますが、「自主制作は自信がない」「費用がかかっても良いから、プロに制作をお願いしたい」という方も多いでしょう。

最後に、制作会社などへ依頼した場合の費用相場を解説します。費用相場は大きく分けると、次の2パターンです。

  • 依頼内容による違い
  • 依頼先による違い

依頼内容による違い

依頼内容によるLP制作の費用相場は、下表の通りです。

依頼内容 費用相場 納期 企業タイプ
・テンプレートを使ったデザイン
・コーディングのみ など
10万円以下 比較的短い ・低コストでLPを作りたい
・公開後の効果測定やLPO改善は自社でできる
・構成づくり
・オリジナルのデザイン
・コーディングのみ など
10~30万円 標準 ・オリジナルのLPを作りたい
・公開後の効果測定やLPO改善は自社でできる
・競合調査
・構成づくり・各コンテンツ作成 など
30~60万円 比較的長い ・現状分析からサポートを受けたい
・確実にLPからCVへつなげたい
・競合調査
・企画立案
・各コンテンツ作成
・管理や運用
・コンサルティング など
60万円以上 長い ・LP作成についてプロから全面的なサポートを受けたい
・管理や運用、LPO改善も任せたい

依頼内容が多くなれば、おのずと費用は多くなり納期も長くなります。自社が求めるLPの形をあらかじめ想像し、どの部分を外部に委託するか社内でよく話し合うと良いでしょう。

依頼先による違い

依頼先によるLP制作の費用相場は、下表の通りです。

依頼内容 費用相場 納期 企業タイプ
フリーランス 5万円~ フリーランスによる ・低コストでLPを作りたい
・自社内で対応できない部分のみ依頼したい
格安のLP制作会社 10万円~ 比較的短い ・ある程度の質は担保したい
・短納期でLPを仕上げたい
中小規模の制作会社 30万円~ 標準 ・予算や目的に合わせて料金プランを選びたい
・現状分析から運用までトータルサポートを受けたい
大手制作会社 100万円~ 長い ・確実にCVへつながる戦略的なLPを作りたい
・マーケティングやブランディングのサポートも受けたい

なおフリーランスは、クラウドソーシングサービスなどを介して外注可能です。デザインのみ、コーディングのみなど依頼範囲が限られていれば、さらに安い費用でLP制作を依頼できます。

予算が限られている場合はフリーランスや格安のLP制作会社へ依頼し、効果測定や仮説検証を繰り返しながらブラッシュアップするのも1つの方法です。

5.まとめ

LPは基本的な作り方を押さえつつ、テンプレートが使えるLP作成ツールを活用すれば、初心者でも作成できます。ただしより効果的なLPに仕上げるためには、構成やデザインでユーザーが読みやすい形に工夫することが大切です。

自主制作で成果が上がるか不安な場合は、フリーランスや制作会社へLP制作を依頼する方法もあります。中には、競合分析や運用・管理まで請け負ってくれる制作会社も少なくありません。予算を確保できる場合は、大手の制作会社からトータルサポートを受けることで、より効率的にLPの運用・管理を進められます。

自社製品やサービスの売上を上げたい方や集客力を強化したい方は、ユーザーの心に刺さるLPを作っていきましょう。


この記事に関連するお役立ち資料

あわせて読みたい

この記事を書いた人

BeMARKE編集部
BeMARKE編集部

BeMARKE(ビーマーケ)は、BtoBマーケティングの課題解決メディアです。 BtoBマーケティングのあらゆる局面に新しい気づきを提供し、リアルで使える「ノウハウ」を発信します。

SNS:XYouTube

BeMARKEナビゲーターが
無料で相談にのります。

  • 自社に合う
    サービスを
    知りたい
  • 施策の
    進め方が
    わからない
  • Webで
    引き合いを
    増やしたい
  • 営業活動の
    DXを
    進めたい
BeMARKEナビゲーター