【初心者向け】ランディングページの作り方！勝てる型やデザイン例も紹介

ランディングページ（LP）は、Web広告やSNSから訪れたユーザーを着地させるページです。
ユーザーは関連する悩みや興味をもって訪れるため、ランディングページの中身が魅力的であるほど、コンバージョン獲得につながりやすくなります。
ただし、いざランディングページを作ろうと思っても、作り方や盛り込む内容に困ってしまう場合もあるでしょう。

この記事では、これまで数千枚のランディングページを作成してきた弊社の経験を活かし、基本的な作り方や各構成要素のポイントを解説します。
制作事例もあわせて紹介するので、効果が出るランディングページを作成したい方はぜひ参考にしてください。

【パターン別】ランディングページの作り方

ランディングページの作り方には、2つのパターンがあります。

1. WordPressやLP作成ツールで自作する【無料～有料】
2. 制作会社へ依頼する【有料】

なお、ランディングページの意味や作成するメリットについて知りたい方は、こちらの記事もあわせてチェックしてみてください。

【関連記事】ランディングページ（LP）とは？意味や構成の例などをわかりやすく解説

パターン①：WordPressやLP作成ツールで自作する【無料～有料】

WordPressは、専門知識がなくてもホームページを作成できるCMS（コンテンツ・マネジメント・システム）です。
一方、LP作成ツールはランディングページ作成に特化した、以下のようなツールです。

• ペライチ
• STUDIO
  
• Wix
  
• ジンドゥー
  
• Make LP

WordPressやLP作成ツールを使用することで、HTMLやCSSなどをはじめとしたプログラミング言語の知識がない人でもランディングページ作成が可能になります。
下表のように制作に慣れていない初心者でも扱いやすく、低予算で作成できるという点がメリットです。

※ツールにより無料プランや買い切り方もあり

しかし、ランディングページで成果を上げるためには、専門的なノウハウを用いた継続的な運用が求められます。
マーケティングの観点から課題を正しく理解し、ランディングページの改善を繰り返すことが大切です。
自社で継続した対応が難しい場合は、制作会社へ依頼することも考えましょう。

パターン②：制作会社へ依頼する【有料】

制作会社へランディングページの制作を依頼すると、テンプレートではできないデザインや機能が可能になります。
専門的なノウハウをもったプロが入ることで、より成果につながりやすいランディングページに仕上げることが可能です。

なお、制作にかかる費用や依頼できる内容は、制作会社によって違います。
以下の項目を比較検討して、作りたいランディングページに合った制作会社を選びましょう。

• 費用
• 依頼可能な範囲
• 実績・得意な業界
• 作成後の運用サポート

特に、作成後に活用するためには、運用まで担える会社がおすすめです。
例えば、弊社のLP制作では制作後もデータ分析を用いて、広告とランディングページの成果をスピーディーに高めていける体制をとっています。

▼弊社のLP制作・運用における特徴

市場や競合の状況は刻一刻と変化していくため、ランディングページの作成だけで終わらせず、変化に対応して策を講じていくことが大切です。
そのためにはマーケティングへの知見があり、ランディングページ運用の経験が豊富な制作会社を選びましょう。

なお、ランディングページを制作できる三重県の専門会社を探している場合は、下記の記事もぜひ参考にしてください。

【関連記事】【厳選】ランディングページ制作に強い三重県の制作会社5選！依頼時の注意点も

ランディングページの基本的な作り方

ランディングページの基本的な作り方は、以下の5工程です。

1. 目的・ターゲットを決める
2. ページ全体の構成を決める
3. コンテンツを作成する
4. デザインを作成・実装する
5. 成果を測定し改善を繰り返す

まずは、目的やターゲットを明確に設定します。
ターゲットを決める際はユーザーの課題や思考を理解するために、架空の人物像に当てはめて考える「ペルソナ」を用いると効果的です。

構成には、各要素の配置を示したワイヤーフレームを作成します。
ユーザーの視線移動を意識して、自然な流れで訴求できるように検討しましょう。

構成決定後に、画像や文章などのコンテンツを作成します。
ターゲットの悩みや興味に合わせて、訴求内容を効果的にアピールできるようなコンテンツが理想です。
コンテンツ作成後、デザインを作成・実装するという作り方が一般的です。

公開後は定期的にパフォーマンスを測定し、ランディングページを改善していくことで、より高い成果へつなげられるでしょう。

ランディングページの作り方におけるポイント</h

成果を出せるランディングページの作り方にはコツがあります。
そのコツとは、勝ちパターンの「型」を理解することです。

▼LPの作り方における主なポイント

ここではその中でも押さえておくべきポイントを、以下の4つの要素に分けて解説します。

1. ファーストビュー
2. コンテンツ
3. CTA（コール・トゥ・アクション）
4. フォーム

それぞれ詳しくみていきましょう。

なお、弊社では現状のランディングページを解析し、課題を明確にするサポートが可能です。
「勝てるLPの型」に沿った改善策も提案いたしますので、ランディングページの成果が出ず悩んでいる場合はLP制作ページをぜひ一度ご覧ください。

ポイント①：ファーストビュー

ファーストビューとは、ユーザーがページを開いたとき最初に表示される部分です。
ファーストビューの作り方には、以下のポイントがあります。

• 誰がどうなるためのページか2秒でわかる画像を設置する
• 魅力的なオファーを提示する
• 誰がいつまでに何をすれば良いかわかる
• 必ずスクロール促進ギミックを入れる

ファーストビューの中でも最初にユーザーの目に触れる部分は、キービジュアルです。
キービジュアルとは、ページのメインとなるイメージ画像を指します。
その商品・サービスが「誰にどのような変化をもたらすのか」を視覚的に伝えられる言葉や画像が必要です。

