デザインの「余白」の役割

はじめまして、マツガナイトです。

以前、デザインの記事として、UI/UXについて軽く記事にしましたが、今回の記事は「余白」です。

はじめに

「余白」とは「余計な白色」と捉えるかもしれませんが、全くもって余計ではありません。ちなみに私はデザイン上の余白は「あえて」作っていると思います。

以前の記事でも下記の画像を使いましたが、この画像で、文字やボタンがない部分は基本的に「余白」と捉えて大丈夫です。

この画像で仮に余白がなかったら、つまりぎっしりと文字やボタンが羅列した場合はユーザは見づらいなあと感じます。以前も言いましたが、見づらいといった不満が出た瞬間でこのサイトはおしまいです。なので、あえて余白を作っているのです。余白を使う理由としては下記に当たります。

1.情報のまとまりがわかりやすい

画面一つでも構成があります。上の画面ではタイトル、概要、登録ボタン、注意事項となっています。前回はわかりやすいように色分けをしたのですが、これ同じフォントサイズで同じ色だと情報に差別化がほぼないです。

人は「赤色」だからこれは重要なんだな、大きく文字を書いてるのは見出しなんだな、という一種の錯覚があります。

その錯覚の中でもう一つあるとすれば、この「余白」も一つの錯覚かもしれません。文章と文章の間にちょっと広めのスペースがあると、情報分けしていると情報の区別がつきます。余白を入れることで記事の内容1つ1つに対して独立して成り立っていることがわかるのではないでしょうか。

2.情報の窮屈さをなくす

これも上記で少し触れましたが、文章がずらっとあるとユーザは窮屈さを感じます。

みなさんが普段読んでいる記事。確かに文章が長ければ長いほどたくさんスクロールすると思いますが、2~3割は余白です。余白ないとユーザの不満は生まれ、その記事から離れていくでしょう。1個の画像入れる時でも余白をとって見やすくする。

（noteも書いていて気付きましたが、ちょうどいい余白を持っているなあと感じました。）

3.サイト自身の印象を変える

例えば、noteのトップ

一つ一つの記事には区切りっぽい余白があります。またその一つ一つの記事にはまとまりがあります。記事を際立たせるのに余白を使うことで、そのサイトの印象操作ができると思います。最近のWebデザインは余白を多く使って「シンプルでかつ上品」というサイトが見受けられます。

余白のコツ

ポイントは2つ(簡単なことですが)

1.情報のまとまりを意識。

当たり前なことですが、記事1つのコンテンツが5つあるなら、5つ分思いっきり余白を入れましょう。それだけです。

2.コンテンツ内の構成を踏まえ、余白を入れる

1つ1つのコンテンツで内容は異なると思います。伝えたいこと、画像の配置、表を入れるとかとか。内部構成によって適切な余白を入れましょう。例えば下記です。

・画像の上下左右に適切な余白はあるか

・見出しと説明文の間の余白を適切か。また説明文自体の余白と大きさが異なるか（これは情報の差別化です）

こういう細かい部分は一つ一つのサイトでガイドラインを作って、ルール決めするとコーダーやデザイナーは効率がいいかもしれません。

まとめ

たかが、余白ですが、デザインにおける余白は効果が凄いです。自分が作ったサイトが見づらいなあと思ったら、それは本当に細かい部分が直っていないからかもしれません。ボタン1つ作るにも、そのボタンの文字サイズを下げて、余白を開けてみるとまた変わった景色が見えたりするかもしれません。