余白って、ただ空ければいいわけじゃなかった話

デザイン初心者の私が「けっきょく、よはく。」とセミナーから学んだこと

こんにちは、おはぎです。

暮らしの実験室へようこそ。

今日は、デザインの「余白」について書いてみようと思います。

……と、いきなり言っておいてあれなのですが、私はまだまだデザイン初心者です。

「余白とはですね」と、先生みたいに語れる立場では全然ありません。

どちらかというと、

「この余白、広い？狭い？え、正解どこ？」

と、画面の前でちょっと挙動不審になっている側です。笑

でも最近、ハルカゼのセミナーで余白について学んだり、デザイン界ではよく名前を聞く本『けっきょく、よはく。』を読んだりして、

「あ、余白って、ただ何も置かない場所のことじゃなかったんだ」

と少しだけ見え方が変わりました。

なので今回は、その学びのアウトプットとして、初心者なりに余白について整理してみます。

まだ途中のメモみたいな記事ですが、同じようにデザインを学び始めた人にとって、

「わかる、そこ迷うよね～」

くらいの温度で読んでもらえたら嬉しいです。

余白は「余った場所」ではなかった

つい最近までの私は、余白をどこか

「空いてしまった場所」

「まだ何か入れられそうなスペース」

くらいに思っていました。

料理でいうと、お皿の端が空いているから、もう一品のせたくなる感じです。

いや、のせたくなるんですよね。もったいない気がして。笑

（たくさん種類が乗ったワンプレート料理大好き！）

でも、セミナーや本を通して学んだのは

余白はただの空きスペースではなく、
情報を見やすくするために、意図して作るスペース

だということでした。

初心者の私なりに言うなら、

余白は、デザインの呼吸スペース。

文字や写真、ボタン、イラストなどをぎゅうぎゅうに詰めると、見る人はどこを見ればいいのかわからなくなります。

全部が同時に「私を見て！」と言っている状態。

全員主役。

全員センター。

もはや目が忙しい。（あ、嵐はこんな感じでしたね。箱推しってそうですよね。笑）

そこに余白があると、情報に「間」が生まれて、見る人が落ち着いて受け取れるようになるんだなと感じました。

余白があると、情報が整理されて見える

余白の役割として、まず一番わかりやすいのは「見やすくなる」こと。

たとえば、

・ 見出しと本文の間
・写真と説明文の間
・文章のまとまり同士の間
・ボタンの周り

こういうところに適度な余白があると、情報が整理されて見えます。

逆に、全部が近すぎると、どこまでがひとつのまとまりなのかがわかりにくい。

読む側としては、

「え、これは上の説明？下の説明？どっちの仲間？」

となるんですよね。

私もCanvaなどで作っていると、つい「空いているから何か置こう」と思ってしまうのですが、むしろ置かないことで伝わりやすくなることもある。

ここが、今の私にはかなり大事な発見でした。

関係あるものは近くに置く。

違う情報は少し離す。

線を引かなくても、枠で囲まなくても、余白だけで「ここはひとまとまりですよ」と伝えられる。

余白、静かなのに仕事ができるタイプの人ですね。

余白の量で、デザインの印象も変わる

もうひとつ面白いなと思ったのが、余白の量によって、デザインの雰囲気そのものが変わることです。

余白が少なめだと、

・にぎやか
・ポップ
・親しみやすい
・ 勢いがある
・情報量が多い

という印象になりやすい。

セールのチラシやイベント告知などは、あえてぎゅっと詰めた方が「お祭り感」や「勢い」が出ることもありますよね。

一方で、余白が広めだと、

・シンプル
・落ち着いている
・洗練されている
・高級感がある
・余裕がある

という印象になりやすい。

たしかに、ブランド広告などを見ると、商品がぽつんと置かれていて、
まわりにたっぷり余白があることがあります。

昔の私なら、

「まだ置けるのに……？」

と思っていたかもしれません。

でも今は少しだけ、

「あえて置かないことで、主役を引き立てているんだな」

と見られるようになりました。

少し成長。

たぶん。

