ネガティブスペース とは？
気に入った画像や写真を見て、「どうしてこんなに面白くて魅力的なんだろう」と思ったことはありませんか？また、映画やテレビのワンシーンを見たときに、なぜそのシーンに強い感動を覚えるのかと考えたことはありませんか？
それは被写体のせいなのか、それとも作者の遠近法のせいなのか。そうかもしれません。しかし、自分の好きなWebサイトやユーザーインターフェースを思い浮かべてみると、それらがどのように見えるからこそ、楽しんで使うことができるのでしょうか。ウェブページやアプリに使われている色やフォントのせいかもしれません。あるいは、これらの例であなたが反応しているのは、「ネガティブスペース」というものかもしれません。
高度なプロトタイピングとデザインハンドオフのためのエンドツーエンドデザインアプリ、UXPinをお試しください。ウェブサイト、アプリ、ランディングページを数分でデザインできます。無料トライアルはこちらより。
ネガティブスペース とは？
ネガティブスペースとは、わかりやすく言えば、被写体の周りや間にある空間のことです。このブログ記事のテキストを囲む白いスペースや、スタイリッシュなモノクロ写真のモデルの顔の後ろにある黒い背景など、ネガティブスペースはよく見られます。しかし、それだけではなく、ネガティブスペースは被写体にさらなる情報や意味を与えることができます。しかし、それについては後述します：
まず、ネガティブスペースのないデザインとはどのようなものかを見てみましょう。
ネガティブスペース のない世界
子供の頃、「ウォーリーをさがせ」シリーズの絵本に出会ったことがあるかもしれません。何百人ものキャラクターが登場し、賑やかな人混みのシーンが緻密に描かれていますよね。そして、そのシーンのどこかに、被写体であるウォーリーがいるのです。丸い黒眼鏡をかけ、赤と白のストライプの服と帽子が特徴的なその小さな人物を見つけるのに、何時間もかかることもあります。どの絵にも、ネガティブスペースは1つもありません。
もし、私たちのデザインがそうであったとしたら、どうでしょう。この記事を読もうとしたときに、すべての文字や線が互いにぎゅうぎゅう詰めになっていたり、さらに悪いことに、他のブログ記事のテキストで覆われていたりすることを想像してみてください。
また、「ウォーリーをさがせ」のように、すべてのレイアウト要素を詰め込んでデザインされたアプリを使おうとした場合を想像してみてください。このようなデザインのアプリやウェブサイトは、使い物になりません。1990年代のウェブサイトのデザインを覚えている人なら、その理由がわかるはずです。
デザインにおける ネガティブスペース の使い方
ウェブページやアプリのデザインにおいて、ネガティブスペースは重要な役割を担っています。ネガティブスペースを意識的に使うことで、ウェブページやアプリが読みやすくなり、ページやアプリの画面に含まれる重要な要素に、より大きな注目を集めることができます。さらに、ネガティブスペースをうまく使うことで、情報の階層を作ることができ、すべての側面が同時に閲覧者の注意を引くことがなくなります。
考え抜かれた手法では、以下のことを達成しようとします：
- ページやアプリのスキャンしやすさの向上
- 視覚的なヒエラルキーの強化
- ページや画面のさまざまな要素を直感的に結びつける
- 全体的にごちゃごちゃしていない感じ
- 気が散らないようにしながら、ユーザーがコアな機能に集中できるようにする
- ページや画面にスタイルとエレガンスが加わる
大きなスペースと小さなスペースの違い
Webデザインやアプリの画面でネガティブスペースをどのように使うかは、それを小さなスペースに適用するか、大きなスペースに適用するかによっても異なります。
大きな空間
Webページやアプリの画面全体のデザインやレイアウトなど、大きな空間を扱う場合は、全体のコンテンツを見てネガティブスペースを適用する必要があります。自分自身に問いかけるべき質問は次のとおりです：
- ネガティブスペースを使って要素を分離できるか？
- テキストは列に分割する必要があるのか？
- 余白やパディングの大きさはどのくらいにすべきか？
- 画像と画像の間の距離はどのくらいにすべきか？
このような ネガティブスペースは、ユーザーの視覚的な流れに大きく影響します。潜在的な誘導であれ、強い押し出しであれ、注意をむけてほしい場所に導くことができます。
小さなスペース
小さなスペースでは、別の種類のネガティブスペースが必要になります。これには次のようなデザイン要素が含まれます。
小さなデザイン要素に割り当てるネガティブスペースは、主にウェブサイトやアプリの画面の全体的なわかりやすさを強調するもので、特にタイポグラフィに関連するネガティブスペースの量は重要です。
ネガティブスペースは、ページや画面上のテキストの読みやすさに直接影響します。テキストの行間に十分なスペースがないと、読みにくくなり、ユーザーにさらなる努力を要求することになります。
ネガティブスペース とは：クリエイティブなネガティブスペース
クリエイティブなネガティブスペースの例として、「ルビンの壺」と呼ばれる画像があります。これは、20世紀初頭にデンマークの心理学者エドガー・ルービンが開発した、目の錯覚を利用した有名な作品です。
左の画像では、黄色い花瓶が被写体で、白い背景がネガティブな空間になっています。しかし、右のモノクロ画像を見ると、2人の男性の横顔が見えてくるかもしれません。次に、左の写真を見てみましょう。元の画像のネガティブスペースには、同じように2人の男性の顔が写っています。黄色い花瓶が被写体であることに変わりはありませんが、ネガティブスペースがあることで、見る人に新たな情報を伝えることができるのです。
目の錯覚は、コーポレートデザインには関係ないと思っていませんか？しかし、考え直してみてください。フェデックスのロゴを見てみましょう。
EとXの間を見て、何か気づきませんか？それは矢印です。フェデックスの事業内容をサブリミナル的に強化しています。これもネガティブスペースのクリエイティブな使い方の一例です。
UXPinはネガティブスペース 使用の改善に役立ちます。
いかがだったでしょうか？次に新しいデザインを始める際は、ネガティブスペースがデザインやUX（ユーザーエクスペリエンス）に与える影響を覚えておきましょう。UXPinでは、デザインやプロトタイプを作成し、複数のデバイスでプレビューして確認することができます。チームメンバーやビジネスパートナーと連携し、ネガティブスペースの使用に関してフィードバックを得ることができます。UXPinの１４日間の無料トライアルで、次のネガティブスペースを使ったデザインプロジェクトを始めてみましょう。
