ウェブデザインにおけるネガティブスペースの活用ガイド

Post on:2010年5月25日

はじめに

ネガティブスペースは多くの場合、ミニマリズムのようにシンプルを美とした特定のデザインだけのものであると誤解されています。本来ネガティブスペースというものは、あらゆるデザインにおいて注意を払い、そして慎重に組み立てて使用すべきものです。
ここではネガティブスペースが何であるか、そしてあなたのデザインを分析し改善する時に、どのように効果的に使用するべきかを解説します。

ネガティブスペースとは

ネガティブスペースはホワイトスペースとしても知られているもので、簡単に言うとコンテンツに占拠されていないページのエリアと定義することができます。それはページ上の特定のアイテム間のスペースであるとも言えます。

ネガティブスペースのカラーはホワイトである必要はなく、グラデーションでもパターンのある背景でも構いません。
次の例は、ネガティブスペースに複雑なグラフィカルなコンテンツを使用しており、見出しと検索ボックスの間に使用しています。

great bible tales

ネガティブスペースはミニマリストではありません

よく誤解されますが、ネガティブスペースの適切な使用とミニマリストとは何の関係もありません。確かに、ミニマリストのデザインがたくさんのネガティブスペースによって特徴づけられることはあります。しかし、あらゆるデザインにおいてネガティブスペースは効果があってもなくても使用されます。

ネガティブスペースの重要性

良いデザインと良くないデザインを区別する明確なルールはありません。しかし、パワーのあるレイアウトには従うべきたくさんのガイドラインとルールがあります。ウェブページのレイアウトを設計することは、多様なオブジェクトを魅力的で論理的に、そして機能的な方法で整えることが必要です。

大事なコンセプトは、使用するデザインエレメントの魅力をさらに魅力的に伝えるということです。ページ上の他のアイテムに関してもそれぞれのエレメントによって占拠されているスペースがエレメントの審美的なものと同じくらい重要です。

もし一度もデザイン理論を勉強したことがないなら、あなたはよく分からないまま直感的にオブジェクトを配置しているでしょう。それは多くのスキルと同じように、直感的な能力を明示的な知識に変えるように努力するべきです。これはデザインを突き進め、何がそうであるかについて明らかになることの助けるになるでしょう。例えば、特定のレイアウトでうまくいかない場合でも、その正当な理由が明らかになります。

シンプルでも複雑なものでもアイテムの配置は論理的に分析しなければいけません。そして、ネガティブスペースを学ぶことは、このことに非常に役立つでしょう。

ネガティブスペースを実例から学ぶ

効果的にネガティブスペースを使用するためには、ページ上のコンテンツだけでなくコンテンツ以外にも注意します。古いものですが、下記の顔とグラスがよい例です。

「グラス」あるいは「お互いを見ている顔」が描かれています。

ロゴデザインのネガティブスペース

多くのロゴデザイナーがネガティブスペースをマスターして、ビジュアルに複数の意味をもたせた素晴らしいコンセプトに利用しています。

最も有名なものの一つに、「E」と「X」の間に「矢印」をもたせたFedExのロゴがあります。

また、この種のロゴデザインで私の好きなももの一つに、ゴルファーと人の頭を表現するために、ネガティブとポジティブの両方のスペースを使用したロゴがあります。

これらの例は、コンテンツに焦点をあわせるだけでなく、ネガティブスペースについても注目するようにと用意したものです。
ウェブページのレイアウトにおけるネガティブスペースは、それほど巧妙にすることはなく、オブジェクトの間にもっとシンプルに使用します。

まずはデザインの単純化から

ウェブページのレイアウトでネガティブスペースの使用をマスターする最も簡単な方法は、レイアウトを基本的な形に単純化して、オブジェクトの空間の関係を調べることです。

例えば、次のデザインで適用してみます。

sketchdock

すべての不必要な気を散らすものを削除するために、黒と白を使用して、オブジェクトのすべてをシンプルな長方形にします。

これで、コンテンツとネガティブスペースの明確な区別ができるようになりました。

コンテンツではなくスペースも形をつくっていることに注目してください。
このデザインでは、ネガティブスペースは極めて少ししか使用されていません。決してこれが良くないということではありません。良いレイアウトがネガティブスペースの量によって、決まるものではありません。

上の複雑なデザインがどのようにオブジェクト間の構造化されたネガティブスペースを持っているかに注目してください。ユニークなオブジェクトには類似の間隔が与えられており、グループ化されたオブジェクトは近接のコンセプトをもって配置されています。
簡単に言うと、同じ概念のオブジェクトは、互いにより近くに配置するということです。

ビジュアル的にページ上のオブジェクトがすべて同じ間隔で配置されているなら、それはトレンドを破るものです。

ここでのキーは、あなた自身のデザインでこれらのコンセプトに注意を払い始める、ということです。

ネガティブスペースを分析、そして改善

レイアウトを単純化するための方法を解説したので、次にそのレイアウトを改善できるかどうか見るテクニックを紹介します。

私は最近、完璧であろうデザインを分析することを依頼されました。まず、このデザインが一般的に好まれるものであることを伝え、ネガティブスペースの使用が必要であることを伝えたとき、デザイナーはそれが何を意味しているのか非常に戸惑っていました。
下記にそのレイアウトの基本的なものを再現しました。

これはウェブページをたくさんのホワイトスペースで満たすことが常に良いアイデアではない理由の良い例です。上のレイアウトではデザイナーが空白スペースをどう利用すべきか知らなかったともいえます。

では、このレイアウトを前述のようにシンプルな形を使用して分解します。
この方法は、問題のあるエリアを簡単にみつけることができます。

ページ上のほとんどすべてのものが奇妙に配置されています。そしてユーザーが集中するより、むしろ注意をそらしてしまうほど大きくて等しくないスペースがあります。さらに、多くのエレメントが非対称のデザインをつくっており、エリアの片側にあまりにも詰め込まれています。

問題点の提示

このレイアウトでのネガティブスペースにおける問題をいくつか見てみましょう。

上の図は、このレイアウトにおける問題点を指摘したものです。
まず、ヘッダのオブジェクトが不整列に配置されています。そして、ページの最上部とヘッダの底の間のネガティブスペースはそれが含まれているまばらなエレメントのためにあまりにも大きいです。さらに、レイアウトの右側はそのスペースで奇妙に小さく思われます。

注意をひきつけるためにホワイトスペースでオブジェクトを囲むのは効果的ですが、使い方があります。この場合はただ機能していないだけです。

問題点の改善

あなたのデザインを基本的なワイヤーフレームにして、エレメントのサイズと配置が簡単に分かるようにします。ページ内にあるスペースに注意を払い、近接の関係がビジュアル的に別のエレメントを結ぶために使用されているかを調べます。

ここで、ネガティブスペースの論理的な分配を見ます。ヘッダエリアは垂直のスペースが集まっていました。

見出しとスクリーンショットにある良くないスペースを排除し、ページにクリアなフォーカスのエリアを与えます。
サブコピーの下のエリアは少し寂しかったので、スクリーンショットに関係する機能的でベネフィットの役割を与えたボタンを加えます。
変更後の実際のレイアウトは下記のようになります。

少ないより多いが良いとは限りらない

結果的には、ネガティブスペースを減少させていることに気が付いてください。この方法が常に良いと誤解しないでください。しかし、良くなるケースが多いのも事実です。

ネガティブスペースの有効な使用は量の問題ではありません。「少ないより多いが良いとは限りらない」ではなく、ポイントは適切な使用です。これは多くの場合、ネガティブスペースの増加を要求するだけに焦点をあわせた議論になりがちで、良くないデザインのための奇跡的な万能薬的な傾向があります。
本来、あなたのレイアウトを改善することはデザインで空間の量と適切さを分析し、どのエリアが多すぎで少なすぎるかを決めないことです。

ネガティブスペースの活用例

ウェブページのレイアウトでネガティブスペースを使用した例を見てみましょう。

Wide, Open Spaces

たくさんのソリッドなネガティブスペースを使用したデザインは高級感があり、上品な印象を与えます。シンプルに整頓されたレイアウトがコンテンツをビジュアル的に簡単に分類することができ、プロダクトの写真やJavaScriptのコンテンツスライダーなど特定のエリアを際立たせるために理想的です。

pandaweb

Caravan

100% Organic

ネガティブスペースのすべてが上記のガイドラインに従うために厳密に構造化されているわけではありません。有機的なデザインが自然の乱雑さを演出するためにこのルールを破ります。
ここではコンテンツではなく、コンテンツ間のスペースに注目してください。イレギュラーなスペースとオブジェクトのサイズを決めることによって特徴づけられます。

この方法は、堅苦しくなく楽しむという印象を与え、たくさんのイラストのサイトなどに適しています。

Duplos

lucia

Busy Space as Negative Space

若干のデザイナーがほんのちょっとしたスペースがあると、テキストやアートワークなど何かしらのエレメントで埋めようとします。もしあなたがしっかりと見ることができれば、プライマリコンテンツとネガティブスペースだけでページの基礎となる構造を含んでいると理解できるでしょう。この問題点は、ネガティブスペースをページにビジュアル的な関心を加えるために複雑なディテールでごまかしているということです。