【漫画】フリーランスが“やってはいけない”活動名
- フリーランス/個人事業主
- 漫画
- 連載
「ネガティブスペース」という言葉をご存知ですか？
ネガティブスペースとは、
- 情報を読みやすくする
- 情報をわかりやすく伝える
- ユーザーの視線を誘導する
- オシャレさや高級感を演出する
- インパクトのあるロゴや広告をデザインする
などの効果を生み出す「余白」のことです。
とはいっても、具体的にどのくらい余白を入れ、何を意識して余白を活用すればいいのでしょうか？
この記事では、デザインの鍵を握ると言っても過言ではない「ネガティブスペース」について、その活用方法と実例を紹介します。
ネガティブスペースとは「余白」
ネガティブスペースとは、要素と要素のあいだや周囲の何もないスペースなどの余ったスペースのことを指します。言い換えれば余白のことです。もとは、写真やイラストなどのアート・クリエイティブで用いられていました。
現在は、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デザインの演出にもこだわっているのがわかります。
2. CARAVAN Exmouth Market
イギリスの飲食店『CARAVAN RESTAURANT』の店舗紹介ページです。
トーンを落としたトップ画像を背景に使い、白抜きのロゴと予約ボタンをシンプルに配置することで目を引いています。
ネガティブスペースを利用して、「予約」「開店時間」「店舗情報」をそれぞれのまとまりとして認識しやすいように配置している好例です。
3. Tobias Ahilin
スウェーデンのデザイナー・Tobias Ahilin氏のポートレートサイトです。
自己紹介が目に飛び込んでくるように、大胆に配置しています。
ポートフォリオをカテゴリごとに背景色でブロック分けし、さらに文字に対するネガティブスペースとして利用することで、見やすいサイト構成にしています。
4. Braintree Payments
Paypalの子会社が提供している決済サービス『Braintree Payments』の紹介ページです。
背景は動画になっており、黒い正方形のスペースを切り取って白抜きで説明文を書くことで、サービス内容を読みやすくしています。
背景の動画内でも、意味のある動きは全て黒いスペースを避けて行われています。そのため、動画に注目している間は、黒いスペースが動画に対するネガティブスペースとして作用しています。
また、非対称にネガティブスペースを配置しつつ、文章と画像の位置を縦に揃えることで視線を上手く誘導しています。
5. Airnauts
ワルシャワとパリに拠点を置くデザイン会社『Airnuts』のコーポレートサイトです。最初に目に入ってくるのは、黒一色の背景にロゴとコピー文、あとはスクロールをうながす文だけの、シンプルかつ洗練されたデザインです。
見やすく、わかりやすいコンテンツの配置が徹底されています。見出しや目次の細かい気配りもUXを向上させています。
6. COMP
日本の食品メーカー『COMP』の製品紹介ページです。
製品パッケージと同じくモノトーンに統一されたサイトで、「完全バランス栄養食」の近未来感が伝わってきます。
余白だけでなくアニメーションも駆使し、コンテンツに目が止まるように考えられています。
7. Millor
武蔵小杉の美容院『Millor』のホームページです。トップ画面は、ハサミとコピー文に視線が向かうように、余白を上手く活用したデザインがなされています。
エレガントさを演出しつつ、カットモデルに目が止まるように、ネガティブスペースを使っています。
8. yuen-結縁-
日本の伝統工芸品を用いたイベントやプロモーションの企画を行うサービス『yuen』の紹介ページです。京焼のお皿や食材といったサービスに関連するアイテムでロゴとコピー文を囲った、芸術性の高いトップ画像が目を引きます。
写真とその説明という「関連する要素」をひとまとまりにしつつ、左右非対称に配置することで目を引いています。ネガティブスペースの使い方が絶妙です。
9. 500色の色えんぴつ（FELISSHIMO）
ファッションアイテムや雑貨を製造・販売している『FELISSHIMO』のオリジナル製品、『500色の色えんぴつ』の紹介ページです。
カラフルに文字の色を変えていますが、余白を上手く取り入れることによって統一感が生まれています。
10. lafool
メンタルヘルスをITで解決する企業『lafool』のコーポレートサイトです。ネガティブスペースを有効に使って、情報をわかりやすくひとまとめにしています。
ロゴにもネガティブスペースが取り入れられており、「口を開けて笑う様子」と「丸い地球」を同時に表現しています。
ネガティブスペースに意味を持たせた画像30選
ロゴや広告デザインにネガティブスペースを利用している例を集めました。ネガティブスペースを意識しながらご覧ください。
1. JUMP
2. THINK
3. RUN
4. PIANO
5. pencil
6. USELESS
7. CityDirect
8. Up & Down
9. THE NORDIC
10. BOOM BURGER
11. Cafe
12. BLACK CAT
13. Shark
14. Mt. FUJI
15. PLANETS MAKES US HAPPY
16. THE GHOST WRITER
17. Artemis & the Hunt
18. The Lady In Red
19. PETER AND THE WOLF
20. BOLOGNA FESTIVAL 2012
21. MELBOURNE FOOD & FESTIVAL 2007
Melbourne Food & Wine Festival
22. Industry & Environment
23. STOP LISTENING WITHOUT QUESTIONING
24. Abdou
25. Hold Up Robbers
26. Songbird
27. OAK BROS.
28. Little Red Riding Hood
29. Animals with cosmic style using negative space
30. Circus of Magazines
まとめ
ネガティブスペース（余白）を使うことで、さまざまな効果があります。
余白を取り入れることを恐れず、たくさんデザインの練習を積んで感覚を掴んでいきましょう。
本記事を参考にしつつ、ギャラリーサイトを眺めてみれば、新たな発見があるかもしれません。
▼こちらもおすすめ！
UXデザインに欠かせない”スキャナビリティ”とは？ 可読性の高いページを作るための10のヒント
Workship MAGAZINE
Webデザインの参考に！海外&国内のギャラリーサイト30選。LPからECサイトまで
Workship MAGAZINE
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
週末の草野球と酒のために生きているライター・編集者。
