余白のとり方が9割

デザイン・レイアウトの話です。9割が妥当かどうかは別として、それくらい余白・間隔・行間のとり方が大事だというお話。

ピカピカの1年生デザイナーさんにOJTしているとき、余白のとり方がバラバラというか、余白を意識していないんだろうな・・・というデザインがあがってきました。余白・間隔・行間を意識するだけでも、それなりのレイアウトができると思っています。

例えばfig.1-1〜1-4のように、3つのボックスが横に並んでいます。
fig.1-1の場合だと、ボックスとボックスの間隔がバラバラです。
fig.1-2は中央のB・Cよりも最左右のA・Dの間隔のサイズが小さくなっていますが、fig.1-3のようにA・Dのほうをサイズを大きくした方が収まりがいいです。
fig.1-4はA〜Dが同じサイズ。これもスッキリしています。

文章の行間も大切です。fig.2-1〜2-3だと、行間サイズが左から100%、150%、200%となっています。fig.2-1(100%)は、文字がつまり過ぎて文章が読みにくいかもしれません。逆にfig.2-3(200%)は、行間が開きすぎて読みにくいかもしれません。

テキストの開始位置も重要ですよね。fig.3-1のように、左のボックスの先頭の位置に右のテキストの位置を合わせるのか。fig.3-2のように、左のボックス内のテキストに位置にあわせるのか。私はfig.3-1は詰まっている印象をうけるので、fig.3-2もしくはその中間くらいテキストの位置を下げます。

これはデザインだけに限らず、CSSでページの設計をしているときも同様です。marginやpadding、line-heightなどでプロパティで余白や間隔、行間を指定していきますが、実際ブラウザでレンダリングさせたとき、どのように見えるかを(ブラウザ間での差異も考慮しつつ)意識することは大事だと思います。

何が「気持ちいい余白」で、何が「気持ちよくない余白」かを、ウマく伝えることは正直難しいです。主観がモロに入っています。そして、ここまで書いてアレですが、ケースバイケースな部分もあるので、一概に言えるというわけではありません。

でも、Webページであれバナーであれ紙であれ、その状況に応じた一番気持ちいい余白を意識することは、デザインやレイアウトをしていく上で、とても重要なことだと考えます。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー