LP制作の流れと手順ごとのポイントを徹底解説
LP（ランディングページ）は、売上に直接影響するとても重要なページです。一方で「LPを制作したいけど、どのようにして作るのかわからない」という方も多いのではないでしょうか。
本記事ではLP制作全体の流れと、手順ごとのポイントを徹底解説します。ぜひLP制作の参考にしてみてください。
LPの全体像を掴みたい方は先にこちらの記事をどうぞ。
関連記事：ランディングページ（LP）とは？作り方やホームページとの違いについて解説
LP制作に入るまでの流れ
LP制作ではLP制作そのものの手順に入る前に、しっかりとした戦略設計をすることが重要になります。
LP制作に入るまでに必要な準備の流れは、次の通りです。
- 目的を明確にする
- 市場を分析する
- ペルソナを設定する
- 自社の訴求ポイントを明確にする
1. 目的を明確にする
まずは、目的を明確にする必要があります。
目的は、「商品を購入してもらう」「資料を請求してもらう」など、訪問してくれたユーザーにどのようなアクションをとってほしいのか、具体的に設定するようにしましょう。
また最終目的だけでなく、段階ごとの目標としてKPIを設定すると、目的達成までの道筋が見えやすくなります。
2. 市場を分析する
市場を分析して、どの顧客層をターゲットにしていくのか、参入する市場を決めます。
市場分析の段階では、顧客や市場（Consumer）、競合（Competitor）、自社（Company）の3要素を分析する、3C分析などのフレームワークを使うと便利です。
3. ペルソナを設定する
市場分析によって勝負する市場を決めた後には、ペルソナを設定して、ターゲットをより具体的に絞っていきます。
ペルソナ設定では、ターゲットとする顧客の年齢や居住地、趣味嗜好や考え方に至るまで、リアリティーを持たせた具体的な顧客像をつくり上げます。
この時に、余計な情報を入れすぎると、方向性のズレが生じやすくなるため、あくまで商品やサービスに関連付けて設定していくことがポイントです。
ペルソナ設計入門ガイドでは、サイト制作実績が豊富なLeadGridチームが実務で使用しているワークショップ手法に基づいたペルソナ設計の具体的な方法やいますぐ使えるテンプレートをまとめております。
ペルソナを設計する際にぜひご活用ください。
4. 自社の訴求ポイントを明確にする
次に、設定したペルソナに刺さる、自社商品やサービスの訴求ポイントを明確にしていきましょう。
類似商品を扱っている他社のLPを見比べながら、差別化を図ることが重要です。
LP制作の手順～公開までの流れを紹介
LP制作の戦略設計ができたら、いよいよLP制作の手順そのものに入ります。
LP制作の手順と、公開までの流れは次の通りです。
- 構成（ワイヤーフレーム）を作成する
- 構成に沿ってコンテンツを作成する
- 戦略や構成に沿ってデザインを作成する
- コーディングする
- 公開し、運用と効果測定を行う
ここからは各工程の概要を大まかに解説します。
なお、詳細な制作方法を知りたい方に向けてランディングページ制作・最適化マニュアルもご用意しております。
LPを構成する要素ごとの詳細な作り方と、制作した後の改善方法（LPOと呼ばれるものです）まで網羅しており、本格的にLP制作について知りたい方に最適な内容となっておりますのでぜひあわせてご利用ください。
1. 構成（ワイヤーフレーム）を作成する
まずは、LPに必要な要素や、何をどこに配置するかを決めるために、構成を作成します。
構成では、紹介していく内容の順番や、ボタンやリンクの数などに気を配り、訪問ユーザーを効率的に CVに導くための工夫が必要です。
大まかな構成案ができたら、ワイヤーフレーム（画面設計）に落とし込んでいきましょう。
2. 構成に沿ってコンテンツを作成する
構成に沿って、記事や画像などのコンテンツを作成します。ここでも、ユーザーの興味を引き、読み進めてもらうための工夫が求められます。
せっかくLPまでユーザーを導くことができても、コンテンツの質が低ければ離脱率が高くなってしまうので、慎重に作成しましょう。
新たに素材を制作したり、撮影したりする場合には、別に費用や時間が発生するので注意が必要です。
3. 戦略や構成に沿ってデザインを作成する
ここまで決めたことをもとに、デザインを作成します。色調や文字の装飾など、細部までこだわってCVに繋がる質の良いLPを目指しましょう。
質の高いデザインは、CV率を高めるだけでなく、自社のブランディング効果を高める効果もあります。そのため、デザイン作成から、プロに依頼する場合も多いです。
4. コーディングする
デザインをWeb上で見られるように、コーディングを行います。コーディングにはプログラミング技術が求められるため、コーディングの工程のみを外注する企業も多いです。
自社で制作する場合には、LP制作ツールを使用すれば、コーディングなしで誰でも簡単にLPが作成できます。
5. 公開し、運用と効果測定を行う
完成したLPを公開して、運用していきます。作成したLPを公開して終わりではなく、適切に効果測定を行いながら、改善していくことが重要です。
そのため本格的にLP運用によるマーケティングを行う場合には、LP運用にコミットする専任者をおくことが一般的です。
LP制作の手順ごとのポイント：構成作成
構成作成は、成果の出るLPが作れるかどうかを左右する重要な工程です。
次のようなポイントを押さえましょう。
- ベンチマークのLPを設定する
- 構成のテンプレートを活用する
ベンチマークのLPを設定する
競合分析を行い、ベンチマークの他社LPを設定することで、構成作成の方向性が定まりやすくなります。
またLP制作を外注する際にも、受託側と成果物のイメージのすり合わせがしやすくなるため、打ち合わせがスムーズに進みます。
構成のテンプレートを活用する
LPはCVを増加させることに特化して構成されています。そのため目的とするCVによって、いくつかの王道パターンの構成テンプレートがあります。
はじめは構成のテンプレートに沿って設計するのがいいでしょう。
関連記事：売れるランディングページとは？王道の構成と要素を解説
LP制作の手順ごとのポイント：コンテンツ作成
構成をもとにコンテンツを作成します。
コンテンツ作成のポイントは以下です。
- 独自性を担保する
- 必要な素材をあらかじめ用意しておく
独自性を担保する
競合分析を行い、どこで独自性を担保するのかを考えながら、コンテンツ作成をすることがポイントです。
コピーコンテンツにならないように注意しながら、競合の良いところを取り入れましょう。
必要な素材をあらかじめ用意しておく
作業途中で必要な素材が出てくると、作業がストップしてしまうこともあります。
事前にロゴ、画像、図、テキストなど、必要となりそうな素材を予想し、ある程度用意しておくと、スムーズに作業を進めることができます。
LP制作の手順ごとのポイント：デザイン作成
デザイン作成では、LPのデザイン性だけでなく、ユーザーの使いやすさにも配慮する必要があります。
デザイン作成のポイントは、以下の通りです。
- 顧客志向に合わせたトンマナを意識する
- ボタンや入力フォームを最適化させる
- スマホに最適化させる
顧客志向に合わせたトンマナを意識する
顧客志向に合わせたトンマナを意識して、色調や、文章のテンション、難易度などを合わせましょう。
たとえば葬儀場のLPであれば落ち着いたデザイン、おもちゃのLPであればキラキラとした明るいデザインなどが適しています。
顧客志向とLPのトンマナがズレていると、顧客に違和感を抱かせてしまうため、注意しましょう。
ボタンや入力フォームを最適化させる
LPは、CV にスムーズに向かわせることが重要です。ボタンや入力フォームが最適化されているか、必ず確認するようにしましょう。
たとえば問い合わせボタンが探しにくかったり、入力フォームの入力項目が多すぎたりすると、ユーザーが煩雑に感じてしまい、離脱の原因になります。
ユーザーが面倒くささを感じる要素を、最小限に抑えることが重要です。
なお、リード獲得に特化した国産CMS「LeadGrid」は、専門知識を持たない担当者であっても簡単にCTAボタンや入力フォームの編集を行うことができるため、最適化施策を積極的に進めることが可能です。
ランディングページの制作実績（公開可能な案件のみ掲載）もございます。LeadGridの機能詳細はサービス資料をご覧ください。
スマホに最適化させる
Webサイト全般において、スマートフォンでの閲覧ユーザーがメインとなっているので、スマホに最適化したデザインにしておくことは必須です。
可能であればユーザーの閲覧デバイスによって、画面サイズが最適化されるレスポンシブデザインを導入することが望ましいです。
制作会社に発注する場合には、レスポンシブデザインへの対応は追加費用がかかることがあるので、注意しましょう。
関連記事：LPのレスポンシブ対応は慎重に！ メリット・デメリットを解説
なお、CMSを導入すればレスポンシブ対応のLP制作が容易にできます。
目的に応じて自社に適したCMSを探したい方はBtoB企業向けCMSカオスマップをご覧ください。
リード獲得に特化したCMS「LeadGrid」ではレスポンシブ対応のランディングページの制作が可能です。
LeadGridサイト制作事例集ではランディングページを制作した事例も取り上げております。
企業課題に対し、どのようなアプローチでランディングページを制作したのか詳細にまとめておりますので、実績ベースで検討を行いたい場合はぜひ参考にしてください。
LP制作の手順ごとのポイント：コーディング
コーディングでは適切なコーディングができていないと、LPのデザインが崩れてしまうこともあります。
以下のようなポイントを確認するようにしましょう。
- コーディングルールを遵守する
- 複数種類のブラウザから最終確認を行う
- 複数種類の端末から最終確認を行う
コーディングルールを遵守する
SEOに効果的なコーディングルールに遵守して、コーディングを行うことがポイントです。
コーディングルールに沿ってコーディングされた質の高いLPは、Googleなどの検索エンジンでも見つかりやすくなります。
複数種類のブラウザから最終確認を行う
正しくコーディングしたつもりでも、ブラウザが変わるとデザインが崩れることがあります。
Google Chrome、Safari、Microsoft Edgeなど、複数種類のブラウザから最終確認を行いましょう。
複数種類の端末から最終確認を行う
スマホかPCかタブレットか、LPを閲覧する端末によってデザインが崩れることもあります。
レスポンシブ対応できるようにコーディングしている場合は、複数種類の端末から最終確認を行うようにしましょう。
なお、公開後のトラブルを防ぐために！Webサイト公開前チェックシートでは端末確認以外にも忘れずにチェックしておきたいポイントをシートにまとめておりますので、公開前の最終確認でぜひご活用ください。
LP制作の手順ごとのポイント：公開～運用～効果測定
LP制作では、公開後の運用と改善も重要です。
運用と効果測定では、次のようなポイントを押さえましょう。
- ヒートマップから離脱ポイントを見極める
- アクセス解析をする
ヒートマップから離脱ポイントを見極める
ヒートマップとは、ページの閲覧ユーザーがどのページの箇所まで閲覧したのかを解析できるツールです。
LPは他サイトと比較しファーストビューの判断時間がわずか3秒と短い傾向にあります。そのため、直帰率が高く、ヒートマップ上でもスクロールされた様子がない場合はファーストビューに改善点があると考えられます。
よって改善策として、ファーストビューに分かりやすく訴求要素を盛り込み、瞬時に「役立つサイト」と判断してもらえるようにすることなどが挙げられるでしょう。
このように、ヒートマップを活用して、離脱ポイントを見極めることで、LPの改善に役立ちます。
関連記事：LPのファーストビューを見直して成果アップ！改善や設計のポイント
アクセス解析をする
アクセス解析をして、訪問ユーザーの流入元や、属性などを詳細に分析すると、LPの改善に役立ちます。
アクセス解析は、Google Analyticsなどのツールを利用して行うことができます。有料のLP制作ツールであれば、アクセス解析機能が付属していることが多いです。
そのほか、ランディングページの改善を行うときに着目すべき箇所や対策方法をランディングページ制作・最適化マニュアルにまとめております。
リード獲得、売り上げ向上といった成果を生み出すランディングページにしたい場合はぜひこちらのマニュアルを参考にしながら効果検証や改善施策に取り組みましょう。
LP制作の流れ全体において重要なこと
続いてLP制作の流れ全体において重要なことを解説します。
- ユーザー視点を持つ
- 効果測定と改善を定期的に行う
- 目的の本質を見失わない
ユーザー視点を持つ
LP制作の全ての工程において、ユーザー視点を持つことは非常に重要です。
自社が伝えたい情報を押し売りするのではなく、ユーザーがどのような情報を求めているのかという視点を持ちながら、制作をしましょう。
効果測定と改善を定期的に行う
成果の出るLPを作成するためには、定期的に効果測定と改善を行っていくことが必須です。
LP公開後は、素早く効果測定と改善を行い、スピーディーにPDCAのサイクルを回していきましょう。
関連記事：ランディングページ最適化（LPO）とは？手順や成功事例、注意点も解説
目的の本質を見失わない
LP作成の最終的な目的は、問い合わせや資料請求の件数を増やすことではなく、成約に結び付けることです。
目的の本質を見失わず、LPからのCVが成約まで結びついているかという点も、しっかり確認しましょう。
外注vs自社制作：LP制作の流れの違い
実際にLPを制作する際には、外注するか、自社で作るかという2つの手段があります。
ここでは、それぞれの違いを解説していきます。
- LP制作を外注する場合
- LPを自社で制作する場合
LP制作を外注する場合
LP制作を外注する際には、LP制作会社やフリーランスに依頼することができます。
戦略設計や構成作成などの上流工程から依頼することも、デザイン・コーディングなどの下流工程のみを依頼することもできるので、必要な工程から依頼しましょう。
制作費用は、数万円～数十万円と幅広く、依頼する業者や、LPのオリジナリティ、制作手順のどの工程から依頼するかなどによって異なります。
LP制作の流れを抑えた上で、どの工程までは自社で対応できるかを見極めることで、外注費を抑えることができます。
関連記事：LP制作の相場って？費用の内訳や相場に幅がある理由も解説
LPを自社で制作する場合
LPを自社で制作する場合にも、制作の流れは同じです。
自社で制作する場合には、LP制作ツールを使うと便利でしょう。テンプレートを利用するので、低コストで、誰でも簡単にハイクオリティーなLPが作成できます。
無料のツールも多数あるので、ぜひ手軽に試してみてください。
関連記事：無料LP制作ツール6選｜選ぶポイントやメリットとデメリット
まとめ
LP制作の際、手順ごとのポイントを抑えることで効率的に効果の出るLPを作成することができます。
またLPは公開して終了ではありません。成果を出すためには、しっかりと効果測定をして改善していくことが必須です。
そこでメンテナンス性のことも考えてランディングページを作るなら、LeadGridがおすすめ。
LeadGridはランディングページやWebページの作成機能だけでなく、運用に必要な機能を多角的に備えたCMSツール。LeadGridではLPの要素をブロック化しているため、ブロックをドラッグ&ドロップするだけで簡単に要素の入れ替えが試せます。
他にもページを見たまま編集できる「ページ管理機能」や、ドラッグ&ドロップで簡単にフォームを作成できる「フォーム管理機能」が用意されており、Webの知識がなくても簡単に運用が可能です。
メディアの目的はPVではない！？オウンドメディア収益化で本当に重要なのは〇〇の数
資料をダウンロードするリード獲得に強いCMS・Webサイト運用ツール LeadGrid
LeadGridを使えば、Webマーケティングに強いサービスサイト、オウンドメディア、コーポレートサイト制作をスピーディに制作可能です。
ページを見たまま編集できる「ページ編集機能」や「フォーム管理機能」など、Webの知識がなくても担当者ベースで施策が実行できます。
くわえてご希望の方には、WebマーケティングやSEOコンテンツの設計、運用、分析までトータルでご支援しています。
Webサービスやオウンドメディアの立ち上げ、コーポレートサイトリニューアルなど、御社のプロジェクトをお気軽にご相談下さい。
得意領域
- Webマーケティングに強いWebサイト制作
- サービスサイト、オウンドメディアサイトの立ち上げ
- Webマーケティングの戦略設計、運用支援
記事を書いた人
LeadGrid BLOG編集部
LeadGrid BLOG（リードグリッド ブログ）は、リード獲得に役立つ情報を発信するWebマーケティングメディアです。
関連記事
-
リードジェネレーションとは？手法や成果を出すポイント、事例を解説
- # リード獲得
- # Webマーケティング
-
リード獲得単価の相場は？施策や業界別の傾向、単価を抑えるポイントを解説
- # リード獲得
- # Webマーケティング
-
スコアリングとは？ 得られる効果とデメリット・評価方法まで解説
- # Webマーケティング
- # リード獲得
-
ホットリードとは？言葉の意味や獲得するメリット、方法まで解説
- # Webマーケティング
- # リード獲得
-
ホワイトペーパーの事例・サンプル5選｜ダウンロード率を上げるコツも紹介
- # リード獲得
- # ホワイトペーパー
-
ホワイトペーパー施策って本当に効果あるの？ LeadGridのリアルな事例紹介
- # ホワイトペーパー
- # リード獲得
お役立ち資料
関連のお役立ち資料をご紹介します。
Web制作・CMS開発・Webマーケティングに関してお気軽にご相談ください。
多くのWeb制作、オウンドメディア制作、Webコンサルティング、コンテンツマーケティングの実績から制作から運用・改善までトータルでサポートします。