デザイン /

とっても大事な「余白」の話

紙のデザインでもWebデザインでもとっても大事な「余白」。
余白を採ることによって情報が整理されたり、デザインの印象が変わったりします。「このデザインなんかいいね!」というものは絶妙な余白が施されており、逆に「悪いわけじゃないんだけどなんか違和感がある・・・」と感じるものは余白がきちんと考えられていない場合があります。
今回は、デザインの見えない重要要素、余白の採り方などについて書いてみたいと思います。

それでは早速行ってみましょう。

適切な余白量を知る

余白の量はサイトの目的によって適切な量が変わってきます。
例えばニュースサイトなどでは、1画面に多くの情報を載せるので余白は最低限に抑える必要がありますし、逆にイメージを伝えるコンテンツでは、余白を大きく採りゆったりとした雰囲気をつくります。

zu1

Point1:上下左右の余白は均等に

図のような囲み記事の場合、上下左右の余白は均等にするときれいに見えます。
ここで気をつけたいのが数値に惑わされないことです。例えばCSSの記述で、padding:30px;と指定したとしても中に入るコンテンツが写真のように角張ったものなのか、輪郭線が掴みにくい文字なのかによって同じ指定をしていても見え方が異なってきます。最終的には“目で見て均等に見える”指定をします。
また、この余白は狭すぎると窮屈な印象になってしまいます。最低でも文字1個分以上の余白が欲しいです。

zu2

Point2:内側の余白は外側の余白より狭くする

内側の余白は外側の余白より狭くします。逆に内側の余白も外側と同じくらいにしてしますと、散らかった印象を与えてしまいます。

zu3

Point3:同じグループ同士は接近させる

構成上同じグループになるコンテンツは接近させ、別グループのコンテンツは逆に余白を大きく採ります。

人は無意識的に、「集まっているものは同じグループ」として認識します。例えば、「見出しの補足的なキャッチコピー」「見出し」「本文」とある場合、「見出しの補足的なキャッチコピー」「見出し」は関連性が強いグループとして見なし、「本文」との間より余白は狭く取ります。

zu4

お手本になる余白がきれいなサイト

余白がキレイなサイトを集めてみました。
ニュースサイトからイメージコンテンツまでいろいろ集めてみたのでそれぞれで余白がどう違うか見比べてみると面白いです。
よく出来たデザインを見るのは勉強になると思うのでぜひ参考にしてみてください。

[ニュースサイト]

wired

WIRED.jp

[ブログ]

tagbot

Tagbot

[コーポレートサイト系]

apple

Apple

jibunbank

じぶん銀行

[イメージコンテンツ]

ardenhouse

ARDEN HOUSE

chouyou_kikumori

境菊守 重陽

[ミニマルデザイン]

THE

THE

sigma-global

SIGMA GLOBAL VISION

まとめ

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

余白の採り方は一朝一夕でうまくなるものではありません。
周りにデザインを教えてくれる人がいるのが一番良いのですが、独学で勉強している人などはまず、いいデザインがどんな余白の採り方をしているのか研究すると良いと思います。
そして、自分でデザインしたものと見比べてどう違うのかを見比べることが大事です。
このような作業を繰り返すことで次第に感覚が掴めてくると思います。

この記事を書いた人

斧山洋平

PAGE TOP