Webデザイン、プレゼンや企画書に効果がある空白スペースを活かしたデザインの作り方

Post on:2015年7月30日

空白スペースは意図的に

デザインの大きなエリアを空っぽのままにしておくことを心配しないでください。この例では「Origami」のタイトルの上下のエリアに空白スペースを適用しています。

意図的に使われた空白スペースは、強いフォーカスを作り、デザインに呼吸するスペースを与えます。

不必要な要素を取り除く

空白スペースを作る一つの方法は、デザインで不必要な要素を取り除くことです。右のグラフィックのように、ボーダーを取り去ることはデザインを広げます。ボーダーや形やアイコンなど、あなたが使う要素がそのデザインに価値を加えるものであるか確認して使用してください。

コピースペースには十分な空白を

背景に使用するイメージを探す時は、テキストを重ねて使用することができる十分なコピースペースがあるか気をつけてください。もし、十分なコピースペースがない場合は、下記のようにイメージを拡大して使用するのも手です。

空白スペースのカラーはホワイトとは限らない

空白スペースは文字通りホワイトであると、多くの人々は誤って信じています。

空白スペースとは、テキストやイメージや飾りなどの要素がないスペースのことです。カラーを使った背景はテキストの周りにたくさんの素敵なスペースを作り出す素晴らしいテクニックです。例えば引用のテキストなど、それだけで際立たせることができます。

文字間に空白スペースを活かす

文字間に空白スペースを活かすことは、ブロックのテキストを一列に並べる素晴らしいテクニックです。デザインの中でうまく一つの要素としてまとめ、テキストは読みやすくなり、美しく見えるのに役立ちます。

パディングを効果的に使う

デザインで多数の要素を使うとき、それら全てが自身の空白スペースを持っていることを確認してください。デザインのポイントは、「Cooking: Back to Basics」のテキストの周り、URLの下、テキストボックスと背景イメージの鍋との間にパディングをもたせていることです。

ボーダーを加えた空白スペース

写真のフレームのようなボーダーを想像してみてください。テキストとイメージの周りにボーダーを加えることで、中心要素の周りに空白スペースを作り、デザインにほどよい緊張感を実現させています。
デザインのポイントは、すべての要素を中央に配置することです。このことは均等な空白スペースをデザインするのに役立ちます。

要素を空白スペースで整理する

デザインの多くの失敗は、取り散らかされたデザインが原因です。レイアウトの中で一つの要素のサイズを増やす時は、他の要素はミニマルにし、より多くの空白スペースを考慮にいれるべきです。この例では「Eat...」のサイズを大きくしています。ポイントは空白スペースをたっぷり使い、その圧迫感を感じさせないようにしています。