余白について

余白とはなにもない空間という意味ですが、デザインにおいては意図を持ってデザインされたスペースのことを指します。

文字としての定義は曖昧ではありますが「空間をデザインする」という意味で使われる余白のことをホワイトスペースと言います。

英語ではWhitespaceやmarginなどと呼ばれますが下記のように使い分けられている事が多いですね。

• Margin：情報を見やすくするために授けられた上下左右の余白
• Whitespace：デザインを際立たせるためにデザインする余白

マージンは読みやすさ、ホワイトスペースは伝わりやすさに強く影響します。

余白をデザインに取り入れる意味

• 強調効果
• 視線誘導
• 印象操作
• 見やすさ向上
• 情報の整理
• 見栄え向上

余白による強調効果

余白を取り入れることで伝えたいものを明確化し、目に留まる箇所を意図的に作る事が可能。

強調というと文字を大きくしたり色を変えたりする印象も強いですが、余白を取ることで強調する方法もあります。

下記の2つは内容は同じですが、余白の有無で強調効果が大きく異なります。

文字サイズが大きければ強調が強くなるというわけではありません。
余白がなく、情報が詰め込まれているとどこを見ていいか判断がつかず読まれにくくなります。
装飾に頼らず余白による強調を使うことで伝えたいものを効果的にアピールできるようになりますよ。

余白による視線誘導

余白を少なくすれば1画面上に表示される情報量が増えますが、密度が高くなり視線の集中効果が低くなります。

目立たせたい箇所の周辺に多めの余白をとることで視線を意図的に誘導することができます。

視線を集めたいポイントはしっかりと余白をとると強調効果UP！

余白があると読みやすくなる

余白を取ることで文字が読みやすくなり内容をひと目で理解することが可能になります。
下記のような装飾を行う際は「文字の周囲」「装飾の周囲」両方とも余白を取るようにしましょう。

• 枠
• ボタン
• リスト
• ふきだし
• 背景エリア

文字の周辺に余白がないと視認性・可読性が低くなり、読んでもらえなくなってしまいます。
読みやすいデザインに余白は欠かせません。

余白によって情報が整理される

余白により情報が整理され理解しやすくなります。

アプリやチラシなどは紙面が小さいため情報を詰め込みがちですが余白がなくなるとひと目で欲しい情報にたどり着けません。

余白による印象操作

余白の有無でデザインの印象が大きく変わります。

余白がなくスペースをたっぷり使用していると安っぽい印象を与えがちですが、余白をたっぷりとることで高級感が生まれます。

ホワイトスペース効果とも呼ばれ、余白によって下記のような印象を与えることができます。

• 高級感
• 開放感
• スマート
• かっこいい
• インパクトの強さ
• シンプルで洗練された

与えたいイメージに応じて余白量を調整してみましょう。

簡単に見た目が良くなり素人っぽさ脱却

余白があると「素人っぽい」「ダサい」というマイナスイメージを払拭し、垢抜けたデザインになります。

デザインに必要な基礎は多いですが、中でももっとも重要とされるのが余白。

まずは余白をしっかり確保することを意識してみてください。

余白をデザインに取り入れるコツ

意図した余白アクティブホワイトスペースをつくろう

余白効果を意図して作った余白をアクティブホワイトスペースと呼び、それ以外の余白をパッシブホワイトスペースと呼びます。

「適当に配置していたらスペースが空いてしまった」みたいなのはアクティブホワイトスペースではありません。自然にできる余白ではなく、意図した余白(Active Whitespace)を作りましょう。

一般的にホワイトスペースと呼ばれるものは前者の「アクティブホワイトスペース」を指しています。

写真やイラストでは可能性空間域を意識する

可能性空間に余白があると違和感がなくバランスの取れた構図になります。

可能性空間域とは次に起こりうる動きの範囲のこと。

例えば下記の写真、雪玉を投げようとしている男性の可能性空間域は左側。

人や車の進行方向、物理法則の方向など、動きがありそうな空間に余白を作ることにより下記のような効果が期待できます。

• 情報が伝わりやすくする
• ストーリー性をもたせる
• 違和感のない視線誘導

写真やイラストの構図を考える際には意識してみてください。

写真の余白

写真に取り入れる余白は大きく分けて下記の2種類

• 構図としての余白
• 写真を配置するレイアウトの余白

写真を撮影・トリミングする際に余白を取り入れることで写真にも余白効果を取り入れることができます。

余白を取ることで主体が小さくなるので印象が薄れると思うかもしれませんが、ある程度の余白は逆に主体を強調してくれます。

背景を切り抜いて利用すればさらに、余白が増え開放感を出すこともできますね。

文字の余白

あえて主体をカットしてホワイトスペースを大きく取ることで主体が強調されインパクトのあるレイアウトになりますよ。

文字の余白も重要。

フォントを選ぶ際は文字と文字の間の余白も考慮して下記の要素を選びましょう。

• 書体
• 行間
• 文字間
• 文字サイズ
• 文字の太さ
• 文字と背景の配色

下図のように可読性が大きく変化します。

可読性が高く見やすい文字については下記の記事に詳しく記載しています。合わせてご覧ください。

文字間とサイズのバランス

Webデザインにおける余白

Webデザインにおいてはポスターや本のように紙面サイズという制約がないので、情報を詰め込みすぎず多めに余白をとりやすくなります。

また、画面サイズは閲覧者によって千差万別、PCとスマホでも大きく異なるので1画面上にすべての情報を表示することを意識するよりもどの端末で見ても見やすいような余白を確保することを意識しましょう。

要素ごとに余白をとるだけでも整理されて見やすいレイアウトにはなりますが、左図のように全面写真を利用したレイアウトも写真の魅力を伝えつつキャッチコピーも目立たせることができます。

余白をとるというのは必ずしも真っ白にしなきゃいけないわけではなく、写真全体を使った空間としての余白を意識してみましょう。