デザイン紙面の余白は役割と考え方で変わる!安定感を演出するシンメトリーの使い方とは!

デザイン紙面の余白は役割と考え方で変わる!安定感を演出するシンメトリーの使い方とは!

デザインにおける余白の役割は、見た目の美しさを出すと同時に要素同士を分かりやすいグループとして成立させることです。考え方は、「余ったスペース」をどのようにするのかを考えるのではなく「余白を事前に計画する」ことです。それにより空間の広がりを見せることができます。

余白をしっかりと計画することで左右対称のシンメトリーを活かし安定感のある美しい紙面を演出できます。デザインレイアウトを行う上で、「余ったスペース」をデザインの一部として取り込み、シンメトリーデザインを演出する方法をここでは書いています。

初心者はもちろんのこと、デザイナーでなくても日々の業務でプレゼンテーション資料や広報を作る機会が多い方にも参考になると思います。

余白の設定で見た目を美しくするには!?

余白の役割と考え方でデザインにメリハリを!

余白を言い換えると「余ったスペース」になるのですが、余ったスペースを「何もしないデザインスペース」として見た目を成立させるには、余ったスペースへの役割を明確にすることが必要です。

役割を持たせないスペースにしてしまうと「ただ単に空いてしまったスペース」となり見た目を悪くしてしまいます。デザインレイアウトを考える際は、「何をどこに配置するのか」のみを考えるのではなく「どこに余白を作り成立させるか」という考え方を取り入れると仕上がりのイメージは大きく変わります。

余白は紙面上へ何も配置されていない空白部分を指します。この空白部分は何も配置されているものがない場合もありますが、裁ち落とし配置や背景を使う時に写真や画像類が配置されている場合もあります。

配置されているものがイメージを想像するような場合は、配置されている写真や画像類の目立たせたい部分ではない箇所を空白と見なして良いでしょう。

空白部分は普通に考えると余ったスペースですが、デザインをするときに意図的な余白の役割を考えることで「デザインの役割があるスペース」となります。

例えば、紙面に入れる情報を全て中央に配置すると左右に均等なスペースができます。このスペースが「デザインの役割があるスペース」です。この場合は、左右に均等なスペースができるため、バランスのとれた紙面になります。

これに対して、左右どちらかに情報を揃えると、反対側には余白ができます。これが「デザインの役割があるスペース」です。どちらかに揃えることで情報の密度が高い部分と低い部分ができ、紙面のコントラスト(強弱)ができるため、デザインの見た目は、メリハリがある状態になります。

コントラストについては以下の記事を参照してみてください。

「デザインはゲシュタルトの法則でグループ化が有効!綺麗な演出は「コントラスト」と「揃える」で決まる!」

デザイン紙面の余白は役割と考え方で変わる!シンメトリーは余白を活かした左右対称で安定感を演出する方法とは?画像-1

上図の左は、中央に揃えることで周りの余白が均等になるため、安定感がでてきます。しかし、この方法は余白が四方に均等になってしまい余白を広く確保することができません。余白の役割を活かすレイアウトには使いづらい配置方法です。

上図の右は、入れる情報を左に揃える配置をすることで右側に余白がでてきます。紙面の中に密度が高い部分と低い部分のコントラストができます。左揃えにすることで余白を広く確保することができます。このように紙面上の余白を計画的に確保すると、余白に役割を与えるレイアウトになります。余白の考え方は「紙面上に計画して余白を確保する」ということです。

また、余白の役割は紙面の演出をすることと同時に、各要素を余白を通して結びつける役割や強調したい部分を目立たせる効果があります。

デザイン紙面の余白は役割と考え方で変わる!シンメトリーは余白を活かした左右対称で安定感を演出する方法とは?画像-2

上図の左は、文字同士の空きを均等にした例です。見た目どの要素同士が関連しているのか分からない状態となっており、読み手にとって情報が取得しにくいです。

上図の右は、関連要素を接近させ、目立たせたい部分の周りに大きな余白を設定している例です。上図の左より右の方が情報を伝えやすい作りになっていることは一目瞭然です。

上図の右では、目立たせたい部分の周りを大きく余白にすることで、紙面上の各要素とコントラストがでるため、目立たせたい部分を独立した見せ方ができます。また、読み手には余白も1つのデザインとして認識できます。

