見やすいデザインの一歩!余白を活かそう!

見やすいデザインの一歩!余白を活かそう!

今回のテーマは余白です。Webデザインにおいて余白は切っても切れない重要な基礎の部分ですね。
一般的な余白とは「文字が記してなく白く残っている部分のこと」を指していますが、Webデザインにおいては「意味があってわざと白く残している部分」のことを意味しています。では、どんな部分で余白を使うのか検証していきましょう!

1.文字周り

01
文字周りに余白を設けることで、文章としての“かたまり”を感じることができるため視認性を高めることができます。サンプル画像の右側は文字が読みやすいかと思いますが、それとは対照的に左側は余白が無いため、窮屈で読むだけでストレスを感じるものになりますね。この場合、記事を読んでもらえなくなる可能性が高くなります!
読み手のことを考えて、文字の周りはきちんと余白を取るようにすることが理想的です。

2.コンテンツの上下左右

Y!mobile様
コンテンツの周りにある、上下左右の余白を均一にすることで、すっきりとした規律性のある印象を与えることができます。コンテンツの周りに一切余白がないグリッドデザインなど特殊なものもありますが、コンテンツの周りには余白を取ることが基本です。また、この法則はWebサイトだけではなくバナーなど小さなパーツにも応用できます。
上記の例として“Y!mobile様”を使用させていただきました。(2016/4/29現在)

3.コンテンツの内側は狭く、外側は広く!

株式会社BOEL様
内側の余白が大きいと、コンテンツがバラけて見えてしまう可能性があります。内側を狭くすることで、コンテンツとしてのまとまり感を出すことができますし、外側の余白を大きく取ることで、見た目もスッキリします。今回の例は“株式会社BOEL様”のWebサイトを引用させていただきました。こちらのサイトは余白をきれいに使っているので、見出しと文章がどれであるかがすぐに分かりますよね!(2016/4/29現在)

規則正しく余白を使おう!

まとめとなりますが、余白をうまく使ってきれいなサイトを作るためには、見出しや文章など、各コンテンツごとに余白を設定し、その法則をきちんと守ることが大切です。
h2の下は○○px、pの下は○○px…など、その法則を作って守るだけで整ったデザインができちゃいます。
なお、フラットなデザインが主流の今、余白は思い切って使うことでより一層効果を発揮できると思いますので、是非参考にしてみてくださいね。


Previous: サイトのビジュアル分析 Next: 読ませるページデザインのセオリー

© 2017 ALL CONNECT Inc. All Rights Reserved.