ランディングページの作り方とは?制作の流れや構成する要素について解説

ランディングページとは、Webサイトの訪問者に商品購入や、資料請求などの行動をしてもらうためのWebページです。
この記事では、ランディングページの特徴や作成の目的と合わせて、ランディングページの作り方の手順や構成を解説します。ランディングページの作成事例も紹介しているため、ぜひ参考にしてください。

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

ランディングページ(LP)とは、サイト訪問者に何かしらのアクションを起こしてもらうためのページを指します。たくさんのページがあるWebサイトとは異なり、1ページで完結することが特徴です。
たった1ページでユーザーに関心を持ってもらい、信頼を得て、欲求を起こしアクションへ導く必要があるため、制作時は綿密な手順を踏む必要があります。

ランディングページ(LP)の特徴

ランディングページはWebサイトに来訪したユーザーが目的のアクションを起こすコンバージョンを上げるために作成するWebページで、主な特徴は次のとおりです。

  • レイアウトが縦長
  • 他のページへのリンクが少ない
  • デザインに制限がない

このようにランディングページは縦長のレイアウトで、他ページに遷移する不要なリンクが貼られていないため、1ページだけで情報の全容を把握できます。また、デザインの自由度も高いことも魅力です。

ランディングページ(LP)を作る目的
ランディングページを作る目的は、ユーザーに商品購入や会員登録、問合せなどのアクションを促すことです。一般的なWebサイトを作成する目的は知名度の向上や新規顧客の獲得など、企業によって異なります。しかしランディングページでは、コンバージョンを達成することだけに目的を絞っています。

ランディングページ(LP)の作り方

ランディングページの具体的な作り方について、6つのステップを順を追って解説します。

1.目的を決める

ランディングページの設計や内容は目的によって異なります。ユーザーに起こして欲しいアクションが、商品・サービスの購入なのか、資料請求なのか、メルマガ登録なのかによって、設計や訴求ポイントを明確にしましょう。
たとえば、商品販売なら写真を多く、資料請求なら簡単にベネフィットを伝える内容にするなどの工夫が良いかもしれません。

2.ペルソナ・訴求を決める

次に、ターゲットとなる顧客(ペルソナ)を明確にします。ペルソナを設定することで、訪問したユーザーが何に悩み、どのような経緯でサイト訪問するかを推測しやすくなります。あわせて商品・サービスの訴求方法も決定しておきましょう。

3.構成を作成する

ランディングページは1枚で完結するサイトであるため、どのような順番でコンテンツを載せるかが非常に重要なポイントです。具体的な内容を考える前に、まずは構成(フレームワーク)を考えておきましょう。
ランディングページを構成する具体的な項目については後述します。

4.コンテンツを用意する

構成が完成したら、具体的なコンテンツを作成します。特に、最初にユーザーの関心を左右するキャッチコピーの作成は重要なポイント。
単純に事実や特徴を述べるのではなく、ユーザーにとって問題解決後の未来を想像させる内容や、具体的な数値を示して興味を惹く、などの方法が有効です。

5.サイトを作成、デザインする

次に、ペルソナに沿ったサイトデザインを考えます。ユーザーの導線を考慮に入れ、以下のポイントを参考にデザインを作成しましょう。
ちなみに、ランディングページ制作ツールを使う場合はランディングページのテンプレートがあると構成の参考になります。また、のちに紹介するコーディングの知識も不要なため、外注せず社内や自分で作りたい方にはおすすめです。

LPテンプレートの例

MORISHITA International Academy|ビジネススクールのLPを想定したBiNDupのテンプレート。すでにページ構成されているので画像やテキストを用意するだけで作成できる

  • ファーストビューに力を入れる
  • 視線導線を意識する
  • 画像や挿絵でわかりやすく
  • カラーやテキストはテーマに合ったものを選ぶ
  • 申込みボタンを目につく場所に配置する

開発・コーディングを行う

HTML・CSS・JavaScriptなどを使って開発やコーディングを行います。どんな端末や環境でもきちんと表示されるか、後から修正がしやすいかの2点に注意しましょう。
なお、LPは成果が出るまで改善を重ねることが肝心なため、修正のしやすさは意外と重要なポイントです。CMSなど更新しやすいツールを選ぶとよいでしょう。

コーディングが不要。企業サイトに最適なCMSとは?参考記事はこちら

おすすめCMS比較21選|法人・個人向けに失敗しない選び方を徹底解説

6.公開・効果測定を行う

サーバー上にコードをアップロードし、ランディングページを公開した後には、効果測定を行うことも必要です。
Googleアナリティクス等のアクセス解析ツールを利用し、ページがどのくらい訪問されているかを測定したり、どこから流入されているかを確認しながら、流入を増やすための施策や離脱されないようなぺージへ改修をすることが大事です。PDCAを回すことで成果につながるでしょう。

ランディングページ(LP)の構成

次に、ランディングページの構成を作成する方法を解説します。

