デザインの質を上げる「余白」のつくり方

こんにちは。キオミルでデザイナー／ディレクターを担当している西村です。

前回の記事では、「どうもデザインがしっくりこない……」「ごちゃごちゃして情報が伝わりにくい……」と悩んでしまったときに確認してほしいポイントを、デザイン4原則にあてはめて紹介させていただきました！

今回はデザインをする上でもう一つ忘れてはならない「余白」について、役割や効果、私が普段意識しているポイントをご紹介します。

デザインにおける「余白」とは？

デザインにおいて余白とは、テキストや装飾などが入っていない「何もない空白の部分」のことを指します。

デザインを始めたばかりのころの私は、画面がスカスカになることを恐れてしまい、余白を埋めてしまう傾向がありました。また、具体的にどれくらい余白をつくればよいかが分からず、感覚でデザインしてしまいがちでした。

しかし、それでは伝えたい情報が分かりづらくなり、洗練されたデザインにはなりません。

余白は、ただ余ってしまったスペースではなく「デザインするもの」として考えましょう。どこにどうやって余白をつくるか意識すると、デザインの質がぐっと良くなります。

デザインにおける「余白」がもたらす効果

情報の整理

たくさんある情報を分かりやすく見せるには、関連性のある情報をグループごとにまとめましょう。情報を整理してデザインすると、理解しやすくなります。

これは前回の記事でも紹介した、デザイン4原則の一つ「近接」の部分です。
事例を載せているので、こちらもぜひ読んでみてください。

以下の方法で余白を調整するのがおすすめです。

• 関連する情報はより近くに配置する＝余白を狭くする
• 異なる情報はより遠くに配置する＝余白を広くする

要素の強調

Webサイトでは、伝えたいメッセージやアクションに繋げるためのボタン周りなどで効果的に余白を用いたデザインが多く見られます。

例えば、皆さんがよく知っているGoogleのシンプルなトップページ。
サービスが増えているにもかかわらず、トップページには広告が一切ありません。一目で「検索エンジンだ」と分かるデザインになっています。何かを調べたくてGoogleのトップページを訪れたユーザーが、検索を行い、求めている情報に該当する検索結果を得ることができるように特化しています。

スカスカになることを怖がり、つい埋めたくなってしまいますが、必要以上に要素を盛り込むことはユーザーを迷わせてしまう原因にもなります。思い切って情報を削ぎ落とし余白を設けることで、レイアウトがスッキリとして、訴求力を高めたり次のアクションに繋げたりする効果があります。

視線の誘導

人が視線を動かすときは、無意識に「この順序で見る」という視線のパターンがいくつか存在します。伝えたい情報を意図した順序でユーザーに見てもらうには、視線の動きを意識してデザインする必要があります。そのための手法が「視線誘導」です。

代表的な視線誘導の手法に「Z型」「F型」があります。

• Z型　ユーザーの視線が左上→右上→左下→右下の順に動くパターン
• F型　左から右への視線移動を下に向かって順に繰り返すパターン

これらの手法を用いてレイアウトすることで、ユーザーに見せたい情報の順序を意図的にコントロールすることができます。レイアウトだけでも視線を誘導することは可能ですが、さらに「余白」をうまく活用すると、ユーザーがストレスなく瞬時に情報を理解する手助けにもなります。

以下はZ型、F型に沿ってさらに視線を誘導しやすくする余白のつくり方の一例です。

このように左右の余白を狭く、上下の余白を広くすると、より自然にユーザーの視線の流れを誘導することができます。

可読性の向上

テキストや写真がギチギチに詰まっていると、見づらさや情報の分かりにくさに繋がります。そのようなデザインだと、ユーザーは途中で読む気をなくして離脱してしまうかもしれません。

余白を設けるだけで見づらさが大きく改善され、可読性の高いコンテンツになります。

印象を変える

デザインが「垢抜けていない」と感じるのは、適度な余白が取れていないからかもしれません。余白が狭すぎると情報が詰め込まれて見え、安っぽい印象に繋がります。

私もデザインを始めたばかりのころは、とりあえず「分かりやすく、大きく入れよう！」と余白を少なくデザインしてしまい、よく指摘されていました。

このように、余白を適度に設けることでスッキリと洗練されたデザインになります。
与えたい印象によって余白を使い分けてみましょう。

デザインにおける「余白」のつくり方

ここからは、私が普段デザインする際に意識している余白のつくり方をご紹介します。

階層・グループを意識する

前述したように、情報を分かりやすく見せるためには、関連性のある情報をグループごとにまとめて整理すると理解しやすくなります。

①外側とコンテンツの間の余白
②画像とテキストの間の余白
③見出しと本文の余白

ポイントは、内側の余白を外側の余白より狭くすることです。階層でいうと、①＞②＞③の順番になります。
こうすることで、大きなまとまりから小さなまとまりへと自然に目がいくようなデザインになります。逆に内側の余白が外側の余白より広くなってしまうと、散らかった印象になるので気をつけましょう！

正方形で揃える

基本的に、縦横の余白を正方形で揃えるようにしています。余白がバラバラだと片側に寄ったような形に見えてしまうからです。

縦横の余白を揃えると視覚的に安定し、ユーザーに安心感を与えるデザインになります。

ここで注意したいのが、数値に惑わされないことです。
数値上はどちらも同じ広さの余白でも、目の錯覚で片方に寄ったように見えてしまうことがあります。

特に、ボタンやアイコンなど中央揃えのレイアウトに起こりやすい錯覚です。
数値上は同じ余白でも、テキストが下寄りに配置されているように見えてしまったり、アイコンが片方に少し寄ったように見えたりします。
数値はあくまで参考とし、最終的には自分の目で見て揃えるようにしましょう。

余白のルールをつくる

同じ要素をくり返すときは同じ余白になるようにします。
これは前回の記事でも紹介した、デザイン4原則の一つ「反復」の部分です。

反復は、同じ要素を同じデザインルールをくり返すことで、一貫性を持たせることができる原則です。
余白にもルールをつくり、同じ要素の余白を統一させることで、ユーザーは直感的に情報を理解しやすくなります。

キオミルでは、デザインツールにFigmaを使用しています。
ボタンやカード、グローバルナビゲーション、テーブルなどコンテンツに応じて自動的に可変できるオートレイアウト機能を用いると、自動で均一な余白に設定できます。また、繰り返し同じパーツを使う場合は、コンポーネント化しておくと便利です。
手動で余白を調整すると時間がかかり、余白ルールの見落としやミスの原因に繋がります。デザインツールにあるこういった便利機能は、ぜひ積極的に活用しましょう！

8の倍数でつくる（ときどき4の倍数）

Webデザインにおいて、「8の倍数でデザインする」と聞いたことはありませんか？
私も、先輩デザイナーや先輩エンジニアに「8の倍数で設計するといいよ！」と教えられました。

8の倍数でデザインする主なメリットは以下の通りです。

• 多くのデバイスの解像度に8の倍数が用いられており、汎用的なスクリーンサイズの基準に合わせやすい
• 小数点以下の端数が発生しにくく、余白の秩序を維持しやすい
• デザインに統一感を持たせることができる
• 規則性を持たせる（テンプレート化する）ことで、エンジニアの作業コストを下げられる
• デザイナーにとっても迷わず、すばやく意思決定できる

余白でよく使用しているのは、8px、16px、24px、32px、40px、48px、64px、80px、120px、160pxなどです。
また、8の倍数ではないですが、4の倍数の4px、12px、20px、28px、100pxなどもときどき使います。

もちろん、必ずしもすべてにこの倍数を取り入れなければいけないわけではありません。これらの定義に正解はなく、プロジェクトの目的や伝えたい印象にあわせて適用してみてくださいね。

余白をうまく活用したWebサイト

最後に、私が「余白の使い方が素敵だな」と感じたサイトを3つご紹介します。

おやど 森の音【公式】山形県 かみのやま温泉 様

おやど 森の音【公式】山形県 かみのやま温泉

山形県かみのやま温泉にある、おやど森の音（もりのね）のWebサイトです。

画像は大胆に大きく使われていますが、適度なテキスト量で読みやすく情報がしっかりと入ってきます。余白が大きく取り入れられたところには、テクスチャや木漏れ日のような影を落とし込んでいて、情報を読み取るのに邪魔にならず、“全14室大人のみが滞在できる静かな隠れ家”というコンセプトがしっかりと伝わるようなデザインになっています。
このサイトを訪れたとき、「あぁ……こんな森の音に囲まれたお宿でゆっくりしたいなぁ……」という気持ちになりました。

株式会社翔陽 様

株式会社翔陽　アルミ合金鋳・砂型鋳物・金型鋳物

アルミ合金鋳物のスペシャリスト、株式会社翔陽のコーポレートサイトです。

キオミルでも製造業のお客様向けに製造業専門のホームページ制作サービスを提供しておりますが、製造業はマシンや部品の紹介が多いため、つい情報が盛り盛りになりがちです。しかし、こちらのサイトは製造業でありながら余白を大胆に使い、サイト全体で余計なものがない洗練されたデザインとなっています。
「洗練された職人技で、ものづくりしてくれそう！」と感じられるサイトです。

UNDERLINE 様

UNDERLINE

フリーランスWebデザイナーである徳田優一さんのサイトです。
個人的に私が好きなデザイナーさんでもあります。

白を基調とされていて、コンテンツの外側に大きく余白が取られています。非常にシンプルなレイアウトなのに、なぜか物足りなさを感じない……すごい……！
デザイン4原則を守り、余白にもルールを持たせることでこれだけ洗練されたデザインになるということが分かるサイトですね。

Worksには、同じく余白を効果的に取り入れてつくられたサイトがたくさん掲載されています。どれもUNDERLINEが制作したと分かる素敵なサイトばかりです。

余白は「デザイン」しよう！

デザインにおける余白の役割や効果、私が普段意識しているポイントをご紹介しました。

「余白を制するものはデザインを制する」
「デザインは余白が9割」

なんて言われるくらい、余白は重要な役割を果たします。
もちろん「これが正解」とはいえませんし、とても難しいところではあります。それでも、今回ご紹介した方法を少し試してみるだけでも、洗練されてより情報が伝わるデザインをつくれるようになります。
「余白はデザインするもの」として考え、どこにどうやって余白をつくるか意識しながらデザインしてみてくださいね！

この記事が参考になれば嬉しいです。
最後まで読んでいただきありがとうございました。