余白と心理的な距離とは?親しみやすさと格式を余白で表現する考え方

余白と心理的な距離の基本

まずは、余白と心理的な距離とはどんな考え方なのか、そしてなぜ余白が距離感の印象につながるのかを押さえましょう。

余白と心理的な距離とは

余白と心理的な距離とは、余白の取り方によって、デザインが見る人に「近い・親しい」や「離れている・改まっている」といった距離感を感じさせる、という考え方です。

人と人の関係にたとえると分かりやすくなります。

親しい友人とは近い距離で話しますが、初対面の相手や目上の人とは、自然と少し距離をとって話すことが多いはずです。
心理学ではこうした「他人に近づかれると落ち着かなくなる、自分の周りの空間」をパーソナルスペースと呼びます。

デザインでも、要素が詰まった画面はにぎやかで身近な印象に、余白の多い画面は静かで改まった印象になりやすい、とよく言われます(余白の量と印象の関係は余白が与える印象とはで解説しています)。

ただし、これは人の距離感を手がかりにした「たとえ」であり、「余白が何pxなら親しみやすい」と数値で決まる法則ではありません。
あくまで、デザインの雰囲気を考えるための目安として使いましょう。

近い・遠いが「関係の近さ」に見える仕組み

余白が距離感として伝わる土台には、「近くにあるものは関係が深いものに見える」という目の性質があります。

これは近接の原則(近くに置かれたものは同じグループに見えるという、人の見え方のルール)と呼ばれ、ユーザビリティ(使いやすさ)の調査で知られるNielsen Norman Groupも、余白の量を変えることで要素をまとめたり分けたりできると説明しています(Proximity Principle in Visual Design(英語))。

要素どうしが近いと「ひとつのまとまり」として感じられ、離れていると「それぞれが独立したもの」として感じられます(近接の原則は近接の原則とはで詳しく解説しています)。

そのため、要素を詰めた画面は全体がひとかたまりに見えてにぎやかになり、要素を離した画面は一つひとつが落ち着いて、少し改まった雰囲気になりやすいのです。

余白で「親しみ」と「格式」の印象が変わる

余白の量を変えるだけで、同じ内容でも「親しみやすい」デザインにも「格式のある」デザインにもなります。

次の見本は、同じ「お知らせ」を、余白の量だけを変えて2通りにデザインしたものです。

見本Aは、要素が近くにまとまっているので、商店街の掲示板のような気軽さがあります。

見本Bは、要素どうしがゆったり離れているので、ホテルや老舗のお店からの案内のような、改まった丁寧さが感じられます。

2つの見本は文字の大きさも同じで、変えているのは次の3か所の余白です。

余白の場所	見本A(親しみ)	見本B(格式)
カードの枠と文字の間(内側の余白)	14px	上下36px・左右28px
要素と要素の間(NEWS→見出し→本文→リンク)	2px・6px・8px	14px・20px・28px
本文の行間(行の高さ)	文字サイズの1.7倍	文字サイズの2倍

たとえば見出しと本文の間は、見本Aが6px(本文の文字の半分ほど)、見本Bが20px(本文の文字1.5個分ほど)です。

CSSでは、内側の余白をpadding、要素と要素の間をmargin、行の高さをline-heightで指定します(内側と外側の余白の違いはCSSのmarginとpaddingの違いとはで解説しています)。

どちらが正解というわけではなく、伝えたい距離感によって選ぶものです。

北米の広告制作の責任者を対象にした調査でも、広告で余白を大きく使う理由の一つとして「ブランドの格(プレステージ)を伝えるため」が挙げられています(Print advertising: White space(英語))。

余白で心理的な距離をデザインする方法

ここからは、余白で心理的な距離感をコントロールするための考え方と手順を紹介します。

見る人とどんな距離感で話したいかを決める

余白の量を決める前に、まず「このデザインで、見る人とどんな距離感で話したいか」を言葉にしておきましょう。

距離感が決まっていないと、余白をなんとなく決めることになり、サービスの雰囲気と合わないデザインになりやすいからです。

伝えたい距離感と余白の取り方の対応は、次のように考えると整理しやすくなります。

伝えたい距離感	余白の取り方	向いている例
近い・親しみやすい・気軽	要素どうしを少し詰め気味にし、ひとまとまりに見せる	地域のお店、子ども向けサービス、セールやイベントの告知
ほどよい・信頼できる	関係のある要素は近く、まとまりの間はしっかり空ける標準的な余白	一般的な企業サイト、Webサービスの説明ページ
遠い・格式がある・丁寧	要素の数を絞り、まとまりの中も外もゆったり空ける	ホテル・旅館、高級ブランド、法律事務所、式典の案内

「遠い」と聞くと冷たい印象に思えるかもしれませんが、ここでは「相手を敬って一歩下がる」ような丁寧さのことです。

