本記事は
Designers Week 2022春
5日目の記事です。
🌳
4日目
▶▶ 本記事 ▶▶
6日目
🌳
こんにちは。
Webコンテンツ制作をしているチームで、デザイナー歴3年目ホヤホヤの馬場です。
私たちのチームではWebサイトやランディングページ、システム画面などのデザイン制作を主としていますが、バナーデザインのお仕事をする機会も多々あります。
デザイナーの皆さん、バナーを制作する際にこんな経験はありませんか？
- クライアントからオリジナル素材（商品・イメージモデルの写真等）が提供されない。または、そもそも告知の性質上そのような素材が存在しない。
- 制約があって自由に写真が使えない。
- イメージに合った良い感じの写真が見つからない。
私は入社1年目の頃から様々なバナーを制作してきましたが、写真の面で悩むことは多くありました。
限られた空間の小さい広告だからこそ、写真がない場合どうしても物足りないデザインになってしまいがちです。
そんな物足りなさを解決するために、私が個人的に気をつけているポイントを3つご紹介させていただきます。
今回はこちらの、必要な情報を置いただけのどこか物足りないバナーを少しずつ変化させていきます。
POINT1. 文字をデザイン要素として活用する
装飾や絵を足す前に、まずは文字を見直してみます。
写真が使えないということは、文字やイラスト・背景パターンなどの少ない要素でデザインを構成しないといけないということです。限られた要素を最大限に活かしてデザインしましょう。
中でも、文字は訴えたい情報そのものですから、文字をどう扱うかはバナー制作においてとても重要です。
ただ文字を並べただけのバナーだと、情報の訴求力が低くユーザーの目には留まりません。
バナーはメインコンテンツではないため、意識的に広告を目に入れようとする人は少ないです。
視界に入って瞬発的にユーザーの興味を惹きつけるには、文字にインパクトを持たせましょう。
ジャンプ率を上げ、情報にメリハリをつける
文字にメリハリをつけるには、情報の優先順位を決めます。
こちら側が伝えたいワードとユーザーが惹かれるようなワードを考え、優先すべき言葉を決めてください。
何を読ませたいのかをはっきりとさせ、目立たせたいワードは他の情報と分かりやすく差をつけるようにします。
今回ユーザーに一番見てほしいワードである「SALE」の文字を、目に飛び込んでくるようなサイズ感にして強調させました。
また、日付や割引率など数字部分は大きく、記号や単位などの非強調箇所は小さく表記しジャンプ率を上げます。
ジャンプ率とは、文字や画像などのデザイン要素で、大きい要素と小さい要素の大きさの比率のことです。比率が大きいことを「ジャンプ率が高い」と言います。
文字の場合、ジャンプ率を高くすることで、サイズを大きくした文字の内容が見る人によりわかりやすく伝わります。
また心理的にも、ジャンプ率を高くすることでデザインに躍動感や大胆な印象を、逆に低くすることで落ち着いて品のある印象を与えることができます。
文字にアレンジを加える
更にユーザーの目に留まるようなバナーにするためには、文字に一工夫入れるとより効果的です。 メインのワードなどに遊び心を少し入れると、面白味のあるデザインになり存在感が増します。
メインキーワードである「LAST SUMMER SALE」の「A」の部分に工夫を入れ、デザイン性を感じるような文字に変化させました。
一文字だけでもアクセントを入れることで、デザインが引き締まり物足りなさが軽減します。
※文字をいじる際には可読性に気を付け、あくまでも読める範囲で工夫するように注意してください。
POINT2. あしらい・イラストなどの装飾にこだわる
装飾によりバナー全体の世界観が決まると言っても過言ではありません。
やはりあしらいやイラストがなければ、どこか寂しい印象を感じてしまいます。写真の代わりにもなるよう、細部まで丁寧に作り込みましょう。
さらに、先ほど工夫した文字を目立たせ視線を誘導させるためにも、装飾は重要な役割を果たします。
シンプルに、今っぽく
今回はショッピングモールやアパレル系のバナーなので、イメージに合わせてショッピングバッグのイラストを施しました。
ショッピングバックを大きくはみ出して配置することでインパクトや存在感を出すだけでなく、小さいバナーでも広がりがあるように見せたり、ちまちまとした印象を払拭する効果があります。
いたってシンプルなイラストですが、直線ではなく手書き風のラインで抜け感を出したり、さりげなくディティールに凝ることで全体のクオリティアップに繋がります。
決して情報を邪魔しないような、スッキリとしたシンプルなデザインが近年のトレンドです。
物足りなさを払拭するために装飾をごちゃごちゃとさせてしまうと、目立たせたい情報が埋もれ逆効果になります。
細部にまで丁寧に作り込むというのは、絵を描き込んで派手にするという意味ではなく、
細部にまで気を配って洗練された印象に仕上げるということです。
POINT3. 背景に手を加える
一つのバナーとして大分完成に近づいてきましたが、まだどこか少し物足りなさを感じます。
そこで、仕上げとして更に見栄えを良くするために、ただベタ塗りしているだけの背景にも手を加えてみましょう。
- グラデーションをかける
- テイストに合った模様やテクスチャを薄く敷く
こういった様々な手法を試し、ほどよく「余白感」や「ベタっと塗った感」をなくしていきます。
紙のテクスチャを薄く敷き質感を出してみたり、
水玉模様で「夏」っぽさを演出してみたり。
最後に一手間加えることで、ぐっと全体のデザインが引き締まります。
シンプルな紙や布などのテクスチャは、どんなバナーにも使える万能なものなので何種類か持っておくと便利です。
最後に
いかがでしたか？
数字や文字の大きさに変化を加えたり、背景にテクスチャを入れることは誰でも簡単に試すことができるオススメの手法です。
皆さんがなんとなく「おしゃれだな」と思っているデザインは、実は言われなければ気づかないレベルの些細な作業や細かい配慮の積み重ねだったりします。
おしゃれな写真がなくとも、今回ご紹介したポイントなどを含めた細部を見つめ直すことで質の高いデザインは作り出すことができます。
デザイナーでない方も、人知れず積み重ねられた細かい工夫を是非探してみてください。
今後も世の中にあるバナーを沢山見て、真似して、魅力的なバナーデザインを追求していきます！
最後までご覧いただきありがとうございました。
