LP制作の流れ｜ランディングページの作り方を、目的決めから公開後の改善まで順番にLP制作の流れ｜ランディングページの作り方を、目的決めから公開後の改善まで順番に

「LPを作ることになったけど、何から手をつければいいのかわからない」

社内でLP（ランディングページ。広告や検索から来た人が最初に見る1枚のページ）の担当になった人から、よく聞く言葉です。デザインを考えればいいのか、文章が先なのか、制作会社に頼むならどこまで決めておけばいいのか。

私はLPの構成から原稿、実装、公開後の広告運用までを一人で受けています。その順番をそのまま並べました。自分で作る人にも、外注する人にも使えるように、各工程で「誰が何を決めるか」も添えています。

LP制作の流れは、公開前の6工程と公開後の改善

まずは全体を表で。

デザインとコーディングは、全体のうち後ろの半分です。

工程ごとに何を決めるのかを、仙台の不用品回収会社で広告専用のLPを作ったときの記録に当てはめると、次の図になります。案件の全体は仙台不用品回収サービスの事例に書きました。

外注したときに揉めやすいのは、前半の「決める」工程を誰がやるのか曖昧なまま進んだ場合。見積もりに構成や原稿が入っているかで金額も大きく変わります。費用の考え方はフリーランスのLP制作費用の相場にまとめました。

LPの目的とゴールを決める

売上をつくること。LPをつくる目的は、ほとんどの場合これに尽きます。

当たり前に聞こえますが、制作の途中でここが抜けていきます。見た目をきれいにすることが目的にすり替わる。デザインがどれだけよくても、見た人が動かず、売上につながらないなら、そのLPは役目を果たしていません。

最初に決めるのは次の3つ。

• 誰に向けたページか。「健康に興味がある人」のような広い言い方で止めず、どんな悩みを持った人かまで書く
• 何が起きたら1件と数えるか。フォームの送信、電話のタップ、LINEの友だち追加のどれか
• 人はどこから来るのか。Google広告、Meta広告、検索、チラシのQRコードなど

2つめは特に大事です。

仙台の不用品回収会社で旧サイトと新しいLPを2か月比べたとき、記録に一番の注意点として残したのもこれでした。比べる2つのページで数え方がずれていたら、2か月走らせても結果が使えない。その記録はLPのA/Bテストのやり方にあります。

ランディングページの構成を決める

読む人が知りたい順番に、情報を並べる。構成はそれだけの作業です。

よくある並びはこう。

1. ファーストビュー（開いてすぐ見える範囲）で、誰の何を解決するページかを言う
2. 読む人の悩みや、いまの状況を言葉にする
3. 解決の方法として、商品やサービスを出す
4. 選ぶ理由を、実績や写真、お客様の声で裏づける
5. 料金や流れ、よくある質問で、申し込む前の不安を消す
6. 問い合わせのボタンやフォームを置く

ただ、この並びをそのまま当てはめても成果は出ません。

仙台の不用品回収のLPでは、4の「選ぶ理由」より先に、料金事例を上のほうへ置きました。作業費用と買取値引きと合計を、1件ずつ実額で見せる形です。旧サイトは料金にたどり着くまでが長く、20〜40代の女性が一人で見て「ここに頼もう」と決めにくい作りでした。不用品回収を探す人が最初に知りたいのは、いくらかかるか。だから順番を入れ替えています。

相談をいただくとよく話すのですが、LPの骨格は商材と目的で変わります。文章で順を追って納得してもらう作りにするのか、写真とデザインで印象を先に届ける作りにするのか。その比重を、依頼する側と話しながら決めていきます。

採用LPを作ったときは、求職者が比べている情報は所得、働く時間、働く環境の3つだと最初に整理して、そこから並びを決めました。詳しくは採用LPの作り方に。

原稿を書く。LPはデザインより文章で決まる

「デザインが良ければ売れる」と思われがちですが、LPの成果を分けるのは文章のほうです。

人を動かすのは、読む人の悩みに合った言葉。制作の現場では「セールスライティング」と呼ばれる、読む人に行動してもらうための文章の書き方があって、LPはWebサイトの中でも特にこの技術が問われる制作物だと思っています。

構成の考え方として昔から使われているものに、AIDMA（注意、関心、欲求、記憶、行動の順に人が動くという考え方）があります。これを頭に置くだけでも、見出しの順番を決めやすくなる。

原稿の材料は、依頼する側にしか用意できないものが多いです。

• 実際のお客様の声、よく聞かれる質問
• 料金や納期などの具体的な数字
• 店舗や事務所、スタッフの写真

作り手が考えた言葉より、現場の人が普段使っている言葉のほうが読む人に届く。私はそう思っているので、打ち合わせのメモはできるだけ話したままの言葉で残しています。

ワイヤーフレームとデザインで、読む順番を形にする

ワイヤーフレームは、色や写真を入れる前の、ページの骨組みの図です。

どこに何を置くか、ボタンをどこに出すかを先に決めておくと、デザインに入ってからの手戻りが減ります。外注する場合は、ここで一度確認させてもらうと、完成してから「思っていたのと違う」となりにくい。

デザインで気をつけていることは3つです。

• 色とフォントを最初に決めて、ページ全体で揃える。テンプレートを継ぎはぎすると統一感がなくなる
• 問い合わせのボタンを、ページの最後だけでなく途中にも置く。最後まで読む人ばかりではないため
• スマホで見たときの形から考える。広告から来る人は、スマホで開くことが多い