ターゲットの課題や悩みに合わせた伝え方を意識することで、魅力的なオファーへとつながります。
キャンペーンや期間が定まっている場合は、いつまでにどのような行動すべきか明示することも大切です。

また、ファーストビュー内にはスクロールを促すギミックを入れ、ランディングページを読み進めてもらえるよう工夫しましょう。

ポイント②：コンテンツ

コンテンツでは、商品・サービスについて具体的にアピールします。
商品の特徴を解説するだけでなく、ユーザーが商品・サービスを使うことにより得られる利点である「ベネフィット」まで示す必要があります。
また、「利用者の声」や「使い方」など、実際に商品・サービスを購入した後の姿を想像できるようなコンテンツも必要に応じて盛り込みましょう。

コンテンツ内容のほかに、以下の視覚的なポイントにもこだわると効果的です。

• 1コーナーの大きさは1画面サイズまでにする
• スマホページは3行以上のテキストを羅列しない

情報を盛り込もうとすると、1コーナーが長くなってしまったり、テキストが多くなったりすることも考えられます。
どのような情報が必要か精査し、過不足のないコンテンツにすることでページからの離脱を防ぎ、読み進めてもらいやすくなります。

ポイント③：CTA（コール・トゥ・アクション）

CTA（コール・トゥ・アクション）とは、購入や申し込みなどの具体的な行動へユーザーを誘導するためのボタンのことです。
CTAの作り方におけるポイントは、配置とデザインです。

• アテンションが高いコーナーに設置する
• 読み手の心が動くボタンデザインにする

CTAはコンバージョンへの入口のため、適切な位置に配置する必要があります。
ユーザーの視線が集まりやすい部分や、興味が高まる部分に配置すると良いでしょう。

また、ボタンのデザインは、目立ちやすく不自然ではないことが大前提です。
読み手の心が動く文言やデザインで、コンバージョンへつなげましょう。

ポイント④：フォーム

ランディングページのフォームとは、購入や申し込みの際に情報を入力する部分のことです。
フォームの作り方には、以下のポイントがあります。

• 入力項目は1画面で収まるように調整する
• フォーム到達率を上げるため無駄な縦幅は使わない
• 入力アシストはフル活用、エラー位置もわかりやすく表示する

フォームに入力する項目が多すぎると、ページからの離脱につながります。
視覚的にも長いと感じないよう幅を調整して、コンパクトにおさまるよう調整することがポイントです。
住所の自動入力をはじめとした入力アシストやエラー位置のわかりやすい表示なども取り入れ、できる限り簡単に入力できるフォームを目指しましょう。

弊社が支援したランディングページの制作事例

弊社が支援したランディングページの制作事例を2つ紹介します。

1. 再生可能エネルギー会社のランディングページ
2. エステサロンのランディングページ

それぞれ詳しくみていきましょう。

事例①：再生可能エネルギー会社のランディングページ

こちらは再生可能エネルギー事業を展開している、株式会社アメイズ様のランディングページです。

▼株式会社アメイズ様のランディングページ

ファーストビューに無料査定フォームを配置することで、「急いでいる人」や「とりあえず査定をお願いしたい人」がスムーズに申し込みへ進める構成が特徴です。
上部にお客さまの声や実績を配置しており、信頼感をアピールした構成になっています。

全体的に黄緑系でまとめながら、CTAはオレンジ色で目を引くデザインになっていることもポイントです。

ホームページURL：https://lp.amaze-inc.com/

事例②：エステサロンのランディングページ

こちらは株式会社ぷらいむ様が東海地方を中心に展開している、インド式エステサロン「FLELT」のランディングページです。

▼インド式エステサロン「FLELT」のランディングページ

キービジュアルの施術写真をはじめ、その他のコンテンツにも複数の写真を配置することで、実際の施術を想像しやすいランディングページになっています。
ファーストビューで初回限定メニューを打ち出すことで、ユーザーは初回ならお得にサービスを受けられることを瞬時に把握できることもポイントです。

適度な余白や柔らかなフォントを使用し、リラックスした雰囲気を感じられるデザインに仕上げています。

ホームページURL：https://primegroup.co.jp/

まとめ：ランディングページの作り方は簡単ではない

ランディングページの作成はツールを使えば初心者でも可能ですが、「効果が出るランディングページの作り方」は簡単とはいえません。
ランディングページは基本的にWeb広告やSNSのリンク先として使用するため、継続的な計測と改善が必要になります。
効果的な運用のためには、マーケティングのノウハウを持っているプロに依頼するのが最も安心です。

なお、弊社ではこれまで何千枚ものランディングページを作成してきた知見や運用経験を活かし、広告効果につながるLP制作に注力しています。
運用まで見据えたランディングページを作成したい方は、ぜひ一度ご相談ください。

社長の一筆入魂

ランディングページ作成の外注費用を抑えたいなら、LPの企画は自社でやることをお勧めします。
LP制作費のざっくりとして内訳は、①企画②デザイン③コーディングって感じなんですね。
①は生成AIなどを使って誰でもできますので（プロンプト例を提示してあげましょう）LPのアウトラインまで自社で書いてから制作会社に依頼すると制作コストを抑えられますよ。

【関連記事】【企業様向け】弊社との初回面談時の事前準備ガイド｜全体の流れや必要な情報を解説
【関連記事】Webサイトの制作期間を短縮する5つのコツ！遅延する要因や弊社の事例も
【関連記事】ホームページ制作で活用できる補助金・助成金一覧