ランディングページの作り方を詳しく解説!正しい手順や制作のコツも紹介

ランディングページの作り方を詳しく解説!正しい手順や制作のコツも紹介 | pochily me(ポチリーミー)
読了目安:12分

「ランディングページの正しい作り方を知りたい」
「成果を出せるランディングページを作るためのコツは?」

これからランディングページ(LP)を制作しようと考えている場合、上記のような疑問を抱くことも珍しくないでしょう。

ホームページには様々な種類があり、その種類ごとに作り方が異なりますので、「効果的なランディングページを作るにはどうしたらいいのだろうか」と悩むのも当然のことです。

そこでこの記事では、以下のようなことについて詳しく解説していきます。

  • ランディングページの特徴
  • ランディングページの正しい作り方
  • 簡単にランディングページを制作する方法
  • ランディングページで成果を出すためのコツ

なおランディングページは、「1ページ完結型LP」の他にも「サイト一体型LP」というものがあるのですが、ランディングページと言えばほとんどが1ページ完結型LPの方を指すため、この記事でも「1ページのみで完結するランディングページ」について扱っていきます。

ランディングページの特徴

ランディングページとは、コンバージョン(CV)に特化したページのことで、ユーザーの購買意欲を可能な限り高めることを目的としています。

ランディングページには、主に以下のような特徴があります。

  • 1ページで完結させる
  • 極力リンクを貼らない
  • 画像を多用する

1ページで完結させる

ランディングページ最大の特徴は、「どれだけ縦に長くなろうとも1ページのみで完結させる」という点です。
そのため、かなり縦長なページとなってしまうことは避けられません。

とはいえ、それは悪いことではなく、正しい手順で作成された魅力あるランディングページならば、ある程度長くなろうと最後まで読んでもらえることが多いです。

ランディングページ制作の際は、「伝えるべき情報を1ページにすべて収めなければいけない」ということを強く意識するべきでしょう。

極力リンクを貼らない

ランディングページはCVに特化していることから、商品に関する詳細を伝えるためのページへ誘導するようなリンクは貼らずに、とにかく1ページ内に必要な情報をすべて詰め込まなければなりません。
ページ遷移が発生するほど、ユーザーが離脱してしまう可能性が高まるからです。

本来ならば、商品の魅力について詳しく伝えるために、いくつもの下層ページを用意したくなることでしょう。

しかし、ユーザーにとってページ遷移はストレスです。
スクロールだけで読み進められる方が離脱率を下げられるため、別ページを用意してリンクを貼ったり、参考になりそうな外部リンクを紹介したりすることは避けなければなりません。

画像を多用する

画像は、文章の約7倍の情報を伝えることができると言われています。
そのため、1ページの中にできるだけ多くの情報を詰め込まなければならないランディングページ制作においては、画像をメインに制作されるという特徴があります。
中には「テキストがほとんど存在しない」というランディングページも珍しくありません。

まず、ファーストビューではユーザーに強烈なインパクトを与えられる画像を用意し、その後も画像を多用してユーザーに伝わりやすいストーリーを構成していきます。

1枚1枚の画像に、どれだけ多くの情報を含めることができるかがポイントとなります。

ランディングページの作り方【正しい手順】

制作に遅れが出たり、ホームページの質を下げたりしないようにするためには、ランディングページの正しい作り方を知ることが重要です。

ランディングページを制作する際には、以下の順序で進めることを意識してください。

  1. LP制作の目的や目標を決める
  2. ペルソナを設定する
  3. ワイヤーフレームを作成する
  4. デザインを作成する
  5. コンテンツを用意する
  6. コーディングする
  7. ランディングページを公開する

①LP制作の目的や目標を決める

まずは、ランディングページを制作する目的を明確にしましょう。

  • 商品購入
  • 資料請求
  • メルマガ登録
  • 無料相談会への申し込み

何を目的とするかで、ランディングページ制作の進め方や工数が変わってきます。

例えば、資料請求やメルマガ登録は、無料な上にその場で完結するものなので、コンバージョンまでのハードルは低めだと言えます。