これを人の声に例えると、にぎやかな空間で大きな声を発声しても、その声に気付く方は少ないことがあります。反面、静かな空間では声が小さくても部屋の中に響くことがあります。

デザインでも同じような考え方ができます。静かな空間は「広い余白」になり、一方で、にぎやかな空間は「狭い余白」という考え方になるでしょう。

デザインレイアウトを考える場合は、強調する要素を大きく配置することも1つの考え方ですが、逆の考え方をすると強調する部分の周りに余白を大きくする手法も効果的です。

余白の大きさにより与える紙面の印象は大きく変わる!

余白の大きさにより紙面の見た目は大きく変わります。これは印刷デザインだけではなく他でもあることです。

例えば、日用品を購入するスーパーマーケットを想像してみてください。安売りがメインのスーパーマーケットでは、たくさんの商品が所狭しと並び見た目が楽しそうなPOP類がたくさんあります。

繁盛して活気があるイメージを演出していると思います。これは、「にぎやか」と言っていいでしょう。余白の考え方でいうと、「余白が狭い」と言えるでしょう。

一方で、少し高級な日用品を取り扱うスーパーマーケットでは、商品と商品の間を適度に保っていたり、売り出したい商品は、その商品のみを目立つように周りには余計な商品は展示していなかったりしています。

また、商品棚も整然とジャンル分けされており綺麗に感じます。時間がゆっくり流れるような高級感を演出していると思います。これは、「広い空間」と言っていいでしょう。こちらは余白の考え方でいうと、「余白が広い」と言えるでしょう。

紙面デザインの場合でも同じように考えることができます。使う要素が同じでも余白が広い、狭いで印象は大きく変わるのです。

余白が広い、狭いを簡単に理解するには、余白が狭い場合、「勢いを感じる」、「楽しく感じる」、「元気に感じる」と覚えると良いでしょう。

逆に余白が広い場合は、「高級感を感じる」、「美しく感じる」、「イメージが強く感じる」と覚えましょう。

デザイン紙面の余白は役割と考え方で変わる!シンメトリーは余白を活かした左右対称で安定感を演出する方法とは?画像-3

上図の左は、余白を狭くすることで、にぎやかな紙面を演出しています。上図の右は、商品の間隔を広くとり余白を大きくしたことで、ゆっくりとしたイメージを紙面に演出しています。そうすることで1つ1つの商品が魅力的に感じます。

デザイン紙面の余白は役割と考え方で変わる!安定感を演出するシンメトリーの使い方とは!画像-4

上図の左は、余白を狭くして「にぎやかな」イメージを演出できています。

上図の右は、余白を大きくすることで「ゆっくり」としたイメージになり、高級感を感じ取れます。

上図の左右は同じ情報ですが、余白の設定でイメージは大きく異なります。

余白の空間演出は、デザインする情報が少ないから大きく配置すると、ただ読みにくい紙面になってしまいます。デザインする情報が少ない場合は、紙面上の空間を演出するデザインレイアウト手法を使い、余白に役割を持たせることを考えましょう。

ここでのポイントはデザインレイアウトした結果、余白ができた部分を調整するのではなく、最初から余白に役割を与えデザインしていくことです。

余白デザインの基本のポイントとは!?

ポイントその1「左揃え」「右揃え」「上端揃え」「下端揃え」!

余白に役割を持たせるには紙面の内容を「左揃え」「右揃え」「上端揃え」「下端揃え」にすることです。

ここで「中央揃え」がないのは、余白デザインすることが不向きだからです。最初に紙面中央に情報を配置してしまうと上下左右に均等なスペースができますが、広い余白の確保ができなくなります。他の要素もサイズが限られレイアウトの自由度も少なくなります。

一方、紙面の端からデザインレイアウトを考えると余白が広く確保できるため、紙面の空間的広がりを作ることができます。余白が広いということはその分、デザインレイアウトをさまざまな形で表現することができます。

デザイン紙面の余白は役割と考え方で変わる!シンメトリーは余白を活かした左右対称で安定感を演出する方法とは?画像-5

上図の左は、最初の情報を紙面中央に配置すると、上下左右の余白が均一になってしまうため余白を上手に使うことが難しくなります。

