エンジニアが知っておきたいデザインの余白
エンジニアと余白
ちょっと前に下記本を読みまして、自分なりに余白について考えてみました。
例として、エンジニアはよく下記のような余白を詰めすぎる画面を作りますが、これについて詳しく見てみましょう。
余白を詰めすぎる弊害
余白を詰めると情報がそれだけ画面に収まるので、情報密度は高まります。一方で、余白には情報の重要性を示す役割があり、余白があるほどその中心にある情報が重要であることを暗に示します。エンジニアはエディターなどの情報密度が高いものを常に見ているので、情報密度が高いことに慣れてしまい、余白がなくてもあまり意識が向かないのかもしれません。
下記の画像では「重要なお知らせ」と「その他の情報」との間に余白を大きく取ったかどうかで対比しました。右のほうが「重要なお知らせ」が「その他の情報」に埋もれてしまっているのがわかると思います。
余白を詰めすぎていると全部の情報がどれも等しい重要度になっています。言い換えれば、強調したいものがない、ピントが合っていない状態とも言えます。
また、物理的に要素間が近いとタッチデバイスの場合、押し間違えが発生しやすいという弊害もあります。特にレスポンシブデザインの場合、気をつけないといけない箇所だと感じます。
余白に注目
余白を調節するにはまず余白に注目しましょう。そうすれば「余白がなさすぎるかも？」と気づきを得ることができます。下記の通り、大きな要素同士から細かな要素同士の余白まで一通り眺めてみてください。
←大きな余白 小さな余白→
1番外側の余白、コンポーネント同士の余白、コンポーネントの中の余白、行同士の余白
より細かいところでは文字同士の余白もありますが、エンジニアであればそこまで見なくても良いかなと個人的には思いました。さきほどあげた画像でも余白に注目することで狭かったり逆に広すぎたりする箇所がわかります。ためしにいくつか余白箇所を緑色で強調してみました。
終わりに
余白について、エンジニアが気をつけたほうがよさそうなことを独断と偏見で述べてみました。なにかの参考になれば幸いです。
Discussion