制作したデザインがどこかしっくりこないなーと思ったら、適切な余白が設定されてないのかもしれません。余白を適切に空けることで、まとまりのあるデザインに仕上げることができますよ。
余白のサンプル
とにかくまずはサンプルを見てみましょう。
余白のNG例
NGはこちらです。見出し、写真とテキストの間、テキストの行間などが窮屈で素人感が否めません。窮屈なデザインはチープな雰囲気になるだけでなく視認性も悪くなってしまいます。
余白のOK例
テキストの行間や要素同士の間に余白を設定することで、すっきりと洗練されたデザインになりました。
余白は適切に空ける
ただ、むやみやたらに余白を空けてしまうと間が抜けたデザインになってしまいます。余白はあくまで「適切に」空けることが大切なので、デザインの基本原則に則ったうえで行う必要があります。
では、どれくらいの余白を空けるのが適切なのかを見てみましょう。
テキストの余白
ウェブデザインの文字間はフォントサイズの5%から10%が読みやすいとされていますので、0.05remから0.1remのサイズを設定します。また、行間は150%から200%が適切と言われています。
p {
letter-spacing: 0.05rem;
line-height: 1.5rem;
}
要素同士の余白
ウェブデザインは基本的に8の倍数で作られていますので、要素同士の余白は8の倍数で設定します。
.container {
padding: 2rem 4rem;
.inner {
display: flex;
gap: 1rem;
}
}
さいごに
経験が豊富になってくると無意識に行う余白の設定ですが、慣れないうちは感覚ではなく数値を設定するのがおすすめです。適切な余白を使ってデザインすることを意識してみましょう。