上図の右は、各要素を紙面端に配置することで、広い余白を確保できるためレイアウトパターンに広がりがでてきます。

ポイントその2「端から揃えて」制作すること。

端から揃えて紙面の空間的広がりを演出するには、上下左右のいずれかに余白が必要になります。

各要素を紙面の端から揃えるとその反対側では余白が確保され、一目に余白と明確にわかるようになります。余白が確保されることで、空間の広がりは一方向に定まります。その結果、広い空間と安定感を得ることができます。

反面、各要素の配置を自由にすると紙面の重心がどこにあるのか分からなくなり、余白に安定感がなくなります。結果、見た目が悪くなってしまいます。余白をデザインの一部として成立させるには計画性が必要です。

重心については以下の記事を参照してみてください。

「シンプルデザインは「反復・繰り返し」とダイナミックな「裁ち落とし配置」で重心を整えるのが決め手!」

デザイン紙面の余白は役割と考え方で変わる!シンメトリーは余白を活かした左右対称で安定感を演出する方法とは?画像-6

上図は、上下左右のいずれかに配置する要素の基準を定めて揃えると、余白へ向かう方向が一定になるため空間的な広がりがでます。そうすることで、紙面に安定感が生まれます。

上図の一番左の図は、配置する要素が上下にあり上部では左側、下部では右下にあり上下中央に空間的広がりがある場合、右上から左下へ余白の向かう方向が定まり安定感が生まれます。

上図の左から二番目は、左の図よりも情報量が増え、中央付近に情報が入る場合で、空間的広がりが右上と左下に余白の向かう方向が定まり安定感が生まれます。

上図の左から三番目は、情報量が多くなり配置する要素を左揃えとして、その中でも横幅の大きさがある要素が上下中央付近にある場合で、中央から右下と右上へと余白の向かう方向が定まり安定感が生まれます。

上図の左から四番目は、左右のどちらにも配置する要素があり、左側よりも多く右側に要素があり、上下中央付近の配置されている要素が左側にある場合で、空間が左上と右下にあるため、左上より中央右下へ、中央右より左下へと余白の向かう方向が定まり安定感が生まれます。

デザイン紙面の余白は役割と考え方で変わる!シンメトリーは余白を活かした左右対称で安定感を演出する方法とは?画像-7

上図は、各要素を揃えることなく自由に配置すると、余白の方向が一定になりません。上下の中央あたりに余白を分割してしまう配置要素があるため、見た目が、間の抜けたイメージになってしまいます。これでは、読み手にとって一目瞭然とは言い難い作りになってしまいます。

ポイントその3「空間の解放」を設定すること。

紙面デザインの空間的広がりを見せるには、どこかで「空間の解放」をしなくてはいけません。

紙面の中で余白を取り入れても紙面の四隅に何かしら情報要素が入ると四角で囲まれた窮屈なイメージになってしまいます。せっかくの余白デザインを台無しにしかねません。

「空間の解放」を行い、空間を最大限に活用するには、紙面の外側にもイメージがありそうな感じを演出しなければなりません。これを実現するには紙面の四隅の1つか2つは情報的要素を配置しないようにし、空間が紙面の外にもあるかのように余白を設定しましょう。

シンプルな技法ですが効果はかなりのものです。これにより紙面のイメージは大きく変わります。緊張感のある紙面を演出したい場合は別ですが、紙面の端を押さえつつ「空間の解放」を行うことで、安定感を維持したまま余白の効果を最大限に活かすことができます。

デザイン紙面の余白は役割と考え方で変わる!シンメトリーは余白を活かした左右対称で安定感を演出する方法とは?画像-8

上図の左は、紙面の四隅に要素をすべて配置した場合で、紙面のサイズよりも内側で囲まれたイメージとなり、空間の広がりを感じられなくなります。

上図の右は、紙面の左下に見た目にわかりやすい「空間の解放」を設定した場合で、紙面の外にもイメージがあるかのように空間的広がりを演出できます。

美しいと感じるシンメトリー(左右対称)デザイン

シンメトリーとは日本語で対称性「左右対称・反転」という意味です。

人は、対称性のある物を見ると無意識に「美しい」「綺麗」と感じるといわれています。この技法は、シンプルですがエレガントな雰囲気を演出することができます。

