ネガティブスペース」という言葉をご存知ですか?

ネガティブスペースとは、

  • 情報を読みやすくする
  • 情報をわかりやすく伝える
  • ユーザーの視線を誘導する
  • オシャレさや高級感を演出する
  • インパクトのあるロゴや広告をデザインする

などの効果を生み出す「余白」のことです。

とはいっても、具体的にどのくらい余白を入れ、何を意識して余白を活用すればいいのでしょうか?

この記事では、デザインの鍵を握ると言っても過言ではない「ネガティブスペース」について、その活用方法と実例を紹介します。

ネガティブスペースとは「余白」

ネガティブスペースとは、要素と要素のあいだや周囲の何もないスペースなどの余ったスペースのことを指します。言い換えれば余白のことです。もとは、写真やイラストなどのアート・クリエイティブで用いられていました。

現在は、WebサイトのUI/UXデザインや、広告やロゴなどのグラフィックデザインなど、あらゆるデザインの場面でネガティブスペースが活用されています。ホワイトスペースとも呼ばれますが、必ずしも白色なわけではありません

「何もないスペース」「余白」という言葉を聞くと、どうしても埋めてしまいたくなる人も多いでしょう。しかし、散らかった部屋でものを探すのが大変なように、情報もひとつの場所に詰めこみすぎると、ユーザーが本当に欲しい情報を探しにくくなります。伝えたい情報や見せたい要素の重要度に応じて、コンテンツのレイアウトを整理しましょう。

ネガティブスペースの5つの効果と活用のポイント

余白を利用することで得られるさまざまな効果をみていきましょう。

1. 読みやすさを担保する

Webデザインでは、文章の読みやすさ(可読性、リーダビリティ)を意識する必要があります。ネガティブスペースを上手く使えば、ユーザーにとってより文字が読みやすいWebサイトを作れるのです。

文章におけるネガティブスペースは、文字、行間、段落間のスペースです。

文字や行間が詰まっている文章は読みづらく、目が疲れてしまいます。一方、スペースを空けすぎても、スクロール回数が増えて不便だったり、統一感が損なわれたりします。文字の間隔と行間を調整し、読みやすいWebサイトを目指しましょう。

2. わかりやすさを担保する

ゲシュタルト心理によると、人は近くに集まっているものや似ているものをひとまとまりのグループとして認識する傾向があります。

▲出典:INDITALE

▲出典:INDITALE

ひとまとまりに認識してほしい要素や、似た要素どうしを近くに配置することで、グループが明確になります。

グループの周囲に適度なネガティブスペースを置くことで、まとまりが強調され、ユーザーがまとまりを認識しやすくなります。関連する要素はひとまとまりに配置するようにしましょう。

3. 視線を誘導する

Webサイトを見るとき、多くの人は最初にざっと全体を流し読みします。そのため、流し読みでも「どこに重要な要素があるのか」を見つけられるように、サイト訪問者の視線を誘導する必要があります。

見せたい要素の周りのネガティブスペースを大きく取ることで、空白によって要素が強調され、サイト訪問者の目を引きつけられます。ネガティブスペースを上手く使い、要素の重要度を明確にしましょう。

4. オシャレさ・高級感を演出する

大きなネガティブスペースは、見やすさを担保したり、強調したい箇所を強調させるだけでなく、オシャレさや高級感の演出にも使われます。

フォントやタイポグラフィとの組み合わせで、優雅な印象を与えることができます。

5. 余白に意味を持たせる

要素とネガティブスペースを上手く組み合わせて、要素に注目させつつ余白部分に意味を持たせる手法があります。見た人の目を引き、二重の驚きを与えられます。

タイポグラフィやイラストと相性が良く、広告やロゴに使用されることが多い手法です。たとえば、FedExのロゴは”Ex”の文字間の空白が矢印に見えます。有名な『ルビンの壺』という絵では、中央の壺を挟んだ空間が人の顔に見えます。

▲FedEx

▲ルビンの壺

ネガティブスペースを上手く活用したWebサイト10選

ネガティブスペースをWebデザインに応用する際、参考になるサイトを10個集めました。

1. Apple

Appleのランディングページです。

黒一色の背景に、『iPhone X』のシンプルな紹介と画像を配置しています。大きく余白を取ることで高級感を演出しつつ、詳細ページをクリックしたくなるように誘導しています。

V字に製品を置いて生まれたスペースに、絶妙に文字を配置しています。プレミアムな路線を大事にしているAppleらしく、Webデザインの演出にもこだわっているのがわかります。

Apple

2. CARAVAN Exmouth Market

イギリスの飲食店『CARAVAN RESTAURANT』の店舗紹介ページです。

トーンを落としたトップ画像を背景に使い、白抜きのロゴと予約ボタンをシンプルに配置することで目を引いています。

ネガティブスペースを利用して、「予約」「開店時間」「店舗情報」をそれぞれのまとまりとして認識しやすいように配置している好例です。

CARAVAN Exmouth Market

3. Tobias Ahilin

