ランディングページ（LP）の作り方｜構成・費用・作成ツールまで解説【無料テンプレートあり】
Mari
2024.07.08
Updated:2024.12.24
ランディングページ（LP）とは、Webサイトの訪問者が最初にアクセス（着地）するページのことです。特定の商品・サービスを効果的にプロモーションし、資料請求やお問い合わせ、購入などの行動を促す目的で制作されます。
今回は、LPの作り方を初心者にもわかりやすく解説します。LPの構成や費用相場、おすすめの作成ツールも紹介しますので、ぜひ最後までご覧ください。
ランディングページ（LP）の作り方
ランディングページ（LP）を作る手順は、次の通りです。
目的・ゴールを決める
ターゲットを決める
構成の決定
コンテンツ制作
デザイン作成
コーディング
公開・効果測定
目的・ゴールを決める
はじめに、LPを制作する目的・ゴールを決めます。目的・ゴールを明確にすることで、LPの訪問者に一貫性のあるメッセージを伝えられるようになります。
LPの目的・ゴールは、BtoB（企業向け）とBtoC（一般消費者向け）で異なります。具体例は、次の通りです。
BtoBの場合
資料請求・お問い合わせ
メルマガの登録
ホワイトペーパーのダウンロード
セミナー・イベントへの申し込み
無料トライアルの申し込み など
BtoBの場合、LPの訪問者が最終的な意思決定をするとは限らず、検討プロセスが長期化する傾向にあります。そのため、商品やサービスに対する理解を深め、次のアクションに繋げることが重要視されます。
BtoCの場合
商品・サービスの購入
定期購入・サブスクリプションの登録
イベント・キャンペーンへの応募
レビュー・口コミの募集
メルマガの登録・SNSのフォロー など
一方、BtoCの場合はLPの訪問者自身が意思決定をするため、商品・サービスの直接購入を目的・ゴールに設定できます。メルマガやSNSで関係性を構築し、継続的な購入に繋げることも可能です。
なお、これらの目的・ゴールに該当する行動を「CV（コンバージョン）」と呼びます。LPの制作後、PDCAを回しながらCVの達成状況を把握できるよう「資料請求 ○○件/月」「キャンペーンの応募者数 ○○人/回」といった具体的な数値目標を設定することが重要です。
ターゲットを決める
目的・ゴールが決まったら、LPのターゲットを明確化します。
まず、ターゲットの年齢や性別、居住地域といった基本的な属性を設定しましょう。続いて、職業や年収などのビジネス属性、購買意欲や興味関心などのCVに関連する属性も設定し、ターゲットをさらに絞り込みます。
また、ターゲットが抱える課題やニーズを分析することも大切です。例えば、ターゲットが「不要なコストを削減したい」というニーズを抱えている場合は、低コストな商品・サービスの資料請求やお問い合わせ、購入などの行動に繋がりやすいと考えられます。
このように課題やニーズとCVを結びつけて考えることで、ターゲットの期待値を把握できます。
その後、ターゲットをよりリアルな人物像に近づけるためのペルソナを設定します。ターゲットで設定した要素に加えて、性格やライフスタイルなどの要素も取り入れたペルソナを設定すると、CVに至るまでのより具体的なシナリオを描けるようになります。
構成の決定
続いて、ワイヤーフレームを作成してLPの構成を決定します。ワイヤーフレームとは、どのようなコンテンツをどういった優先順位で配置するか、CVまでの導線をどのように設計するかをシンプルな線と枠で記載した設計図のようなものです。
一般的にはデザインツールを用いて作られますが、近年ではワイヤーフレームの段階からノーコードでWebサイトが制作できるサービスで作る事例も増えています。
LPの構成は、以下3つのパーツに分けられます。
1.ファーストビュー
メインビジュアル
キャッチコピー
CTAボタン
2.ボディー
問題提起と解決策
権威づけ
3.クロージング
問い合わせフォーム
FAQ（よくある質問）
CTAボタン
詳しくは「ランディングページ（LP）の構成」をご覧ください。
コンテンツ制作
構成が決定したら、LPに掲載するコンテンツを制作します。
ファーストビューでは、キャッチコピーが最も重要なコンテンツです。LPを読み進めるかどうかの決め手にもなるため、できるだけターゲットの関心を惹きつけるキャッチコピーを心がけましょう。
ボディーでは、ターゲットの課題やニーズを提示した上で、具体的な解決策として商品・サービスを紹介します。競合が多く差別化が必要な場合は、新たな気づきや発見を与えるようなコンテンツを掲載するのがおすすめです。
クロージングでは、これまでのコンテンツを簡潔にまとめつつ、ターゲットの最終的な行動を促します。商品・サービスのメリットを明確に伝え、行動を後押しするようなコピーを掲載しましょう。
デザイン作成
続いて、デザインを作成します。
コンテンツと同様、デザインもLPの印象を左右する重要なポイントです。特にファーストビューでは、魅力的な画像やイラストを配置してターゲットの関心を惹きつけましょう。例えば、商品・サービスの使用イメージや、課題解決の様子をわかりやすく表現したビジュアルなどが効果的です。
また、資料請求やお問い合わせ、購入などの行動に繋がる「CTAボタン」は、ターゲットの視線を誘導できるデザインにすることも大切です。色やあしらいを工夫して、なるべく目立つ位置に配置しましょう。
コーディング
デザインが完成したら、コーディングを行います。
コーディングとは、デザインを実際のWebサイトに表示できるようプログラミング言語に書き換える作業のことです。一般的には、HTMLやCSS、JavaScriptなどの言語が使用されます。
また、最近ではコーディング不要でLPを制作できるノーコードツールにも注目が集まっています。ノーコードツールを活用すれば、コーディングの知識がなくても画面上の操作だけで簡単にLPを実装できます。
公開・効果測定
コーディングが完了したら、いよいよLPを公開します。
公開後は、Googleアナリティクスなどの分析ツールを活用し、LPの効果測定を実施しましょう。効果測定では、最初に設定したLPの目的・ゴールが達成できているかを確認することが重要です。
目的・ゴールが達成できていない場合は、LPを改善する必要があります。特に「CVR（コンバージョン率）」が低い場合は、LPのコンテンツやデザインを見直してみましょう。2種類のLPを用意して効果を比較する「A/Bテスト」を実施するのもおすすめです。
このようにLPを改善する作業を「LPO」と呼びます。LPOを効率的に実施するには、LPの公開後も簡単に更新できるツールを使用する必要があります。HTML・CSSでコーディングしたLPも更新自体は可能ですが、ノーコードツールを使用するとよりスピーディーに更新が完了します。
ランディングページ（LP）の構成
前述の通り、ランディングページ（LP）の構成は、以下3つのパーツに分けられます。
ファーストビュー
ボディー
クロージング
ここでは、それぞれの具体的な役割と実際の事例を紹介します。
1. ファーストビュー
ファーストビューとは、LPの訪問者が最初に目にする部分のことです。LP全体の印象を決定づける最も重要なパーツと言えます。
ファーストビューの主な構成要素は、次の通りです。
メインビジュアル
キャッチコピー
CTAボタン
▲参考：https://studio.design/ja/lp/client
ノーコードWeb制作プラットフォーム「Studio」のLPでは、メインビジュアルにStudioで制作されたWebサイトのイメージを複数掲載。「不要なコストを削減し、自社サイトの成果を最大化」というキャッチコピーで、サービスのメリットをストレートに伝えています。
CTAボタンは「エキスパートを探す」と「Studioに相談する」の2つが配置されており、「Studioに相談する」を鮮やかなピンクで強調することで、ターゲットの視線を誘導しています。
ファーストビューでターゲットの関心を惹きつけられなければ、LPからの離脱に繋がる可能性があります。そのため、どんな商品・サービスなのかが一目で伝わるメインビジュアルとキャッチコピーを掲載した上で、CVに繋がるCTAボタンを配置しましょう。
2. ボディー
ボディーとは、LPのメインとなる部分のことです。主な構成要素は、次の通りです。
問題提起と解決策
権威づけ
問題提起と解決策
まず、ターゲットが抱える問題やニーズを提示します。
▲参考：https://studio.design/ja/lp/client
例えば、StudioのLPでは「自社のWebサイトについてこんな課題を感じていませんか？」という問題を提起し、Webサイトの担当者が抱える具体的な課題を列挙しています。
このような問題提起により、ターゲットからの共感を得た上で、自社の商品・サービスが解決策となることを具体的に提示します。
▲参考：https://studio.design/ja/lp/client
例えば、StudioのLPでは「低コストで高クオリティ」「専門知識がなくても更新できる」「保守やセキュリティ対策はおまかせ」といったメリットを提示し、Webサイトの課題をまとめて解決できるサービスであることをわかりやすく伝えています。
▲参考：https://studio.design/ja/lp/client
また、従来のWeb制作と比較した図を掲載することで、Studioを使用するメリットをより強調しています。
権威づけ
次に、商品・サービスを導入している企業のロゴや具体的な事例を掲載し、信頼性を高めます。
▲参考：https://studio.design/ja/lp/client
StudioのLPでは、大企業や官公庁のロゴを多く掲載することで、ターゲットとなるWeb制作担当者に信頼感を与えています。
▲参考：https://studio.design/ja/lp/client
またWebサイトの具体的な活用イメージが伝わるよう、Studioで作成されたWebサイトの数字やキャプチャを掲載。
▲参考：https://studio.design/ja/lp/client
実際にStudioを導入している企業の事例も掲載して、さらなる安心感を与えています。
3. クロージング
クロージングとは、資料請求やお問い合わせ、購入などの最終的な行動を促す部分のことです。主な構成要素は、次の通りです。
問い合わせフォーム
FAQ（よくある質問）
CTAボタン
▲参考：https://studio.design/ja/lp/client
StudioのLPでは、Studioコンサルタントに制作会社の選定を依頼できる相談フォームを用意しています。相談する際のポイントやStudioコンサルタントの紹介文も掲載されているため、安心して問い合わせすることが可能です。
▲参考：https://studio.design/ja/lp/client
その後、ターゲットの疑問や不安を払拭するための「よくある質問」を配置。「さあ、今すぐStudioで始めよう。」というテキストと共に「無料ではじめる」のCTAボタンも配置されています。
このように「1. ファーストビュー」「2. ボディー」「3. クロージング」を構成することで、CVに繋がる効果的なLPが制作できます。
ランディングページ（LP）の制作費用相場
LP（ランディングページ）の制作を依頼する場合の費用相場は、次の通りです。
フリーランス | 〜15万円 |
小規模制作会社 | 〜30万円 |
中規模制作会社 | 30万円〜50万円 |
大規模制作会社 | 50万円〜 |
Studioでは、独自審査やカリキュラムを通過したWeb制作会社・フリーランスが加盟する「Studio Experts」というプログラムを用意しています。「Studio Experts」にLPの制作を依頼する場合の費用や納期の目安は、次の通りです。
初期制作費用の目安 ※1 | 20万円〜 |
納期目安 | 3週間〜 |
ランニングコストの目安 ※2（Studio月額利用費） | 980円〜（Starterプラン） |
Starterプラン機能 | ・独自ドメイン公開 |
▲参考：https://studio.design/ja/lp/client
※1 費用目安及び納期目安は、これまでの「Studio Experts」実績の平均値です。詳細は各制作会社にお問い合わせください。
※2 ランニングコストの目安は、Studioの利用に必要な月額料金（サーバー代を含む）の参考値です。運用・改修費用やドメイン更新費用は含まれておりません。
無料テンプレートあり！ランディングページ（LP）を簡単に作る方法
ノーコードWeb制作プラットフォーム「Studio」ではユーザー間でStudioのデザインテンプレートを売買できるマーケットプレイス『Studio Store』を運営しております。
Studioの審査に通過したデザイナーが手がけたハイクオリティなWebサイトテンプレートを選べるため、小規模事業者やベンチャー企業などを中心に、低コストでリッチな自社サイトを制作・運用したい方々が活用しています。
『Studio Store』内には、ランディングページ（LP）制作におすすめのテンプレートも多数出品されています。
＞シングルページのWebサイトテンプレート | Studio Store
制作段階で不明点があれば、「Studio Community」に質問を投稿してヒントを得たり、Youtubeで操作方法を学んだりすることも可能です。
プロにLPの制作を依頼するハードルが高いと感じる方や、低コスト・短期間で簡単にLPを制作したい方は「Studio Store」のテンプレートをぜひご活用ください。
ランディングページ（LP）の参考事例
こちらの記事では、「Studio Experts」の中からLP制作が得意な制作会社8社を厳選して紹介しています。様々な業種・サービスの参考事例や、各社への依頼費用目安も紹介しておりますので、LP制作の依頼を検討中の方は要チェックです。
また、こちらのページでは「Studio Experts」が制作したLP事例を一覧できます。すべてのLPがStudioで制作されているため、ぜひアイディアの参考にご覧ください。
＞Experts制度加盟制作会社が、Studioを用いて制作したランディングページ一覧
ランディングページ（LP）制作をプロにお願いするなら「Studio Experts」
この記事では、ランディングページ（LP）の作り方を解説しました。
「Studio Experts」には、今回紹介したプロフェッショナルを含め、ご予算や納期、「実装だけお願いしたい」など様々なニーズに沿ったエキスパートが在籍しています。
どの制作会社に依頼すればいいのか分からない場合は、Studioコンサルタントにご相談ください。
