良い余白、悪い余白:: ウェブデザインの基本マナー

余白（空白のスペース）は、多すぎても少なすぎてもマイナスに・・・。適切な余白を取るために大切なのは、余白を設けるそもそもの「理由」を考えることです。

余白の大切さを実感（？）していただくために、まずは次のページを見てみてください。

↑かなり見づらくないですか・・・？
見出しは強調されているものの、文章の意味が視覚的に区分けされておらず、ビッシリつまりすぎて非常に読みづらいです。
このレイアウトでは、文章の意味を「かたまり」として視覚化できていません。
それこそ、読むだけでグッタリ・・・（^ ^；）

そこで、ここに適切な余白スペースを入れて読みやすくしましょう。

上記ページの文章構造を見てみると、「大見出し」と「導入の文章」が先頭に来て、その後に「見出し+本文」のセットがふたつ続いていることが分かります。
この構造を余白を入れることで表現すると、次のようになります。

↑余白を設けることで、だいぶ見やすく感じられるのではないでしょうか？

その1でご紹介した「良い余白」も、やりすぎると逆に見づらくなってしまう場合があります。

例えば、次のページを見てみてください。

↑これはこれで、かなり見づらく感じられませんか？
このレイアウトの問題点は・・・

このように、余白は多すぎてもユーザーにとってストレスになってしまうのです。

余白は、多すぎず、少なすぎず。
まずは、文章や画像といった「情報」のお互いの関係・意味を分析し、それを視覚的にハッキリ表現する目的で、適切な余白を設けることが大切です。

このエントリーのトラックバックURL :

メルマガ「嫌われないWebデザイン」
さらに突っ込んだデザインノウハウは、メルマガでお届けします！メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る

Powered by

良い余白、悪い余白