
ホワイトスペースを使ったウェブデザインの考え方
- 2011-09-13 Tue 13:23:55
- デザイン

ウェブサイトの要素をレイアウトをする際に非常に重要な
ホワイトスペースの考え方について、すこしまとめてみました。
私が人にウェブデザインを教えるときは、まずここから始めます。
boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。
リズムが整っていれば、他の要素が主張したことが上手に伝わります。
リズムが整っていなければ、けんかしあい、不協和音=見づらい状況を作り出します。
自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。
どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。
余白を変えると、雰囲気が変わります。

とてもとてもシンプルな例を出してみます。
AとBを比較してみてください。
どちらのほうが読みやすいように感じますか?
どんなふうに感じましたか?

この例では、Bのほうに大きな余白を与えました。
4隅すべて同じぐらいの余白です。
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をサイドバーとして括ってみました。
こうすると、どちらかが「仲間はずれ」ではなくて
「2つの項目にわかれている」ように見えますね。
ウェブデザインのレイアウトでは、このような見え方を利用していることが多いのです。

ホワイトスペースの視点からみてみましょう。
グリーン・レッドとも同じ大きさの円を置いています。
内側にあるグリーンは1つ。
わたしの場合は、
外側・特に「差別化する」空白は、このグリーンの1に対して2倍から3倍開けるようにしています。
リズムを整えてあげることで、見やすく、そして要素の差別化まで行えてしまいました。
行の高さで生まれるホワイトスペース

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などでも指定ができます。
ぜひご自身で触って、どれくらいが読みやすいかやってみてください。
-----------
いかがでしたか。
ホワイトスペースは本当に様々なところに存在します。
ホワイトと言いながら、白くないこともあります。
どんなふうに空間が空いていればスッキリして見えるのか
好きな雑誌や、ウェブサイトがどんな空間の使い方をしているのか
意識してみてはいかがでしょうか。
写真は写真素材足成さまから、ダミーテキストはすぐ使えるダミーテキストからいただきました。
- 関連記事
-
-
jqueryでロールオーバー時にふわっと背景を浮かび上がらせるjqueryコード 2011/09/20
-
最近可愛いと思ったカラフル&クールなウェブサイト 2011/09/19
-
色と人の感覚とウェブデザインのはなし 2011/09/16
-
ホワイトスペースを使ったウェブデザインの考え方 2011/09/13
-
シンプルでデザイン性のあるインスピレーションを受けられそうなサイト 2011/09/12
-
Instagramやポラロイドのようにかわいい写真を加工できるフリーのPhotoshopアクション 2011/09/10
-
最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ 2011/09/09
-