WEBレイアウトにおける余白の効果

2009年6月2日

Google Japan Blogの記事を見て余白の使い方による効果についての記事です。

WEBレイアウトにおいての余白をうまく使うことで、視覚的にユーザーにアピールできることが色々あるのだなと勉強になったので、ご紹介いたします。

以下のGoogle が行う様々な実験より引用します。

下の2枚の画像の違いは上下のマージンの違いがあります。

なぜこのような違いをつけたかというと「上記のほうがよりよい結果(良い情報)だ」とユーザーが直感的に感じる実験結果によるものだ。

このように余白のみで情報のアピール度合いの強弱をつけるやり方は商用のWEBサイトでも十分取り入れる価値はあると思う。

紙媒体のデザインを経験しているデザイナーであれば余白や行間をシビアに調整するというのは当たり前のことなのかもしれないが、専門的なデザインをあまり学んでいないWEBから入ったレイアウトデザイナーはあまりこのように余白を意図して使っていない方も多いのではないでしょうか。