Pocket

紙のデザインでも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

 
 

まとめ

 

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

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。