初心者でも大丈夫！LPの基本と制作方法、制作のためのおすすめソフトをご紹介

LPの制作方法について、初心者向けに詳しく解説！

この記事では、LP（ランディングページ）についてまったくの初心者に向け、LPの特徴やL P独特の構成要素、制作に必要なスキル、より多くのターゲットに見てもらうための必須事項など順を追ってわかりやすく解説していきます。

LP制作に役立つ初心者向けの無料ツールや実用的なテンプレートも紹介するほか、LP制作を始める際に知っておいたほうがよい注意事項などもわかりやすく解説していきます。

1.LP（ランディングページ）制作の流れ　

LPとは「Landing Page（ランディングページ）」の略です。「ランディングページ」または省略して「エルピー」と読まれます。LPの目的は、そのサイトを閲覧したユーザーが「商品の購入」や「会員登録」、「資料請求」など何らかの行動を起こすこと。そして、それらの行動を「コンバージョン（CV）」と言います。LPは特定のコンバージョンを起こさせることだけを目的に作られたページになります。

LPの

目的はコンバージョンの獲得です。閲覧者がサイト訪問直後に離脱しないよう、視覚やキャッチコピー、キーセンテンスの効果を十分に活用し、原則として1ページで商品やサービスの魅力をわかりやすく伝える必要があります。つまり、その１ページのファーストビューで、ユーザーの心をつかまなければなりません。

そのようなLPを作るために必要なのが「設計」作業です。「誰に」「どのような目的で」「どのような行動を起こしてもらうために」そのLPを見せたいのか。そのうえでより具体的な「CV（コンバージョン）」「KGI」や「KPI」といった具体的な目標を立てていく必要があります。

WEBサイトとの大きな違いは集客の期間でしょう。WEBサイトがある程度、長期的なスパンでの集客を得意にするのに対して、LPは短期的な集客に強いという特徴があります。

ゴールや数値目標を設定する

LPの「CV（conversion）」としてよく設定されるものに「資料請求」「見積もり依頼」「会員登録」「新規購入」などがあります。これに対し、「KGI（Key Goal Indicator）」とは「重要目標達成指標」のこと。そのLPの「CV」を獲得することで、最終的にどのようなゴールを目指しているのか、具体的な数値をつけてゴールを設定します。例えば「新規顧客を10名増やす」「資料請求の問い合わせ件数を10%UP目指す」、などが「KGI」に該当します。

一方、「KPI（Key Performance Indicator）」とは「重要業績評価指標」のことで、「ゴールに対する中間目標」とか「ゴール達成のためのプロセスが適切に実施されているか」を数値化して評価するものです。例えば、「新規顧客を10名増やす」に対して、LPに用いられる「KPI」には「LPへの訪問者数」、「閲覧者のLP滞在時間」、あるいは「CVR」といって「LPを訪問したユーザーのうちCVに至った割合」などが指標に用いられます。

ペルソナを設定する

「CV」「KGI」「KPI」を設定するためには「ペルソナ」を設定する必要があります。ペルソナとは「30代、女性、独身」といった抽象的なものではなく、そのサービスを利用するコアなユーザー像のことで、まるで本当に実在する一人の人物を作り上げていきます。「30代、女性、独身」は属性で分類したターゲットに過ぎません。ここからさらに「居住地、勤務先（地）、勤続年数、趣味、見た目」などまで細かく設定し、さらにそのペルソナが考えていること、例えば「2年以内に結婚したい」、「推し活が忙しくて婚活が進まない」、「ここ数年給料が上がっていない」といったことまで設定していきます。

実在する人物としてペルソナが作れたら、その人に対してどのようにアプローチすればCVを獲得できるのかイメージしやすくなるからです。このようにペルソナを設定することで、LPのデザインやコピーなど、ペルソナの心を動かすにはどうすればいか、ストーリーをより具体的に考えることができます。

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

