【LPデザイン】売り上げUPにつながるランディングページの作り方をwebデザイナーが解説するよ【保存版】

 

こんにちは!ちづみ(@098ra0209)です!私は今カンボジアにいながらこの記事を書いています。ノマドです。

私はウェブデザインを主に仕事をしていますが、過去いくつか受けたのが、

ねこ
LPを作って欲しい!
ねこ
もっと売り上げがUPするようにLPをリニューアルしたい!
ねこ
ホームページをLP風にしたい!

 

というものでした。特にフリーランスのデザイナーは、内容、文章、イメージだけをいただいて、全体の構成を考える、マーケティングの要素も考えながらデザインすることがちょくちょくあったので、シェアします。

というか、マーケティングの基本を持っておくとそれだけでwebデザイナーとしても付加価値になるし、デザインのUXも考えられるので、勉強して損はないですよ!(`・∀・´)

 

 

 

 

そもそもLPとは?

 

LPとはランディングページの略です「入り口ページ」「集客ページ」とも呼ばれますが、

webマーケティングで使われるランディングページとは訪問者のアクションを誘導することに特化した縦長のレイアウトのページのことを多く指します。

どうしてLPを作るのかと言えば、その方が商品がよく売ることができるからです。

たとえば化粧水を買おうと思ってググったら、化粧品の会社のホームページに行き着いたけど、化粧品が欲しい人にとっては会社概要とかの情報はちょっとどうでもよかったりで、それよりも、その商品の具体的な情報の方が欲しい優先度高いんですよね。

なので、一つの商品に対する詳しい情報が載ってるページ(LP)を作ることで、商品を買ってもらう確率を上げよう!という目的で作られます。

 

売り上げUPのLPには型が存在します。

 

実際のLPをいくつか見ると型が見えてくると思います。

LPアーカイブというサイトを参考にしています。

なんとなく流れは共通している部分があり、手っ取り早いのはその要素をその流れで入れていくといいと思います。

一口にLPと言ってもLPで達成したい目的やジャンルは幅広いので、今回は商品を購入してもらうを目標として基本的な型は

  1. 私たちはこんな商品を売っています
  2. あなたはこんなお悩みがありませんか?
  3. 実はそれってこれが原因なんですよ。。。
  4. でもこの商品ならその原因を解決できますよ!
  5. この商品のこだわり、ポイントはこんな感じです!
  6. 他社の商品と比べてもこんなにすごいんです!
  7. ほら!使ったみんなもこう言ってますよ!
  8. 今ならこんないいことがありますよ!ぜひ買ってね!問い合わせてね!

簡単にざっくりいうとこれです。この順番のこの型が基本だと思います。前提として、最後まで離脱せずに読んでもらわないといけないので、この流れです。以下この型について具体的に解説していきます。( ´ ▽ ` )

 

1.ファーストビューで9割わかるようにする

 

私たちはこんな商品を売っています!のところですね。

 

ページを開いて、スクロールしないで見える部分で、ファーストビューといわれるのはこの部分です。今回はLPアーカイブさんから見てみると、

こんな感じですね!だいたい内容がわかりますよね

 

このデザインで意識するべきは

ターゲットに響く見せ方になっているか

でして、ターゲットと同じ年齢層のモデルを使ったり、デザインの色なども意識すると良いです。とにかくターゲット層が食いつく見せ方を考えるべきです。

同じような商品を売っているLP、同じような年齢層のLPのなどを参考にしつつ作っていきましょう。

あとはファーストビューの部分で商品の値段も入れたり、お問い合わせのボタンの設置も効果ありです。値段って買い手からしたら割と重要ですし。問い合わせられる、すぐ買えそうという購入までのステップの低さもアピールできます。

ここでターゲットが

お客さん
なるほど、パッと見、自分が求めてるものっぽいにゃ

思ってくれたら理想です!

 

デザインのポイント

ファーストビューのデザインのポイントは

人間の視線が集まりやすいのは幅、高さそれぞれ3等分した時の重なる部分です

以下画像だと、ピンクの四角の部分ですね。

 

特にモデルを使う場合、この点に顔がくるようにデザインを作るとより効果的です。

 

 

2.悩みを理解し、共感部分を作る

 

あなたはこんなお悩みがありませんか?の部分です。

そもそもどうしてこの商品が欲しいのかな?という、お客さんの気持ちを考えて、こんな悩みですよね?というのを打ち出します。この辺のやつですね

 

 

 

お客さん
そうそう〜〜〜まさにこの悩みだにゃ〜