しかし、お金が発生する「商品購入」や、ユーザーの時間をもらうことになる「無料相談会への申し込み」などが目的ならば、コンバージョンまでのハードルが上がるため、資料請求などに比べると工数も増えることが多いでしょう。

また、目的が決まったら、目的の難易度に応じてKPI(中間目標)やKGI(ゴール)を定めることも大事です。
メルマガ登録で言えば、半年後に登録者5千人達成を目指し、最終的なゴールは登録者1万人とする、といったような形です。

漫然と運営するのではなく、まず最初に目的と目標をしっかり決定しておくことようにしてください。

②ペルソナを設定する

ペルソナとは、ターゲットとするユーザー像のことです。
どういった層を狙うかによってランディングページの作りも大きく変わってきますので、事前にペルソナを設定しておくことは必須となります。

なおペルソナ設定は、細かければ細かいほどコンバージョンの精度が上がりやすくなります。
「30代の男性」「未成年の子供がいる母親」といったざっくりとした設定より、以下のような細かい項目についても設定していくことをおすすめします。

  • 年齢
  • 性別
  • 家族構成
  • 職業
  • 年収
  • 居住地
  • 行動パターン
  • 1日の過ごし方
  • 未婚か既婚か …など

ユーザー像を具体化すればするほど、より高い成果が期待できるようになるでしょう。

③ワイヤーフレームを作成する

ワイヤーフレームとは、「どんなコンテンツを、どのような形で、どこに配置するか」といった、Webページの構成やレイアウトを記した設計図のことです。
ランディングページの場合、「ファーストビュー」「ボディ(ボディコピー)」「クロージング」の3つのパートに分けて構成するのが一般的です。

構成については、次の項目が気になるような作りにすることが大事であり、ユーザーが物語を読むようにスラスラ読めるようなページを制作できるのが理想でしょう。

例えば、まずファーストビューで実績を掲載することで、ユーザーは「この商品の人気が高い理由は何だろう?」と考えるはずです。

そこで、ボディ部分には以下のような内容を配置します。

  • 商品が売れている理由・評価されている理由
  • どんなシーンに役立つのかという具体例
  • 商品開発における、共感を生むストーリー
  • 購入者たちのレビュー

このように、ユーザー目線を重視しながら「どんな構成にすれば離脱されにくくなるか」にこだわったワイヤーフレームを作成するようにしてください。

④デザインを作成する

ワイヤーフレームが完成したら、デザイン作成に取り掛かります。
デザインも、ユーザーの離脱率に大きく影響を与える要素ですので、ペルソナに適したデザインを作る必要があります。

例えば、高級感をウリにした商品を販売するランディングページにおいて、簡素でチープなデザインを採用してしまうと、商品とデザインのミスマッチによる違和感から離脱が発生しやすくなってしまうことでしょう。

訴求効果を高めるために、ターゲットに最適なデザイン作成を意識することが重要です。

⑤コンテンツを用意する

ランディングページに掲載する画像やテキストといったコンテンツも、当然欠かすことができません。

特に重要なのは、商品の良さが一言で伝わるキャッチコピーや、ファーストビューに掲載する「ユーザーが思わず惹かれてしまうような画像」です。
キャッチコピーやファーストビューの画像が弱ければ、ユーザーはすぐさま離脱してしまいます。

もちろん、ファーストビューに続くボディ部分やクロージング部分の画像やテキストも手を抜くことはできません。

デザインに溶け込むような配色・フォントを用いた画像や、ユーザーにとってどんなメリットがあるのかが明確に伝わるテキストなどを用意できれば、CVに繋がりやすくなるでしょう。

⑥コーディングする

デザインやコンテンツが完成したら、コーディングに入ります。
コーディングとは、「HTML」「CSS」「JavaScript」といった言語を用いてソースコードを書き、Webブラウザ上でページを閲覧できるようにする作業のことです。

コーディングの際は、スマートフォンやパソコン、タブレットといった様々な端末から閲覧される可能性を考慮し、レスポンシブ対応を忘れないようにしましょう。

⑦ランディングページを公開する

それぞれの端末で問題なく表示されるかどうかのテストが終われば、いよいよランディングページ公開となります。

