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

空白スペースとはテキストやイメージや飾りがないスペースのことで、明瞭や強調、グルーピングといったあなたのデザインを助けることができる重要なデザイン要素です。

デザインのセンスがアップする空白スペースを活かしたデザインの作り方を紹介します。

空白スペースを活かしたデザインの作り方

How to Create More White Space in Your Designs

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

空白スペースは意図的に

空白スペースを活かしたデザインのサンプル

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

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

不必要な要素を取り除く

空白スペースを活かしたデザインのサンプル

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

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

空白スペースを活かしたデザインのサンプル

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

空白スペースを活かしたデザインのサンプル

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

空白スペースを活かしたデザインのサンプル

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

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

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

空白スペースを活かしたデザインのサンプル

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

空白スペースを活かしたデザインのサンプル

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

空白スペースを活かしたデザインのサンプル

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

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

空白スペースを活かしたデザインのサンプル

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

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

空白スペースを活かしたデザインのサンプル

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

sponsors

top of page

©2018 coliss