余白設計について:基本的な考え方
はじめに
今回はWebサイトを作成する上での余白で必要な知識や実際の案件で活用できる余白のノウハウについてまとめました。余白設計については色々な方法がありますが、今回は一般的によいとされている規則や内容について説明させてもらいます。
余白の役割を確認しよう
はじめに、Webデザインを作る上で余白設計がとても重要になってきます。余白の使い方でビジュアルデザインのクオリティが大きく変わってきます。また、見やすく、使いやすいWebデザインに仕上げるためには、余白の役割を理解していることが必要です。
情報のグループ化
余白の間隔を調節することで、ユーザーは同じ情報グループとして認識することができます。余白設計が統一である場合、ユーザーは情報の関連性を正しく把握することができます。逆に、不均一な余白が存在したり、バラバラな場合は、ユーザーが混乱することがあります。このように、余白は情報を適切に関連付けるための役割を果たしています。
.png)
可読性を上げる
冒頭で説明したように、読みやすいデザインを作るためには余白が重要な役割を担います。テキストを読みやすくするためには、フォントサイズやフォントカラーだけでなく、行間や文字間にも注意が必要です。余白を適切に活用し、可読性を考慮したテキストを作成することが大切です。
WEBサイトの文章の行間は、1.5〜2.0に設定していきます。行間が狭いと文字が読み辛くなってしまいます。また、行間が広すぎると、縦の幅が広すぎてしまい、ユーザーの負担になります。
本文や見出しで設定される文字の間隔は文字サイズの5%~10%で設定します。フォントサイズやユーザーの環境によって、間隔は変わってしまいます。サイトチェックの際に読みずらければ、修正しましょう。
視線誘導
余白をうまく活用することで、テキストを読み進める手順を誘導することができます。代表的な手法に、「Zの法則」や「Fの法則」があります。これらの手法を用いることで、ユーザーは迷うことなくテキストを読み進めることができます。また、余白の取り方によっては、目立たせたいエリアの周りを広く取ることで、視線を誘導することもできます。
余白に規則性を持たせよう
デザインの統一感を出したり全体的なバランスや見た目を良くするために余白に規則性を持たせたることが必要ですが、それらのデザインを実際に再現するのはエンジニアのお仕事になります。規則性がない余白でデザインを作成しているとエンジニアは細かくデザインをチェックしないといけません。そうなるとデザインを実装する際に齟齬がうまれやすくなってしまいます。
実際に大手企業などでは、デザインシステムを策定しており独自の余白ルールなどを決めていたりもします。細かく余白設計をすることでデザイナーとエンジニアの連携をスムーズに行えるということです。
余白は8の倍数で設計しよう
Webデザインの余白のルールは8の倍数で設計することが一般的です。コンテンツ幅、ボタンサイズ、余白感、バナー、メインビュジュアルなどサイズ指定するものはほぼ全て8の倍数で設計します。
8の倍数で設計するメリットを理解しよう
- 要素のサイズや余白に規則性を持たせることでデザインの品質が向上するため
- あらかじめ余白を設定しておくことでデザインに統一感を持たせることができるため
- デザイナーとエンジニアの間で齟齬がなくなったり、コーディングの速度が上がり、結果的にWebサイトの品質が向上するため
- 汎用的なスクリーンサイズの基準に合わせやすいため
デザインの修正にも柔軟に対応できる
デザインを実装した後に必ず、チェックが入ります。コンテンツ幅やサイズの修正が発生した際に余白ルールのもと設計されてあると修正作業の効率化につながります。
汎用的なスクリーンサイズの基準に合わせやすい
スクリーンサイズでシェア率が比較的高いものの例として1920✖️1080ピクセルや1280✖️720ピクセルなどが挙げられますが、これらのスクリーンサイズも8の倍数で割り切れます。一般的に基準となっている画像サイズが8の倍数だと設計しやすいということもあります。
余白設計を決めておく
余白としてよく使われるのは、8px、16px、24px、32px、48px、64px、96px、128px、160px、192px、などです。8の倍数ではないですが、4px、12pxも使われます。レスポンシブではデスクトップよりも画面幅に対して情報量が多くなる場合に使います。
また8と3の公倍数である48の倍数は、コンテンツ幅を設計したり分割するときに端数が発生せずに割り切れることが多いため重宝します。具体的には、48px、96px、192px、240px、480px、960px、1440pxなどです。
4の倍数の使用条件
4の倍数で設計すると、余白の大きさを細かく調整できるメリットがあります。その一方で変数が多くなるため管理しずらくなったり、どの余白を指定するか迷いやすくなったり、メリハリが弱くなったりするデメリットもあります。まずは8pxの倍数で設計して、必要になったときだけ4の倍数による余白（例：12px、20px、40px）の追加を検討していきます。
共有用に事前に作成しておく
- 基本8の倍数のpxで定義
- 56pxは使用しない（64pxと比較時にデザイン的な意味の差が無かった為。）
- 例外的に4px、12pxだけは使用する
- それ以外のpxの余白は使わない
.png)
共通ボタン
コンテンツ幅以外にも、ボタンパーツのpaddingにも大小関係なく8の倍数で余白を設定しておくと良いでしょう。マテリアルデザインと言って、Google社が考案しているデザインに対する考え方が書かれてあるガイドラインがあります。それらも参考にしても良いかと思います。
グリットレイアウト
先ほど、汎用的なスクリーンサイズは8の倍数で作られていると説明しましたが、グリットレイアウトの幅は8の倍数だと作りやすいと思います。グリットにも規則性を持たせておくことでデザインの秩序が保たれます。
まとめ
今回はデザインを考える上での余白の決め方についてまとめました。一般的な情報が多く、他のデザイナーだと別の方法で設計しているかも知れません。それよりも実装する方と共通認識をすることが大切になります。案件ごとか会社、チームで共通のルールを決めておくと齟齬がなくなり誰に聞いても分かっているので、スムーズな連携ができると思いました。
0~1のサイト制作では余白設計からできるので、覚えやすいですが、もうすでに公開されたサイトの修正や部分的なリニューアルの案件だった場合はその担当になった方が再度、調査しないといけないので、デザイナーの場合はFigmaやXDなどのデザインデータに記載しておくと、見直しが簡単になるかなと思います。また、テーマなどを使ってデザインする際はそのテーマについて理解しておくことが重要だと思いました。
.png)
.png)
.png)
