LP(ランティングページ)デザインとは?ユーザーに刺さるLPの作り方とは

  • 2022.1.24
  • LPデザイン
  • デザイン

LP,デザイン

ホームページ運営をしているとよく耳にすることが多い「ランティングページ」。

企業のWeb担当者の方は、自社の商品やサービスの売り上げをアップさせるためにランティングページを導入しようと考えているのではないでしょうか?

そこで今回は、LP(ランティングページ)デザインとは?ユーザーに刺さるLPの作り方について解説していきます。

集客に効果的なランティングページを作るコツまで紹介しているので、ぜひ最後までご覧ください。

 

【LP(ランティングページ)とは】

LP

LPとは、「Landing Page(ランディングページ)」の略称で、Webサイトにユーザーが最初にアクセスしたときに表示されるページのことです。

特に、他サイトに広告を出稿する際、リンク先として指定する自サイト内のページのことを指します。

 

ランディングページは、サイト訪問者に何かしらのアクションを促すことを目的としています。

流れとしては、アピールしたい商品・サービスの訴求を行い、コンバージョン(成約)まで完結させていきます。

作り方や運用方法次第では、売上に大きく影響するため、企業にとっては最も価値の高いWeb施策とも言えるでしょう。

 

ランティングページ作成のフロー

〈目標設定〉

最初に、ランティングページ作成の目的・方向性を定めていきましょう。

目的や方向性は、企業によって異なり、自社の目的に合った戦略を立てていきます。

 

なお、主な目的として以下の4つが挙げられます。

  1. それぞれユーザーに商品を購入させる
  2. 自社のファンになってもらう
  3. コンバージョン率を高める
  4. ターゲット層を明確にする

 

〈ペルソナ設定〉

ペルソナとは、ランディングページを通じて宣伝したいサービスや商品を利用するユーザーイメージのことです。

男性か女性か、若者かご高齢の方か、どのような職業に就いていてどのような家族構成か?といった具合でペルソナを設定することで、ランディングページの方針を固めていきます。

 

〈構成を決めてコンテンツ作成〉

作成する目的・ペルソナが定まったら、構成を決めてコンテンツを作る行程に移ります。

ランディングページのコンテンツは、ページの上から下までストーリー立てて作られています。

 

具体的には、ファーストビュー、導入部分、商品説明・ベネフィット、お客様の声、購入までの流れ、よくある質問のフローになっています。

また、各コンテンツの間にはアクションボタンを入れて、サービスや商品が気になったらすぐに購入や問い合わせができるようにすると良いでしょう。

 

〈デザイン・コーティング〉

構成を決めたあとは、Webページの骨組みを作るコーディングを行います。

コーディングとは、プログラミング言語を用いてコードを書くことを指します。

ランティングページの場合は、主にHTML・CSS・JavaScriptといった言語を使用して、ページ全体の骨組みや色合い、余白の調整、アニメーションなどを形作ります。

 

HTML・・・Webページのコンテンツに、段落や画像などの構造を指定するため開発されたマークアップ言語。

CSS・・・Webページのスタイルを指定するための言語。 通常、HTMLと組み合わせて使用される。

JavaScript・・・ユーザー側・Webサイト・Webサービスの相互間のやりとりをスムーズにするために用いるスクリプト言語。

 

〈公開後の運用方法〉

出来上がったランティングページは、あくまで作成した側の仮説の域をまだ出ていません。

実際に運用してみると、効果が伸び悩むこともあるため、データ収集を行いつつ、UIの改善等を続けていく必要があります。

 

効果的なランティングページをデザインするコツ3つ

ランディングページ

〈一目で印象を残すデザイン〉

サイトに訪れるユーザーの大抵が、瞬間的にサイトに対しての評価をしています。

一目でユーザーに対して何かしらの良い印象を残せなければ、サイトの利用は望めないでしょう。

メリハリやインパクトのあるデザイン・カラーにして、単調にならないように構成の要素ごとにカラーやデザインを変更してみましょう。

コンバージョンにつながるようなフォームやボタンは、大きく目立たせて購入までのフローをサポートします。

 

そして、写真を上手く活用するのも印象を残すために大変有効です。

背景写真を大きく挿入してインパクトを与えたり、商品やサービスに関係のある写真をトリミングや切り抜きを用いて最適に挿入することで、文字列のみの画面よりもユーザーにとって受け入れやすくなり、上手く活用すれば購入意欲を掻き立てられるでしょう。

 

〈ユーザーの無駄な動作を省く〉

デザインがいくら優れていても、使いづらいものはユーザーに受け入れられません。

ユーザーがストレスを感じやすいのは入力項目なため、項目の入力が任意なのか必須なのかひと目で分かるようにするなど、ユーザーに無駄な動作を行わせないようにしましょう。

 

〈過不足のない適切な情報量〉

ランティングページに掲載する情報量は多すぎず少なすぎず、適切であることが重要です。

文字が多すぎると読む気をなくしてしまうものですし、本当に知りたい情報が探しにくくなってしまいます。

適切な情報量を模索するためにも、ペルソナごとに必要な情報を精査し、過不足なく提供できるように心がけましょう。

 

関連:評価が高いデザインに大切なことは?6つの共通点を紹介

 

終わりに

今回は、LP(ランティングページ)デザインとは?ユーザーに刺さるLPの作り方について解説していきました。

この記事が、ランティングページを作成する際の参考になればと思います。

最後までご覧頂きありがとうございました。

picks designでは、現在最新情報をメルマガにて配信しています。

この機会に是非ご登録ください。

