余白の持つ役割
何もコンテンツが配置されていない空間を余白といいます。
余白を適切に付ける事で、コンテンツが読みやすくなったり、伝えたい情報へ目を向けたりさせる事ができます。
コンテンツがギッシリと掲載されている部分に余白を付ける事で、情報をより引き立てる効果があるんです。
余白を付ける事でページ全体にメリハリが付くんです。
余白もデザインの一部です。
きちんと余白を設ける事で、見てくれた人が分かりやすく、操作しやすいページになります。
余白を適度に取りメリハリのあるデザインにする事で、情報が分かりやすく、品の良い印象も持たせることができるので、是非試してみてください。
実際に余白を考慮していない例ときちんと余白を取った例を挙げてみました。
どうでしょうか？上の例だと詰まって余裕のない印象を受けると思います。それになんだか読みにくいですね。
対して下の例だと余白を付けて要素と要素に隙間を付けました。
今度は読みやすくなりましたし、「アテンドが目指すのはWeb制作だけではないのです。」の文字が際立っていますね。
この様に余白にもきちんと意味があります。ただ闇雲に隙間を付けているわけではないんです。
どの部分を見てもらいたいのか、伝えたいのかを考えながら余白を付けましょう。
余白は「白」でなくてもいい
余白という単語の影響でしょうか。余白は「白」でなければならないと思われがちですが、白以外でも問題ありません。
余白とは文字と文字の間や、線と文字の間、写真と文字の間といった、ある要素と要素の隙間の事を指します。
デザインによっては背景がグレーだったり、黒だったり、写真が薄く入っていたり・・・様々なパターンがありますよね。
そんな中に白い部分を差し込んだら明らかに不自然です。
なので隙間を設けられれば白でなくても何も問題はありません。
だからこんな感じのデザインでも余白が付いたデザインです！
もうじきカラッ！とした夏が来るから冷やし中華が食べたいのです！！
という想いが伝わるでしょうか・・・
背景全体が写真で、上に文字が乗ったデザインです。
考慮した余白について解説するとこんなイメージです。
背景全体に冷やし中華の写真を使っていますが、重要となる部分は赤丸で示した部分です。
今回は冷やし中華をプッシュしたいので、それ以外のクロスやお皿は正直見えなくてもかまいません。
この「冷やし中華」のメインとなる部分に何も重ねずきちんと見えること、右端・料理と文字の幅を均等にすることに注意しました。
余白を付けるべき位置について
段落と段落の間
国語の授業で習った「文章の段落」
段落ごとに述べたい内容が異なりますよね？
違う内容へと移る時に、余白を設けて置く事で、意味のまとまりがそれぞれ違う。という事が見てわかります。
段落の間には余白を設けるようにしましょう。
文字と文字の間（行間）
行の間にも余白が必要です。
実際に見てみましょう。
比べると一目瞭然ですね。
行間が詰まりすぎていると、一行が読みにくく、2行目を読んでいたつもりが3行目を読んでいた・・・なんてことも減るはずです。
枠と文字の間
文字の周りに枠を設けた場合です。
こちらも見てみましょうか。
フチと文字の間にも余白が必要だという事が見てわかると思います。
余白がないと、余裕がない印象ですね。それになんだか文字がこぼれ落ちそうにみえます。
きちんと余白を付ける事で余裕が生まれ、読みやすいレイアウトになりました。
ちなみに枠線でなく背景色の場合でも同じことが言えます。注意してください。
写真と文章の間
こちらも早速みてみましょうか。
写真の周りに余白がないので、写真が目立ちませんね・・・それに写真と文字の間の文章は読みにくく感じると思います。
それに余白を付けてみましょう。
今度は写真と文字がはっきりと分かれたので、見やすくなりました。
余白はデットスペースではない
余白をきちんと考えて設ける事で、コンテンツ全体の見え方が変わってきます。
そして余白が付く事で余裕が生まれるので、品も良く見えます。
全体的なクオリティアップができるので、余白についても見直してみてください。
また、何でも余白を付ければいいという訳ではありません。
あえて余白を付けないことで、ギッシリ感を狙って出したい場合は余白を狭くとってみるのも方法です。
「こうでなければならない！」という規則はありません。「伝わる」「持たせたいイメージが出る」それがデザインをする時には優先です。
どうしたいのか。どう見せたいのか。どういった印象を与えたいのか。
それらを考慮してデザインを作り込んでいきましょう。
まとめ
・余白は見せたいコンテンツを引き立てる効果がある
・余白は要素と要素の間に設ける
・余白は白でなくてもかまわない
