売れるランディングページのデザインって?コツと基本ノウハウの完成版

ランディングページ(LP)は、対象や目的に合わせ、何通りものデザインを施すことができます。でも自由度が高いからこそ、どんなデザインにするのが正解なのかわからなくなるもの。この記事では、ランディングページ(LP)のデザインを制作する基本とコツをご紹介いたします。

ランディングページ(LP)制作の事前準備をしよう


ランディングページ(LP)は、いきなり中身を作り始めても、精度の高いページにはなりません。
まずは事前準備を整える必要があります。
ここでは、実際にLP を制作する前に、用意しておかなければいけない事項を3つご紹介します。

▼そもそもLPとは何かを知るなら……

【初心者向け】結果につながる!ランディングページの作り方|LPの基本とコツ

①ターゲットの分析をする

まずそのページを訪れるユーザーは、一体どんな人なのだろう?と思考を巡らせるところから始めましょう。
ここで決定しておきたいユーザー像としては以下のようなものが挙げられます。

・年齢
・性別
・職業
・趣味や関心
・年収

こういったところから、ユーザーがどんなデザインを好み、どんな悩みを抱えているかを紐解いていきます。
伝えたい、売り出したい商品やサービスが、ユーザーの悩みを解決できるものだという訴求ができればOKです。

②ランディングページ(LP)の目的を決める

作ろうとしているLPの、真の目的は何でしょうか?
目的が曖昧なままだと、オファーボタンへ誘導する文言や、デザインにまでズレが生じてしまいます。
一般的なLPの目的としては、以下のようなものがあります。

・商品購入
・会員登録
・メルマガの登録

目的によって、文章の構成や画像選定などの作業が大幅に変わります。
例えば最終的に商品の購入数を増やしたい場合、
・ストーリー仕立てのテキストにし、ユーザーの不安をひとつひとつ解消していく
・不安解決をサポートする商品を、わかりやすい見た目にする
などの作業が発生します。

③商品・サービスの理解を深める

一番大切なのは、自分たちが売り出そうとしているものを、隅から隅まで理解出来ていること
どんな効果、変化があるのか。
ユーザーの悩みは解決されるのか。
評価や口コミ、含まれている成分など、ユーザーにとって価値のある情報を漏れなく把握しておきましょう。

ランディングページ(LP)の基本的な構成って?


ランディングページ(LP)は、基本的な構成をしっかり理解して、それに沿った適切なデザインを意識するのがポイントです。
ここでは、LPの構成とデザインの考え方を簡単にご紹介いたします。

基本的なランディングページの流れ

LPは、情報量がギュッと詰まっているページなので、段階に分けての制作が最も進めやすいです。
主に3段階のグループがあります。

・視覚優位のFV(ファーストビュー)
・情報を上手く伝える必要のあるボディコピー
・確実にコンバージョンに繋げたいクロージング

以上の三段階それぞれの、デザインの捉え方を紹介していきます。
デザインひとつで読了率やクリック数などが、変化してしまうので、特に慎重にデザインを考えましょう。

①デザインの腕の見せ所、FV(ファーストビュー)

ユーザーに最も見られる部分が、ページを開いたときに見える範囲のFV(ファーストビュー)。
インパクトのあるキャッチコピーとメインキャッチ画像が、コンバージョン率を変えると言っても過言ではありません。

キャッチコピーは、思わず目を引くキャッチーな文言がおすすめ。
よく使われるのは問題提起系と、ユーザーがドキッとするような啓蒙系
例:「最近~~のような悩みを抱えていませんか?」→共感できる文章
  「~~の対策していない?実はそれ逆効果なんです」 →ユーザーが自分のことかも!と思うような文章
メインキャッチ画像には、分かりやすい数字(〇〇賞受賞など)などを取り入れて、ユーザーの目に思わず止まってしまうような印象を加えるように意識しましょう。

②文章と画像の組み合わせでより魅力的な訴求を作り出す、ボディコピー

最も気を遣ったライティングとデザインを意識する必要のあるボディコピー部分。
ビフォーアフター画像や、ユーザーを掻き立てるライティングによって、ユーザーに安心感を与えましょう。

特に商品を購入することで得られる利益を、機能的ベネフィットと情緒的ベネフィットの二つの観点で提供しましょう。
機能的ベネフィットは、物理的に得られる効果や成分など。
情緒的ベネフィットは、商品によってこんな悩みが解決できる!という満足感や達成感、幸福感など。