おそらく。

大事なものを目立たせるためにも、余白は使える

余白には、視線を集める力もあるんだなと感じました。

たとえばキャンペーンバナーなら、

「SALE」

「20%OFF」

「本日限定」

みたいな一番見てほしい言葉の周りに余白を作ると、そこに自然と目がいきます。

逆に、全部を大きくして、全部を詰め込むと、何が一番大事なのかわかりにくくなる。

全部を目立たせようとすると、結局どれも目立たない。

これ、デザインだけじゃなくて、予定表にも言える気がします。

全部大事にすると、自分が一番先に倒れるやつです。笑

だから余白は、単に「空いている場所」ではなくて、

「ここを見てほしい」

「ここは少し休んでほしい」

という視線の流れを作るためのものでもあるのだと思いました。

初心者の私が、まず意識したいこと

（Xに投稿した図解です）

今の私が、実際にデザインを作る時に意識したいと思ったのは、この3つです。

1. 上下左右の余白をそろえる

まずは、端に寄りすぎていないか。

左右の余白がバラバラになっていないか。

上下の間隔が不自然に詰まっていないか。

細かいテクニック以前に、余白の幅をそろえるだけでも、見た目が少し整う気がしています。

「なんか違うけど、何が違うかわからない」

という時は、まずここを見るようにしたいです。

2. 関係あるものは近づける

見出しと本文。

画像と説明文。

ボタンと補足文。

関係があるものは近くに置く。

これだけで、見る人が「これはセットなんだな」と理解しやすくなります。

私はつい全体を均等に置きたくなるのですが、全部を同じ距離にすると、逆に関係性が見えにくくなることもある。

ここはまだ練習中です。

3. 違う情報はしっかり離す

別の内容同士は、余白で区切る。

線を引いたり、背景色を変えたりする前に、まず距離を取ってみる。

装飾を足して整理するのではなく、余白で整理する。

これができるようになると、デザインが少し大人っぽくなるのかもしれません。

私はまだすぐ何か足したくなります。

足し算大好き人間なので。

でも、余白は引き算の練習でもあるんだなと感じています。

「余白を置く」という考え方

今回一番印象に残ったのは、

余白は余ったスペースではなく、余白というオブジェクトを置くもの

という考え方です。

文字を置く。

写真を置く。

ボタンを置く。

それと同じように、

「ここには余白を置こう」

と考える。

この視点を持つだけで、デザインを見る目も、作る時の意識も少し変わる気がしました。

もちろん、実際にやってみると難しいです。

「どこまで空ければいいの？」

「これは余白なの？ただのスカスカなの？」

「なんか寂しくない？」

と、まだまだ迷います。

でも、迷えるようになっただけでも前進なのかもしれません。

前は、余白の存在にすら気づいていなかったので。

まとめ：余白は、デザインのやさしさなのかもしれない

余白は、ただおしゃれに見せるためのものではなく、

・見やすくする
・情報を整理する
・印象をコントロールする
・大事なものを目立たせる

ための、大事なデザイン要素でした。

今回、ハルカゼのセミナーや『けっきょく、よはく。』を通して学んで、

余白は、見る人のために作るもの

なのかもしれないと思いました。

自分が置きたい情報を全部置くのではなく、

読んだり、見たりする人が受け取りやすいように、少し間を作る。

そう考えると、余白って、デザインのやさしさみたいなものなのかもしれません。

まだまだ私は初心者で、余白の正解もよく迷います。

でもこれからデザインを作る時は、

「何を足すか」

だけではなく、

「どこに余白を置くか」

も考えてみたいです。

暮らしもデザインも、詰め込みすぎると苦しくなるのかもしれません。

冷蔵庫も、予定も、スマホの写真フォルダも。

耳が痛いです…💦滝汗

それではまた、次の暮らしの実験でお会いしましょう！

---

おはぎ｜暮らしの実験室 を登録する

わんぱくがすぎる２歳児の子育てに奮闘しながら、
AIとデザインに興味があるどこにでもいるフツーの時短ワーママの実験室