余白が与える印象とは?高級感・軽快さ・にぎやかさを余白で作る方法

余白が与える印象の基本

まずは、余白の量によってデザインの印象がどう変わるのか、なぜ変わるのかを見ていきましょう。

同じ内容のバナーを余白だけ変えて並べると、違いがよく分かります。

余白の量だけで印象は変わる

余白(文字や画像などが置かれていない、意図して空けたスペース)は、量を変えるだけでデザイン全体の雰囲気を変えます。

余白そのものの意味や役割は、余白とはの記事で解説しています。

余白が狭いと、一度にたくさんの情報が目に入るため、にぎやかで活気のある印象になりやすくなります。

余白が広いと、目に入る情報が少なくなり、1つ1つをじっくり見せる落ち着いた印象になりやすくなります。

次の見本は、文字・色・内容をそろえ、余白の量だけを変えた3つのバナーです。

見本Aは情報が詰まっていて勢いがある一方、少し窮屈に感じるはずです。

見本Cは同じ内容なのに、ゆとりがあり、展示会の上品な雰囲気が伝わってきます。

枠と文字の間の余白は、見本Aが6px、見本Bが20px、見本Cが上下44px・左右24pxで、文字の行どうしの間隔も見本Aはほぼ0、見本Cは広めに空けています。

数値はこの大きさのバナーでの一例ですが、「狭い」「広い」の距離感をつかむ目安にしてください。

なぜ余白の量で印象が変わるのか

余白の量が印象を変えるのは、余白が「どれだけ情報が密集しているか」を見る人に伝えるからです。

情報がぎっしり詰まった状態は、品数の多い店先やセールのチラシのように、活気やお得感を連想させます。

反対に、広いスペースに少しの要素だけを置いた状態は、商品を1点ずつ間隔を空けて並べた売り場のように、ゆとりやこだわりを連想させます。

高級ブランドや専門性の高いサービスのWebサイトに余白の広いデザインが多いのは、この「ゆとり」の印象を活かしているためだと考えられます。

余白の量と印象の対応

余白の量と生まれやすい印象の関係を、表にまとめると次のようになります。

余白の量	生まれやすい印象	行き過ぎたときの印象	向いている場面の例
狭い	にぎやか・活気・お得感	窮屈・ごちゃごちゃ・安っぽい	セール告知、情報の多いチラシ
標準	読みやすい・親しみやすい	(特徴が出にくい)	一般的なWebサイト、サービスの紹介
広い	落ち着き・洗練・高級感	間延び・寂しい・情報不足	高級ブランド、ギャラリー、専門サービス

どの量にもよい面と、行き過ぎたときの悪い面があります。

「余白が広い=正解」ではなく、伝えたい印象に合わせて量を選ぶことが大切です。

狙った印象を余白で作る方法

ここからは、よく求められる「高級感」「軽快さ」「にぎやかさ」を、余白でどう作るかを見ていきます。

余白だけでなく、組み合わせる文字や色との関係もあわせて押さえましょう。

高級感・落ち着きを出す

高級感を出したいときは、要素(写真・イラスト・飾り・アイコン・文字のかたまりなど、画面に置くパーツ)の数を減らし、周りの余白をたっぷり取るのが基本です。

たとえば「写真1点と短いキャッチコピー、ボタンだけ」のように、置くパーツそのものを絞り込みます。

要素が少なく周りが空いているほど、1つ1つの要素が大切に扱われているように見えるためです。

このとき、文字を大きくして目立たせるよりも、文字は控えめな大きさにして、余白で存在感を出すほうが落ち着いた印象になります。

載せたい情報が多い場合は、すべてを1画面に詰め込まず、ページやセクションを分けて余白を確保できないか検討しましょう。

軽快さ・すっきり感を出す

軽快でカジュアルな印象も、余白を広めに取ることで作れますが、組み合わせる文字や色で高級感とは方向が変わります。

余白は「ゆとり」を伝えるものの、それが上品に見えるか軽やかに見えるかは、書体や色が決めるためです。

