技術Note

こんにちは！
みなさんはデザインをする上で「余白」を意識的に作っていますか？

私はあまり作れていません…
とにかく画面を埋めようとしてしまいがちです…

そこで今回は「けっきょく、よはく。 余白を活かしたデザインレイアウトの本」を読んでみました！
https://www.amazon.co.jp/dp/4802611692/

「けっきょく、よはく。 余白を活かしたデザインレイアウトの本」とは

2018年に発売された、「余白」に注目してデザインを解説している本です。

ある程度のデザインはできるが洗練されたデザインができない新米デザイナーの「いまいちさん」と、おしゃれなデザインをさらっと作ることができるベテランデザイナーの「しゅっと先輩」、この2名が同じテーマでチラシやバナー、名刺などを作り様々な角度からデザインを解説していく、という形の本となっております。

読んでみた感想

本を読んでみて、「いまいちさん」とはまさに私のことだー！！となりました笑
普段感じている「なんかかっこよくないな…」の理由をきちんと言語化して説明してくれているので、なるほど〜！となりました。

「しゅっと先輩」が作った良いデザイン例もすごく参考になりました。
どのデザイン例にも必ずかっこいい余白が存在し、余白は意識的に作ることができることを知りました。

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

本書で紹介されていた余白術で、気軽にデザインに取り入れられそうなものをまとめました。
紙のデザインの技が多いですが、WEBデザインでも活用できるところは多くあります！

・写真の一部を裁ち落とす
→広がりを感じさせることができ、窮屈な印象が解消される

・注目させたい部分には、周りに十分な余白を取る
→注目させたい部分は文字を大きくしたり装飾を増やしたりしがちだが、周りに大きく余白を取るだけでしっかり目が引きつけられる

・三つ折り、二つ折りのパンフレットは紙面の分割にとらわれず、全体を広々と使ってレイアウトするといい

・形状が特徴的な写真は切り抜く
→写真が際立つ
→背景をなくすことで余白が生まれ画面をより効率的に使うことができる

・一面ベタ塗りは、水彩調にしたり周りに白いフチをつけることで抜け感が出て軽い印象になり余白感が生まれる

・ランダムに写真を置くデザインでもある程度写真のサイズは揃える

・罫線について
→色は薄くする
→罫線の代わりに余白を取ることでも区切ることはできる

・狭い余白は逆に窮屈さを与える

・余白は落ち着きを与えてくれる反面、大人しいデザインになってしまうことも注意

・ベタ塗りの代わりに布のテクスチャは柔らかさが出ていい

・読みやすい行の長さは1行に15〜35字程度
→それより文字数が多い場合は段組を増やす

・行間も余白の一つで、読みやすさにすごく関わってくる
→文字サイズの1.5〜1.75倍の行送りがいい

・情報量が多い場合
→単調なデザインをしがちだが、要素と要素の間に広く余白を取ることで、崩したデザインでも情報をしっかり整理することができる

まとめ

今まであまり「余白」に注目できていなかったので、これを機にもっと意識してみようと思います！