今回はデザインに余白を取り入れた場合の効果や余白を作るコツをご紹介します。
こういった方におすすめです。
- 余白って言っても具体的にどう作るのかわからない
- レイアウトを作るとなんだか見づらい
- 自分で作ったデザインに洗練さがない
このブログのデザインも余白を意識するだけで、だいぶ見栄えが良くなったと思います。
デザイン初心者の方にもわかりやすいように図解を用いて解説します。
☑ 本記事の内容
デザインでの余白の効果
さっそく、デザインする際に余白を意識するとどんなメリットがあるのか解説します。
伝えたいことが目立つ
余白を意識してレイアウトすると内容が理解しやすくなります。
良い例はすっきりしてるので読みやすく、何の情報かすぐに理解できますね。
悪い例は圧迫感があって見てる人が疲れそうです。
このように内容の理解を助けるのが余白の役割です。
ダサいデザインからの脱却
余白を効果的に使うことであか抜けたデザインにすることができます。
良い例はゆとりがあって洗練された雰囲気がありますよね。
悪い例はすべてが主張しあってるので窮屈です。
洗練されたデザインにするためには余白は不可欠です。
余白の効果を発揮するデザイン方法
それではどうやって余白を効果的に使うのか、具体的な方法を解説します。
- 伝えたい要素周辺は余白を多めに
- 罫線の変わりに余白を使う
- 文章間に広く余白をとる
- 目立つフォントばかり使わない
- 写真や色をぼかして余白を作る
ひとつずつ図を使って解説していきます。
伝えたい要素周辺は余白を多めに
タイトルやメインとなる写真のまわりに十分な余白をとることです。
そうすることで伝えたい部分に視線を集中させることができます。
コツ
- 遊びができるくらい十分な余白を意識
- タイトルとそれ以外の文字サイズ差を大きくする
- テキスト情報を要素ごとにまとめる
悪い例との比較
良い例は余白があるせいでタイトルと写真が目に飛び込んできますよね。
悪い例は画像の圧迫感を感じます。
文字や画像をただ大きくすればいいわけではないことがわかります。
見せたいものこそ余白を作ることが大事ですね。
罫線の変わりに余白を使う
余白を使って情報を区切ることができます。
もちろん罫線でも情報を整理することはできますが、場合によっては悪目立ちしてしまうこともあります。
すっきりさせたい場合は罫線より余白を使ってみましょう。
コツ
- 色や罫線は使い過ぎず最低限の要素でレイアウトする
- 情報が並んでる場合は余白で区切る
- 大事な情報はその他の情報と差をつける
悪い例との比較
良い例は罫線がなくても情報が整理されてる印象を与えますよね。
悪い例は直線が多く硬い印象になってます。
罫線を使わなくても余白があれば自然と情報を分けてくれますよ。
文章間に広く余白をとる
文章がずらっと続いてるような情報量の多い場合は、文章と文章の間に広めの余白をとります。
情報が整理され読みやすくなるだけでなく、最初から読む気をなくしてしまうリスクを減らせます。
コツ
- 図形を取り入れて項目を分ける
- 情報が多くても規則性のある並べ方にする
- 大胆な模様や構図で読み手を飽きさせない
悪い例との比較
良い例は長文があっても情報が多そうな印象は与えないですよね。
一方で悪い例はどこから読み始めようか迷いそうです。
色のコントラストと文章間の余白で受け手の印象が違いますね。
大きすぎないフォントで余白を作る
目立たせたいからと言って、太くて大きいフォントを使うことは避けたいです。
要素に圧迫感があると見る側は疲れてしまいます。
目立たせたいのであれば小さいフォントでも周りに余白をおけば自然と目がいきます。
「目立たせる＝余白を使って視線を集める」にシフトしてみましょう。
コツ
- 重要でない文字は小さくしてメリハリをつける
- 存在感のあるフォントで他の要素の魅力を消さない
- 【 】を連発させるより文頭と文末の位置を揃える
悪い例との比較
良い例はフォントの大きさにメリハリがあって伝えたい情報が理解しやすいです。
一方で悪い例はフォントの大きさに差がなく、情報が詰まってる感じです。
すべての字を大きくするのではなく「大事な文字とそれ以外を分けること」が大事ですね。
写真や色をぼかして余白を作る
例え白くない写真を使っていたり、紙面全体に色を塗っていたとしても、ぼかすことで余白を作ることができます。
ぼかしで白い部分ができあがり抜け感がでて余白の役割を果たしてくれます。
コツ
- 写真を明るく加工して余白感をだす
- グラデーションにして透明感をだす
- 色はべた塗りせず透過させる
悪い例との比較
良い例は白いグラデーションのおかげで透明感がだせています。
一方で悪い例は暗くてずしりとした雰囲気です。
あえてそういう暗さを演出したいならＯＫですが、意図していないのであれば抜け感をだしてあげましょう。
まとめ
以上余白の効果と使い方の解説でした。
- 伝えたい要素周辺は余白を多めに
- 罫線の変わりに余白を使う
- 文章間に広く余白をとる
- 大きすぎないフォントで余白を作る
- 写真や色をぼかして余白を作る
余白はデザインをする上で出来映えを大きく左右する要素のひとつです。
基本的な使い方を知ってるだけであなたのデザインをずっとセンス良くしてくれます。
最後に余白についてもっと勉強した人のためにピッタリな本を紹介しておきますね。
他の本に比べて事例がたくさん載ってるのでデザインの改善点がよくわかります。
自分のデザインがダサかった原因がよくわかる本でした。
Amazonのページでサンプルがたくさん見れるのでぜひご覧ください。
デザインの超基本「デザイン4原則」を知りたい人はこちらの記事もどうぞ。
では今回はここまでです。
を使用しております。
「シンプル・簡単・時短」を叶えてくれます。
