余白とはなにか。デザインが上達する６つのTips

• 作成：2016/10/17
• 更新：2016/10/17
• Webデザイン >

余白とはなにか、漠然としていたので、今回は余白の種類や使い方を少しでもマスターするために参考になる知識をまとめました。

エンジニア速報は Twitter の@commteで配信しています。

余白とはなにか

余白（margin）とはタイポグラフィやレイアウトにおいて何も書かれていない空間、もしくは何も配置されていない空白部分のことをいいます。一見何も存在しない真っ白のスペースのようでありながら、意図的に配置されていることもあります。だからといって白である必要はありません。

つまり、余白とは「一見何もなさそうだけど○○」といったような感じです。例えば…

西洋画に余白を使った絵は少ないですが、雪舟のような水墨画では「間」や「静かさ」を演出するなどの余白の使われ方によって、しみじみとした余情を感じることができます。

雑誌などの紙面では小さなテキストを広い余白に配置し存在感を出したり、視線の滞在時間をコントロールするなどの活用方法があります。

コメディアンは「間」という余白を使って観客を熱狂させます。スピーチの前に沈黙という余白を作ることによって、観客を静かにさせるような手法もあります。交渉相手に沈黙を使って主導権を握る人もいます。

Webサイトやポスターなどにおいては、何かに注視させたいときやキービジュアルを引き立たせたいときに余白を活用します。

このようにデザインだけでなく生活のいたるところに余白は存在します。余白は一見目立たないようでいて、見る人をナチュラルにコントロールする重要な要素なのです。

ビジュアルホワイトスペース

文字・画像・ボタンなどが配置されていない余白部分をホワイトスペースといいます。こちらは画像・アイコン周辺の余白に関するビジュアルホワイトスペース、ノド余白のレイアウトスペースに関する基礎知識と、それがなぜ必要なのかが書かれてあります。

UXデザインに余白が重要な4つの理由 | freshtrax [フレッシュトラックス] | btrax ブログ

ゲシュタルト・プレグナンツの法則

ゲシュタルトとは

全体性を持ったまとまりのある構造 ゲシュタルト心理学 - Wikipedia

とのことですが、この中に記載してあるプレグナンツの法則に

• 近接の要因：近接（近いもの）しているもの同士はひとまとまりになりやすい
• 類同の要因：同じ種類同士はひとまとまりになりやすい
• 閉合の要因：互いに閉じあっているもの同士はひとまとまりになりやすい

と書いてあります。逆をいえば離れていたり（余白がある）、異なっていたりするとグループとして認識されにくいということです。

距離が近いオブジェクトや似ているものを一つのグループとして認知する性質をゲシュタルトの法則といいます。

ゲシュタルトの法則 – イディア：情報デザインと情報アーキテクチャ

8の倍数

ブログやサイトリニューアルを考えるときに一番最初に思い浮かぶサイトの横幅と余白。ユーザーの使っているモニターの解像度を参考にするか、美しく収まりのよい対比を採用するか。サイト横幅に最適な値はあるのか。

以下の記事を読んで「デザインは8の倍数でつくることができる」という仮説をもとに、物は試しということで、サイトをリニューアルしたときは横幅は1280px、余白は16pxを採用。画像やアイキャッチなどの要素は黄金比で統一すると収まりのよいレイアウトに。

デザインは8の倍数でできている｜1 pixel｜サイバーエージェント公式クリエイターズブログ

ウィリアム・モリスのページマージン比率

ウィリアム・モリスが提唱した冊子などに使われる美しいマージンの比率について書かれてあります。パンフレットやチラシ作成時に。

ページデザインのマージンについて | mon étude
デザインをするときは版面を最初に決める｜いまさら聞けない!? 印刷・DTPの基礎知識｜OKIデータ

三分の一の法則

画面を三分割し、分割したときにできる基準線を基準として、要素を分けたりアクセントを境界線にくるように配置するレイアウト法です。横長の紙面の場合は横に分割し、縦長の場合は縦に分割することが多いようです。簡単に綺麗な構図を作成できるので使いやすいです。

黄金比ってWebではどうなの？～三分割法と黄金比の話～ 株式会社アクトゼロ｜デジタルマーケティング・訪日インバウンド施策

アクティブ・ホワイトスペース、パッシブ・ホワイトスペース

アクティブ・ホワイトスペースとは視線誘導するためとか意図的に作ったスペースで強調のために配置し、パッシブ・ホワイトスペースは行間など元から定められているスペースで要素周辺に配置します。

アクティブ・ホワイトスペース（active white space）とは？｜グラフィックデザイナーのための英語講座
Webデザインの基礎スキルに「余白」が重要な理由 - WPJ
余白の美