ホワイトスペースを使ったウェブデザインの考え方

余白を変えると、雰囲気が変わります。

とてもとてもシンプルな例を出してみます。
AとBを比較してみてください。

どちらのほうが読みやすいように感じますか？
どんなふうに感じましたか？




この例では、Bのほうに大きな余白を与えました。
４隅すべて同じぐらいの余白です。


Aのような文字を敷き詰めた状態は、どこでよく見るでしょうか。
例えば新聞、チラシ、情報誌などでよく見ますね。
ということは、Aの場合の印象は、「情報がたくさんあるんだな〜」といったものとなるはずです。
ただ、人によっては「文字がいっぱいで読みづらい」と感じる人もいるでしょう。

Bのように余白がある状態は、
ブランド品のパンフレットや、カード、ポートフォリオなどでよく見かけます。
また、雑誌などでもよく使われています。
余白を加えると、余白の割合が大きければ大きいほど、高級感や余裕を表現できます。
余白の割合で、その度合を調整することができます。
デメリットとしては、文字数が実質的に減るので、伝えられる文字が減ることですね。


まずは、余白を意識するところからはじめましょう。
雑誌や、本、印刷物、もちろんウェブサイトも、余白を意識すると見え方が変わってくるはずです。
（できれば、毎日続けてください。感覚は向上しますよ。）




CSSのBOX指定する際の空白のおさらい




ご存知の方も多いでしょうが、ウェブデザインにおいて
ホワイトスペースの取り扱いに非常に重要な
marginや、paddingについて、今一度確認してみてください。

marginとpaddingの間にborderが存在すること。
marginやpaddingは、

margin:10px 0px 10px 0px; /*上・右・下・左の反時計回り*/
margin:10px 0px;/*上下・左右の一括*/
margin:10px;/*上下左右一括*/

のような一括指定や

margin-top:10px;
margin-right:10px;
margin-left:10px;
margin-bottom:10px;

のように空白をあける位置を指定することができること。
（marginをpaddingに変えると、同じことができます。）




画像や、タイトルの間の余白で、雰囲気が変わります。




画像やタイトルの間の余白においても、ホワイトスペースを上手に使うことで
信頼感や、安心感を与えることができます。




Aは上下左右には空白がありますが、
文字や画像の間は詰まったままです。
Bは赤丸に当たる部分にも、ホワイトスペースを置いています。

Bのほうが見やすいデザインに仕上がります。
Aのような手法が使われないわけではないのですが
詰めるときはもう文字がくっつくぐらい詰めて、アートにしてしまう位
行き切らないと、意図したと思ってもらえないかもしれません。



どれが、仲間はずれでしょう？



ここに、BOXがA,B,Cとあります。
どれが仲間はずれだとおもいますか？



答えはCです。
BOX AとBは同じ形、狭いホワイトスペースで並んでいますが、
AとBに比べて、Cは少し離れていて、大きさも違います。

これが要素の差別化です。（いま思いついたので覚えなくてもOKです。）


人の目は、意識していなくても、グループであるものと
グループでないものを見分けてしまいます。
それを利用して、仲間であるものと、違うものを見分けさせ、
わかりやすいデザインを作っていく際にも、ホワイトスペースは有効です。



ウェブデザインに置き換えてみると



AとBであった要素をメイン部分として、仲間はずれだったCをサイドバーとして括ってみました。
こうすると、どちらかが「仲間はずれ」ではなくて
「２つの項目にわかれている」ように見えますね。

ウェブデザインのレイアウトでは、このような見え方を利用していることが多いのです。




ホワイトスペースの視点からみてみましょう。

グリーン・レッドとも同じ大きさの円を置いています。
内側にあるグリーンは１つ。
わたしの場合は、
外側・特に「差別化する」空白は、このグリーンの１に対して２倍から３倍開けるようにしています。

リズムを整えてあげることで、見やすく、そして要素の差別化まで行えてしまいました。



行の高さで生まれるホワイトスペース



Aは見出し部分と、文章部分、また文章の間の行の高さが詰まった状態です。
Bは、見出し部分との間、文章の行の高さが適度に空いた状態となります。

Bのほうが見やすいですね。
これもひとつのホワイトスペースではないかと私は考えています。



htmlとして置き換えてみます



文章内にすでにh1,h2タグが存在している前提で
このようなBOXがあるという風に考え
周りをdivで囲い、タイトルをh3で、文章をPで囲いました。

さて、これをhtmlとCSSで表現したらどうなるか、例を出してみます。

このようなボックスを作るとしたら、下記のようなソースになるかとおもいます。
チェックしてないので、そのとおりにならなかったらゴメンナサイ。

html:

  
私の個人主義

  
君は場合おそらくその発表院というのの日を得たた。そんなに十月が保留人はまずこの蹂躙なけれでだけをするてしまえますでも説明考えるますだって、実際には解りですたたた。天性をいうのもいったい事実をしきりにうますます。

CSS:

div{
  padding:20px;
}

h3{
  margin:0px 0px 19px 0px;
  font-size:19px;
}

p{
  font-size:10px;
  line-height:160%;
  margin:0px;
}

ここで大事なのは、Pにかかっているline-heightです。
これが文字の高さを指定するスタイルシートです。

line-height:160%;

line-heightは、読みやすいのが160％から180%だとよくいわれますので
このあたりを基準に、高さを決めてみてください。
%の他にemなどでも指定ができます。
ぜひご自身で触って、どれくらいが読みやすいかやってみてください。


-----------



いかがでしたか。

ホワイトスペースは本当に様々なところに存在します。
ホワイトと言いながら、白くないこともあります。
どんなふうに空間が空いていればスッキリして見えるのか
好きな雑誌や、ウェブサイトがどんな空間の使い方をしているのか
意識してみてはいかがでしょうか。



写真は写真素材足成さまから、ダミーテキストはすぐ使えるダミーテキストからいただきました。