明朝体は、縦の線が太く横の線が細い書体で、横線の終わりなどに「ウロコ」と呼ばれる三角形の飾りがあり、上品で落ち着いた印象につながりやすい書体です。

ゴシック体は、線の太さがほぼ均一でくっきり見える書体で、親しみやすくカジュアルな印象につながりやすい書体です。

次の見本は、どちらも余白を広く取ったうえで、書体と色だけを変えたものです。

どちらも余白は同じくらい広いのに、明朝体と落ち着いた色の見本は高級感があり、ゴシック体と明るい色の見本は軽やかで親しみやすく見えます。

書体ごとの印象は書体による印象の違い、色の選び方はターゲットに合わせた色選びの記事で解説しています。

にぎやかさ・お得感を出す

セールの告知のように、にぎやかさやお得感を伝えたいときは、あえて余白を狭くして情報を密に並べます。

ただし、すべての余白を同じように削ると、にぎやかではなく「ごちゃごちゃして読めない」デザインになってしまいます。

余白を狭くするときも、まとまりとまとまりの間の余白だけは残しておくのがコツです。

まとまりは、関連する情報同士を近づけ、内容が切り替わるところで間を空けることで作れます(詳しい作り方は情報を整理する余白とはで解説しています)。

次のOKの見本では、「週末セール・全品20%OFF」(見出し)、「送料無料・ポイント2倍・土日の2日間限定」(条件)、「今すぐチェック」(ボタン)の3つに分け、その間だけ余白を残しています。

OKの見本は、NGの見本と同じくらい情報が詰まっていてにぎやかですが、3つのまとまりに分かれているので内容がすっと頭に入ります。

実践のポイント

余白で印象を作るときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 高級感を出したいのに、載せたい情報を全部詰め込んで余白が狭くなり、狙いと逆の印象になることがあります。
  高級感を優先するなら、情報を絞るか、別の場所に分けて余白を確保しましょう。
• 「余白を広く取れば高級に見える」と考えて、内容に対して不自然に広い余白を取ってしまうことがあります。
  要素が少なすぎたり離れすぎたりすると、高級ではなく寂しい・間延びした印象になります。
• 余白の量を感覚だけで決めて、狙った印象と実際の見え方がずれていることに気づかない場合があります。
  余白の量を変えた案を2〜3パターン並べて比べると、ずれに気づきやすくなります。
  数値に迷ったら、今の余白を2倍にした案と半分にした案を作ってみると、印象の違いがはっきり見えます。

よくある質問

• Q. 余白は広いほど「おしゃれ」に見えるの?
  A. 余白を広く取ると洗練された印象になりやすいのは確かですが、広ければ広いほどよいわけではありません。
  情報を探しに来た人にとっては、余白が広すぎると必要な情報にたどり着きにくくなります。
  見る人の目的と、伝えたい印象の両方から量を決めましょう。
• Q. 印象を変えたいとき、余白・色・書体のどれから変えればいい?
  A. どれか1つで決まるものではないので、まず伝えたい印象を言葉にし、それに合わせて3つをそろえるのが理想です。
  色や書体を変えても狙った印象にならない場合は、余白の量が合っていない可能性があるので、一度余白を見直してみましょう(デザイン全体の雰囲気をそろえる考え方はトーン&マナーの基本で解説しています)。
• Q. 情報量が多いページでも、落ち着いた印象にできる?
  A. できます。
  すべての余白を広げるのは難しくても、まとまりの間の余白を広めにそろえるだけで、落ち着いて整理された印象に近づきます。

まとめ

余白は量を変えるだけで印象を変え、狭いとにぎやかで活気のある印象に、広いと落ち着いた上品な印象になりやすくなります。

ただし、広い余白が高級感になるか軽快さになるかは書体や色との組み合わせで決まり、どの量も行き過ぎると窮屈・間延びといった逆効果になります。

まずは手元のバナーやカードを1つ選び、余白だけを狭い・標準・広いの3パターンに変えて並べ、印象の違いを自分の目で確かめてみてください。