デザイン制作でシンメトリーを活用するには、対象物の中央に反転軸となるラインや点を配置して、その軸を中心に配置要素を対称的にすることがポイントです。

人の目に左右対称・反転は「規則性があるもの」と認識されるため、人は無意識にシンメトリーを美しく感じてしまいます。例えば、教会や宮殿などの建物にも多く利用されています。例えば、ベルサイユ宮殿やノートルダム寺院も左右対称です。

デザイン紙面の余白は役割と考え方で変わる!シンメトリーは余白を活かした左右対称で安定感を演出する方法とは?画像-9

上図のシンメトリーは左右対称(線対象)や反転(鏡面対象)を知る人は多いですが、その他にも「点対称」、「平行移動」などもシンメトリーに含まれます。これらは構図への対称性があることから安定性が感じられると言われています。

シンメトリーの構図は、左右の余白を均等にする。そうすることで、安定感のある静かなイメージ紙面を演出できます。この技法は、格式・伝統といったクラシカルなイメージに適しているといえます。

シンメトリーは、紙面の中央を基準とした垂直の軸がある「左右対称」になります。一般的に中央揃えで配置することが多いです。シンメトリーを活かすには適度な余白を設けることです。

配置する要素が紙面を見た時に多い、配置する要素が大きいと、雑なイメージになります。また配置要素が少なすぎると左右対称のシンメトリーは演出しづらくなります。

デザイン紙面の余白は役割と考え方で変わる!シンメトリーは余白を活かした左右対称で安定感を演出する方法とは?画像-10

上図の紙面は、全体を中央に揃えにして、左右に余白を適度に確保することで、見た目に綺麗なシンメトリーになります。

デザイン紙面の余白は役割と考え方で変わる!シンメトリーは余白を活かした左右対称で安定感を演出する方法とは?画像-11

上図の左は、要素の配置が多いため余白が十分に確保できていない状態です。見た目に圧迫感があり安定感があるとはいえません。

上図の右は、要素の配置が少ないためシンメトリーとして成立していない状態です。

紙面デザインにシンメトリーを取り入れる際は、配置する要素自体が対称性のあるものを使用します。また、文字情報も対称性があるレイアウトにすると、シンメトリーが活かされ美しい作りになります。この構図は、紙面の重心位置によりイメージが変わります。

紙面下部に重心がくる三角形型は、シンメトリーの美しさと安定感を感じます。反面、逆三角形型では、シンメトリーの美しさと緊張感を感じます。

デザイン紙面の余白は役割と考え方で変わる!シンメトリーは余白を活かした左右対称で安定感を演出する方法とは?画像-12

上図の左は、左右対称を三角形型にした構図です。紙面の下部に重心があるため、安定感のあるイメージを演出できます。

上図の右は、左右対称を逆三角形型にすると、緊張感があるイメージを演出できます。

余白の役割と考え方、シンメトリーの左右対称と安定感のまとめ

  • 余白は余ったスペースではなく、最初に余白をどのように使うのか役割を与える。
  • 余白もデザインの1つと意識し、余白への考え方を持とう。
  • シンメトリーの左右対称を活かし、安定感をもつ美しい仕上がりにする。

余白は、普通に考えると「余った空白部分」です。ですが余白の使い方を意識的に調整していくと、紙面のイメージは大きく変わります。

入る情報に合わせて余白の計画をしていくと仕上がりの良い紙面になります。住宅等の建築の世界でも空間を活かした建物もたくさんあり、紙面だけに限らず余白の考え方を活かしているのです。

建築の世界でも「空間=余白」と考えることができるのではないでしょうか。余白は仕上がりのイメージに大きく係わりますので実は重要なのです。

入れる要素のみに気を取られすぎて余白のことを後回しにしてしまうと、最後にイメージした紙面とは違う仕上がりになってしまいます。

シンメトリーはシンプルでありながらエレガントに表現することが可能です。シンメトリーを実現する条件は、左右対称が一番やりやすいですが、配置する要素そのものがシンメトリーになっていることも合わせて確認する必要があります。

シンメトリーを表現するには、余白の確保も必要です。逆に余白が適度にあるからこそシンメトリーは活きるのかもしれません。デザインをするうえで余白とシンメトリーには密接な関係がありますので、余白の設定をしっかり行いシンメトリーを表現すると良いでしょう。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする