ユーザーにとって価値ある情報を繰り返し発信していく「まるログ」

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

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

デザインをする上で切っても切り離せない「余白」。
デザイナーとして経験の浅い頃は、何もないスペースに不安を感じて要素を詰め込み、余白のないギッチリとした画面を作ってしまうケースが比較的多く見られます。でもこの余白、デザインにおいては意味のある空きであり、使いこなせればデザインのクリオティも上がるものなのです。

そもそも「余白」とは?

余白(よはく)とは、文字通り余った白い部分。ただし漢字では余った白と表現するが、必ずしも余白の余った部分は白色ではない時もある。英語ではNegative spaceという。(Wikipediaより)
上記を踏まえてデザイン的な解釈をすると、文字や画像等の要素が置かれていない、何もないスペースのことですね。ホワイトスペースやマージン等といった言い方もあります。

余白の効果

余白がもたらす効果は大きく分けて、3つあると思います。

  1. 情報の整理
  2. 見やすさの向上
  3. 視線の誘導

1.情報の整理

いくつか並んだ情報を区別する際、見出しや線で区切る方法もありますが、情報同士が近すぎると内容が分かりにくくなります。見比べてみましょう。

A
情報の整理
Aは個々の要素の空きが同じくらいになっているので、説明文がどの写真と対応しているのか分かりにくいですね。せっかく見出しがあるのに活かせていません。なんだか窮屈にも感じます。

B
情報の整理
Bでは、写真と対応する説明文を近づけ、代わりに隣同士の空きを少し広めにとったので、写真+説明文という1つのまとまりとなっています。左右4つずつの塊が2つできたので、見出しが2つある意味もできましたね。
余白をとるためにAより写真が少し小さくなりましたが、窮屈感が軽減され、読みやすく感じられると思います。

2.見やすさの向上

1でなんとなく感じられたと思いますが、余白は本文を見やすく(読みやすく)してくれる効果があります。特に文章と余白は密接な関係にあります。余白は、要素の外にある大きな空白のことだけではありません。

A見やすさの向上

B
見やすさの向上

A、B共に同じ内容ですが、Aはギッチリと詰まっていて窮屈で読みにくい……。なんだか目も疲れてきますね。
Bは文章の周りに余白をとり、行間もあけました。これだけでもBの方が読みやすいですね。行間を開けるとゆったりとした印象になりますが、あけすぎると視線が流れにくくなり、また読みにくくなるので注意が必要です。

3.視線の誘導

視線の誘導というのは、手順書やストーリー性のあるものを順番通りに読んでもらうために誘導することです。

A
視線の誘導
Aの場合、要素の周りの余白が詰まっているため、左上スタートでも次は右か?それとも下か?と一瞬迷いませんか。読む順番は自由に、要素をたくさん見せたいときにはいいかもしれないですが、「この順番に読んで欲しい」という意図は感じられません。

B
視線の誘導
Bの場合は、横書きでは大体左→右に向かって読むことを踏まえて、上下の間に広めに余白をとってみました。こうすることで、上の要素/下の要素と区分けできたので、左→右という流れが分かりやすくなりました。

視線の誘導

縦書きの場合は上→下なので、左右の余白を広めにとります。

まとめ

余白については感覚で作業していることも多いのですが、偶然できてしまった空白ではなく、考えられて作られた空白だということが分かったと思います。
洗練されたデザインというのは、余白をうまく活用しているもの。普段目にする広告等のデザインでも、少し視点を変えて、余白に注目して見るとちょっと楽しいかもしれません。

グラフィックデザイナー / K.Y