【デザインのツボ】余白、とってますか？

menu

2018年12月11日

コーダーの輿水です。
【デザインのツボ】第5回！
年内最後の【デザインのツボ】は、何もないことに意味がある！余白についてお送りします。

■今回のテーマ

デザインの上で余白の重要さは言うまでもありません。
特にWEBページをデザインする場合には、“ページ左右の余白の指定”を忘れないでください。

■どういうこと？

WEBページのデザインでは余裕のある画面幅を想定してデザイン全体の幅を決め、その中でコンテンツの幅を決めてデザインを作っていく場合が多いかと思います。
しかしこのとき、デザイン全体の幅に余裕があるせいで、コンテンツ幅ぴったりの画面で見たときの余白、というものが忘れられがちなんです。
文字が画面端にくっついていると、まず見栄えが悪くなってしまいます。更に、左右に余白のないサイトは操作性が悪くなってしまう場合があります。特にスマホサイトの操作では画面端が使われやすく、良くありません。

■何が困るの？

「幅が1000px以上の画面では横スクロールが発生しないようにしたいな。じゃあコンテンツの幅は1000pxで、とりあえずデザイン全体の幅は1200pxでデザインしよう！」という感じでデザインを作るとどうなるか･･･。上の画像をご覧ください。
確かに幅1000pxの画面で横スクロールは発生しません。しかし赤い矢印の先、画面左端を見るとテキストが画面端にぴったりくっついてしまっています。これでは見栄えが良くありません･･･。

これをデザインで「コンテンツの内側：980px + 余白：左右10pxずつ = コンテンツ：1000px」などとしておけば、コンテンツが画面端にくっつかず、スクロールも発生しないんです。
またコンテンツを1000pxにしても、ガイドなどで外側にわかるように余白を示しておいてもらえれば、コーダーが意図を汲んで余白をつけた実装をすることができます。
上の画像の例では、コンテンツ内にもコンテンツ外にも余白が示されていないため、いざ実装すると余白がない画面になってしまった･･･、というわけです。

デザイン中は余裕のある領域でデザインを行う場合が多いと思いますが、想定する最低幅ぴったりの画面や、デザインより幅がはるかに大きな画面で見たときにどう見えるのか？考えながらデザインして、ワンランク上のデザインにしましょう！