気持ちのいい余白を見つける、3つのコツ【決定版】
気持ちのいい余白を見つける、3つのコツ【決定版】
デザイナーなら一度は、「余白を同じ数値で揃えているのに、なぜか整って見えない」「セクションとセクションの間をどのくらい空ければいいのか分からない」「参考サイトの余白を真似したはずなのに、同じ印象にならない」と悩んだことがあるはずです。
余白の取り方は、デザインの中でも特に難しいもののひとつです。
色やフォントであれば、使われている数値や種類をある程度調べることができます。しかし、余白は数値を調べてそのまま真似しても、なぜか同じようには見えません。
僕自身、ギャラリーサイトに掲載されているWebサイトをいくつか見比べてみたことがあります。最初は、完成度の高いサイトほど、すべてのセクション間の余白を同じ数値で統一しているのではないかと思っていました。
ところが、実際に見てみると、必ずしもそうではありません。
同じくらいの情報量があるセクションでも、前後の余白が異なっていたり、ある部分だけ大きく空いていたり、逆にかなり近づけられていたりします。
つまり、良いWebサイトは、余白をすべて同じ数値にしているわけではありません。だからといって、デザイナーがその場の感覚だけで、適当に余白を変えているわけでもありません。
では、完成度の高いデザインでは、何を基準に余白を決めているのでしょうか？
この記事では、僕が普段Webデザインをするときに意識している、気持ちのいい余白を見つける3つのコツを紹介します。
余白は、すべて統一するだけでは不十分
余白について考えるとき、多くの人が最初に思いつくのは「ルールを統一すること」だと思います。たとえば、すべてのセクション間を120pxにする。見出しと本文の間を24pxにする。カード同士の間隔を32pxにする。
もちろん、こうしたルールは必要です。
余白のルールがなければ、ある場所では40px、別の場所では57px、さらに別の場所では83pxというように、根拠のない数値が増えていきます。ページ全体のリズムも崩れ、どこか落ち着かないデザインになります。
しかし、すべてを同じ数値にすれば、必ず気持ちのいいデザインになるわけでもありません。
たとえば、会社紹介の直後に、その会社の特徴を紹介するセクションが続いているとします。
この2つは、意味として強くつながっています。
それにもかかわらず、ほかのセクションと同じ大きな余白を空けると、会社紹介と特徴が別々の話題に見えてしまうことがあります。
逆に、サービス紹介のあとに採用情報が続く場合は、話題が大きく切り替わります。この間の余白が狭すぎると、サービス紹介の続きとして採用情報が始まったように見えてしまいます。
数値としては揃っていても、情報の意味としては整っていない。
ここで重要なのは、余白は単なる「空いている場所」ではないということです。
余白には、情報同士の関係性を伝える役割があります。
近ければ「これらは関係しています」と伝わり、遠ければ「ここから別の話が始まります」と伝わります。
余白を考えることは、情報同士の距離を考えることです。
コツ1：まず、基準となる余白のルールをつくる
余白を情報の関係性に合わせて変えると言うと、「それなら、最初から見た目で決めればいいのでは？」と思うかもしれません。
しかし、最初からすべてを感覚で決めるのはおすすめしません。
僕の場合も、まずは基本となる余白のルールをつくります。
たとえば、要素の中に使う小さな余白、同じ内容の中で使う中くらいの余白、セクションを分ける大きな余白というように、いくつかの段階を決めます。
大切なのは、余白の数値を一種類だけにすることではありません。
余白に「小・中・大」のような階層をつくることです。
見出しと本文の間。
本文と画像の間。
同じセクション内にあるブロック同士の間。
セクションとセクションの間。
これらの余白がすべて同じでは、情報の階層が伝わりません。
見出しと本文は近く、ひとつの情報ブロックと次の情報ブロックは少し離し、話題そのものが変わるセクション間はさらに広くする。
このように、情報の階層に合わせて余白の段階を決めます。
余白のルールは、デザインを縛るためのものではありません。
判断の出発点をつくるためのものです。
基準がなければ、どこを調整したのかも分かりません。
すべての場所を毎回感覚で決めてしまうと、「ここは意図的に広くした」のか、「なんとなく広くなってしまった」のか、自分でも区別できなくなります。
まずは基準をつくり、その基準に沿ってページ全体を組む。
最初の段階では、多少単調に見えても問題ありません。
先にルールをつくるからこそ、あとから必要な場所だけを調整できるようになります。
コツ2：情報の関係性に合わせて、詰める・広げる
基本の余白ルールを使ってページ全体を組んだら、次に前後の情報の関係性を見ていきます。
ここで、僕は最終的に「見た目」で余白を調整します。
ただし、正確には、単純に見た目の好みで調整しているわけではありません。情報の関係性が、見た目にも正しく表現されているかを確認しています。
たとえば、前のセクションを補足する内容が続く場合は、基本の余白より少し詰めます。サービスの概要の下に、サービスの特徴が続いているのであれば、この2つは強くつながっています。余白を少し詰めることで、「特徴はサービス概要の続きです」という関係を視覚的に伝えることができます。
一方、会社紹介から採用情報へ移るように、話題が大きく変わる場合は、余白を広めに取ります。広い余白をつくることで、「ここでひとつの話が終わり、別の話が始まります」と伝えることができます。
CTAの前に、少し大きな余白を入れることもあります。
それまで続いていた情報からCTAを一度切り離すことで、CTAを独立した選択肢として目立たせるためです。
余白は、文章でいえば句読点に近いものです。
小さな余白は読点です。
少し流れを区切りながらも、同じ話が続いていることを伝えます。
大きな余白は句点や改行です。
ここで話が終わり、新しい話が始まることを伝えます。
すべての文章に同じ間隔で改行を入れても、読みやすい文章にはなりません。意味のまとまりに合わせて、読点や句点、段落を使い分ける必要があります。
余白も同じです。
情報のまとまりに合わせて、距離を使い分ける必要があります。
また、余白は数値だけで決まるものでもありません。大きな見出しのあとと、小さな見出しのあとでは、同じ32pxでも見え方が異なります。
写真の中に広い空間がある場合は、写真の外側の余白が数値以上に広く見えることがあります。背景色が切り替わる場所では、余白が狭くてもセクションの境界が強く見えます。反対に、背景色もレイアウトも似ているセクションが続くと、十分な余白を取らなければ境界が分かりにくくなります。
だからこそ、最終的には数値だけではなく、ページ全体を見ながら調整する必要があります。余白の数値を揃えることではなく、情報の関係性が正しく見えることが目的です。
コツ3：調整した理由を言語化する
余白を調整するときに、最も大切なのは、変更した理由を言語化することです。
「なんとなく狭い気がする」
「もう少し空いていたほうがきれいに見える」
「ここのバランスが気持ち悪い」
こうした感覚は、デザインをするうえで大切です。
違和感に気づくこと自体は、デザイナーに必要な能力です。
しかし、違和感を覚えたあとに、理由を考えずに余白を変えてしまうと、デザインは少しずつ崩れていきます。ある場所は感覚で広げ、別の場所は感覚で詰め、さらに別の場所では参考サイトの数値をそのまま使う。
そうすると、ページの中に複数の判断基準が混在してしまいます。
だから、余白を変えるときは、必ず自分に理由を問いかけます。
「ここは次の話題に切り替わるから、基本より広げる」
「ここは上の内容を補足する情報なので、少し詰める」
「ここはCTAの前なので、周囲から切り離して目立たせる」
「背景色だけではセクションの切り替わりが弱いため、余白でも区切る」
このように理由を説明できるのであれば、基本ルールから外れても問題ありません。反対に、なぜ余白を変えたのか説明できない場合は、一度、基本のルールに戻したほうがよいと思います。
余白を変えること自体が悪いのではありません。
根拠のない例外を増やすことが、デザインを崩す原因になります。
ルールとは、すべての場所を同じにすることではありません。どのような場合に、どのような理由で変えるのかを決めることまで含めて、ルールです。
おすすめの余白調整の進め方
余白に悩んだときは、最初から一か所ずつ完璧に仕上げようとしないことが大切です。
おすすめは、次の順番で進めることです。
基準となる余白を決める
そのルールで、いったんページ全体を組む
ページ全体を縮小して俯瞰する
情報のつながりが強い場所と、弱い場所を探す
必要な場所だけ余白を調整する
なぜ調整したのかを言語化する
特に大切なのが、ページ全体を俯瞰することです。
デザインを拡大した状態で見ていると、目の前のセクションだけをきれいに整えようとしてしまいます。しかし、余白がつくるのは、ひとつのセクションの美しさだけではありません。
ページ全体のリズムです。
少し縮小してページ全体を見ると、同じような密度が長く続いていないか、ある場所だけ急に詰まっていないか、必要以上に大きな空白ができていないかが見えやすくなります。
ここで、「すべてを均等にしなければならない」と考える必要はありません。
音楽にも、音が連続する場所と、少し間を取る場所があります。同じテンポだけが続くと単調になりますが、間が多すぎると流れが途切れます。
Webサイトも同じです。
情報をテンポよく読ませる場所と、一度立ち止まって見てほしい場所をつくることで、ページにリズムが生まれます。
そのリズムをつくるのが、余白です。
参考サイトでは、数値ではなく理由を見る
ギャラリーサイトに掲載されているWebサイトを見るときも、余白の数値だけを真似しないようにしましょう。
もちろん、「このセクション間はどのくらい空いているのだろう」と数値を調べることは勉強になります。しかし、それだけでは、その余白を自分のデザインに応用することはできません。
大切なのは、なぜここは広いのか、なぜここは近いのかを考えることです。
「ここはブランドの世界観を見せるために、あえて情報量を減らし、広い余白を取っている」
「ここはひとつのストーリーとして連続しているため、セクションが変わっても余白を詰めている」
「ここから別の商品を紹介するため、余白と背景色の両方で大きく切り替えている」
このように仮説を立ててみます。
正解を当てる必要はありません。
なぜこの余白になっているのかを自分なりに考えることが、余白を見る目を育てます。良いデザインを見て、「余白がきれいだな」で終わらせないことです。
どの情報とどの情報が近いのか。
どこで話題が切り替わっているのか。
どこでユーザーに一度立ち止まってほしいのか。
余白によって、どのような意味が伝えられているのか。
そこまで考えることで、参考サイトの表面的な数値ではなく、余白を決める判断基準を自分の中に蓄積できます。
まとめ
気持ちのいい余白とは、すべての数値がきれいに統一された状態ではありません。
情報同士の関係性が、適切な距離によって表現されている状態です。
近くに置くことで、「これは同じ話です」と伝える。
遠くに置くことで、「ここから別の話です」と伝える。
CTAの前に余白をつくることで、「ここで一度立ち止まってください」と伝える。
余白は単なる装飾ではありません。
情報のまとまりや、話題の切り替わり、ページを読むリズムを伝えるための、ひとつの言語です。ただし、最初から感覚だけで余白を決めると、ページ全体のルールが崩れやすくなります。
だから、まずは基準となる余白のルールをつくる。
そのルールでページ全体を組む。
最後に全体を俯瞰し、情報の関係性が正しく見えない場所だけを調整する。
そして、なぜ調整したのかを言語化する。
この順番が大切です。
「なんとなく広げる」のではなく、「話題が切り替わるから広げる」。
「なんとなく詰める」のではなく、「同じ内容の補足だから詰める」。
この理由を積み重ねることで、少しずつ自分の中に余白の判断基準ができていきます。余白の感覚も、センスと同じです。
最初から備わっている魔法の能力ではありません。
良いデザインを観察し、理由を考え、自分で調整し、また比較する。
その繰り返しによって、少しずつ「ここは近すぎる」「ここは離れすぎている」という違いが見えるようになります。
気持ちのいい余白は、なんとなく見つけるものではありません。
ルールをつくり、関係性を読み取り、理由を言葉にする。
その地道な判断の積み重ねによって、見つけられるようになるものです。
ポッドキャスト
同僚のデザイナーと一緒に、ポッドキャストをやってます！
デザインの学びについてちょっとタメになる話しを、楽しく語っているので、ぜひ聞いてみてください！
・Spotify
・Apple Podcast デザインカテゴリー 最高順位1位！
