【初心者向け】図解!余白をデザインするコツ|デザインの基礎

余白 ウェブデザイン
スポンサーリンク

デザインで重要な余白
余白を意図的に操れると、デザインがぐっとよくなります。

スポンサーリンク

デザインにおいて、余白とは

余白とは、要素が配置されていない空白のスペースのことです。

「余ったスペース」とも捉えることができますが、デザインにおいて意図的に余白を作り出すのは非常に重要です。

余白の役割

余白には、要素を関連付けさせる、グループ化の役割重要な要素を強調する役割があります。

つまりデザインの4原則である近接強弱(コントラスト)と密接な関係にあります。

デザインの4原則を詳しく知りたい方はこちらの記事もご覧ください↓

【図解】基礎|デザインの4原則を徹底解説!【デザイナーになりたい初心者向け】
デザインはセンスじゃありません。デザインには4原則があり、それに沿ったデザインをするだけで非デザイナーでも格段に良いものを作ることが出来ます。そんなデザインの4原則を図解して詳しく紹介していきます。独学でデザインを勉強しているあなたに身につけてほしい知識です。

 

例えば、下の図を見てください。

余白の例:matomebox cafe名刺

この図の中で、「MATOMEBOX CAFE」という文字が一番強調されて見えますよね。

これは単に太字だから、という理由だけではありません。

要素の周りに大きな余白があることで、他の要素と対比が生まれ、独立した存在感を演出することが出来ます。

また、図の下3行の文字のように、要素同士の余白を少なくすると、一つのグループ(関連した情報)として認識させることが出来ます。

レイアウトする際、強調したい要素があるときは、大きいサイズで配置するだけでなく、余白を広くとることも要素を目立たせる効果的なテクニックです。

 

余白が与える印象

余白の大きさによって、見る人に与える印象が変わってきます。

余白が少ない場合

余白を少なくすると、にぎやかで元気な印象楽しげな印象を演出することができます。

例えば、スーパーのチラシは、文字や商品の画像がびっしり掲載されていて、いかにも賑やかな印象を受けますよね。

参考:シェフースーパー

参考:イトーヨーカドー|店舗チラシ

 

ピザの商品一覧

上の図をみると、紙面が明るくにぎやかで、庶民的なレストラン、親しみやすさなども感じます。

 

余白が多い場合

余白を多くとると、高級感ゆったりとした印象を演出することができます。

 

ピザ商品チラシ:余白が広い紙面

余白が少ないものと見比べてみてください。
一つ一つが際立っており、沢山商品が並んでいたデザインより高級感を感じることができます。

 

空間の逃げ場をつくる

余白を設定する上で、空間の逃げ場をつくると空間的な広がりを演出することができます。

適度に余白をつくっても、紙面の四隅すべてに要素を配置してしまうと、空間の逃げ場がなくなってしまい、場合によっては窮屈な印象緊張感を与えることになります。

※意図的に緊張感を演出する際は効果的です。

 

四隅すべてに要素が配置されている例

 

外への広がりを演出する際、要素を配置する場所を四隅のうち2〜3箇所に絞りましょう。
※1点のみにしてしまうと、重心が偏って安定感がなくなってしまいます。

意図的に空間をあけることで、安定感をそこなわず、空間的な広がりを感じるレイアウトにすることができます。

 

3点にのみ配置したデザイン例

2点にのみ要素を配置したデザイン例

 

おすすめ本

今回参考にさせていただいた本はこちら↓

参考書籍:デザイン入門教室|著者:坂本伸二

 

こちらの本では、今回紹介した余白の設定方法だけでなく、デザインの4原則や様々なレイアウト方法、書体の詳しい話、色の使い方まで網羅されています。

グラフィックデザイン・webデザイン問わず、非常に参考になる知識がたっぷり書かれていて、これ一つ持っておくとアイデアの引き出しにもなります。
デザイン初心者でも現役で活躍している人にも非常におすすめな本です!

タイトルとURLをコピーしました