って思ってもらえたらいいですね!だって日常生活でも、わかるわかる〜!の共感部分、共通点ってグッと興味が出ますもんね(^_^)

デザインのポイント

ここは悩みの部分なので、それが文字以外でも伝わりやすいように、寒色(青系)を使ったり、困った顔のモデルを入れたりするとわかりやすいです。

 

 

3.悩みの原因を解説する

 

実はそれってこれが原因なんですよ。。。の部分です。

商品に興味のある相手の悩みに対して、どうしてそうなってるのかを解説していきます。原因を知ることによって、どう解決したら良いのかの道筋を作ります。

 

 

当たり前ですが、お客さんは商品を購入することによって、自分が今よりいい状態になることを求めています。ここがお客さんの興味の根本にある強い部分で、この商品を買うことによって本当に自分がいい状態になれるのかどうかを納得させるためのステップです。ここはステップを踏んで押し出したほうがいいので、悩みの原因を解説があるとより納得してくれやすくなります。

お客さん
へ〜〜この悩みはそういう理由だったんだにゃ〜〜

デザインのポイント

文字での説明がどうしても多くなりがちなエリアなので、強調したい言葉を大きくしたり、色を変えたりしましょう。そうすると、より読まれやすくなります。

 

 

 

 

4.商品が問題解決につながることを解説

でもこの商品ならその原因を解決できますよ!の部分です。

 

お客さんは今よりいい状態になることを求めているので、それを納得させるための次のステップです。

以前の内容を絡ませ、この商品は問題解決につながるものということを提示します。

お客さん
お!!この商品なら悩みが解決できそうだにゃ!!

 

デザインのポイント

悩み(マイナス)からの解決(プラス)に切り替わる場面なので、メリハリをつけるために、大きく商品を出したり、明るい表情のモデルを使うと良いです。上の画像の感じですね。

 

 

5.商品の差別化をする

この商品のこだわり、ポイントはこんな感じです!の部分です。

 

お客さんに、買うならこの会社のこの商品ですよ!

さらに他社の商品と比べてもこんなにすごいんです!の部分を入れて、他社の製品とどう違うのか、具体的に提示して差別化が測れるとよりいいですね。

 

デザインのポイント

デザインの4大原則の反復を使いましょう。

例えば箇条書きで説明したい部分や、番号をつけて順番に説明する時、まとまり、統一感の出るように同じ要素を使いましょう。この部分ですね。

 

お客さん
なるほど、この会社のこの商品が良さそうだにゃ〜〜〜
お客さん
う〜〜ん、でもでも、本当に買っていいのかにゃ?まだちょっと不安だにゃ

 

6.お客さんをより安心させる

ほら!使ったみんなもこう言ってますよ!の部分です。商品に対する効果は十分に伝わったとして、本当に大丈夫なのか?というお客さんのもつ不安を丁寧に取り除いていく部分です。

 

不安を取り除く項目は具体的には

  • 実際に使って見たユーザーの声
  • 商品の使い方
  • 商品注文から到着までの流れ
  • Q&A

も当てはまります。

お客さん
なるほど〜〜〜他のみんなもそう言ってるなら安心だにゃ。

 

 

7.商品購入

今ならこんないいことがありますよ!ぜひ買ってね!の部分です。

その場で買ってもらえるように、「今なら●%OFF!」とかの期間限定感とか数量限定感もつけるとなおいいですね。

デザインのポイント

購入ボタンや、お問い合わせボタンは、行動を促進する赤系がよいです。赤とか、オレンジを使うといいですね!

 

 

気をつけること

 

適度なボリュームのものを

めっちゃ説明して、長ければ長いほどCVが上がるというものではありません。むしろ離脱を考えたら、長いほうが難易度が高くなる場合もあります。

今回は基本の型として紹介させていただきましたが、決して全てを盛り込む必要はなく、商品を売る側やその商品そのものによって適度な情報ボリューム、長さは見極めていくべきです。時には項目を削りましょう。

既存のデザインをよく観察する

なんども繰り返しになりますが、LPアーカイブピンタレストでLPの観察を行いましょう。同じような商品、同じようなユーザー層のデザインを参考にします。もちろんまるパクリはアウト〜!ですが、完全オリジナルもまたアウト!なのです。大手企業ならプロフェッショナルが手がけているものが多いです。ちゃんと売れているもの、結果が出てそうなものから参考にするようにしましょう。

 

以上です!もしLP制作でお困りの方がいらっしゃいましたら、こちらからお問い合わせもどうぞ!制作の相談承っております。(`・∀・´)