→メルマガ登録はコチラ

無料相談
  • 2022.1.24
  • LPデザイン
  • デザイン

ホームページ運営をしているとよく耳にすることが多い「ランティングページ」。

企業のWeb担当者の方は、自社の商品やサービスの売り上げをアップさせるためにランティングページを導入しようと考えているのではないでしょうか?

そこで今回は、LP(ランティングページ)デザインとは?ユーザーに刺さるLPの作り方について解説していきます。

集客に効果的なランティングページを作るコツまで紹介しているので、ぜひ最後までご覧ください。

 

【LP(ランティングページ)とは】

LP

LPとは、「Landing Page(ランディングページ)」の略称で、Webサイトにユーザーが最初にアクセスしたときに表示されるページのことです。

特に、他サイトに広告を出稿する際、リンク先として指定する自サイト内のページのことを指します。

 

ランディングページは、サイト訪問者に何かしらのアクションを促すことを目的としています。

流れとしては、アピールしたい商品・サービスの訴求を行い、コンバージョン(成約)まで完結させていきます。

作り方や運用方法次第では、売上に大きく影響するため、企業にとっては最も価値の高いWeb施策とも言えるでしょう。

 

ランティングページ作成のフロー

〈目標設定〉

最初に、ランティングページ作成の目的・方向性を定めていきましょう。

目的や方向性は、企業によって異なり、自社の目的に合った戦略を立てていきます。

 

なお、主な目的として以下の4つが挙げられます。

  1. それぞれユーザーに商品を購入させる
  2. 自社のファンになってもらう
  3. コンバージョン率を高める
  4. ターゲット層を明確にする

 

〈ペルソナ設定〉

ペルソナとは、ランディングページを通じて宣伝したいサービスや商品を利用するユーザーイメージのことです。

男性か女性か、若者かご高齢の方か、どのような職業に就いていてどのような家族構成か?といった具合でペルソナを設定することで、ランディングページの方針を固めていきます。

 

〈構成を決めてコンテンツ作成〉

作成する目的・ペルソナが定まったら、構成を決めてコンテンツを作る行程に移ります。

ランディングページのコンテンツは、ページの上から下までストーリー立てて作られています。

 

具体的には、ファーストビュー、導入部分、商品説明・ベネフィット、お客様の声、購入までの流れ、よくある質問のフローになっています。

また、各コンテンツの間にはアクションボタンを入れて、サービスや商品が気になったらすぐに購入や問い合わせができるようにすると良いでしょう。

 

〈デザイン・コーティング〉

構成を決めたあとは、Webページの骨組みを作るコーディングを行います。

コーディングとは、プログラミング言語を用いてコードを書くことを指します。

ランティングページの場合は、主にHTML・CSS・JavaScriptといった言語を使用して、ページ全体の骨組みや色合い、余白の調整、アニメーションなどを形作ります。

 

HTML・・・Webページのコンテンツに、段落や画像などの構造を指定するため開発されたマークアップ言語。

CSS・・・Webページのスタイルを指定するための言語。 通常、HTMLと組み合わせて使用される。

JavaScript・・・ユーザー側・Webサイト・Webサービスの相互間のやりとりをスムーズにするために用いるスクリプト言語。

 

〈公開後の運用方法〉

出来上がったランティングページは、あくまで作成した側の仮説の域をまだ出ていません。

実際に運用してみると、効果が伸び悩むこともあるため、データ収集を行いつつ、UIの改善等を続けていく必要があります。

 

効果的なランティングページをデザインするコツ3つ

ランディングページ

〈一目で印象を残すデザイン〉

サイトに訪れるユーザーの大抵が、瞬間的にサイトに対しての評価をしています。

一目でユーザーに対して何かしらの良い印象を残せなければ、サイトの利用は望めないでしょう。

メリハリやインパクトのあるデザイン・カラーにして、単調にならないように構成の要素ごとにカラーやデザインを変更してみましょう。

コンバージョンにつながるようなフォームやボタンは、大きく目立たせて購入までのフローをサポートします。

 

そして、写真を上手く活用するのも印象を残すために大変有効です。

背景写真を大きく挿入してインパクトを与えたり、商品やサービスに関係のある写真をトリミングや切り抜きを用いて最適に挿入することで、文字列のみの画面よりもユーザーにとって受け入れやすくなり、上手く活用すれば購入意欲を掻き立てられるでしょう。

 

〈ユーザーの無駄な動作を省く〉

デザインがいくら優れていても、使いづらいものはユーザーに受け入れられません。

ユーザーがストレスを感じやすいのは入力項目なため、項目の入力が任意なのか必須なのかひと目で分かるようにするなど、ユーザーに無駄な動作を行わせないようにしましょう。

 

〈過不足のない適切な情報量〉

ランティングページに掲載する情報量は多すぎず少なすぎず、適切であることが重要です。

文字が多すぎると読む気をなくしてしまうものですし、本当に知りたい情報が探しにくくなってしまいます。

適切な情報量を模索するためにも、ペルソナごとに必要な情報を精査し、過不足なく提供できるように心がけましょう。

 

関連:評価が高いデザインに大切なことは?6つの共通点を紹介

 

終わりに

今回は、LP(ランティングページ)デザインとは?ユーザーに刺さるLPの作り方について解説していきました。

この記事が、ランティングページを作成する際の参考になればと思います。

最後までご覧頂きありがとうございました。

picks designでは、現在最新情報をメルマガにて配信しています。

この機会に是非ご登録ください。

→メルマガ登録はコチラ

無料相談