ペルソナを設定し、そのペルソナがLPを見ることで、CVを起こさせるためのストーリーをより具体的に考えたら、次はそれを表現するための「構成案」を考えます。この構成案のことを一般的に「ワイヤーフレーム（wireframe）」と言います。LPで「何を」「どの順番で」訴求するべきなのか、LPに入れたい要素をリスト化し、それをベースに大まかな構成案を作成し、LPの要素をざっと埋め込んでいきます。

この「ワイヤーフレーム」を作成することで、LPを通じてもっとも訴求したいこと、LPの目的、LPの意図などが明らかとなります。またワイヤーフレームをチームで共有することで、デザインなどの作業に入ってからの追加や変更、修正などを最小に留めることが可能になり、効率的に進行管理をおこなえるようになります。ただし、ワイヤーフレームはあくまでベースとなる設計図に過ぎません。この段階ではデザインなどを細かく作り込みすぎる必要はありません。議論の幅を狭めないように、あくまで叩き台、設計図、イメージの共有という認識で作成しましょう。

コンテンツを作成する

大体のワイヤーフレームができたら、より具体的なコンテンツ（構成）を考えていきます。LPの構成はワイヤーフレームと同様にとても重要です。1ページのなかに入れ込む要素には「１、ファーストビュー」「２、興味や関心」「３、説得やエビデンス」「４、信頼」「５、クロージング」などがあります。この５つの要素については別途詳しく紹介します。

ライティングをおこなう

この段階のライティングは「ワイヤーフレーム」に書き込んでいくとよいでしょう。顧客がその商品やサービスの内容を速やかに理解し、それが自分にも必要だと感じられるようなテキストであることが大切です。ありがちなミスとして、その商品やサービスがいかに優れているか、いかに競合とは違うのか、訴求したいポイントを書き並べてしまうことです。

LPで大切なことは、その商品やサービスがいかに優れているかを伝えることよりも、一目で「この商品（またはサービス）は自分にとって必要だ、メリットがある、具体的な価値が得られる」と思わせられるかどうかです。

そして、あくまでユーザーファーストの視点に立って考えます。情報の押し付けや垂れ流しは避けましょう。また、LPはTV CMと同じように「見てもらえない」「流れてしまう」可能性がとても高いコンテンツです。顧客は「斜め読みする」「全部は読んでもらえない」ことを前提に、それでも商品やサービスの価値が伝わるようにテキストを考える必要があります。

デザインを作成する

ここまで準備ができたら、次のステップはいよいよデザインです。デザインはワイヤーフレームをもとに作成します。「ビジュアルをフル活用する」「短いテキストで読みやすく、読まなくても理解できるようにする」「申し込みボタンは複数箇所にわかりやすく設置する」「商品の価値がわかるビジュアルやコピー」「それを使うとどのようなメリットがあるかがファーストビューで理解できるようなデザイン」といったことが意識すべきポイントです。

また、「トンマナ（トーン＆マナー）」といって、商品コンセプトやブランド、そしてペルソナの雰囲気に一貫性を持たせることもデザインでは重要です。

コーディング作業をおこなう

コーディングとは、顧客それぞれの異なるブラウザでもデザイン通りに閲覧できるように「プログラミング言語を使ってソースコードを書く作業」のことを指します。ランディングページのコーディングはHTMLとCSSのみでおこなうこともできますが、多彩な動きをつける場合はJavaScriptを使用するのが一般的です。

いずれも初心者向きではないため、コーディングをする専門家「コーダー」に依頼するか、無料のツール、テンプレートなどを使う方法もあります。いずれにせよコーディングが完了したら、複数のブラウザや端末で正しく表示されているかを確認しましょう。

公開後は効果検証をおこなう

LPが公開されたらアクセス解析などの検証をおこないます。ここまでペルソナやストーリーを設定しCVが上がるようにLPを制作してきましたが、そのさまざまな仮説が正しかったかどうかを検証しなければなりません。ここでよく使われる言葉が「PDCA」です。「PDCA」は「PDCAサイクル」とも言われ「Plan（計画）、Do（実行）、Check（評価）、Action（改善）の頭文字を取ったもの。

