ランディングページ(LP)とは
ランディングページ（Landing Page/LP）は、広義ではホームページのなかで訪問者が最初にアクセスしたページを指します。 ユーザーが着地する（Landing）ページ（Page）でランディングページです。
ただし、Webマーケティングで使われる狭義のランディングページは別。 こちらは、サイトを訪れたユーザーに対してアクションを起こしてもらうよう誘導するページのことを指します。商品やサービスを訴求するために、ポジティブなセールス情報を多く盛り込んだ、縦長のページが大半です。
サイト運営者が、Webページを見てユーザーに起こして欲しいアクションをCV（コンバーション）と呼びます。通販サイトであれば商品購入やお申込み、サービス系であれば資料請求や会員登録などのアクション＝CV（コンバーション）です。 ランディングページはCVを増やすためにあつと言っても過言ではありません。
本講座では、狭義のランディングページのことをランディングページ（LP）と記載して構成要素を紹介していきます。
画像化 or 通常コーディング
ほぼ全て画像化されているLP
ランディングページでは、これは、ユーザーに強く訴えかけコンバージョンにつなげることを重視しているためSEOは考慮しないこともあります。 この場合、肝心のランディングページへの集客は、Web広告やSNS、ホームページなどから行います。広告とセットで、専用のLPを制作するケースもあります。
このようなコンバージョンとデザイン重視のLPでは、文字も画像化する事があります。
健康食品やコスメ系で、特によく見かけます。
下記の化粧品LPでは、「商品詳細」部分が全画像化になっています。
また、周知目的などのキャンペーン系LPでもよく使われます。 下のハッピーターンのページでは、全体を画像化することでCSSだけでは難しいレイアウトを実現しています。
画像化LPのメリット/デメリット
【メリット】
- デザインの自由度が高い
- コーディングの手間がほぼない
（短期間でリリースが可能) - 環境による文字の見え方の差がない
【デメリット】
- 自然検索（SEO）には不向き
- 修正や更新に手間がかかる
- ページが重くなる
- 解像度によっては文字が汚く見える
B:デバイステキストでコーディングされたLP
もちろん、通常のWebページと同じく、HTMLやCSSでコーディングされたLPもあります。
この場合、文字はデバイステキスト（プレーンテキスト）が中心です。
特にクライアントからの指定がない限り、デザイン・コーディングどちらのお仕事でも「普通にコーディングできる（する）」ことを考えて作ると良いです。
ページ全てを画像化しているのと比べると、軽量で、修正や更新をしやすいことが特徴。
閲覧環境の解像度によって、文字が読みにくくなるリスクもありません。
検索エンジンもコンテンツ（テキスト）を読み取れるので、SEO集客にも繋がるでしょう。
通常LPのメリット/デメリット
【メリット】
- SEO対策が出来る
- ページの軽量化が出来る
- 修正・更新が楽である
- 何で見ても文字が汚くならない
【デメリット】
- デザインに制限がある
- コーディングに時間がかかる
- 環境によってフォントが変わることがある
“ランディングページ型ホームページ”と呼ばれる、ホームページ自体がランディングページのような構成になっているタイプもあります。この場合は、更新やSEOを考えてもデバイステキストにしたいですね。
下記のサイトもランディングページ型ホームページ系の作りです。
CVは相談・お問い合わせですね。
ちなみに、Skillhubのホームページも“ランディングページ型ホームページ”に近い構成になっています。
美容院やクリニックなどページ数の少ないWebサイトでも、よく使われています。
ランディングページ(LP)の構成
ランディングページは大きく分けると３つのパートに分けることができます。
- トップ
- ボディ
- クロージング
ページを開いたユーザーに対して「うちの商品を買ってください」と言っても、いきなり買ってくれる人はほとんどいません。
商品もしくはサービスのどこが優れているのか、使うことでどんなメリットが得られるのかを伝える必要があります。ユーザーの「欲しい」「試してみたい」という気持ちを高めるのです。
Webページだからこその工夫も
LP=セールストークをWebページ化したもの、というイメージです。
ですが、販売員が話しているのと異なり、ユーザーは一人で画面を見ています。
興味を失ったら「気まずいな…」なんて事は考えずに、さっさとブラウザのタブを閉じてしまいます。気になって広告をクリックしてみたけど、すぐ閉じた経験がある方も多いのではないでしょうか？
このため、LP制作ではユーザーが途中で興味を失わないようにする工夫も必要となってきます。画像や図も入れてユーザーが飽きないように、かつ購買意欲をそそるようにページを作っていくわけです。
各パートごとに役割を分けることも、パーツを区切ることでユーザーを飽きさせないことに繋がります。説明が長くなるボディパートは更に細かく区切り、ユーザーの気持ちを保てるようなデザインを考えていきます。
LP制作で知っておきたい略語
ランディングページ制作や、制作のためのアイディアを調べていると略語が結構出てきます。クライアントがWebマーケにある程度詳しい人なら、クライアントからの指示に入ってくることもあります。
最低限知っておきたい略語を５つ紹介するので、下記は覚えておきましょう。
聞き慣れない言葉が出てきたら、調べて意味を把握するよう努めてください。
| 略語 | 意味 |
|---|---|
| LP | ランディングページ（Landing Page） 広義：Webサイトにユーザーが訪れた時に最初に訪問したページ 狭義：訪問者のアクションを誘導することを目的としたページ |
| CTA | Call To Action（行動喚起） ユーザーに行動を起こしてもらうための要素 例：問い合わせボタン、カートに入れるボタン |
| CV | コンバージョン（Conversion） そのWebサイト/Webページで設定された成果 例：商品の購買数、予約ボタンのクリック数 |
| CVR | コンバージョン率（Conversion Rate） サイトを訪れた人のうち、何人がコンバージョンに至ったかの率 |
| CTR | クリック率（Click Through Rate） 表示された回数のうち、何回クリックされたかの割合 |
Webマーケティング用語では頭字語が多用されています。 特に“C”から始まる三文字略語が非常に多いので、慣れないうちは「CTR?CPE?CTA?」となってしまったりします。Webデザイナーでもコーダーでも、まずは上表の4つは覚えておきましょう。
よく使われるWebマーケティング用語については、下記サイトの一覧ページがシンプルにまとまっていて見やすいです。
Webマーケティング用語集｜デジタルマーケティングラボ