ランディングページの作り方を紹介！手順から注意点、ツールまで解説
「ランディングページの作り方について、成果を出すための手順や構成は？」
「ランディングページの成功事例は？」
ランディングページは、ポイントを押さえた作り方ができているかどうかで、その成果に大きな差がつきます。
この記事では、企業のWEB担当者やマーケティング担当者に向けて、ランディングページの作り方について解説します。
■合わせて読みたい資料：成果の出るLPの基本構成も
→成果の出るLPデザインのポイント
■当社はリード獲得のノウハウを反映した LP作成ツールを提供しております。
>ferret Oneサービス紹介資料のダウンロード【無料】はこちら
目次[非表示]
ランディングページ（LP）とは？
ランディングページとは、商品詳細ページやサービス紹介ページなど、ユーザーのアクションを誘導することが目的のページのことです。
1ページに情報を網羅することで訴求力を強め、ユーザーに資料請求や問い合わせなどのアクションを取ってもらえることが特徴です。成約を獲得しやすく、事業に貢献する重要なコンテンツとなります。
広義では、ブラウザの検索結果やWeb広告などを介して、ユーザーが最初に訪れたページを指しますが、ここではリスティング広告などで誘導する、訴求に特化した1ページの意味で使用します。
関連記事：ランディングページ（LP）とは？作り方とBtoBで活きる構成
■当社はリード獲得のノウハウを反映した LP作成ツールを提供しております。
>ferret Oneサービス紹介資料のダウンロード【無料】はこちら
ランディングページ（LP）の作り方～手順～
まずはランディングページの作り方を手順ごとに紹介します。
- 目的を定める
- ターゲット、訴求決定
- 構成作成
- ライティング
- デザイン作成
- コーディング
- 公開、効果測定
1.目的を定める
ランディングページの設計や内容は、「目的」によって変化します。BtoBのランディングページの目的としては、以下が一般的です。
BtoBのランディングページの目的
|
2.ターゲット、訴求決定
ランディングページでは、読者の興味・関心を引き、コンバージョンにつながるような訴求をしなくてはなりません。
ターゲットを具体的にすることで、より強い訴求方法やデザイン、構成を作ることができます。ターゲットとなる顧客を具体的にイメージしてください。
ターゲットに対して、自社の魅力を最もアピールできる訴求方法を決めましょう。
関連記事：BtoBマーケティングのペルソナ設定とは？個人と組織の2つ作成するのがポイント
3.構成作成
目的とターゲットが明確になったら、ランディングページの構成を考えていきます。構成とは、「何をどのような順番で伝えるか決める」こと。
商談やプレゼンテーションでは、相手が理解しやすいように順序立てて必要事項を話すと思います。同じように、ランディングページでもユーザーが情報を把握しやすいようにページを構成することで、より成約につながりやすくなるのです。
ランディングページの構成が出来たら、ワイヤーフレームを作成します。ワイヤーフレームとは「WEBページの設計図」のことで、構成をより具体的にWEBページの形に落とし込んだもののことです。
ワイヤーフレームによってコンテンツの整理やレイアウトの設計ができるだけでなく、メンバー同士で認識を擦り合せることができます。
※ランディングページの構成については、次の章「ランディングページ（LP）の作り方～構成～」で解説します
4.ライティング
ランディングページに掲載する文章を準備します。ユーザーの興味を最初に惹きつける重要な部分である「キャッチコピー」は慎重に考えましょう。
キャッチコピーは、文章の説明を端的にあらわしたものです。画面上でも大きく表示されますし、目を引きます。キャッチコピーで興味や関心を惹くことができれば、ページの内容をより読んでもらえるのです。
以下のような、キャッチコピーを作成する際のポイントを押さえておきましょう。
ランディングページのキャッチコピー作成のポイント
|
ユーザーの関心を惹き、コンテンツを読みたくなるようなキャッチコピーを作成するのが重要です。
また、テキストコンテンツでは文字数が多くて見にくかったり、強引に説得するような印象が強かったりすると、ユーザーが離脱しやすくなるので注意しましょう。
関連資料：LPキャッチコピーの作り方
5.デザイン作成
ペルソナ、構成、コンテンツを元にデザインを作成していきます。
デザイン作成ではユーザーの動線を考えて、コンバージョンが得られる設計にする必要があります。
ランディングページのデザインのポイントは以下となります。
ランディングページのデザインのポイント
|
関連資料：成果の出るLPデザインのポイント
6.コーディング
コーディングとは、デザインまでで出来上がったものを、ブラウザで見られるようにする作業です。スマートフォンやタブレットなど、さまざまな端末や環境で正しく表示されているかを確認しましょう。
ランディングページは運用するなかで改修をしていくので、修正のしやすさも確認しておいてください。
ちなみにランディングページ作成ツールを使用すれば、HTMLなどの専門的な知識が必要なく、直感的にランディングページを作成・運用することができます。
7.公開、効果測定
ランディングページを公開した後には、Googleアナリティクスやヒートマップツールなどのアクセス解析ツールを利用して、効果を測定しながらPDCAを回していきましょう。この作業をLPOといいます。
ランディングページは改善を重ねていくことで、さらに成果を得られます。
関連記事：LPOとは？手順や問題点の見つけ方・対策を事例もふまえて解説
ランディングページ（LP）の作り方～構成～
ランディングページは構成次第でランディングページの成果が大きく変化します。ここからは、構成の作り方において注意すべきポイントを解説しますので、ぜひチェックしてください。
- ファーストビュー
- 興味・関心
- エビデンス
- 信頼
- クロージング
関連資料：成果の出るLPデザインのポイント
①ファーストビュー
ファーストビューとは、ランディングページを開いたときにユーザーが最初に目にする部分のことです。ファーストビューでは「何のサービスなのかが、読み手に伝わるか」が重要となります。
ファーストビューで表示する内容としては、主に以下の3つです。
- キャッチコピー
- CTAボタン
- メインビジュアル画像
メインビジュアル画像やキャッチコピーではユーザーの注目を集め、画像は一目で何のサービスや商品か伝わるものを選ぶ必要があります。
CTAボタンもファーストビューに入れることで、成約率の向上を狙うことが可能です。
②興味・関心
興味・関心を惹きつけることでランディングページを読み進めてもらいやすくなります。興味・関心を引くために必要な要素は、主に以下です。
- 得られる結果
- こんな方に／こんなお悩み
- 気づき
A.得られる結果
サービスや商品を利用することで、どのような効果が得られるか伝えましょう。具体的な数値やグラフを用いて明確に伝えると効果的です。
B.こんな方に／こんなお悩み
無形商材やソリューションサービスを提供する場合や、競合と差別化を図りたい場合は、どのような人に向けた商材なのかを伝えることで、ユーザーに「自分ごと化」してもらうことが有効です。
ユーザーの悩みや課題に寄り添うような内容で共感を獲得しましょう。
C.気づき
競合が多く差別化を図りたい場合、ユーザーが想定していなかった新事実を提供することで興味を持たせます。ユーザーに「新発見」を提供し、興味のきっかけを与えるようにするとよいでしょう。
③エビデンス
ユーザーにサービスがどれだけ効果的か「納得」してもらう必要があります。ユーザーは半信半疑の状態でWEBページを閲覧しているからです。
ユーザーに信用してもらうには、証拠となるエビデンスが大事です。成果の得られる根拠やサービス詳細、活用例などを組み合わせて構成していきましょう。
- 実績
- 機能
- 専門知識
- 活用例
A.実績
豊富な導入社数や有名企業の導入など「実績」は導入後の成果に対するエビデンスになります。
例えば、豊富な導入実績は「ノウハウがありそう」、売り上げの良い企業のロゴがあれば「確かに成果がでてるかも」という印象も与えられます。
また、BtoBの場合は、取引先が信用できるところなのかという調査が必須です。有名企業が導入していれば、「あの会社が入れているなら信用できるかも」ということも印象づけられます。
B.機能
機能が画期的で競合と差異化が図りやすいときは、機能の強みや魅力を伝えるのが効果的です。
見るだけで明らかに競合より使い勝手が良いのが伝わるため、コンバージョン獲得に繋がります。
C.専門知識
コンサルや無形商材で専門知識を要する場合には、専門知識をアピールすることは有効な手段です。
例えば、有名な専門家が監修している場合など説得力があります。図や表などを用いて具体的にアウトプットを見せるのもよいでしょう。
D.活用例
有形商材やツールなどの場合、活用例を見せることで課題解決のイメージに繋がります。
活用例によってユーザーが新たな気づきになることもあり、興味を持たせる要素になるのです。
④信頼
「信頼」は、ユーザーが抱いている不安や疑問を払拭するのに効果的です。会社や品質などを信頼しなければ、ユーザーは購入することがありません。
第三者の評価や、よくある質問などを組み合わせて、サービスや商品の利用前に安心してもらうことが大切です。
- 顧客の声
- 〇〇さんもオススメ
- 料金表
- よくある質問
- 開発者の声
A.顧客の声
導入したメリットや運用状況をイメージしやすくなります。だからこそ、これまでの顧客の声を掲載するのが効果的です。
顧客の声はストーリー性のある内容にすることで、ユーザーの共感を獲得できます。
B.〇〇さんもオススメ
業界や業種の中で支持を集めている人の名前を使用することで、ユーザーの信頼度を高めることができます。「〇〇さんもオススメ」のように、本を出版する際に著名人の感想を帯に掲載するのと同じ戦略です。
これによって、著名人の信頼性や影響力をサービスにも活かすことができます。
C.料金表
ユーザーが商材の導入を本格的に考え始めたとき、料金は重要な判断材料になります。競合と比較して価格に優位性がある場合、料金表を掲載しましょう。
価格帯が比較的高かったり、料金体系が複雑だったりする場合は、まずは問い合わせや資料請求に誘導するのが効果的です。
D.よくある質問
FAQ、よくある質問は、ユーザーの疑問を払拭するのに役立ちます。
疑問点が解決されないとアクションに繋げられないため、ユーザーが疑問を持つようなポイントは事前に解説しておくようにしましょう。
E.開発者の声
「開発者の声」は、サービスや商品の開発を行うきっかけや想いを伝えることで、好感度や信頼性を高めることができます。
BtoBで顧客の声の掲載が難しい場合などに、開発者の声を利用すると効果的です。
⑤クロージング
クロージングとは、ユーザーに契約や問い合わせなどの行動を促す場所です。期間限定、スピード対応、特典など、ユーザーにアクションを促す情報を提供しましょう。
ただし、クロージングの部分で今すぐ買わなければならない理由などを述べる際、押し売り感が出ないように注意が必要です。ユーザーのベネフィットを意識した訴求を行いましょう。
構成を一から作るのが難しい場合は、テンプレートの活用がおすすめです。こちらを参考にしてみてください。
→ランディングページにおすすめのテンプレートは？HTML・WordPress・ツールごとに紹介
ランディングページ（LP）デザインの参考サイト
ランディングページの構成の理論が分かっても、実際に作るとなるとイメージがわかないですよね。そこでおすすめなのが、他社のランディングページを見ることです。
参考サイトなら、企業が実際にマーケティングで活用しているランディングページがまとまっており、一覧で見られます。
「どのような構成になっているのか？」「どのような内容なのか？」を改めて考えながら見ると作るべきランディングページのアイデアがわいてくるでしょう。
ここではおすすめの参考サイトを紹介しますので、ぜひ活用してみてください！
LP アーカイブ：豊富なサイトから見つけられる
LP アーカイブはデザインの登録数の多さが特徴の参考サイトです。
ランディングページの色合いや「かっこいい」「爽やか」などのイメージ、ランディングページで紹介している商品・サービスで検索することもできます。
沢山のランディングページの中から、自社に合ったデザインやテンプレートに悩んだ際に着想を得るのに役立つでしょう。
SANKOU!：制作会社もわかる
SANKOU!はランディングページだけでなく、サービスサイトやオウンドメディアなどWebサイト全般のデザインを一覧にしている参考サイトです。
制作した企業や個人も分かるものについては記載があり、デザインを依頼したい場合にも参考にすることができます。
https://sankoudesign.com/category/lp/
LP advance：キャッチコピーが探せる
LP advanceでは、ランディングページ（LP）のキャッチコピーも検索することができます。
デザインだけでなく、訴求したい内容をどのような言葉で伝えて行くのかということのヒントを探したい場合におすすめです。
【マーケター直伝】ランディングページ作成で抑えるポイント
マーケティングの現場で本当に活用できるランディングページを作るために抑えておくべきポイントがあります。
ここでは、現役マーケターにヒアリングしたポイントを5つ解説します。
- 制作後は継続的な改善が必要（LPO）
- 誰でも更新できる運用環境
- ファーストビューには力を入れるべき
- 押してもらえるCTAにする
- 集客方法とセットに考える
制作後は継続的な改善が必要（LPO）
ランディングページは、一度作ったら完成ではありません。
効果検証と改修を繰り返すことで、離脱率が低くCVRの高いランディングページになるように内容とデザインを変えていく必要があります。この作業を「Landing Page Optimization」=「ランディングページ最適化」、略してLPOといいます。
ランディングページを作った時点では「こんなデザインを・内容ならユーザーに欲しいと思ってもらえるだろう」という仮説を詰め込んだに過ぎません。
実際に公開してユーザーの反応を知ることで、その仮説が正しいのか、より改善すべき点があるのかが分かるようになります。公開後に改善点を見つけようという心構えで運用していきましょう。
関連記事：LPOとは？手順や問題点の見つけ方・対策を事例もふまえて解説
誰でも更新できる運用環境を整えよう
LPOを行っていくには、見つけた改善点をすぐに反映するスピード感が求められます。
ランディングページの作成を外部に委託している場合、修正の依頼をすると時間がかかり、追加費用もかかってしまいます。そのため、なるべく自社のスタッフだけでランディングページを更新していける環境を整えておいた方が成果を出しやすくなります。
運用環境の整え方としておすすめは、使いやすいツールを選定することです。
コーディングなどの専門知識がなくても、誰でも簡単にページを修正・公開できるツールが数多く提供されています。専門知識のあるスタッフがいない場合は、「Webサイト ノーコード」「ランディングページ ノーコード」などと検索して、自社だけでも扱えるツールを探して、ランディングページを作っていきましょう。
ファーストビューには力を入れるべき
一般的に、ユーザーはそのWebサイトが自分にとって必要かどうかを3秒で判断していると言われています。ユーザーに必ず見てもらえるファーストビューで、いかに心をつかめるかが重要なのです。
ファーストビューは成果を出すためには、特に力を入れるべき部分であることを認識しておきましょう。
離脱率が高い、CV率が低いなど、思った成果が出ない場合、最初に見直すべきところでもあります。ファーストビューデザインの成功例はインターネットでも様々公開されていますので、他社の例も参考に、自社ターゲットに合ったデザインや内容を見つけていきましょう。
一般的にCVRが高くなる傾向のあるデザインの例
- ファーストビューにフォームを入れたらCVRが上がる
- ファーストビューでCTAが見えるデザインにしたらCVRが上がる
押してもらえるCTAにする
CTAのテキストは「ダウンロードする」「問い合わせる」など動詞で表現しましょう。
ユーザーの目線に側に立って、「自分がクリックすると何をすることになるのか」を明確にすることで、ユーザーの行動を促すことができます。
また、CTAボタンの色も重要です。
背景デザインとのコントラストを意識して目立たせることで気付いてもらえます。
合わせて、同じアクションを促すCTAボタンについては色・形を統一することが欠かせません。場所によって色を変えたり、奇抜な形にすると、ユーザーにCTAボタンと気づいてもらえない可能性が高いです。CTAボタンだとすぐに理解してもらえるようなデザインにしましょう。
集客方法とセットに考える
どんなによいランディングページを作成したとしても、ターゲットに見てもらえなければ成果はでません。作ることに注力しすぎて、この点がおろそかになりがちです。
- どのようなターゲット向けのランディングページを作るのか？
- そのターゲットはどのように集客するのか？
この2点は、必ずセットで検討しましょう。
例）
- ○○について課題を持っているターゲット向けのランディングページを作る。
- ターゲットが「○○」や「■■」と検索するから、リスティング広告を出稿し、ランディングページへ誘導する。
ランディングページ（LP）の制作手段
ランディングページの構成やポイントがわかったところで、実際に制作をする手段を3つ解説します。
- ランディングページ作成ツール（CMS）で自作
- WEB制作会社
- フリーランス
ランディングページ作成ツール（CMS）で自作
おすすめ度：★★★
おすすめな企業：ランディングページを量産したい、コストを抑えたい
ランディングページ作成ツールとは、画像とテキストを挿入するだけで簡単にランディングページが作成できるツールです。ランディングページのテンプレートが用意してあったりなど、ランディングページの作成に特化したWebサイト作成ツール（CMS）であるとも言えます。
自社でランディングページを量産して、素早くPDCAを回していくことができるため、広告で積極的に新規顧客を獲得していきたい方に特におすすめです。
コストについては、無料のものから有料まで幅広くありますが ツールの費用だけで済むため、コストを抑えられます。
BtoB企業の場合
BtoBの商材は、長期間じっくりと比較検討の上、購入されるため、サービスサイトを活用したマーケティングが必要になります。
BtoBで、これから本格的にマーケティングを推進していく場合は、サービスサイトの構築が優先です。 ランディングページ作成ツールは1ページだけ作ることに特化しているため、サービスサイトは作れません。注意しましょう。
WEB制作会社
おすすめ度 ★★☆
おすすめな企業：人的リソースがない、デザイン性の高いページを作りたい
WEB制作会社に依頼することでランディングページを作ってもらうと、デザインや構成が優れたものが期待できる一方、費用が高めです。
ランディングページを運用していくなかでも、逐一変更を加えるのに依頼をする必要があるため、費用や時間がかかります。
フリーランス
おすすめ度：★☆☆
おすすめな企業：自社で作ってほしいデザインを理解しているデザイナーとつながりがある
クラウドソーシングサービスなどを介して、フリーランスのデザイナーにランディングページを依頼することが可能です。
単価は低めですが、デザイナーのクオリティやレベルに差があるのが懸念点です。
キャッチコピーや構成などが不得意など、人によって得意不得意があるので注意が必要です。
ランディングページ（LP）の制作手段別 相場・作成時間
前章でご紹介したランディングページの制作手段の相場・作成時間の目安をご紹介します。自社のニーズにあった制作手段を選ぶ参考にしてみてください。
ランディングページ作成ツール（CMS）で自作する場合
作成時間：数時間〜1週間
相場：1,000円〜10,000円（月額でツールの使用料が発生）
テンプレートを利用してページをカスタマイズする場合、短時間で作成可能です。複雑なカスタマイズやデザインを加える場合は、数日〜1週間かかることがあります。
また、制作にかかる費用はツールの月額使用料のみで済みます。
自分で作成するので、コミュニケーションコストがかからないので、他の作成手段よりも早くでき、費用を抑えられるのが特徴です。
WEB制作会社に依頼する場合
作成時間：2週間〜2ヶ月
- 初期打ち合わせと要件定義：1〜2週間
- デザインフェーズ：1〜3週間
- 開発フェーズ：1〜4週間
- テストと修正：1〜2週間
相場：
- 簡単なLP：20万円〜50万円
- 中規模のLP：50万円〜100万円
- 高度なLP：100万円以上
制作会社によって価格帯は異なりますが、競合調査、構成案作成、ライティング・デザイン・コーディングといったプロセスに応じて、コミュニケーションコストと費用がかかります。
フリーランスに依頼する場合
作成時間：1週間〜1ヶ月
- 初期打ち合わせと要件定義：数日〜1週間
- デザインフェーズ：1〜2週間
- 開発フェーズ：1〜2週間
- テストと修正：数日〜1週間
相場：
- 簡単なLP：5万円〜20万円
- 中規模のLP：20万円〜50万円
- 高度なLP：50万円〜100万円
フリーランスの場合、制作会社に比べて費用を抑え、期間も短くできることが多いですが、クオリティや納期は個々のフリーランスのスキルに依存します。
▼ランディングページ作成費用については、こちらの記事を参考にしてみてください
→LP制作の費用相場は？ランディングページ制作の条件別料金
BtoB向けのLP制作・運用なら「ferret One for LP」
弊社「ferret One」は、BtoBに必要な機能をまるっと揃えたマーケティングツール「ferret One」を提供しています。
LP制作には「ferret One for LP」をご用意。
パワーポイントのような操作感で、成果に裏打ちされたBtoB向けのテンプレートも豊富だから誰でも簡単にLPを制作できます。 ご興味のある方はぜひ資料をご覧ください。
>ferret Oneサービス紹介資料のダウンロード【無料】はこちら
ランディングページ作成の成功事例
ランディング制作もできるマーケティングツール「ferret One」を実際に導入した事例を紹介します。
制作スピードが大幅に向上した事例
企業のギフトキャンペーンの支援事業を提供するSBギフト株式会社では、ランディングページの作成や運用に時間と経費がかかってしまうことに課題を感じていました。
しかし、「ferret One」を利用することで、1行もコードを書くことなく簡単にランディングページの作成・修正ができるように。外注していた頃は1~2カ月かかっていたランディングページ制作が、2週間でできるようになりました。
引用：https://ferret-one.com/cases/voice020_softbankgift
リードの受注率/単価ともに高い水準となった事例
離職防止アプリを提供する株式会社テガラミルでは、Webからの問い合わせ数が少なかったことと、施策を改善するためのPDCAを回せていなかったことに課題を感じていました。特に、ランディングページの質に特に大きな課題を抱えたいたとのこと。
チーム内でも改善が必要と感じていたものの、改善に必要なノウハウや時間的余裕を持った人がいなかったため、ずっと浮いた課題となっていました。
そこで、操作性と更新性の高い「ferret One」を導入することで、定量的なパフォーマンス数値を見ながら細かく改善することが可能になりました。
Webから獲得したリードは受注率もとても高く、20%を超えてきており、良質なリードを獲得でき始めているとのことです。
引用：https://ferret-one.com/cases/027-tegaramill
まとめ
ランディングページの作り方の手順は以下の通りです。
- 目的を定める
- ターゲット、訴求決定
- 構成作成
- ライティング
- デザイン作成
- コーディング
- 公開、効果測定
特に、構成がポイントです。ランディングページは、ユーザーの心を動かす構成を取り入れることで、離脱を防ぎ、検討度を上げていくことができるため、構成次第で成果が大きく変化するのです。
また、ランディングページ作成後には、データを取り、PDCAを回しながら改善していくことが重要です。この度紹介した構成例をもとに、運用していき、より成果の出るランディングページに調整していきましょう。
もしも、素早くPDCAを回すために必要な環境が整っていない場合は、ページの改修がしやすく、データ収集しやすいツールを導入するなど、環境整備から取り掛かることをおすすめます。
当社はリード獲得のノウハウを反映した LP作成ツール「ferret One for LP」を提供しています。
パワーポイントのような操作感で、成果に裏打ちされたBtoB向けのテンプレートも豊富だから誰でも簡単にLPを制作できます。 ご興味のある方はぜひ資料をご覧ください。
>ferret Oneサービス紹介資料のダウンロード【無料】はこちら
▼あわせて読みたい「BtoBマーケティング」についての記事
立ち上げ初期のマーケティング組織、まずやるべきことは？戦略立案からスケールを目指すまで