「現状を理解したら課題を設定（Plan）→課題の対策を実施（Do）→課題対策の効果評価（Check）→サイドの現状理解と課題改善（Action）」と、PDCAを回していくことで、最終目標である「KGI」の達成に近づけていきます。最初は仮説通りにアクセス数やCVが得られないことが少なくありません。しかしそれはあくまで一事例と理解し、新たな仮説を立ててLPを改善し続けることに役立てればよいのです。

2.LP（ランディングページ）の構成の作り方

LP制作の流れが大まかに理解できところで、具体的にLPの中身となる「構成」の作り方について詳しく確認していきましょう。

ファーストビュー

LPの構成は訪れたユーザーへのプレゼンテーションのようなものです。関心が持てなかったり興味がなければすぐにユーザーは離脱します。「ファーストビュー」つまり一目見ただけで、ユーザーの関心を惹きつけるために、「何のサービスか」「何のメリットがあるか」を即座に理解させる必要があります。そのために必要なのが「キャッチコピー」「メインビジュアル画像」「CTAボタン」です。キャッチコピーとメインビジュアルでユーザーの関心を惹きつけると同時に、何の商品（サービス）であるかを伝えます。

「CTA」とは「Call To Action（コールトゥーアクション）」の略で、サイトの訪問者に行動を起こさせるためのボタンです。ページ内に「資料請求」「購入」「会員登録」など、興味をもったユーザーが即座に行動を起こせるような「CTA」を設置しておくことで、CVの向上を目指します。CTAはLPのデザインやトンマナを周到しながらも目がいくような場所に設置しましょう。

興味・関心

ファーストビューは重要ですが、商品の良さやメリットをもう少し理解してもらうためには「共感」を得る必要があります。例えば「?の悩みを解決」「?に困っていませんか？」といった課題を挙げ、その商品を使うことで得られる「解決できる悩み」や「得られる結果」などを入れ込むと、ユーザーは「ちょうどそのことを考えていた」「ちょうどそれが気になっていた」となり、LPをもっとしっかり読んでくれるはずです。

エビデンス

さらに関心を持ってくれたユーザーが、その商品やサービスを信頼してもらうために根拠となるエビデンスを入れる必要もあります。一般的には具体的に「数字」が用いられた「実績」を見せたり、競合との違い、その商品だけの強みや魅力、その商品に関わる専門家の見解、著名人のコメントや監修のコメント、開発者のこだわりなども説得力があります。数字だけでなく図や表を使うのも一つです。

信頼

さらに可能であれば、ユーザーの疑問や不安を払拭するために「信頼」につながる情報も入れられるとよいでしょう。「第三者の評価」や「顧客の声」、また競合他社と比較したわかりやすい「料金表」、「よくある質問」なども入れると、ユーザーの不安は減りCVの向上につながります。

クロージング

LPを見たユーザーが自分のニーズに合っている、信頼できる、興味がある、と感じても最後の一押しがなければ、ユーザーはなかなか行動を起こしません。クロージングとはまさに「締めのトーク」。

ユーザーに「今度でいいか」「もう少し考えよう」と迷わせないために、このLPから「CTA」をクリックによる「特典」「限定」「保証」などの一押しがあるとよいでしょう。ただしあまりに「押し売り感」が強いとユーザーは嫌悪感を抱きます。また、競合商品を悪くいうのもユーザーは敬遠するでしょう。あくまでユーザーの立場に立ち、ユーザーにとってのベネフィットを真摯に伝えることが大切です。

3.LP（ランディングページ）のファーストビューの作り方

LPの構成が決まったらファーストビューから順番にページ制作に入ります。

ヘッダー

ヘッダーとはユーザーの視線がもっとも集まるトップになります。一目見ただけでユーザーが「ん？」「え？」「お！」と思うようなわかりやすい情報の載せるトップの部分です。ヘッダーの部分はユーザーがスクロールしても固定されているデザインが最近のトレンドです。商品のロゴや他のページに移動するナビゲーションメニュー、CTAボタンを設置しておくのもおすすめです。

ボディコピー