しかし、ここで安心してはいけません。
ランディングページの公開は、「終わり」ではなくむしろ「始まり」です。
CVの向上を図るため、日々ランディングページを改良していくという作業を怠らないようにしてください。

簡単にランディングページを制作する方法

ランディングページ制作には、一定のスキルが必要となります。
しかし、社内にそういったスキルを持っている人材がおらず、思うような制作ができないというケースもあるでしょう。

そういった場合の対処法について、この項目で解説していきます。

ノーコード・ローコード制作ツールを利用する

通常ならば、マークアップ言語である「HTML」や、スタイルシート言語である「CSS」を理解していないと、ランディングページを制作することはできません。

しかし、そういった知識がなくともノーコードやローコードでホームページ制作ができるツールを使うことで、ドラッグ&ドロップといった直感的な操作だけでランディングページを作ることが可能となります。

代表的なツールとしては以下の通りです。

  • STUDIO
  • ペライチ …など

学習コストをかけることなく、簡単にランディングページを制作できるというのは大きな魅力でしょう。

ただし、気軽に利用できる制作ツールではできることに限界があるため、質の高いランディングページを制作したいと考えている場合にはあまり適しません。

フリーランスへ依頼する

ランディングページの質にこだわるのならば、スキルのあるフリーランスを探して依頼する、という方法もあります。

クラウドソーシングサイトには、LP制作に長けたフリーランスが多く登録していますし、SNSやブログで実績を公開しているフリーランスもいます。

ただしフリーランスへ依頼する際は、「メリットとデメリット」についてしっかり把握しておくべきです。

【フリーランスに依頼するメリット】

■コストを抑えられる
■柔軟に対応してもらえることが多い

【フリーランスに依頼するデメリット】

■フリーランスは個人なので、突然の怪我や病気によって作業が止まるリスクがある
■成果物が属人的になってしまう可能性がある

これらを踏まえつつ、フリーランスに依頼するかどうかを検討してみるとよいでしょう。

ホームページ制作会社へ依頼する

自社にホームページ制作のリソースがない場合、ホームページ制作会社を利用するのもおすすめです。
「ホームページ制作会社」という名の通り、その道のプロですので、希望通りかそれ以上のホームページを運用できるようになることでしょう。

フリーランスへ依頼するよりコストがかかってしまうことも多いですが、その分、制作会社への依頼はメリットも多いです。
制作会社の方には人的リソースがあることから、「トラブルが発生してもスケジュール通りに納品される」「セキュリティ面でも安心できる」といった特徴があります。

そして何より、「成果物の質が安定する」という点が最も大きなメリットと言えるでしょう。

制作会社には、各ジャンルのエキスパートが在籍していることが多いです。
例えば、「コミュニケーションスキルの高い人材」「デザインスキルの高い人材」「コーディングスキルの高い人材」などです。

コミュニケーションに長けた社員がヒアリングすることで、クライアントの意図を正確に汲み取ることができますし、デザインやコーディングのスキルが高い社員が制作を担当することで、必然的にホームページの質も高くなります。 

ランディングページで成果を出すためのコツ

高い成果が期待できるランディングページの作り方・運用方法のコツとしては、以下の通りです。

  • A/Bテストを繰り返す
  • ユーザー目線で考える
  • ファーストビューにこだわる
  • SEOを意識しない
  • LPO対策を施す
  • 広告を活用して集客する

A/Bテストを繰り返す

A/Bテストとは、成果を比較するために複数のパターンを用意し、「どちらの方が効果が高いのか」を検証するという手法です。
ランディングページの場合ですと、レイアウトや画像などを変えた何パターンかのページを作成し、どのページのCV率が高くなるのかを地道に探っていく、という形になります。

CV率が高いということは、それだけユーザーが魅力を感じているという証明になりますので、A/Bテストを繰り返し、その結果を反映させていくほど「ユーザーが興味を持ちやすいページ」へと成長していくわけです。

なお、基本的にA/Bテストには終わりがありません。

仮に、「A」「B」「C」という3種類のランディングページを用意して、「A」のCV率が最も高かったとしましょう。
しかし、新たに「D」を作ったら、「D」の方が高いかもしれません。