ファーストビュー

ファースビューとは、ユーザーがそのサイトを訪れた際に、まず目に入る画像の範囲のことです。ユーザーが欲しい情報がしっかり載っていると、離脱率が低くなります。商品の内容やサービスが一目でわかるよう、以下の要素を盛り込んで見やすく作成しましょう。

キャッチコピー

キャッチコピーはテキストコンテンツの中でも特に重要な要素で、ユーザーが有益なサイトかを判断する大きな材料となります。ユーザーの興味を惹けるように、キャッチコピーを作成する際は以下の点に気をつけましょう。

  • ユーザーのニーズや関心ごとを的確に捉える
  • 要点がわかるよう短く簡潔なコピーを作成する
  • 大きい文字を使用する

ユーザーが抱えている問題点を指摘したり、意外な事実をキャッチコピーに入れたりするのも効果的です。

メインビジュアル

サイトを訪れて最初に目に入るビジュアルは、そのサイトのイメージを大きく左右します。一目で商品やサービスの内容がわかるものを選ぶと同時に、キャッチコピーとの整合性が取れているかどうかもしっかり確認しましょう。
画像選びのポイントは、画質の良いものを選ぶこと。明るく色味の良い写真はそれだけでイメージアップに繋がります。

CTA

CTAとは、「Call To Action」の頭文字を取ったもので、「行動喚起」と訳されます。サイトに訪れたユーザーに、こちらが意図する行動を起こしてもらえるよう誘導するためのものです。
具体的には、申込みボタンや資料請求ページへのリンクです。ファーストビューにCTAを設置することで、ユーザーにより具体的な行動を促す効果を得られます。

エビデンス

商品やサービスを販売するには、ユーザーの期待を高めたり、信頼感を与えたりすることが大切です。以下の要素を組み合わせて有効なエビデンスを提示しましょう。

  • 実績:具体的な数字を見せることで客観的に判断できるため、実績豊富な会社であればぜひ実績を数値で掲載しましょう。
  • 専門知識:法律や医療など、専門知識が必要な分野の商品やサービスであれば、専門家監修のコンテンツにすることで信頼を得られます。
  • 機能:明らかに他社よりも優れた機能を有している場合、機能面の強みを訴求することで、コンバージョンの獲得につながります。
  • 活用例:何かを解決するツールの場合、活用例や事例を載せることで、ユーザーに具体的なイメージを持たせることができます。

信頼

ユーザーが抱える不安や疑問を取り除き、商品やサービス、企業への安心感を覚えてもらう内容です。「利用者の声」「よくある質問」「料金表」など、客観的な情報を提示することがポイントです。
利用者の声や口コミは、できるだけストーリー性を持たせ、ユーザーの共感を呼ぶ内容にしましょう。

クロージング

ユーザーに購入や資料請求を促す場所のことを、クロージングといいます。CTAもそのひとつで、ランディングページを作った目的を叶える場所でもあります。
ユーザーのベネフィットを意識したテキストで、自然と行動を起こしたくなるような内容に仕上げましょう。

成果を上げるランディングページ(LP)制作のポイント

成果を上げるために必要なふたつの要素を解説します。

1.インターネット広告との繋がりを意識して作る

インターネット広告から流入してくるユーザーにとって、広告とサイトの整合性が取れているかは重要なポイントです。興味のある広告を見つけてクリックしても、サイトの内容がずれていれば「自分が探している情報ではない」と判断し、即離脱に繋がる恐れもあります。
ユーザーがクリックした広告からユーザーが欲しい情報を的確に読み取り、ベネフィットを与えられるコンテンツを作成しましょう。

2.ユーザーを惹きつける要素を入れる

たとえ内容が良くても、見にくかったりわかりにくい言い回しが使用されていたりするだけで、ユーザーにとっては魅力が半減してしまう原因となります。ユーザーに興味を持ってもらい離脱率を防ぐためには、興味を惹きつける要素を随所にちりばめるようにしましょう。例えば、以下のような内容です。

  • ストーリー性のある流れにする
  • 写真や挿絵、グラフを使って見やすくする
  • 信頼性を高められるコンテンツを作成する(胡散臭さや過剰なアピールは厳禁)

ランディングページの効果を上げるための注意点

ランディングページを作成する際に、気をつけたい3つの注意点を解説します。

1.ユーザーにベネフィットを伝える

ベネフィットとは、ユーザーが得られるメリットとも言い換えられます。ただ単に、自社の商品やサービスの特徴を述べるだけでは、ユーザーが得られるメリットを伝えられません。
具体的に、自社のサービスや商品を導入することでどのような効果を得られるのか、という視点でテキストを作成するようにしましょう。実際にその商品を使って問題が解決したという、イメージを持たせることがポイントです。

2.問合せ数に対する成約率を確認する

