余白と間（ま）

ねらい

紙でもWebでも、いちばん見落とされる設計対象がある。余白だ。

余白とは、文字や写真が「置かれていない」ところ。多くの人はこれを「余り」「埋め残し」だと思っている。だから不安になると、すき間を文字や飾りで埋めたくなる。

このクエストのねらいは、その思い込みを裏返すこと。余白は余りではなく、置くものだ。どこに、どれだけ空けるか――それ自体が、情報のまとまりや、画面の落ち着きや、高級感を決めている。空白は「何も無い」のではなく「働いている」。

図と地 ―― 空白は背景ではなく半分の主役

なぜ余白を「設計対象」と言い切れるのか。出発点は、心理学の有名な見方にある。図と地だ。

人は絵を見るとき、画面を二つに分けて見ている。「主役（=図）」と「背景（=地）」だ。リンゴの絵なら、リンゴが図、まわりの白が地。ふつう私たちは図だけ見て、地は意識しない。

でも――有名な「ルビンの壺」を思い出してほしい。まん中の白い柱を主役として見れば、壺（つぼ）に見える。その左右の黒い部分を主役として見れば、向き合った二つの横顔に見える。あの絵だ。同じ一枚で、地（背景）が図（主役）に化ける。これが教えるのは一つ。背景は、ただの空っぽではない。形を持ち、意味を運ぶということだ。

この「図と地という見方」そのものを最初に整理したのが、心理学者のエドガー・ルビンだ（1915年）。同じような目の錯覚の絵は昔からあったが、「背景もまた形を持つ」と概念として言い切ったのが彼の功績だ（典拠1）。

ここから結論が出る。文字や写真（図）をどう置くかを考えると同時に、残った空白（地）がどんな形になるかも、必ず一緒に決まる。だから空白を放っておくのは、設計の半分を「運まかせ」にするのと同じ。空白も、こちらが意図して置く。これが余白を設計する、ということだ。

近接の原理 ―― 余白の大小が「まとまり」を決める

余白の最初の仕事は、情報をグループ分けすることだ。ここで効くのが近接の原理。

近接の原理とは、人の脳のクセの一つ。近くにあるものを、脳が勝手に「仲間」とまとめて見る。逆に、離れているものは「別のグループ」と見る。心理学ではこのまとめて見る働きをゲシュタルト（近いもの・揃ったものを脳が自動でひとかたまりに見る性質）と呼び、近接の原理はその代表だ。図と地のルビン（1915）に続いて、ヴェルトハイマーらがこの群化のしくみを1923年に体系立てた（典拠2）。

つまり、まとまりを作るのは線でも囲み枠でもない。余白の大小だ。要素どうしの間を狭くすれば「ひとかたまり」に、広くすれば「別もの」に見える。

ここに、現場でいちばん効く一行が出てくる。「仲間どうしの間」より「グループとグループの間」を広くする。たとえば見出しと、それにぶら下がる本文。両者の間は狭く。次の見出しが来る前は、広く空ける。これだけで、内容を読む前から構造が伝わる。

逆に、見出しと本文の間と、段落どうしの間が同じ広さだと、脳はどこで切れるか分からず迷う。間隔がバラバラ＝意味の切れ目がバラバラ、ではなく――間隔を一律にする＝意味の切れ目が消える、という話だ。だから余白は、意味の切れ目ごとに広さを変える。

マージンとパディング ―― 余白には「外」と「内」がある

余白を道具として使うには、二種類を区別すると一気に扱いやすくなる。マージンとパディングだ。これはWebをつくる人が毎日使う言葉でもある。

• マージン＝箱の外側の余白。その箱と、隣の箱との間を空ける。
• パディング＝箱の内側の余白。箱の枠と、中身との間を空ける。

たとえばボタン。文字のまわりにゆとりがあって押しやすいのは、パディング（内側の余白）のおかげ。そのボタンと隣のボタンが離れて別物に見えるのは、マージン（外側の余白）のおかげ。同じ「余白」でも、役割が逆だ。

なぜ分けると得なのか。「直したい余白がどっちか」が即わかるから。文字が枠にくっついて窮屈なら、内側＝パディングを増やす。二つの要素がくっついて一体に見えるなら、外側＝マージンを増やす。原因を「内か外か」で言えれば、直し方は自動で決まる。前章で学んだグリッド（升目に乗せる考え方）と同じで、「なんとなく」ではなく「枠の内側が狭い」のように名前で言える状態を作るわけだ。

ちなみに、このマージン（外周の余白）をどれくらい取るかを、組版の中心的な技として比例で論じたのが、ロバート・ブリングハーストだ。著書『The Elements of Typographic Style』(1992) で、彼は本文と紙の端のあいだの余白を「あとで余ったところ」ではなく、最初から比率で決めるべき設計対象として扱った（典拠6）。余白は、行き当たりばったりではなく、寸法で語れる。

詰め込みは不安、余白は余裕 ―― なぜ広い空白が「高級」に見えるか

ここからは「気持ち」の話。余白の量は、見る人の感情を変える。