スウェーデンのデザイナー・Tobias Ahilin氏のポートレートサイトです。

自己紹介が目に飛び込んでくるように、大胆に配置しています。

ポートフォリオをカテゴリごとに背景色でブロック分けし、さらに文字に対するネガティブスペースとして利用することで、見やすいサイト構成にしています。

Tobias Ahilin

4. Braintree Payments

Paypalの子会社が提供している決済サービス『Braintree Payments』の紹介ページです。

背景は動画になっており、黒い正方形のスペースを切り取って白抜きで説明文を書くことで、サービス内容を読みやすくしています。

背景の動画内でも、意味のある動きは全て黒いスペースを避けて行われています。そのため、動画に注目している間は、黒いスペースが動画に対するネガティブスペースとして作用しています。

また、非対称にネガティブスペースを配置しつつ、文章と画像の位置を縦に揃えることで視線を上手く誘導しています。

Braintree Payments

5. Airnauts

ワルシャワとパリに拠点を置くデザイン会社『Airnuts』のコーポレートサイトです。最初に目に入ってくるのは、黒一色の背景にロゴとコピー文、あとはスクロールをうながす文だけの、シンプルかつ洗練されたデザインです。

見やすく、わかりやすいコンテンツの配置が徹底されています。見出しや目次の細かい気配りもUXを向上させています。

Airnauts

6. COMP

日本の食品メーカー『COMP』の製品紹介ページです。

製品パッケージと同じくモノトーンに統一されたサイトで、「完全バランス栄養食」の近未来感が伝わってきます。

余白だけでなくアニメーションも駆使し、コンテンツに目が止まるように考えられています。

COMP

7. Millor

武蔵小杉の美容院『Millor』のホームページです。トップ画面は、ハサミとコピー文に視線が向かうように、余白を上手く活用したデザインがなされています。

エレガントさを演出しつつ、カットモデルに目が止まるように、ネガティブスペースを使っています。

Millor

8. yuen-結縁-

日本の伝統工芸品を用いたイベントやプロモーションの企画を行うサービス『yuen』の紹介ページです。京焼のお皿や食材といったサービスに関連するアイテムでロゴとコピー文を囲った、芸術性の高いトップ画像が目を引きます。

写真とその説明という「関連する要素」をひとまとまりにしつつ、左右非対称に配置することで目を引いています。ネガティブスペースの使い方が絶妙です。

yuen-結縁-

9. 500色の色えんぴつ(FELISSHIMO)

ファッションアイテムや雑貨を製造・販売している『FELISSHIMO』のオリジナル製品、『500色の色えんぴつ』の紹介ページです。

カラフルに文字の色を変えていますが、余白を上手く取り入れることによって統一感が生まれています。

500色の色えんぴつ(FELISSHIMO)

10. lafool

メンタルヘルスをITで解決する企業『lafool』のコーポレートサイトです。ネガティブスペースを有効に使って、情報をわかりやすくひとまとめにしています。

ロゴにもネガティブスペースが取り入れられており、「口を開けて笑う様子」と「丸い地球」を同時に表現しています。

lafool

ネガティブスペースに意味を持たせた画像30選

ロゴや広告デザインにネガティブスペースを利用している例を集めました。ネガティブスペースを意識しながらご覧ください。

1. JUMP


Google VR

2. THINK


BRINT

3. RUN


pratikto_design

4. PIANO


Jason

5. pencil


Reghardt

6. USELESS


DESIGN BBY

7. CityDirect


Logomotive

8. Up & Down


David Kovalev

9. THE NORDIC


David Massara

10. BOOM BURGER


Tilius Superoid

11. Cafe


DUTCH UNCLE

12. BLACK CAT


Vasavari

13. Shark


Benjamin Alazet

14. Mt. FUJI


U.G.SATO

15. PLANETS MAKES US HAPPY


Coca Cola

16. THE GHOST WRITER


Hubert Tereszkiewicz

17. Artemis & the Hunt


Ben Girmann

18. The Lady In Red


Claire Wendling

19. PETER AND THE WOLF


Phoebe Morris

20. BOLOGNA FESTIVAL 2012


Bologna Festival

21. MELBOURNE FOOD & FESTIVAL 2007


Melbourne Food & Wine Festival

22. Industry & Environment


Sedki Aliman

23. STOP LISTENING WITHOUT QUESTIONING


Avinash Jai Singh

24. Abdou


Ahmad Tarek

25. Hold Up Robbers


IBM

26. Songbird


TANG YAU HOONG

27. OAK BROS.


Luma Vine

28. Little Red Riding Hood


Guillaume Morellec

29. Animals with cosmic style using negative space


Dan Elijah Fajardo

30. Circus of Magazines


Logotomy

まとめ

ネガティブスペース(余白)を使うことで、さまざまな効果があります。

余白を取り入れることを恐れず、たくさんデザインの練習を積んで感覚を掴んでいきましょう。

本記事を参考にしつつ、ギャラリーサイトを眺めてみれば、新たな発見があるかもしれません。

 

▼こちらもおすすめ!

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