色の話でいうと、採用LPでは一度できたページの色だけを、白と青から黒地に金へ変えたことがあります。レイアウトと写真はそのまま。トラックを手入れして乗っている会社の実物の雰囲気に、そちらのほうが合っていたんです。

実装と表示速度。広告のLPは遅いと広告費が上がる

デザインができたら、実際に動くページにします。HTMLとCSSで書くか、ノーコードのツールで組むかは、あとで誰が直すかで決めるのがおすすめです。

仙台の広告専用LPは、本家のWordPressには組み込まず、Astro と Vercel で別に作りました。本家に組み込むと、既存サイトへの影響と表示速度の低下が避けられなかったためです。広告から来る人のためだけのページを、本家と切り離して立てる。これも実装の選び方の1つです。

ここで見落としやすいのが表示速度。

Google広告は、広告の品質を測る品質スコアの要素の1つに「ランディング ページの利便性」を置いています（出典はGoogle 広告 ヘルプ「検索キャンペーンの品質スコアについて」）。以前、自社のLPがスマホで表示までに12.6秒かかっていて、予算は余っているのに広告がほとんど表示されない状態になりました。4秒台まで縮めた手順は広告のLPが遅いと広告費が上がるにまとめています。

速度はPageSpeed Insightsで測れます。URLを入れると、モバイルとパソコンのそれぞれで結果が出る。実際のユーザーから集めたデータと、条件を固定して読み込んだシミュレーションの結果の2種類があり、見え方が違うことがあります（出典はGoogle for Developers「PageSpeed Insights について」）。

公開前に、スマホの結果だけは必ず見てください。

計測タグを入れて、公開前にテストする

公開前にやることは、動作の確認と計測の準備です。

• すべてのボタンとリンクが、正しい場所に飛ぶか
• フォームを実際に送信して、自社にメールが届くか
• 送信後に「ありがとうございました」の画面が出るか
• iPhoneとAndroidの両方で、表示が崩れていないか
• GA4と広告のコンバージョンタグが、1件を正しく数えているか
• ドメイン、サーバー、広告アカウントが、依頼した会社の名義になっているか

計測タグは後回しにされがちです。でも、タグがないまま広告を出すと、どの広告から問い合わせが来たのかがわからない。自動入札も材料がないので学べません。Google広告のタグの入れ方はGoogle広告のコンバージョン設定で3通り紹介しています。

名義の確認を入れたのには理由がある。制作側の名義でアカウントを作ってしまうと、依頼先を変えたときにデータを引き継げないことがあるためです。

LPは作ってからが本番。公開後の改善の進め方

12.6秒の件も、気づいたのは公開して広告を回してからでした。

LPを作って広告を回せば売れる、と考えている人は少なくありません。実際には、公開してからのほうが長い。LPにかかるお金も、制作費だけでは終わらず、広告費と運用の費用、ページを直していくLPO（ランディングページの改善）の費用が続きます。

最初の1か月は、データを集める期間だと思ってください。広告とLPの組み合わせが安定して数字を出すまで、私の感覚では2〜3か月かかります。経験のある運用者でも、1〜2か月目は商材によって成果が揺れる。その間にやるのは次のようなことです。

1. 広告の数字と問い合わせの数を、週ごとに並べて見る
2. ヒートマップ（ページのどこがよく見られているかを色で示すツール）で、読まれずに離れている場所を探す
3. 直す場所を1つに絞って、変える前と後、または2つのページを比べる

3つめが大事なところです。Google広告のヘルプでも、テストを作るときは「変数は 1 つずつテストします」と案内されています（出典はGoogle 広告 ヘルプ「[テスト] ページを使用して信頼性の高いテストを実施する」）。見出しとボタンと写真を同時に変えると、どれが効いたのかわからなくなる。

仙台のLPでは、6月16日から8月15日まで、Google広告のカスタム実験で旧サイトと新しいLPに50:50で振り分けました。同じキャンペーン、同じキーワード、同じ広告文で、変えたのは飛び先だけ。結果は新しいLPのほうが、問い合わせ率で約1割、CPAで約1割5分よい数字でした。ヒートマップでは、両方とも約4割の人が最後まで読んでいて、読まれ方に大きな差はなかった。差はデザインと情報の並びから来ていると見ています。

並行して、ゴミ屋敷の片付けを専用のLPに切り出し、6月18日に広告の飛び先を切り替えました。7月頭の打ち合わせでは「公開後に問い合わせが5〜6件は増えている」と共有されています。この検索をする人は状況が切迫していて、一般の不用品回収の説明を読む余裕がない。数字を見て、次に作るページを決めるところまでが公開後の改善です。

LPを自分で作るか、外注するか

自分で作ることは、できる。

ノーコードのツールを使えば、コードを書かずに公開まで進められます。HTMLとCSSを学んで一から組む方法もあるし、デザインをFigmaなどのツールで先に作ってから組む人もいる。

独学でつまずきやすいのは、ツールの操作より前の工程です。誰に向けたページか決まっていない、伝えたいことを全部入れてしまう、ボタンが最後にしかない、スマホで崩れている。どれも、ここまでに書いた流れの前半を飛ばしたときに起きます。

外注するなら、上の表の「主に決める人」を見ながら、どこまで任せるかを決めておくと話が早い。

• 構成と原稿まで任せたいのか、文章は自社で用意するのか
• 公開したら終わりか、公開後の改善まで頼みたいのか

この2つで、頼む相手も金額も変わります。