余白の重要性
こんにちは、フリーランスデザイナーのちふねこです。
今日は、知ってるだけで差がつく3つの余白の使い方というテーマでお話ししていきます。
余白がテーマとなっております。
ちょっと何を隠そう、鼻声でですね、コロナになってしまって、熱とかはそんなにないんですけど、
鼻詰まりが今ひどくてですね、聞き取りづらかったら申し訳ないんですが、
発声もいつもより省エネモードでお届けさせていただきます。
今日のテーマは余白ですね。
前回、バイブコーディングでも使えるデザインのコツみたいなお話をお届けしたんですけど、
その中でさらっとタイトルに一工夫するみたいなことをご紹介していて、
前回は具体的に言うと、フォントの種類を変えるっていう風に言及してたんですけど、
それだけじゃなくて、さらっと文字感を調整するのもおすすめですっていうようなお話をしたんですよ。
今日はそのあたりをもう少し詳しくお話ししたくて、余白っていうものをテーマにしています。
ズバリ知ってるだけで差がつく3つの余白の使い方、3つご紹介すると、
1つ目は周囲の余白、2つ目文字感の余白、3つ目行間の余白、この3つですね。
まず1つ目の周囲の余白っていうのは、画像とかバナーだったりチラシとかで役立つものなんですけど、
画像全体の周囲の余白、画像の端っこから内側に何ミリとか、
外側周囲ぐるっと何ミリかは文字とか何にも入れないみたいな、
そういう一定の余白をマージンって専門用語では呼んだりするんですけど、
それをしっかり確保するか否かでだいぶ印象が変わるんですよね。
もちろん表現手法として必ずしもそれを守るべきじゃないというか、
違うパターンはもちろんあるんですけど、特にデザイン初心者というか、
不慣れな時こそまずはこの周囲の余白をしっかり確保するっていうのをやるだけで、
かなり印象が垢抜けるというかプロっぽくなります。
これのいいところは一気にまとまりが出るんですよね。
初心者あるあるなんですけど、余白を作らずにギチギチに情報を詰め込んでしまうみたいな。
バナーだったら端から端まで文字を大きくしたり、
あと下の方に細かい文字とかが入る時に本当ギリギリ、
画像の端っこをギリギリまで文字くっつけちゃうみたいなことがあるあるなんですけど、
それをやるとすごく素人感が出ちゃうんですよね。
私もよくやってたんですよ。枠いっぱいに情報を詰め込まなきゃというか、
大きければ大きいほどいいじゃないですけど、そういうことやりがちなんですが、
あえてしっかりマージン、周囲の余白をしっかり確保するっていうのを意識するだけで、
一気に全体がまとまるんですよね。情報にまとまりが生まれやすくなる。
あとはこの周囲の余白の幅、どれだけ余白を確保するかで、
高級感とかの印象も作れるんですよ。
余白周りにたっぷり取れば取るほど高級感っていうのが出ます。
これはぜひ世の中のポスターだったりバナーとかを見ていただきたいんですけど、
高級なブランドほど余白ってたっぷり確保されてるんですよ。
あとは映画のティザーポスターとかですかね、
そういうのは本当に余白たっぷりで真ん中にコピーがサラッと入ってるみたいな、
余白の具体的な使い方
そういうのも要素は大きくないのに、余白が大きいっていうだけでメリハリが出るというか、
小さなコピーも際立つっていうようなことがあったりするんですよね。
なので自分が作りたい印象によってその周囲に確保する余白の幅も調整してみると、
高級感をあえて演出するみたいなこともできるんじゃないかなと思います。
続いて2つ目の余白は文字感ですね。
これがまさに前回バイブコーディングでも使えるっていうのでご紹介、サラッとご紹介したものなんですけど、
例えばタイトル部分の文字感、文字と文字の間の余白ですね。
カーニングとか呼んだりもするんですけど、
これをちょっと広めにとる、タイトルの文字感をちょっと広めにするだけで、
すごく他の本文、普通の文章との差が生まれて、よりタイトル感が増したり、
あるいはまたこの余白をたっぷりとる、文字感の余白をたっぷりとることで、
これもまた高級感につながるとか、そういう使い方もあるんですけど、
そういう感じで初期設定の文字感じゃなくて、ちょっとあえて広めにとってみるとか、
やってみると一気に開かなけるというか、他と差がつくので、これもぜひ試してみていただきたいです。
続いて3つ目の行間の余白。
これも意外とデザイン始めたての頃ってここまで意識できないことが多いんですけど、
この行間にこだわるだけで一気に読みやすさっていうのが変わるんですよね。
基本的に初期設定、いろんなデザインツールとか、
そういうワードみたいなテキスト、文章を作るツールの初期設定で読みやすくはなってるんですけど、
たまにキャンバーとかで自分で触っていると、
いろいろいじってる間に、なんか行間がめちゃくちゃ狭くなっちゃってたり、なんだろうな。
文字感を調整した時に、文字感より行間って広くないと、文字同士の横書きの文字だったら、横書きだったら横向きに読まないといけないので、
行間よりも文字感は狭い方がいいんですよ。
でも文字感を広げることで、文字感が広くて行間の方が狭いみたいな、そういう現象がたまに起こるんですよ。
それに気づかず、そこに違和感を感じられず、そのまま使っちゃって、めっちゃ読みづらい文章になってるみたいなものをたまに見かけます。
なので、そもそも複数行に渡るような文章っていうのは、文字感そんなに広げない方が読みやすいんですけど、
仮にね、ゆったり読ませたくて、ちょっと文字感広げた時には、行間も一緒にちょっと広めにとった方が、
より作りたいゆったりした印象を確保しつつ、読みやすさも担保できるみたいなことになるので、
この行間、文字感を調整したら、行間っていうのも一緒に調整して適切な行間を設定してみると、
より美しく見やすい文章になって、それがやっぱり洗練されて、プロっぽいというか、垢抜けたデザインに繋がっていくんですよ。
本当にこんな、なんだろう、些細な調整ではあるんですけど、こういうちょっとした気遣いというか、こういう配慮でガラッと印象って変わったりするので、
そういう意味で、この行間っていうのも是非まだ意識したことない、なかった方は是非これを機にちょっと意識してみてください。
ということで今日は、3つ知ってるだけで差がつく、3つの余白の使い方をご紹介しました。
1つ目は周囲の余白、2つ目は文字感の余白、3つ目は行間の余白。
以上です。聞くだけフリーランス講座の毎週火曜日はこんな感じでサクッと学べるデザインのお話をお届けしています。
デザインをやってる方もそうじゃない方もスキルアップのヒントとして参考になれば幸いです。
今日も最後まで聞いてくださりありがとうございます。