ファーストビューの下に配置するコンテンツがボディコピーです。ユーザーの悩みを箇条書きにしたり、商品の説明をしたり、購入のメリットなどを解説する部分です。LPのなかでもっとも面積が広いパーツなので、ユーザーに「これなら信頼できる」と思わせることを入れましょう。先ほどの構成で決めた「興味・関心」「エビデンス」「信頼」の要素を効果的に入れていくとよいでしょう。

キャッチコピー

キャッチコピーもとても重要です。その商品を手にいれることのユーザーベネフィット（価値）が端的に伝わるコピーを考え抜きましょう。キャッチコピーは説明文ではありません。コピーが長いほど離脱のリスクが高まります。短くてもユーザーの心に「刺さる」コピーを考えましょう。

一般的に「ターゲットが明確」「ペルソナのニーズに合っている」「具体的な数字が入っている」「意外性がある」「権威性がある」「ベネフィットが伝わる」「ユーザーが気付いていない課題を問いかけている」といったいずれかの要素が入っていると「よいキャッチコピー」とされます。また、キャッチコピーは流入経路に応じて複数作っておくとよいでしょう。

メインビジュアル

キャッチコピーがどれだけ優れていても、メインビジュアルが適切でないとユーザーはページから即離脱してしまいます。LPのメインビジュアルを作成するうえで大切なことは「ペルソナにマッチしたデザイン」であることと「直感的によい情報と理解できる」ことです。

メインビジュアルはLPの「顔」。ペルソナのイメージにふさわしい、「サービスのイメージ写真」「キャッチコピー」「サービス名」「実績や信頼」「エビデンスや権威性」「ユーザーのメリット」「CTAボタン」を限りなくシンプルに、スマートに伝えられるようにデザインしましょう。

特長・権威

「有名人やインフルエンサーの推薦」「受賞歴」「売り上げ数」「メディアへの掲載歴」「資格や経歴」などの情報を載せると、迷っているユーザーが「買ってもよい」と思える一押しになります。ただしここでもペルソナが重要です。ペルソナによって推薦者が「インフルエンサー」が効果的か、はたまた「専門家」が効果的かも変わってきます。

4.LP制作に使用する主なツール・ソフト一覧

ここからは、LP制作に使用するツールやソフトを紹介します。これらを駆使することでクオリティの高いLP制作につながるでしょう。

ペライチ

パソコン、スマートフォン、どちらにも対応するランディングページが初心者でも直感的な簡単操作で作れるペライチ。利用者は50万人を超えています。FacebookやInstagramとの連携も簡単で、500種類以上のテンプレートからペルソナにぴったりのLPを作れます。

予約や問い合わせフォームの設置、オンライン決済や予約スケジュールの管理などビジネスに必要な機能が集約されています。レイアウトの編集はスマートフォンでもおこなえます。「とりあえずLPを作ってみたい」という人に最適です。

Jimdo

ジンドゥー（Jimdo）は世界中にユーザーがいる無料のホームページ作成ツール。LPを安価に製作したい人から人気で、アカウント登録だけですぐにLP制作に着手できます。ペライチと同様テンプレートから選択してLPを作成できます。レイアウトもドラッグ＆ドロップで自由にカスタマイズでき、スマートフォンアプリからの編集も可能です。

Wix

900種類以上のテンプレートがあるため、洗練されたデザインのLPを作ることができます。ドラッグ＆ドロップでの簡単操作はもちろん、ブランドロゴの制作などもここでできるのが特徴。商品の決済やクーポンコードの設定、サブスクの設定などの管理機能も充実しているので、商品販売をしたい人には特に人気があります。

WordPress

Word PressはWEBサイト制作のツールとして人気がありますが、LP制作にも活用できます。HTMLやCSSなどのプログラミング言語をある程度理解していたほうがスムーズですが、Word PressにもLP用のテンプレートが用意されているので、それを利用すればプログラミング言語を知らなくても、ある程度デザイン性の高いページを作ることが可能です。

また、プラグインという拡張機能があるため、これらを活用すればお問い合わせフォームの設置なども自由にできます。Word Pressに慣れている人におすすめです。

Adobe? Photoshop

