デザインにおける「余白」
デザインをする上で切っても切り離せない「余白」。
デザイナーとして経験の浅い頃は、何もないスペースに不安を感じて要素を詰め込み、余白のないギッチリとした画面を作ってしまうケースが比較的多く見られます。でもこの余白、デザインにおいては意味のある空きであり、使いこなせればデザインのクリオティも上がるものなのです。
そもそも「余白」とは？
余白（よはく）とは、文字通り余った白い部分。ただし漢字では余った白と表現するが、必ずしも余白の余った部分は白色ではない時もある。英語ではNegative spaceという。（Wikipediaより）
上記を踏まえてデザイン的な解釈をすると、文字や画像等の要素が置かれていない、何もないスペースのことですね。ホワイトスペースやマージン等といった言い方もあります。
余白の効果
余白がもたらす効果は大きく分けて、3つあると思います。
- 情報の整理
- 見やすさの向上
- 視線の誘導
1.情報の整理
いくつか並んだ情報を区別する際、見出しや線で区切る方法もありますが、情報同士が近すぎると内容が分かりにくくなります。見比べてみましょう。
A
Aは個々の要素の空きが同じくらいになっているので、説明文がどの写真と対応しているのか分かりにくいですね。せっかく見出しがあるのに活かせていません。なんだか窮屈にも感じます。
B
Bでは、写真と対応する説明文を近づけ、代わりに隣同士の空きを少し広めにとったので、写真+説明文という1つのまとまりとなっています。左右4つずつの塊が2つできたので、見出しが2つある意味もできましたね。
余白をとるためにAより写真が少し小さくなりましたが、窮屈感が軽減され、読みやすく感じられると思います。
2.見やすさの向上
１でなんとなく感じられたと思いますが、余白は本文を見やすく（読みやすく）してくれる効果があります。特に文章と余白は密接な関係にあります。余白は、要素の外にある大きな空白のことだけではありません。
A
B
A、B共に同じ内容ですが、Aはギッチリと詰まっていて窮屈で読みにくい……。なんだか目も疲れてきますね。
Bは文章の周りに余白をとり、行間もあけました。これだけでもBの方が読みやすいですね。行間を開けるとゆったりとした印象になりますが、あけすぎると視線が流れにくくなり、また読みにくくなるので注意が必要です。
3.視線の誘導
視線の誘導というのは、手順書やストーリー性のあるものを順番通りに読んでもらうために誘導することです。
A
Aの場合、要素の周りの余白が詰まっているため、左上スタートでも次は右か？それとも下か？と一瞬迷いませんか。読む順番は自由に、要素をたくさん見せたいときにはいいかもしれないですが、「この順番に読んで欲しい」という意図は感じられません。
B
Bの場合は、横書きでは大体左→右に向かって読むことを踏まえて、上下の間に広めに余白をとってみました。こうすることで、上の要素／下の要素と区分けできたので、左→右という流れが分かりやすくなりました。
縦書きの場合は上→下なので、左右の余白を広めにとります。
まとめ
余白については感覚で作業していることも多いのですが、偶然できてしまった空白ではなく、考えられて作られた空白だということが分かったと思います。
洗練されたデザインというのは、余白をうまく活用しているもの。普段目にする広告等のデザインでも、少し視点を変えて、余白に注目して見るとちょっと楽しいかもしれません。
グラフィックデザイナー ／ K.Y