また信頼性の高い商品というアピールをするために、口コミ画像などをいれることもおすすめ。
しかし画像を何枚も貼っては、スクロールする気がなくなってしまい、読者にとって離脱しやすい部分となってしまいます。
画像が続く場合は、gifとして一枚のクリエイティブにまとめると、すっきりとしたデザインになります。

おすすめgif作成サイト
https://www.bannerkoubou.com/anime/

③コンバージョンに直結する、クロージング

商品購入の最終後押し部分、クロージングは凝ったデザインで勝負したいところ。
リンクに繋がるオファーボタンのデザインは、特に重要なものなので力を入れたいですね。

クロージングの後押しになる、ユーザーの4つのタイプをご紹介します。
ユーザーは行動するきっかけに合わせて「なぜ・何・どうやって・今すぐ」の4タイプに分かれます。

なぜタイプは、メリットや買う理由をはっきり示すと安心して商品を購入するタイプ
なにタイプは、根拠やデータを示して、信頼性のあるものだとわかると購入するタイプ
どうやってタイプは、取るべき具体的な行動を示すと、素直に購入できるタイプ
今すぐタイプは、結論を急いで今すぐ〇〇しましょう!と言われると行動できるタイプ

この4タイプを網羅できるような文言を、オファーボタン前に置いてみましょう◎

また、オファーボタンにはアニメーションがついていると、さらにユーザーの目に留まります。
色に気を使うのはもちろん、動きをつけるだけで新鮮なLPに仕上がります。

ユーザーが注目しやすいデザインって?


構成やライティングが分かっても、肝心のデザインはどうすればいいの?という疑問が残りますよね。
ここではデザインのイロハを簡単にご紹介いたします。

色は効果的に使ってメリハリを

色なんてとにかく目立つ色ならいいのでは?と安直な考えに陥りがちですが、実は奥が深いのです。
ただ派手な色というより、周りの色との相性の良い色をしっかり理解して使用するべきです。

代表的な色の効果に「補色」というものがあります。
補色とは、色の相環図で正反対に位置する関係の色の組合せのこと。
例えば赤と緑や青とオレンジなど、お互いの色がはっきりと主張する同士の色は、目に留まりやすくなるのです。

オファーボタンの色デザインを、補色で統一してみましょう。
また背景色との区別をはっきりするさせるために、ボタンの外枠を黒や白などで囲むのも、工夫のひとつです。

どんな画像を使用する?

人間の心理的に「人間の目」は強烈な意味を含みます。
たとえ目の画像だとしても、監視されているような、どこかドキッとした気持ちにさせるのです。
なので問題提起や啓蒙の部分で、表情の分かる人の画像を使用するのもひとつの手です。

また画像上のテキストは、近接・整列・反復・コントラストの4つを意識しましょう。
テキストを読む際にしっかりと、目線の導線を作ることが大切なので、位置はバラバラでも左端をそろえるなどの工夫が必要です。
また書体をコロコロ変えるのも、統一感がないので基本NG。
伝えたいテキストは太字にするなどの、コントラストも大事です◎

デザインに自信がないという方は、ココナラがおすすめ


LPやデザインの知識がないと、本当にこのLPで結果に繋がるのかと不安になるもの。
どこか修復するにしても、どこをどう直せばいいのか全く分からない……。
そんなときに、あなたの役に立つのがココナラのサービスです。
ココナラには、LPに詳しい方やクリエイティブを作成する方など、LPデザインの悩みを解決できる出品が多数在籍◎
ここでは、ココマガ編集部おすすめの出品者をご紹介いたします。

構成、下層、LPもOK!Webデザインを提供します ヒアリングを重視して、柔軟な対応であなたの希望を形にします!

プロデザイナーが美麗LP作ります 特別価格30000円!おまかせデザインOK!

LP(ランディングページ)ヘッダー画像を作成します コピーライティングは得意だけど、デザインが苦手な方へ

Youtube・LP等の漫画シナリオ製作致します プロとしての経験を活かしてきちんとまとまった内容を書きます!

1カット〜対応します。SNSなどの撮影代行します 自宅での作業にお役立ていただきたいので、一時値下げします。

出張撮影・写真撮影代行いたします 〜プロが高画質一丸レフで撮影〜

ちょっとしたイラストが欲しいけど…にお応えします 【商用可】webやLP、広告などにちょっとイラストが欲しい方

凝ったデザインで、成果を上げる勝ちLPを作ろう


デザインは、アイデア次第で何通りも生み出せるもの。
だからこそ、自社が売り出す商品・サービスに一番合ったデザインを作る必要があります。
ココナラで、あなたの理想通りのLPを制作してみませんか?