CV率は、時流の変化によって簡単に変わります。
そのため、可能な限りCV率を向上させるべく、日々A/Bテストを繰り返していく必要があるのです。

ユーザー目線で考える

「我が社としては、こういう点を訴求していきたい」

こういったこだわりは重要なのですが、それがユーザー目線に立ったものなのかどうかについて一度考えてみるべきです。

  • この商品を開発するために莫大な借り入れをした
  • 社員たちはものすごく頑張っている
  • 開発した商品に対して社員たちは非常に満足している

こういったメッセージを発信したいという思いがあったとしても、残念ながら、上記はユーザーにとってはあまり価値の高くない情報でしょう。
「企業として努力した」「社員は納得している」という主観的な発信では、ユーザーに刺さりません。

そうではなく、「ユーザーが気になること」に焦点を当てる必要があります。
例えば、商品を購入することによるメリットや、実際に購入した人たちはどのように感じているのかを詳しく紹介する、といった形です。

主観ではなく、ユーザー目線に立った客観的な訴求を意識すべきです。

ファーストビューにこだわる

特にランディングページにおいて言える現象ですが、多くのユーザーは、ファーストビューで離脱するかどうかを決めます。
ファーストビューとは、ページが表示された時に「スクロールせずに閲覧できる部分」のことです。

したがって、ランディングページ作成の際には、ファーストビューについて徹底的にこだわるようにしてください。
ボディ部分やクロージング部分がどれだけ優れていようとも、ファーストビューで失敗してしまってはすべてが台無しになります。

何が最適なファーストビューなのかを主観的に判断するのは難しいので、前述のA/Bテストを繰り返して、離脱率が低くなるファーストビューを追求することが「売れるランディングページ」を作るコツです。

SEOを意識しない

SEOとは、検索エンジンで上位表示させるための技術なのですが、1ページで完結させる必要があるランディングページはSEOに向いていません。
1ページのみの構成では、内部リンクを得ることができない上、外部リンク獲得も難しいからです。

さらに、「ランディングページは通常のページと構成が異なる」という点もSEOに向いていない理由となります。

ランディングページの場合、とにかくCVにこだわるという特徴があるため、商品訴求のための項目以外は掲載しないという形が一般的です。
SEOにとって最重要である「ユーザーの検索意図」というものを最初から除外しているため、そもそもSEO対策をしようとすることに無理があるのです。

こうした事情から、CV率アップのためには、変にSEOを意識せず「自社商品を効果的に訴求する」というランディングページ本来の形に特化した作りにするのがコツです。

LPO対策を施す

LPOとは、「ランディングページ最適化」という意味で、言葉通りランディングページにおいて成果を出すための最適な方法を追求する技術・作業のことです。

  • ユーザーの離脱率が高い
  • 離脱率は低いもののフォームへ入力するユーザーが少ない

このようなケースが発生している場合、原因を分析して状況の改善を図っていきます。

ユーザーの離脱率が高いのならばファーストビューを変えたり、アクセスが多く離脱率も低いのに申し込みフォームへの入力・送信の割合が少ないようならばクロージングの仕方を工夫したり、といった形です。

いろいろな訴求を試しながら、少しでもCVしやすいページに仕上げていく作業がLPOです。

広告を活用して集客する

ランディングページは、1ページのみで構成されていることからSEO対策がほとんどできません。
また、変にSEOを意識してしまうとランディングページとしての特性が失われてしまう可能性が高いので、SEOについては忘れた方がよいでしょう。

したがって、ランディングページの集客方法のメインは広告運用となります。
リスティング広告やSNS広告などを運用しつつ、ユーザーに刺さる広告クリエイティブを日々追及しながら費用対効果を高めていく、という形が通常です。

自社のランディングページに適した広告手法を知りたい場合や、具体的に何をすればいいかアドバイスが欲しいという場合は、制作会社に相談してみるのもおすすめです。

まとめ

以上、ランディングページの作り方を中心に、簡単に制作する方法や、ランディングページ制作の際のコツなどについて詳しく解説してきました。

ランディングページは、作り方や運用方法によって出せる成果が大きく変わってきます。
本記事を参考に、高い成果を出せるランディングページを目指してください。

カテゴリー:
タグ:
合わせて読まれています!