WEBデザイン

バナーデザインでまず抑えるべき!基本の3ポイント

バナーデザイン基本の3ポイント

こんにちは!
WEBデザイナー&ディレクターのまたたびです。

今回は、バナーデザインをするときにカッコよくするためのコツをご紹介します!
「バナーを作ってみたけどイマイチしっくりこない」
「どうしたらプロっぽいデザインになるかわからない」
そんなお悩みがある方も多いのではないでしょうか?

わたしも、今でこそバナーデザインをさくっと作成できるようになってきましたが、
それこそデザイナーになりたての頃はバナーを作るだけでまる1日かかってしまっていたこともありました。

もちろん経験もありますが、バナーをデザインするのには「ポイント」があります。
今回は、わたしがバナーデザインをする時に抑えている「ポイント」をご紹介します!

情報の優先順位をつける

まずはこちらのバナーをご覧ください。
このバナーをぱっと見て、どんなバナーなのか理解できましたか?

バナーデザイン

ぬこさん
ウォーターサーバーの画像は目に入ってくるけど、何を伝えたいバナーなのかわからないにゃ‥
バナーは情報の優先順位が大事なんだ!詳しく紹介していくね。
またたび

バナーは「ぱっと見た瞬間に理解できる」「伝えたいキーワードがすぐに目に入ってくる」ことが重要です。
ユーザーに伝えたい情報の順番に情報の優先順位をつけることで、
どんなバナーなのかをユーザーに伝えることができます。

では、まずは上のバナーの情報を優先順位づけをしてみましょう。

情報の優先順位づけ

  1. 500ポイントプレゼント
  2. 全員に
  3. 期間
  4. 新規お申し込みいただいた方

まず、ユーザーにとって一番のメリットである「500ポイントプレゼント」を一番強調します。
そして、「抽選」ではなく「全員」にプレゼントということも大きなメリットのため次に目に付くように調整します。
これらの調整をしたバナーがこちらです。

情報の優先順位をつけたバナーデザイン

情報も優先順位をつけて文字の強弱をつけるだけで、かなり内容の伝わるバナーになってきました。

ポイント

  • バナーに入れる文字情報をリストアップして、情報の優先順位をつける
  • 優先順位を意識して文字サイズや文字色を調整する

文字組みを調整する

次に調整したいポイントは「文字組み」です。
強調したい要素である「500ポイントプレゼント」をさらに強調するために
文字組みをして調整していきます。
バナーデザイン(文字組み)優先順位をつけたものよりもさらに「500ポイントプレゼント」が目立つようになりましたね!
このように、文字組みによって1つの単語に強弱をつけることで「プロっぽい」デザインになっていきます。

ポイント

  • 数字は大きく、「ポイント」「円」などの単位は小さく
  • 「〇〇に」などの「助詞」は小さく

文字に装飾をつける

最後に、もう少しバナーに賑やかさを足すために装飾を入れていきます。
よく入れる要素として、吹き出しや円で囲む、文字の左右に装飾をつけるなど、
バナーの雰囲気に合わせて装飾を足していきましょう。

バナーデザイン(吹き出し)

ポイント

  • 吹き出しデザインはどんなバナーにも使いやすい
  • 円や四角で囲むなど、ちょっとした装飾でも変化がつく

まとめ

いかがでしたでしょうか?
今回はバナーデザインをするときに抑えておきたい基本的なポイントをご紹介しました。
これらのポイントを意識しながら色々なバナーデザインを見ていくと、
それぞれのバナーデザインが強調したい要素をどう表現しているか、
どんな文字組みをしているか、など色々な学びがあると思います♪

  • この記事を書いた人

またたび

WEBデザイナー・ディレクター。WEBデザイン・ディレクション・マーケティングについて情報発信をしていきます。

-WEBデザイン
-