「LP（ランディングページ）がどのようなページを指すのかわからない」
「HP（ホームページ）とどう違うの？」
このようにLPとHPの違いについて迷った経験はありませんか？
LPとHPでは、ページを作る目的などに違いがあります。目的の違いを知ることで、LPやHPを作る理由や使い分けについても理解できるでしょう。
本記事を読めばLPとHPの違いがわかり、Webデザイナーとして実際にLPを作成するイメージが湧くはずです。
薬剤師ライター福田愛海さん
初心者の方にもわかりやすく解説していますので、デザインに興味はあるものの知識がなくて不安な方でも、安心して読んでください。
LPとHPの基本的な違い
LPとHPはどちらもWebページですが、目的や構成など違いがあります。LPとHPという言葉は聞いたことがあっても、詳しい違いを説明できない方は多いのではないでしょうか。
薬剤師ライター福田愛海さん
まずはLPとHPそれぞれの特徴について説明します。
LP（ランディングページ）とは
LP（ランディングページ）とは、読者に特定の行動を起こしてもらうことを目的としており、1ページで完結する縦長のページを指します。
Web広告やSNSなどを経由して読者が最初にアクセスするページです。商品購入や申し込み、資料請求など、読者にしてほしい行動がひとつに絞られている点が大きな特徴といえるでしょう。
LPでは、まず読者の悩みを提示して、解決策やその根拠を示し、行動を促すような流れで構成します。
薬剤師ライター福田愛海さん
広告やSNSから直接アクセスされることが多いため、はじめて訪れた人でも内容を理解しやすい設計が求められます。
【参考LP/Medi+医療広告デザインのはじめかた講座LP】
HP（ホームページ）とは
HP（ホームページ）とは、会社や個人に関する情報を総合的にまとめた、複数のWebページの集合体を指す言葉です。Webサイトを開くと最初に出るトップページなどを指す場合もありますが、本記事では「HP＝Webサイト全体」の意味として扱います。
HPには、会社概要やサービス紹介、実績、問い合わせ先など、複数の情報をまとめたり伝えたりする目的があります。
薬剤師ライター福田愛海さん
情報をわかりやすく整理し、読者が自由にページを行き来しやすいように整えておくのが大切です。
【参考HP/株式会社Medited】
LPのように読者の行動をひとつに絞るのではなく、情報提供や信頼度の向上が主な役割といえます。
LPとHPの違いを比較
LPとHPでは作る目的が大きく違い、それに伴って構成やデザインも変える必要があります。
ここでは、LPとHPを目的・構成・デザインの観点から比較し、それぞれの役割や使い分けが理解できるよう解説します。違いを理解すると、目的に合ったページを制作できるようになるのでおすすめです。
目的の違い
LPとHPには以下のような違いがあります。
| 種類 | 目的 |
| LP | 「商品を購入する」「会員登録をする」など、読者にしてほしい行動を促すのが目的。情報は必要最小限に絞り、読者の行動を促すための流れを作るのが重要。 |
| HP | 会社概要やサービスなどを総合的に周知するのが主な目的。すぐに行動を促すよりも、情報を整理して伝える、信頼度を高めるなどの役割を担っている。読者が知りたい情報をわかりやすくまとめたり、周知したい情報を発信したり、ページの内容はHPによってさまざま。 |
LPとHPの最も大きな違いは、ページを作る目的といえるでしょう。
構成の違い
LPとHPでは目的が違うため、目的に合わせて構成も異なります。
| 種類 | 構成 |
| LP | 基本的に1ページ完結型で、上から下へ読み進めると自然に内容を理解できるように作る。ストーリー性を持たせて、読者の行動へ誘導できる構成にする必要がある。 |
| HP | 複数のページで構成されている場合が多く、メニューバーやリンクを使って必要な情報へアクセスしやすいように作る。情報量が多い場合は、ページ同士の関係性や全体の構造を意識した構成にする必要がある。 |
たとえば商品購入のためのLPを考えてみましょう。購入してほしい商品が読者の悩みを解決できることを伝え、根拠を示して商品購入という行動を促すような構成にします。商品購入へのリンクを複数設置するなど、読者が迷わず行動できる構成にすることが重要です。
HPは、LPと違って行動喚起を目的としていないため、読者が自由に複数のページを見てまわれます。
薬剤師ライター福田愛海さん
そのためページ間の移動がしやすく、情報がわかりやすくまとまっていることが大切です。
デザインの違い
LPとHPでは、目的の違いによってデザインの考え方も大きく異なります。
| 種類 | デザイン |
| LP | 強調したいメッセージや行動を促すためのボタンが自然と目に入るように、目立つ場所に配置する。配色や余白、写真の使い方などすべてに行動を促す意図があり、感情に訴えるような表現が多いのが特徴。 |
| HP | 情報のわかりやすさや統一感、信頼感などが重視される。会社のHPであれば、会社のイメージを保ちつつ迷わずに情報を探せるよう、見やすく整理されたデザインが良い。 |
薬剤師ライター福田愛海さん
それぞれの目的に合わせたデザインで制作するのが大切です。
LPとHPでは制作費用も違う？
LPとHPでは目的・構成・デザインだけでなく、制作にかかる費用も異なります。
LP制作におけるWebデザインの費用は、一般的に10万円から60万円程度が相場です。
LPは基本的に1ページ完結型のため、複雑なコーディング＊が不要で、費用が抑えられる場合があります。
ただしLPには「読者の行動」という成果が求められます。成果を出すためにデザインはもちろん、ライティングやボタンの配置などにもこだわる必要があり、1ページだけでも多くの費用がかかる場合もあるでしょう。
一方、HP制作におけるWebデザインの費用相場は30万円から200万円程度といわれており、大きく幅があります。HPは複数ページで構成されることが多く、ページ数のボリュームの違いや、スクロールに合わせて画像が動くといった複雑なアニメーションの設定などによって、作業量が大きく異なるためです。
会社概要やサービス紹介、問い合わせページなど、それぞれ役割の異なるページを増やすほど費用も増えます。
薬剤師ライター福田愛海さん
ページ数が増えるほど複雑なコーディング＊が必要となり、費用も増える場合が多いでしょう。
LPとHPそれぞれの向いているケース
ここでは、LPとHPそれぞれが、どのような目的や状況に向いているのかを解説します。
それぞれの向いているケースを知ることで、Webデザイン初心者の方でも、目的や状況に合ったページを制作できるようになるでしょう。
LPが向いているケース
LPは以下のように、読者に特定の行動を促したい場合に向いています。
- 商品を購入する
- 無料体験の申込みをする
- LINE登録をする
商品購入や申し込み、LINE登録など、ゴールが明確なときにはLPを制作するのが良いでしょう。広告やSNSから集客し、そのまますぐに行動へつなげたい場合に適しています。
情報をひとつのページ上で伝えられるため、はじめてサービスを知る人にも内容が伝わりやすい点がメリットです。
薬剤師ライター福田愛海さん
Webデザイン初心者にとっても、目的がひとつに絞られているため、制作しやすいと思う方も多いかもしれません。
たとえば健康診断の予約ページでは、「予約」という特定の行動を促したいため、LPが向いているといえるでしょう。
HPが向いているケース
HPは以下のように、複数の情報をまとめて幅広く伝えたい場合に向いています。
- 会社やサービスなどの情報を発信する
- 会社やサービスなどの信頼度を向上させる
複数ページでさまざまな情報を伝えられ、会社情報や運営者の想いなども掲載できるため、信頼度を高めたい場合に適しています。
たとえば病院の公式Webサイトでは、病院の情報を網羅的に伝えたいため、HPが向いているといえるでしょう。
LPの作り方7ステップ
LPはきちんとした手順に沿って設計することで「読者の行動」という成果が出やすくなります。とくに初心者Webデザイナーの場合、手順を知らずに闇雲に制作しても成果を出すのは難しいでしょう。
ここからは、LP制作の流れを7つのステップに分けて解説します。
薬剤師ライター福田愛海さん
LP制作の全体像を把握することで、具体的な手順や考え方がわかり、実際にLPを作るイメージも湧きやすくなるでしょう。
1．目的・目標を設定する
LP制作でははじめに、目的と目標を明確に設定します。ゴールがわからないと、構成やデザインの方向性も決められないためです。
たとえば「資料請求をする」「LINE登録をする」など、読者にしてほしい行動をひとつ決めます。LINE登録の場合、登録者数を増やすのが「目的」です。あわせて「いつまでに何件」のように、目標件数や期限なども設定しておくと、効果の検証がしやすくなるでしょう。
2．ペルソナを分析する
目的・目標が決まったら、誰に向けたLPなのか、ペルソナを明確にしましょう。ペルソナとは、ターゲットの中のたった一人を具体的に設定した人物像を指します。年齢や性別だけでなく、悩みや不安、仕事や趣味なども具体的に想定すると良いでしょう。
ペルソナを細かく設定することで、刺さる言葉や作るべき構成が見えてきます。
薬剤師ライター福田愛海さん
たとえば、一般の方に向けた健康診断のLPを作成したいのであれば、専門的で難しい医療用語は避けてわかりやすい表現をするのが効果的です。
たった一人の読者に届けることを意識すると、成果の出やすいLPを作りやすくなります。
3．ワイヤーフレームを作成する
次に、ワイヤーフレームを作成します。ワイヤーフレームとは、LPのレイアウトを決める設計図のようなものです。見出しや文章、画像、クリックしてほしいボタンなど、どこにどの情報を配置するのかを簡単な図で整理して、構成のレイアウトを決めます。
薬剤師ライター福田愛海さん
一から作るのは難しそうですが、CanvaやFigmaなどのツールではテンプレートもあり、初心者でも作りやすいでしょう。
4．ライティングをする
ワイヤーフレームが完成したら、記載する文章を考えます。文章を作成することをライティングといいます。
LPでは読者の悩みに共感し、解決策を提示して行動を促すような、ストーリー性のあるライティングが必要です。商品の特徴を並べるだけでなく、読者にとってのメリットを意識して書く必要があります。
また、健康食品や化粧品などのLPを制作する場合、薬機法（医薬品、医療機器等の品質、有効性及び安全性の確保等に関する法律）に抵触しない表現を意識したライティングが求められます。 [1]
薬剤師ライター福田愛海さん
違反した場合、罰則や処分の対象となる可能性があるため、注意が必要です。
5．デザインを作成する
次にデザインを作成します。LPでは、大胆でパッと目を引くようなデザインが大切です。強調したい部分が自然と目に入るように、色や余白、文字サイズなどを調整します。
薬剤師ライター福田愛海さん
初心者のうちは、装飾を増やしすぎず、シンプルな構成を意識すると作りやすいでしょう。
デザインが目的に沿っているか、常に意識することが大切です。
6．コーディングをする
デザインまで完成したらコーディングをして、デザインしたものが正しく動くようにする必要があります。
最近ではノーコードツールといって、コーディング不要でWebサイトを作れるツールもあり、初心者でもLPを制作しやすくなっています。自分のスキルや目的に合わせて、適切なツールを選ぶと良いでしょう。
7．LP公開後に効果を検証する
LPを公開した後は、きちんと効果を検証して改善するのが大切です。
LPは公開して終わりではありません。目標として設定した数値をもとに、成果が出ているかを確認する必要があります。
文章やボタンの位置を少し変えるだけで、成果が大きく変わる可能性もあります。
薬剤師ライター福田愛海さん
検証と改善を繰り返すことで、より成果の出るLPを目指しましょう。
初心者ならLPがおすすめ！理解するメリット
LPは目的が明確でわかりやすく、1ページ完結のため初心者にも作りやすいメリットがあります。HPのように多くのページを作る必要がないため、初心者でも実案件を受けやすいといえるでしょう。
薬剤師ライター福田愛海さん
「誰に・何を伝え・どのように行動を促すか」を考えるため、マーケティングの要素も経験できます。
LPを通してWebデザインの基礎を身につけることで、理想のWebデザイナーに一歩近づくでしょう。
Webデザインを学んでLPを作ってみよう
LPとHPの違いを理解することで、Webページ制作の目的や考え方がわかります。
薬剤師ライター福田愛海さん
Webデザインを学んで実際にLPを作ることで、Webデザインについて、より具体的に理解できるでしょう。
LPを制作するには、正しいステップを踏む必要があります。はじめてで不安な方は、実際にLPを作る前に、講座でWebデザインについて学ぶのがおすすめです。Webデザインを学んで、LPを作れるようになりましょう。
医療広告デザイナーのはじめかた講座
医療広告ガイドラインや、デザインの法的側面を知り、Figmaで課題制作をし営業も学ぶ実践的な講座です。未経験からクリエイティブを通して、医療/美容/健康/ヘルスケア業界で活躍したい方におすすめです！
