ランディングページデザインにおける「余白」の使い方

 

グラフィックデザイン、Webデザインにおいて、「余白」の設計は重要な要素です。
特に「余白」の有無は「見やすさ」を大きく左右します。

 

 

余白の効果的な活用とは

 

「余白」を効果的に活用することで、

 

 

・ 情報のまとまり感が出る。
特に文字やテキストでは余白は非常に重要ですね。

 

 

・ 情報やコンテンツの切り分けを明示できる。

 

 

 

 

 

 

また、一方で、「余白」があることで、
高級感を出すことができるということもよく言われていることかと思います。
コンシューマー向けに高単価のライフスタイル商材を扱う会社さんのサイトでは特に重要な要素ですよね。

 

 

そういった会社さんのブランドサイトなどはよりコンセプチュアルである必要性があるため、極力要素を減らして、「余白」を大きくとることで、
コピーやビジュアルを立たせていくことが多いです。

 

 

 

 

 

 

では、ランディングページにおいてはどうでしょうか？
ランディングページは縦長のページであり、下にスクロールし続けてもらいたいため、「必要以上の余白を設けない」ということがベースの考え方として重要だと思います。

 

 

 

ひとつひとつのコンテンツに情報を凝縮し、できるだけコンパクトかつ、
インパクトがあるように見せていくことが大切です。

不必要な「余白」があることで、コンテンツが長くなってしまうと、その分だけ、スクロールの負荷がかかったり、
情報が頭に入ってこない可能性があります。

 

 

 

また、ブランドサイトのように、ユーザーが指名検索で訪れる（つまり、わざわざ見たくてくる）ものではなく、
必要にかられて他社と比較しながら見られているランディングページにおいては、不必要な「余白」があることによって、離脱率が高まる可能性も出てきます。

 

 

 

ランディングページ余白デザイン例

 

 

例えば、ランディングページでの余白活用事例として以下のような使い方があります。

※テレビ会議システムサービスを展開されているエイネットさんのランディングページのケースです。

 

 

 

不要な「余白」は設けない、ということを念頭に置いた上で、
「見やすさ」や「商品・サービスごとの世界観」を踏まえて適切な「余白」をデザインしていくことが重要です。

 

ランディングページデザインにおいての基本的な考え方としては、「余白」はできるだけ少なく、という前提ですが、
ランディングページは問い合わせをするためのものであることと同時に、ネットでのユーザーとの最初の接点となるページですから、
どのようなブランドイメージを伝えていくかということもとても大事です。

 

第一印象が悪ければ、購入やリピートなどのその後のアクションにも大きく影響していきますよね。

 

 

 

そうしたブランドイメージも重要視した場合、やはりその企業ごとの商品やサービスに合わせて、適切な「余白」の調整が必要になります。

 

 

 

たとえば、高級感を出したいランディングページにおいては、ある程度の余白は必要です。（※ただし、必要以上に多めにとらない）

 

 

 

一方で、にぎやかな印象を出したいランディングページの場合は、より情報の密度をあげていくために、コンパクトに。

 

 

 

 

前述の例は、極端な例ですが、ランディングページならではの「余白」の取り方を意識した上で、調整するのとそうでないのとでは、最終的な仕上がりが大きく変わってきます。

 

 

 

もちろん、デザインの要素は「余白」だけではないので、ユーザーの年齢などによっては、文字の大きさを変える必要があったり、ブランドイメージに合わせたカラー選定だったり、多くの要素が必要なのですが、「余白」の調整を変えるだけでも、ずいぶん見やすくなり、コンバージョンの上がるランディングページへと変化する可能性があります。

 

 

 

そうした一要素として、少し感覚的な話にはなってしまいましたが、今回のテーマについて考えてみました。

 

 

>> 前回の記事　ランディングページの上手な活用法