「余白」とは何もない空間という意味ですが、デザインにおいては意図を持ってデザインされたスペースのことを指します。

「空間をデザインする」という意味で使われる余白のことを、ホワイトスペースと呼びます。

余白を適切に取ることで、美しく、読みやすいホームページが作れることから、余白はデザインにおいて、とても重要な役割を持っています。

余白の種類

マクロスペース（Macro space）

マクロスペースとは、2つ以上のコンテンツ間をとりまく、大きなスペースのことです。
マクロスペースを上手に扱うことで、重要度による順序立てができ、デザイン全体の流れを作り出すことが出来ます。

マイクロスペース（Micro space）

マイクロスペースとは主に、文字間や行間、マージンやパディングなどの小さな余白を指します。
マイクロスペースを上手に取ることで、ユーザーの視線を誘導しやすくなります。

アクティブスペース（Active space）

アクティブスペースとは、視線を集め、注目させるためにとる余白のことです。
アクティブスペースを使うことによって、目立たせたいものへの認知性を高めます。

パッシブスペース（Passive space）

パッシブスペースとは、要素と要素の間の小さなスペースのことで、ユーザーの可読性をあげるために使われることがあります。

「8の倍数」で余白を決める

Webデザインでの余白は、「8の倍数」で取ることが推奨されています。

「8の倍数」が推奨されている理由は様々ですが、よく言われているのは、一般的に使用されているスクリーンの解像度が8の倍数であることが多いからです。8の倍数でデザインすることで、解像度が異なるスクリーンでも同じように表示することが可能となるのです。

また、8の倍数で数字を統一しておくと、後から修正しても割合を変えれば端数が出なくなり、統一感のあるデザインを制作することができるなどの理由から、「8の倍数」が推奨されています。

まとめ

デザインをする際、ただなんとなく余白をとっている人が多いと思いますが、余白はデザインのクオリティを左右する大切な要素です。

意味もなく余白を残すのではなく、美しく、読みやすいホームページをデザインするため、余白を上手に活用しましょう。
人気サイトのデザインや、普段目にする広告などを参考にしながら、余白に注目して見るのも勉強になるかもしれません。