ランディングページからの問合せが成約に結びついているかチェックし、成約率をさらにアップさせる方法を検討しましょう。問合せ数にばかり目を向けるのではなく、成約率を確認することが大切です。
成約率が急激に伸びることは多くありませんが、地味な努力が実を結ぶはずです。成約率を上げる要素はさまざまですが、特にターゲットの設定は慎重に行わなければいけません。

3.改善・改良を行う

ランディングページの改善はLPOとも呼ばれます。ランディングページを最初に作成する際は「こんな風に書けば売れるかな」といった仮説を前提とするため、思ったように成果が上がらないことも想定されます。
定期的にLPOを行い、顧客の損失を防ぐとともに、少ないコストで成果を上げていきましょう。以下の要素を重点的に見直し、サイトの精度を高めてください。

  • ファーストビュー最適化
  • コンテンツの内容、構成の改善
  • CTA最適化
  • エントリーフォーム最適化
  • 表示速度の改善

ランディングページを作る3つの手段

最後に、ランディングページを作る3つの方法を解説します。

ランディングページ作成ツールを活用する

ツールを利用すれば、開発やコーディングの知識がなくてもランディングページの作成が可能です。自社で対応できるため、外注コストがかからず予算の面で大きなメリットがあるでしょう。
また、制作だけでなく効果検証や改善まで行ってくれるツールも存在します。手間をかけたくない担当者におすすめです。

SEO対策やマーケティング機能も付属するBiNDup

BiNDupは専用サーバーだけでなく、SEO対策やWebマーケティングなどサイト制作・運用に必要な機能がオールインワンで提供

Web制作会社に依頼する

Webサイト制作を専門に行っている会社であれば、構成もデザインも高品質なものができると期待できます。ただし、分業などでいくつかの段階を踏んで制作にあたるため、その分費用や時間がかかることも。見積もりを正確にしてもらうことが大切です。

デザイナーに依頼する

クラウドソーシングやSNSを活用して、デザイナーに直接依頼する方法もあります。ただし、デザイナーによって得意・不得意があるため、「思っていたものと違う」といったトラブルが発生する恐れがあります。事前にポートフォリオや料金体系をしっかり確認しておきましょう。

BiNDupならランディングページ(LP)がすぐに作れる

ノーコードCMSのBiNDupはブロック編集機能があり、直感的なレイアウトのランディングページ作成が可能です。ランディングページ用のテンプレートも充実しているため、自社の製品のイメージに合ったデザインを選べます。また、スマホからの投稿機能を利用することで、ブログを編集するような気軽さでランディングページの更新を行えます。
BiNDupのテンプレート一覧ページ

ランディングページ(LP)の制作事例

ここでは、実際に他企業で作成されたランディングページの事例を紹介します。

スカウミー!(Scoutme)|北陸発の就活支援サービス

スカウミーは、北陸3県を中心とした就活支援サービスのランディングページです。サービスの紹介動画やサービスの特徴、就活の年間スケジュールなどが網羅できる構成になっています。また、ランディングページ内に、「お知らせ」「お問合せ」のリンクが設置されており、最新の情報を届けやすく、問合せページに誘導しやすい特徴があります。
スカウミー!

ランディングページ(LP)の事例ギャラリー

各社のランディングページの事例を掲載しているギャラリーサイトをいくつか紹介します。

LP幹事

LP幹事は2,500以上のランディングページを掲載しているギャラリーサイトです。業界やカラー、イメージから参考にしたいランディングページを検索できる機能があるため、手間や時間をかけずに参考事例を探したい場合に役立ちます。

LP ARCHIVE

LP ARCHIVEは高品質かつ、見やすいランディングページを集めているギャラリーサイトです。カラーやイメージ、カテゴリーから簡単に事例を検索できる仕組みです。毎日10ページ以上のデザインが追加されているため、最新のランディングページを確認できます。

まとめ

ランディングページはコンバージョンを上げるために作るWebページです。上記で紹介した作り方の手順で作成を進める際は、インターネット広告との繋がりを意識し、ユーザーの興味を引くベネフィットを含めましょう。自社でホームページを作成するならBiNDupの利用がおすすめです。

BiNDupは、テンプレートが充実している国産のホームページ作成・制作サービスです。レイアウトを自由に変更できるため、ランディングページの制作を円滑に進められます。ノーコードでの作成が可能なことから、専門知識は必要ありません。まずは登録して無料でお試しください。

無料でBiNDupを使ってみるBiNDの制作事例を見る

[読めばわかる、Googleサーチコンソール] 検索キーワードの調べ方と伸ばすコツ

流入キーワードを知るための基本と、伸ばすために必要な6つの改善施策を紹介。サーチコンソールですべきことがわかる徹底ガイド。

今すぐ資料をダウンロード
  • POINT

  • 目的やペルソナに合わせてページを構成する
  • LPには効果的な構成があるのでテンプレートを使うと便利
  • ランディングページ公開後は効果測定をして、定期的にLPOを行う

あわせて読みたい