ランディンページ(LP)で見やすいデザインが作れる人と作れない人の違いは何か?

ランディングページの構成や情報量は十分だけどデザインのおこすと何故だかしっくりこない。
見栄えはいいけど、「なにか足りない、加えたい」「う~ん」という気持ちになる。

それは、なぜか?

余白(マージン)が上手く使えていないのとジャンプ率の効果が弱いのが原因かもしれません。

過去ご紹介しているデザイン選も今回のテーマの参考になるので確認してみてください。
【関連記事】
【厳選】化粧品(コスメ)のランディングページ(LP)ファーストビューデザイン7選
【化粧品・コスメ】ABテスト用のランディングページ(LP)ファーストビューデザイン5選+1選
【年齢訴求別・5選】健康食品(ダイエット)のランディングページ(LP)ファーストビューとCVエリアデザイン

それでは、2つの手法をかじってひと味違うデザインを身につけてみましょう。

余白(マージン)とは?活用の仕方は?

世間のデザイン論では、余白(マージン)を活用することで、文章の認識率が20%程上がるそうです。
効果的な余白(マージン)には4つの考え方があり、ランディングページ(LP)でも応用できるのです。

レイアウトマージン

※画像はR&Aヘアミルクのランディングページ(LP)のキャプチャ

ざっくりコンテンツ全体のバランスを整えるマージンです。
ランディングページ(LP)なら左右を一定のマージンで間隔を取ります。
ウェブサイトのCSS(margin : 0 auto;)ですね。

ビジュアルマージン

※画像はR&Aヘアミルクのランディングページ(LP)のキャプチャ

画像まわりのマージンです。
ランディンページ(LP)がほぼ画像なので、対象画像の天地を取る時に活用します。

コンテンツマージン

※画像はR&Aヘアミルクのランディングページ(LP)のキャプチャ

文章の固まりごとのマージンです。
ウェブサイトのCSS(margin:20px auto;)と考えてください。

テキストマージン

※画像はR&Aヘアミルクのランディングページ(LP)のキャプチャ

行間です。文字で天地を取る時にも活用します。

ジャンプ率とは?活用の仕方は?

デザイン全体を通して余白(マージン)を活用して要素同士の良い距離感を整えればOKではありません。余白(マージン)が効果的に使えてもテキストが同じ大きさでは、弱々しいデザインに仕上がるからです。

ここで活用するのがジャンプ率です。

ジャンプ率は、一番大きい文字と一番小さい文字の割合と考えてください。
程よい割合で文字の大きさを整えるとバランスが良くなり、ジャンプ率独特の効果で訴求テキスト大胆なデザインで仕上げる事ができます。

※画像はR&Aヘアミルクのランディングページ(LP)のキャプチャ

余白(マージン)が文字認識をアップさせ、ジャンプ率で訴求を大胆に伝える。このダブル効果がランディングページ(LP)では有効なのです。
今すぐ身につけるにはバナーデザインから始めましょう。

なぜ、バナーデザインから始めるのがいいのか?

ウェブサイトと違い、ランディングページ(LP)のデザインは縦長でデザイン量が多すぎで、いきなりバランスを取るのが難しいです。情報量が限られたバナーデザインの中で試すのが良いかと思います。

※画像はR&Aヘアミルクのランディングページ(LP)のキャプチャ

上の画像は全ての余白(マージン)とジャンプ率を書き込んだものです。ランディングページ(LP)デザインはこのような余白(マージン)とジャンプ率で複雑に構成されています。ウェブサイトのCSS(line-height)と考えてください。

スペースと情報量が限られたバナーデザインで余白(マージン)とジャンプ率の効果的なノウハウを数多く身に付ければ、ランディングページ(LP)のデザインでも応用対応スピードが上がると思います。冒頭でお伝えした「なにか足りない、加えたい」「う~ん」といった手がつけられない状況は格段に減ると思います。

さらに、構成の段階から考えてみるのも問題解決につながるかもしれません。
【関連記事】
良い構成のCVエリアのアイデアをいろいろと考察してみる
デザイナーとしてひと味違うランディングページ(LP)構成案の制作方法
【年齢訴求別・5選】健康食品(ダイエット)のランディングページ(LP)ファーストビューとCVエリアデザイン

【厳選】化粧品(コスメ)のランディングページ(LP)ファーストビューデザイン7選

2018.05.20

【化粧品・コスメ】ABテスト用のランディングページ(LP)ファーストビューデザイン5選+1選

2018.06.24

【年齢訴求別・5選】健康食品(ダイエット)のランディングページ(LP)ファーストビューとCVエリアデザイン

2018.06.17

いかがでしょうか。余白(マージン)とジャンプ率を駆使して、ランディングページ(LP)デザインを身に付けていきましょう。