ターゲットやブランドに合わせた余白とは?印象別に余白を決める方法

ターゲットやブランドに合わせた余白の基本

まずは、ターゲットやブランドに合わせた余白とはどんな考え方なのか、そしてなぜ余白をブランドに合わせる必要があるのかを押さえましょう。

ターゲットやブランドに合わせた余白とは

ターゲットやブランドに合わせた余白とは、デザインを届ける相手や、サービスの世界観に合わせて、余白の量や取り方を決めるという考え方のことです。

ターゲットとは、そのデザインを見てほしい相手(年代・好み・使う場面など)のことです。

ブランドとは、会社やサービスが「こう思われたい」と目指す姿や、そのサービスらしさのことで、色・書体・言葉遣いなどを通じて伝えられます。

余白も色や書体と同じように、そのサービスらしさを伝える材料の1つだと考えるのが、この記事のポイントです。

なぜ余白をブランドに合わせるのか

余白をブランドに合わせる必要があるのは、余白の量そのものがデザインの印象を大きく左右するからです。

同じ文字・同じ色を使っていても、余白が広ければ落ち着いた印象に、狭ければにぎやかな印象になります(余白の量と印象の関係は余白が与える印象とは?で解説しています)。

同じお店の新作告知を、余白の量だけ変えて3通りに並べてみましょう。

見本Aは、要素を絞って周りを大きく空けたことで、ゆっくり眺めたくなる落ち着いた雰囲気になっています。

見本Bは、必要な情報をほどよい間隔で並べた、くせのない分かりやすい印象です。

見本Cは、情報を多めに詰めたことで、セール会場のような活気とお得感が伝わります。

どれが正解というわけではなく、届けたい相手と伝えたい雰囲気によって、ふさわしい余白の量が変わるということです。

ターゲット・ブランド別の余白の考え方

ここからは、よくあるターゲットやブランドの方向性ごとに、余白をどう考えればよいかを見ていきます。

あくまで出発点となる傾向なので、最後は実際のデザインを見て判断しましょう。

高級感・信頼感を出したいとき

高級感や信頼感を大切にするブランドでは、要素を絞り、余白を広く取ったゆとりのあるデザインがよく使われます。

情報を詰め込まず、1つひとつの要素に十分な空間を与えると、「急かさない」「余裕がある」という印象につながるためです(余白が「親しみ」や「格式」として伝わる考え方は余白と心理的な距離とは?で解説しています)。

ジュエリーや化粧品、ホテル、建築事務所などのサイトで、大きな写真と短い言葉だけを、たっぷりの余白とともに配置する例がよく見られます。

ただし、余白を広く取るほど1画面に載る情報は減るので、どうしても伝えなければならない情報まで削っていないかは確認しましょう。

また、余白を広げるだけで高級に見えるわけではなく、落ち着いた色や細めの書体、質の高い写真とそろってはじめて高級感が伝わります(書体の選び方はターゲットに合わせた書体選びとは?で解説しています)。

親しみやすさ・お得感を出したいとき

親しみやすさやお得感、活気を大切にするターゲット向けには、情報を多めに載せ、余白をやや詰めたにぎやかなデザインが合うことがあります。

スーパーのチラシやセール告知のように、たくさんの情報が並んでいること自体が「選べる楽しさ」や「お得さ」を感じさせるためです。

ただし、詰めるといっても、整理せずに詰め込んでよいわけではありません。

NGの見本は、ラベル・日付・条件がばらばらの順番で詰め込まれ、にぎやかというより散らかった印象になっています。

OKの見本は、全体の余白は詰め気味のままですが、「ラベルと見出し」「発売日と条件」「ボタン」の3つのかたまりの間だけ空けたことで、にぎやかさと読みやすさを両立しています。

にぎやかなデザインほど、かたまりの中は詰め、かたまりの間は空けるというメリハリが大切になります(情報が多いときの余白の配り方は情報量に応じた余白とは?で解説しています)。

使う人の条件に合わせて余白を考える

ターゲットに合わせた余白は、見た目の印象だけでなく、「使う人にとって使いやすいか」という面からも考える必要があります。

たとえば、高齢の方や小さな子どもには、指先で小さなボタンを正確に押すのが難しい人もいます。

こうしたターゲット向けのサイトやアプリでは、ボタンを大きめにし、ボタン同士の間隔も広めに取ると、押し間違いを減らせます。

Webサイトを誰にとっても使いやすくするための国際的なガイドラインWCAG 2.2でも、押す対象の大きさや、小さな対象同士の間隔についての基準が定められています(WCAG 2.2 達成基準2.5.8 ターゲットのサイズ(最低限)・WAIC日本語訳)。

高級感を出したいブランドでも、こうした使いやすさのための余白は削らないように注意しましょう(使いやすさの考え方はアクセシビリティとは、押しやすいボタンの大きさの目安はボタンの内側の余白とは?で解説しています)。

ターゲット・ブランド別の余白早見表

ここまでの内容を表にまとめると、次のようになります。

伝えたい印象	余白の方向	あわせて意識したいこと
高級感・落ち着き	広め。要素を絞る	必要な情報まで削っていないか
誠実・分かりやすい	標準。読みやすさ優先	同じ関係の要素には同じ間隔を使う
にぎやか・お得感	詰め気味。情報を多めに	かたまりの間だけは空けて整理する
使いやすさを特に重視(高齢の方・子ども向けなど)	押せるもの同士の間隔を広めに	印象づくりより押しやすさを優先する

色の選び方でも同じように、ターゲットに合わせて方向性を決める考え方があります(ターゲットに合わせた色選びで解説しています)。

トーン&マナーに余白のルールを書き込む

決めた余白の方向性は、トーン&マナーのルールの中に書き込んでおきましょう。

トーン&マナー(略してトンマナ)とは、Webサイト・広告・SNSなど複数の制作物で、雰囲気と表現のルールを統一するための考え方です(詳しくはトーン&マナーとは?で解説しています)。

たとえば同じアパレルブランドなのに、あるバナーは落ち着いた高級感、別のバナーは大安売りのような雰囲気だと、見る人は同じお店だと気づきにくくなります。

トンマナは、こうしたずれを防ぐための共通のルールです。

色や書体はルールにしていても、余白は担当者の感覚に任されていることが多く、制作物ごとに雰囲気がずれる原因になります。

たとえば、次のように一言添えておくだけでも、ぶれを減らせます。

• 余白の方向性:ゆったり。1画面に載せる要素は少なめにする
• セクションの区切り:内容のまとまりの間はしっかり空ける
• バナー:キャッチコピーの周りには何も置かない
• 例外:ボタン同士の間隔など、押しやすさに関わる余白は削らない

これは「ゆったり」を目指すブランドの例です。

ほかの方向性でも、たとえば次のように書けます。

• 誠実・分かりやすさを大切にする場合:同じ関係の要素には同じ間隔を使い、使う間隔の種類は数段階に絞る
• にぎやかさ・お得感を出したい場合:情報は多めに載せてよいが、見出し・条件・ボタンのかたまりの間は必ず空ける

実践のポイント

ターゲットやブランドに合わせた余白で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• ターゲットに合わせるつもりが、単に「流行っている余白の広いデザイン」を真似ただけになり、ブランドの個性と合わない仕上がりになることがあります。
  余白を決める前に、「このブランドはどう思われたいのか」を一言で書き出してみましょう。
• 色や書体のルールは決めていても、余白はルールにせず、担当者ごとにばらばらになることがあります。
  トーン&マナーに、余白の方向性も一言書き添えておきましょう。
• にぎやかさを出そうとして、整理せずにただ詰め込んでしまうことがあります。
  詰め気味のデザインでも、かたまりの間の余白は残しましょう。

よくある質問

• Q. 余白を広くすれば、どんなデザインでも高級に見える?
  A. 余白だけで高級感が出るわけではありません。
  余白は印象を作る材料の1つで、色・書体・写真の雰囲気とそろってはじめて狙った印象になります。
  たとえば、余白を広く取っていても、派手な原色や太い丸文字を使えば、高級というより軽やかな印象になります。
• Q. ターゲットがはっきり決まっていないときは?
  A. 見本Bのような、読みやすさを優先した標準的な余白から始めるのが無難です。
  ターゲットや雰囲気が固まってきたら、ゆったり寄り・詰め気味寄りに調整していきましょう。
• Q. 同じブランドでも、WebサイトとSNSで余白を変えてもいい?
  A. 変えて構いません。
  媒体によって画面の大きさや見られ方が違うため、余白の量は媒体に合わせて調整してよい部分です。
  ただし「ゆったり」「にぎやか」といった方向性はそろえておくと、同じブランドだと伝わりやすくなります。

まとめ

ターゲットやブランドに合わせた余白とは、届けたい相手やサービスの世界観に合わせて余白の量や取り方を決める考え方で、余白の量そのものがデザインの印象を左右します。

高級感なら広め、にぎやかさなら詰め気味が出発点ですが、どちらでも押しやすさのための余白は削らず、決めた方向性はトーン&マナーに書き込んで共有することが大切です。

まずは好きなブランドのサイトを2つ選び、余白の広さを見比べて、それぞれがどんな印象を伝えようとしているかを言葉にしてみてください。