Translation of: Whitespace - A List Apart
僕の最初のデザインの仕事はマンチェスターの小さな印刷系のデザイン事務所でのもので、そこでは様々なものをデザインしました。パッケージや出版、ノベルティ、そして…ダイレクトメール。中でも、大きく、太く、そしてゴミゴミさせることが常のダイレクトメールをデザインする時には、大学で習ったグラフィック・デザインの原則はわずかしか役に立ちませんでした。忘れもしませんが、クライアントの一人にこう言われたことがあります。「余白は無駄なスペースだ」と。
ダイレクトメールの依頼者は大衆向けにデザインすれば効果的なので、そうすることを望みます。しかしながらダイレクトメール以外においては、それはまったくの間違いです。
はじめまして、余白さん
「余白」または「間(ま)」とはあるデザインを構成する要素同士の間隔のことです。もっと細かく言うなら、構図における主要な要素同士の間隔のことを"マクロ・ホワイトスペース"と呼びます。マイクロ・ホワイトスペース―もうわかったと思いますが―はもっと小さな要素同士の間隔、つまりリスト項目同士や見出しと画像、単語間、文字間のことです。
では、これらの余白はどのように作用するのでしょうか？
マイクロ・ホワイトスペースが読みやすさに与える影響
何か月か前、幸運なことにErik Spiekermannの教えを受ける機会がありました。彼は、元のデザインが重厚すぎて記事が読みづらいことがあるという理由によるThe Economist紙のリデザインについて触れました。
情報の密度が非常に高い新聞のデザイン、Webデザインでもそうですが、においては、時々余白を追加することが難しいことがあります。新聞ではこういった問題を解決するために記事の本文を軽いウェイトのタイプフェイスにすることによって文字の周囲に空間を確保したりします。これはSpiekermannがThe Economist紙のリデザインで採用した手法でもあります。
元々のタイプフェイスの味のあるイメージを壊さないように、Spiekermannはそれぞれの文字に余白を与えるという変更をくわえました。そしてフォントサイズをほんのすこし小さく、社説等では更にもう少し小さくしました。これらの変更によってデザインにマイクロ・ホワイトスペースが追加されることになりました。その結果は、コンテンツそのものにまったく変化がないにも関わらず、記事本文はより読みやすく、新聞全体のイメージはより軽くなるという非常に巧妙なものでした。
Spiekermannはマクロ・ホワイトスペースや色味の変更も加えていましたが、The Economist紙におけるタイプフェイスのリデザインの成功は、ほんの僅かな要素の空間がデザインにとても大きな影響を与えるということを実証しました。それはWebにおいても同じでしょう。
ブランディング
高級ブランドの洗練された様子や優雅さを演出するためにデザイナーは余白を利用します。タイポグラフィーと写真、そして豊富な余白の繊細な組み合わせは高級ブランド周辺ではよく見受けられるでしょう。例えば化粧品ですが、ノベルティのデザインでは余白をふんだんに使って洗練されていることや高級感、そして高価そうな感想を消費者に伝えようとしています。
僕に昔ダイレクトメールのデザインを依頼した人の余白に対する捉え方は、彼が宣伝したい製品に限っては正しいものでした。なぜなら彼の製品は大衆に広くアピールしなければならないもので、そのデザインに余白を与えたならば不適当に高級感が出てしまうでしょう。以下の例を見てみてください。
写真等の構図を構成する要素が同じように、コンテンツ自体も両方のデザインで同一です。にも関わらずこの両者のブランディング効果はまったく正反対の結果に終わります。余白が少ない方はチープな印象を与え、余白をたっぷりと取った方は高級感を与えているでしょう。
ブランディングに影響を与える物は余白だけに限りませんが、高級ブランド品とその競合他社の製品を机に並べてみれば、余白とそのふんだんな利用が大きな違いをもたらすことがクライアント―そしてそのターゲット層―にも理解できることでしょう。
アクティブ・ホワイトスペースとパッシブ・ホワイトスペース
余白は大抵の場合バランスよく調和の取れたレイアウトにするために利用します。丁度良いと「感じる」ようにです。写真家が視線誘導のために主題を中心からずらして配置し「looking room」を確保するように、空白により読者のコンテンツの読み進めを制御することができます。このような視線誘導を目的とした余白のことを「アクティブ・ホワイトスペース」と呼びます。
まずは何も余白を追加していないサンプルを見てみましょう:
全てが非常に読みづらくなっています。余白を与えることによって、調和と快適な印象をデザインする必要があるでしょう。まず最初に僕はマージンを与えることとフォントファミリとそのウェイト(太さ)の変更、そして行間(CSSでいうところのline-heightに相当するもの)を増やしました。これらは全て「パッシブ・ホワイトスペース」に属するものです。
パッシブ・ホワイトスペースについては構図を考えるにあたってさほど重要ではないと主張する人もいます。僕はそれには賛成できません。もし全ての余白について配慮が足りなかったら、それは悪いデザインになることでしょう。パッシブ・ホワイトスペースによってゆったりとした空間が形成されバランスよくなります。これはとても重要なことです。
ですが、これではまだ完成ではありません。このコンテンツでは読者の注意を引きたい場所があります。それは二つ目の引用です。その部分の色を変更したり、フォントサイズを大きくしたりすることによっても可能ですが、ここではマクロ・ホワイトスペースを周囲に追加することによって読者の視線を誘導し、太字にすることによりマイクロ・ホワイトスペースを減らしてみます。
これがアクティブ・ホワイトスペース、つまりより良い強調や構成、情報をその構図へ与える余白です。
練習、練習、そして練習
余白の概念をきちんと把握するための唯一の方法は練習です。総合格闘家が簡単な技の反復練習に勤しむように、グラフィック・デザイナーもそうしなければなりません。グラフィックデザインを専攻する学生達が使うような教材が何十年分もありますし、幸運なことに歴史上著名なデザインについてはその手法を解説した本があります。Emil Ruderの本は僕のお気に入りの一つです。
Ruderは1970年に亡くなったスイスのタイプデザイナーです。彼は21年に渡ってタイポグラフィーについて教鞭をとった後、Typographie: A Manual of Designという本を著しました。その本によると:
The book is deliberately restricted to pure typography, to working with prefabricated types which are subordinated to a precise system of measurements. Its purpose is to make apparent the laws of typography and—in spite of certain common features—the contrast between it and graphic design which in both the selection and means of their application, is freer and more complex.
この本では故意に正確な測定機器などによく使われる既存のタイプフェイスによるタイポグラフィーに限定しています。その目的はタイポグラフィーの法則をはっきりとさせることと、一般的な共通点を除き、その利用においてより自由でややこしいグラフィックデザインとの違いを明らかにすることです。
Ruderの教えは印刷物におけるタイポグラフィーと書体をうまく使った緻密なデザイニングにフォーカスを当てたものです。Ruderは正しいやり方と間違ったやり方をそれぞれ説明してくれているので、構図のための基本的な原則を学ぶのにはもってこいでしょう。この本には余白を含め様々なデザインにおける要素についての素晴らしい実践例がぎっしりと詰まっています。とても高価なものですが、その価値があるでしょう。
コンテンツの外側、内側そしてその周囲の空間をどう扱いデザインすれば良いのか学んだならば、読者がそのコンテンツをより早く把握できるようになったり、取扱製品をより明確に意識させられるようになったりするでしょうし、もしかするとそのコンテンツがより輝きを増すようにすることができるかもしれません。
訳注
単に日本語における"余白"的に使われている"whitespace"は"余白"としましたが、"マクロ・ホワイトスペース"等の特別な意味を込められているものはそのままカタカナにしました。ただし日本語の"間(ま)"が元になっているとも言われる"ネガティブ・ホワイトスペース"だけは"間"としました。読みづらいと思いますがご了承ください。
また元の記事でも引用になっている部分は原文と訳を併記しました。