サイト全体の雰囲気の決め方はトーン&マナーとはで、届けたい相手に合わせた考え方はターゲットに合わせた色選びで解説しています。

サービスの雰囲気と余白をそろえる

距離感を決めたら、余白の取り方がその雰囲気と食い違っていないかを確かめます。

言葉や色では「丁寧」を伝えているのに、余白が詰め詰めになっていると、見る人はちぐはぐな印象を受け、内容まで信用しにくくなるためです。

次の見本は、格式を大切にしたい法律事務所の案内を、2通りの余白でデザインしたものです。

NGの見本は、文言は丁寧なのに、余白が少ないせいで急いでいるような、落ち着きのない印象になっています。

OKの見本は、同じ文言でも余白を広くとったことで、「じっくり相談に乗ってもらえそう」という安心感が伝わります。

OKの見本で広げているのは、行間だけではありません。

カードの内側の余白(10px→上下32px・左右26px)、見出しと本文の間(2px→18px)、本文とボタンの間(4px→24px)、ボタンの内側の余白(上下4px・左右10px→上下8px・左右18px)をそれぞれ広げ、本文の行間も文字サイズの1.5倍から1.9倍にしています。

一方で、本文の2つの段落の間は2px→8pxと少し広げるだけにとどめ、関係のある文章どうしはひとまとまりに見えるようにしています。

格式を出したいときは、行間を少し広げるだけでなく、まとまりとまとまりの間や枠の内側をしっかり空けることが大切です。

反対に、親しみやすさを大切にしたい子ども向けのサービスで余白を広くとりすぎると、よそよそしく寂しい印象になることもあります。

余白だけでなく、色や書体と組み合わせる

心理的な距離感は余白だけで決まるものではないので、色や書体とも方向をそろえることが大切です。

余白をゆったりとっても、色が派手で書体がポップなら、格式よりもにぎやかさが勝ってしまうからです。

たとえば格式を出したいなら「広めの余白+落ち着いた色+明朝体」、親しみを出したいなら「詰め気味の余白+明るい色+丸ゴシック体」のように、要素の向きをそろえると印象がはっきりします(書体の選び方はターゲットに合わせた書体選びで解説しています)。

実践のポイント

余白で距離感を表現するときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 余白の量を「見た目が整っているか」だけで決めてしまい、見る人にどんな距離感を与えるかまで考えていないことがあります。
  デザインができたら、「この画面は、見る人にどんな口調で話しかけているか」を想像してみましょう。
• フォーマルなサービスなのに情報を詰め込んだり、親しみやすさが売りのサービスなのに余白を広くとりすぎたりして、雰囲気と余白が食い違うことがあります。
  言葉・色・書体と余白の向きがそろっているかを確認しましょう。
• 親しみやすさを出そうとして余白を詰めすぎると、窮屈で読みにくくなります。
  「詰め気味」は、関係のある要素を近づけるという意味で、読みやすさに必要な余白まで削ることではありません。
  詰めるのは見出しと本文、本文とボタンのような要素と要素の間にとどめ、本文の行の高さは文字サイズの1.5倍以上を保ちましょう(行間の目安は読みやすい本文とはで解説しています)。

よくある質問

• Q. 余白は広いほど高級に見えるの?
  A. 余白を広くとると落ち着いた印象になりやすいのは確かですが、広ければ広いほどよいわけではありません。
  空けすぎると、内容が少なく寂しい、間延びしたデザインに見えることもあります。
• Q. 1つのサイトの中で、距離感を変えてもいい?
  A. ページの目的によって変えるのはかまいません。
  たとえば企業サイトでも、採用ページは少し親しみやすく、会社概要は落ち着いた余白にする、といった使い分けがあります。
  ただし、ヘッダー(ページ上部のメニュー)やフッター(ページ最下部の案内)、書体、基本の色、ボタンや見出しの余白など、サイト共通の部品は全ページでそろえておきましょう。
  変えるのは、ページ冒頭の大きな画像(メインビジュアル)の周りの余白や、セクション(テーマごとの大きなブロック)どうしの間の広さにとどめると、サイトとしての統一感を保ったまま印象を変えられます(共通の余白ルールの作り方は余白の間隔のルールとはで解説しています)。

まとめ

余白と心理的な距離とは、余白を詰めると近く親しみやすい印象に、広くとると落ち着いて改まった印象になりやすい、という人の距離感になぞらえた考え方です。

見る人とどんな距離感で話したいかを先に決め、余白・色・書体の向きをそろえると、伝えたい雰囲気がぶれずに届きます。

まずは、親しみやすいお店と格式のあるホテルのWebサイトを1つずつ開き、見出しと本文、ボタンの周りの余白がどう違うかを見比べてみてください。

余白の学び方の全体像は、デザイン初心者のための余白学習ロードマップで紹介しています。