Design Stock

デザインのアレコレ

  1. HOME
  2. レイアウト
  3. レイアウトにおける余白の大切さをまとめてみた

レイアウトにおける余白の大切さをまとめてみた

レイアウトを決める上で大切なのが余白の使い方です。

「どこに何を配置するのか」という視点以外に「余白をどのように作るか」という視点はレイアウトを決める上で非常に重要になってきます。

なぜなら余白の使い方次第で、読み手に与える印象が大きく変わってくるからです。

 

今日はデザインの基礎知識として、余白がどのような役割を担っていて、どのような印象を読み手に与えるのか図を用いて説明したいと思います。

また、余白を上手に活かすための重要な考え方もご紹介したいと思います!

余白の役割

余白とは紙面における「何もない場所」のことです。

デザインをしていれば必ずと言っていいほど余白が生まれます。一見余白があると、

「何かを埋めなくちゃ!」

と考えてしまいがちですが、要素をぎっしりと敷き詰めてしまうとむしろ読み手に窮屈な印象を与えてしまいます。

余白にはきちんと役割があるため、「余白=無」と考えるのではなくしっかりとその役割を理解し、余白を活かすことで読み手に与える印象を意識することが大切です。

 

余白の役割は大きく2つです。

  • 要素同士を結びつける
  • 重要な要素を強調する

f:id:mtk-hcwj:20180228200454j:plain

余白の役割はデザインの基本原則とも言える「近接の原理」と密接に関わっています。

上図を見てわかる通り、グループ化された情報は同じ種類の情報の固まりだと脳は認識し、より正確に伝わります。

 

これは大きく余白を取ることによって他の要素との対比が生まれるため、独立の存在して認識する、と解釈することもできますね。

このように余白には「要素同士を結びつける」という役割があります。

 

f:id:mtk-hcwj:20180228224617p:plain

出典:http://commte.net/blog/archives/4547

また、上図を見てみると左右の紙面で受ける印象が異なるのを読み取ることができると思います。

左側は余白が少なく、「楽しそう」「にぎやか」といった印象を受けます。

一方、右側は余白を大きく取ることによってゆったりとした高級感のある紙面に仕上がっています。

このように要素自体を大きくすることによって強調することもできますが、それとは反対に余白を大きく取ることによって「重要な要素を強調する」こともできます。

 

様々な余白のあり方

f:id:mtk-hcwj:20180228231310j:plain

上の図は灰色と白が1:1になるようにレイアウトされています。

余白に文字情報を入れるとすると、ビジュアルと文字の組み合わせだけでも相当数あることがわかります。

文字要素が少ないほど余白の使い方に幅が効くので、空間を演出しやすくなります。

 

余白デザインのポイント

さて、余白をデザインするときにはどんなことを意識すればいいのでしょうか?

余白による空間の演出において大切な考え方は以下の3つです。

中央揃えを避ける

f:id:mtk-hcwj:20180228232005j:plain

上図を見てください。

左側は「中央揃え」、右側は「左揃え」でレイアウトされています。

中央揃えの方は、紙面に安定感があるものの左右の余白がソフトになっており緊張感やメリハリがありません。

余白を活かすには空間の広がりを演出する必要があるため淡白な印象を受けてしまいます。

一方左揃えの方は、紙面上に密度の高い部分と低い部分のコントラストが生まれメリハリがついています。

 

中央揃えに必ずしもしてはいけないわけではありませんが、

中央揃えがもつ効果を意識し、中央揃えによって演出したい印象がある場合に使うよう心がけてください。

余白を活かす場合は基本的に「左揃え」「右揃え」「上端揃え」「下端揃え」です。

 

端から揃える

空間的な広がりを演出するには、各要素を端から揃えることが重要です。

それにより左右不均等な余白ができ、要素のある箇所と余白の箇所が明確になり空間の広がりが生まれます。

なお、デザインでは要素を揃えるのが原則ですが要素をランダムに配置してしまうと紙面の重心がはっきりしないため間の抜けた印象になってしまいます。

注意しましょう。

 

空間の逃げ場を作る

最後のポイントは「空間の逃げ場を作る」です。

紙面に余白を設定しても、紙面の四隅全てに要素を配置してしまうと息苦しい印象になってしまいます。

必ず四隅のうち要素を配置するのは2〜3箇所にし、空間の逃げ場を作ることが大切です。

そうすることにより、紙面に安定感を持たせつつ落ち着きのある印象を与えることができます。

 

最後に

いかがでしたでしょうか?

余白の使い方はデザインの基礎的な知識ですが、余白をうまくデザインできるかによって読み手の印象は大きく変わってきます。

普段のデザイン制作では意識的に余白のあり方を考えることが大切です。

ぜひ、みなさんも今日ご紹介したことを意識してレイアウトしてみてください。

 

今日はここまで

バイバーイ