余白が大切？LP制作に重要なデザインの空間作りについて

デザインにおいて余白とは「ホワイトスペース」と呼ばれ、テキストやビジュアルなど何もされていない白い部分のことを指します。

制作の途中で余ってしまったスペースと認識されがちですが、余白部分を上手く取り入れることでデザイン全体にさまざまな効果を生み出してくれます。

余白には密度と関係性の異なる4つの種類があります。種類を把握して、使い分けることでより上述したような余白の効果が期待できます。

必要性や種類を把握してから、実際にLP制作で余白を活用するにはどうすれば良いのでしょうか。

ここでは余白を活用した「近接」「整列」「強弱」「反復」の4つの裏ワザについてご紹介します。
 
まずは近接です。
これは線ではなく、空間でグループ分けする方法です。人間は近くに並べられたものを意識せずにグループ化して考える傾向にあります。近くに配置されているものは関係性が高く、遠くに配置されているものは関係性が低いと感じます。この心理を利用すると、ユーザーに言葉で伝えなくても関係性を伝えられます。
 
次は整列です。
デザインに馴染みがない方でもワードやエクセルを使っていて、文字揃えについてご存じの方は多いでしょう。この文字揃えには「左揃え」「右揃え」「中央揃え」「等間隔揃え」の4つがあります。デザインにおいて、この揃えるというテクニックは非常に重要です。何か1つを左揃えにした場合は、全体的に左揃えに統一する気持ちを持つと良いでしょう。これによって見た目が整理されるので、情報を簡単に得られるようになります。

次は強弱です。
「この文字をしっかり目立たせたい」
このように思った時、みなさんはどのような方法をとるでしょうか。確かにその文字だけを大きくすれば、嫌でも目立つでしょうが、このようにしなくても余白を上手に活用すれば同じフォントスタイルでも目立たせられます。これによってユーザーはどの情報が大切なのか、また何が大切ではないのかを取捨選択できるようになります。
 
最後は反復です。
これはここまでご紹介してきた3つのテクニックのうち、1つのテクニックを反復して使ってみる、という方法です。そのため、この方法は「近接」「整列」「強弱」の方法を試した後、最後にチャレンジしてみると良いでしょう。この方法を使うことによって、ページ全体にリズムを与えられます。1種類のルールだけではなく、いくつかを同時に使ってそれを繰り返してみると良いでしょう。

ここでは余白を作る際に意識したいポイントについてご紹介します。
それは「上下左右の余白を均等にする」「内側の余白は外側の余白より狭くする」「同じグループ同士を近づける」の3つです。それぞれのポイントについて詳しく解説します。
 
1つ目のポイントは上下左右の余白を均等にすることです。
上下左右の余白を均等にすることによって見た目が整ってきれいに見えます。ここで注意したいのが、数値に惑わされないことです。

例えば、CSSを記述していて、paddingを30pxに指定したとしても、中に入るコンテンツが角ばったものなのか、輪郭線が掴みにくい文字なのかによって見え方は違ってきます。そのため、最終的には目で見て均等に見える指定を意識すると良いでしょう。また、この余白が狭すぎるとごちゃごちゃして窮屈な印象を与えてしまうので、最低でも文字一個分以上の余白をとっておくことをおすすめします。
 
2つ目のポイントは内側の余白を外側の余白より狭くすることです。
やはりデザインをしてしていると、ユーザーには窮屈な印象を持ってもらいたくないですよね。そこで内側の余白は外側の余白より狭くすることを意識しましょう。逆に内側の余白が外側の余白より広くなってしまうと、ユーザーに散らかった印象を与えてしまいます。
 
3つ目のポイントは同じグループ同士を近づけることです。
構成上同じグループになるコンテンツを接近させ、別グループのコンテンツは逆に余白を大きく取ります。
これは人間の「無意識的に集まっているものを同じグループとして認識する」という心理を利用しています。例えば、見出しの補足的なキャッチコピー、見出し、本文のような構成になっている場合、見出しの補足的なキャッチコピーと見出しを関連性の高いグループだとみなし、本文との間より余白を狭く取ります。

どんなページでも余白を取り入れ過ぎてしまうと、スペースが空いている中身のないページに見えてしまいます。あくまでも有効的に利用し、読みやすいコンテンツにするために取り入れる手法の一つです。またLPでは画像を多く使用するため、余白を取り入れることでより視認性が高まったページになります。テキスト間やコンテンツ間に取り入れて、誰が見ても読みやすいページを制作しましょう。