すき間を文字や飾りでびっしり埋めた画面は、見ていてせわしない。安売りのチラシを思い出してほしい。「全部お得！　今すぐ！」を詰め込むほど、にぎやかだが、落ち着かない。これは作り手の**「一つでも多く言わなきゃ」という不安**が、そのまま画面に出たものだ。

逆に、要素を絞って空白を広く取った画面は、落ち着いて、堂々として見える。高級ブランドの広告や、美術館のポスターを思い出してほしい。商品が一つ、ぽつんと置かれ、まわりは大きく空いている。

理由は、図3で見た近接の原理を一歩進めると見える。近接の原理では、近いものは仲間に見えた。逆に、まわりに何も無い要素は「仲間がいない＝ぽつんと際立つ」。これは「対比で目立つ」――背景と一点だけが残れば、その一点に視線が集中する。だから広い空白は、要素を孤立させて強く見せる。さらに「これだけしか置かない」という余裕そのものが、自信のサインとして伝わる。たくさん言わなくても価値が伝わる、という態度――それが「高級感」の正体だ。空白は、言葉にしない自信の表現でもある。

この「空白を積極的に使う」態度は、いきなり生まれたものではない。さかのぼれば、1928年にヤン・チシュホルトが著書『Die neue Typographie（ニュー・タイポグラフィ）』で、白を「埋め残し」ではなく「能動的な構成要素」だと位置づけたのが源流だ（典拠3）。そして前章でも触れたスイス様式が、1950年代にその考えを様式として徹底し、余白を広く意図して取った（典拠4）。つまり余白の能動性は、誰かの好みではなく、チシュホルト → スイスと受け継がれてきた設計の伝統だ。

西洋の「ホワイトスペース」と日本の「間（ま）」

最後に、余白の思想を二つの文化からとらえ直す。西洋のホワイトスペースと、日本の**間（ま）**だ。結論を先に言うと、別々に見えて、根は同じ。どちらも「何も無いところが働く」という考えだ。

西洋のデザインでは、余白を「ホワイトスペース（白い空間）」と呼ぶ。紙の白がそのまま見えている部分のことだが、これを「積極的に置く空間」として扱う。スイス様式の「働く余白」は、この系譜にある。

日本にはもっと古くから間（ま）という考えがある。間とは、もの と もの の“あいだ”にある、何も無い時間や空間。それ自体に意味がある、という感覚だ。音楽なら音と音のあいだの無音。会話なら言葉と言葉のあいだの沈黙。庭なら石と石のあいだの空き。「何も無い」が、むしろ全体を生かす。日本人はこれを昔から大事にしてきた。

この日本の感覚を、デザインの言葉として世界に伝えたのが、デザイナーの原研哉だ。著書『デザインのデザイン』(2003) で、彼は「エンプティネス（空っぽ）」を中心に据えた。空っぽの器は、何も無いから、見る人がそこに思いを注ぎ込める――だから空白は弱さではなく、受け止める強さなのだ、と（典拠5）。空白は「足りない」のではなく「まだ満たされていない、可能性の場所」だという見方だ。

だから余白を取るときは、こう考えるといい。「ここを埋めずに残すことで、何が生きるか」。空白は引き算ではなく、残すという積極的な一手だ。

見分け方 ―― 余白が効いているか、3つのチェック

街やWebで「余白が設計されているか」を見抜く目を持とう。次が当てはまるほど、余白が働いている。

• グループの間が、仲間の間より広い（近接が効き、構造が読める）
• 外周にたっぷり余白がある（要素が枠にへばりついていない＝余裕）
• 空白の“形”がきれい（埋め残しでなく、意図して残されている）

逆に「なんだか窮屈・安っぽい」と感じたら、たいてい原因は二つ。要素を詰め込みすぎか、余白の大小が一律で構造が読めないか。直し方は決まっている――足すより先に、引く。空けて、間隔に差をつける。

これらは別々のコツではなく、すべて**「空白は働く」という一つの思想**から出ている。余白を「余り」でなく「置くもの」と見る――この一点を握れば、掟は自然に思い出せる。

譜例

棚（design-gallery）で、余白がよく効いた実例を見て、本文の三つのチェックがどう現れているか確かめよう。

• 棚で実例を見る

見るときは、図7の三点（広い外周・グループ間の余白・空白の形）がいくつ当てはまるかを数えてみるとよい。

練習・チェック

1. 身近なWebサイトやチラシを1つ選ぶ。見出しと本文の間の余白と、段落どうしの間の余白を見比べよう。ちゃんと差がついているか。同じなら、近接が効いていない。
2. 「窮屈に見える」要素を一つ見つけ、原因をマージン（外）かパディング（内）かで言ってみよう。枠にくっついて苦しいなら内、隣とくっついて一体に見えるなら外。
3. 自分の作ったスライドや資料で、一番ごちゃついたページを一枚選ぶ。要素を足さず、2つ消して、空いた分を余白として残す。せわしなさが減れば、余白が働いた証拠だ。