デザイン
2022.07.21

サンプルを用いて解説するバナーデザイン 〜文字編〜

こんにちは!Webデザイナーのおすずです。

今回は、「バナーのデザインって何を気にすればいいの?」と悩んでいる方に向けて、バナーデザインのコツをいくつかご紹介していきたいと思います。
その中でも、どんなバナーでも活かしやすい“文字まわり”に絞ってお伝えします。
サンプルのバナーをデザインしていく流れで説明していきますので、デザインする前と後でどれだけ変わるのか、ぜひ最後まで見てみてください!

Before

こちらが、デザイン前のテキストをベタ打ちしただけの状態になります。
…テキストを打っただけなので、味気ないというか、なんだかパッとしませんね。
この状態から、文字まわりの調整を行っていきますよ〜!

フォントの変更

まずはフォントを変えていきます。
バナーのイメージに合ったフォントを選んでいきます。
ポイントとしては、バナーのイメージに合わせつつも、きちんと可読性が担保できる(読みやすい)フォントを選ぶことが大切です!
パッと見ていかに内容が伝わりやすいかを意識して選びましょう。

今回は、気軽に読んでもらいたい、デザインを楽しんでもらいたいといった思いがあるので、親しみやすい&少しポップ目な印象の「秀英丸ゴシック」というフォントにしました。

「イメージに合ったフォントを持っていない」という方は、無料のフリーフォントもたくさんありますのでぜひ探してみてください!(フォント漁りもこれまた楽しい…)

サイズの変更(優先順位付け)

イメージに合ったフォントに変更した後は、フォントサイズを調整しましょう。
今回のバナーは、タイトルが「サンプルを用いて解説するバナーデザイン〜文字編〜」、サブコピーが「ちょっとしたことで、デザインのクオリティは上がる!」です。
タイトルを大きく、サブコピーはそれより小さく。というのはなんとなくイメージがつく方は多いと思いますが、考え方としては、優先順位を決めてそれに沿ったサイズ調整を行いましょう。
パッと見たときに、一番目に入ってほしい要素はどこなのか?その次は?バナー内の各要素に優先順位を付けることで、サイズ調整の迷いが少なくなりますよ!

また、一文(センテンス)内でも優先順位を意識してサイズ調整を行うと良いです。
名詞など意味のある単語は大きく、助詞などの単体では意味を持たないものは小さくするなどメリハリを付けると一層読みやすくなりますよ。

文字組みの調整

次は文字組みについてです。

文字間隔

フォントにもよりますが、今回使用している「秀英丸ゴシック」では記号(!)の前後はスペースが広めであるなど文字の間隔がまばらになっているので、均等になるよう調整します。

一文(センテンス)内でサイズの調整を行ったところも文字間隔が変わってしまっている可能性が高いので、意識して調整しましょう

行間

行間も、読みやすいかどうかを意識して調整します。
行間が広いか狭いかだけでも見る側に与える印象は異なってくるので、バナーの印象に合わせて調整しましょう。

伸ばし棒の水平比率

私がデザイナーになってから先輩に教えてもらって「なるほど!」と感じたもののひとつが、伸ばし棒の水平比率の調整です。
今回でいう「バナーデザイン」の部分ですね。
他の文字の水平比率が100%の時であれば、伸ばし棒は80〜90%くらいにするとバランスが良くなります。
サイズ自体を小さくすると中心がズレたり線の太さが他と変わってしまうので、そうではなく必ず水平比率を変えることで調整しましょう!

After

今回ご紹介するポイントは以上となります。
以上のポイントを意識してデザインした結果、テキストをベタ打ちだった状態からこうなりました!

▼After

分かりやすく、Beforeと並べてみましょう。

今回は文字まわりのみの調整でしたが、読みやすくデザインできたのではないでしょうか!

まとめ

いかがでしたでしょうか?
今回はバナーデザインの文字まわりにフォーカスし、サンプルを用いてデザインのコツを解説させていただきました。
文字まわりのちょっとした調整だけでも、デザインのクオリティは変わるのだと感じていただけたら嬉しいです。また、デザイナーの方に対しては、今回紹介した内容が少しでもバナーデザインの参考となりましたら嬉しいです。
以上、おすずでした!

Contact

お問い合わせ