Adobe Photoshopは代表的なデザインソフトウェアの一つで、主に写真の加工に活用されます。LPに用いるメインビジュアルや商品写真などを加工したい場合にこのソフトを使うとよいでしょう。

Illustrator

Illustratorも代表的なデザインソフトウェアの一つ。商品のロゴやイラスト、CTAボタンなどをデザイン制作する特に主に活用されます。オリジナリティの高いLPを作成したいときにおすすめです。

Adobe XD

Adobe XDはLPよりもワイヤーフレームの作成に利用すると最適なデザインソフトウェアです。他にもデザインのカンプ、デザインの共有やコメントなどを入れ込みながら作成したいときにおすすめです。

Atom

HTML以外のプログラミング言語に対応できる最近注目度の高いデザインツール。ユーザーが個々の要件に合わせて編集調整できるように、多数のプログラムが用意されています。

サクラエディタ

サクラエディタは日本人が開発したWindows用のシンプルなHTMLエディタです。

Visual Studio Code

Visual Studio CodeはMicrosoft社の提供する無償のソースコードエディタです。多くのプログラミング言語に対応していて無料で使用できます。

5.LP（ランディングページ）制作時のポイント

最後にLP制作時のポイントについてあらためてまとめておきましょう。

無料のLP作成ツールを使う

初心者は「Wix」や「jimdo」など、無料のLPツールを活用するほうがスムーズにLPを作ることができます。コーディングのスキルがなくてもページを公開できますし、料金も比較的リーズナブルです。とりあえずLPを作りたい、手軽に作りたい、コストをかけずに作りたい、といった場合は無料ツールを使ったほうが手間がかかりません。

WordPressのテンプレートを使う

Word Pressでサイトを作っている人も多いですが、ワードプレスでもLPは固定ページを利用すると比較的簡単に作れます。特に「Colorful」は初心者でも比較的簡単にLPを作成できる、LP専用のテーマです。PhotoshopやHTMLが使えない人でも、「Colorful」を使えば簡単にLPを作ることができます。

ただし、Colorful用のURLが必要になるのがデメリットです。すでにWordPressで他のページを持っているのであれば、LP用のプラグインを利用することで他のページのデザインを変えずにLPを作るほうがよいでしょう。

ファーストビューを最優先する

LPは一目でユーザーを引きつけ、行動させることが最大の目的ですが、LPの直帰率は80?90％とされます。競合のLPも研究し、ファーストビューのデザインや盛り込む要素に徹底的にこだわります。ファーストビューでユーザーが３秒以上滞在できるような内容に仕上げることが重要です。

誰でも分析や改善ができる環境にする

LPは作って終わりではなく、分析と改善を繰り返してブラッシュアップしていくものです。LPの分析は、どこからの流入が多いのか、平均閲覧時間、ユーザーの性別や年代、デバイスなどを見ていくことで、LPの目的に適っているかどうかを判断できます。

分析には、アクセス解析ツールやヒートマップを用いるとよいでしょう。改善策を話し合い、仮説に基づいてABテストをおこなうなどしながらPDCAを回してCVを上げていきましょう。チーム内の誰もがLPを更新できるように体制を整えておくことも大切です。更新が一人しかできない場合、スピード感を持ってブラッシュアップができません。

制作会社に依頼する

LPを作るにあたり、社内に適切な人材がいない場合もあるでしょう。これまでに解説してきたとおり、LP制作には慣れないうちは難しい面もあり、制作会社に任せたほうがスムーズなケースも多いです。マーケティングが得意な制作会社であれば、LP公開後の分析や更新など、トータルでサポートしてくれます。信頼できる制作会社を見つけるのもひとつの方法ではないでしょうか。

まとめ

LPで重要なことは、合理性です。ペルソナをリサーチし、キャッチコピー、キービジュアル、ボタンなどをペルソナ向けに作り込んでいくことでCVをあげることや、商品を売ることにつながります。

また、「商品ではなくユーザーにフォーカスを当てる」という視点を持ち続けることもLP成功の鍵となります。LPはWEBで集客をするためには欠かせない手法ですので、試行錯誤を繰り返しながら最適なLPを作り上げてください。