【初心者必見】バナーのデザインセンスを磨く方法と意識するべき6つのポイント

【初心者必見】バナーのデザインセンスを磨く方法と意識するべき6つのポイント
この記事は最終更新日から約1年が経過しています。

いきなりですが、バナーの制作経験が少ないと「デザインが浮かばない」「他の人と比較して自分のバナーは微妙」と思う場面はありませんか。

そのようなスランプに陥ると「自分にはデザインセンスが無い」と考える方も多いと思います。「センス」という言葉を聞くと、感覚が優れていたり感性が鋭いイメージがありますが、バナーは感覚で作るのではなく「なぜこのデザインにしたのか」という意図を持ってロジカルに作ることが重要です。

例えば「コピーはなぜこの順番で配置したのか」「ボタンはなぜこの色なのか」と質問されたとき、すぐに回答できるでしょうか。

私はデザイナーになりたての頃、何となく見た目が良いと思ったデザインを参考にバナーを制作していたため説明ができませんでした。もし同じように「回答できないかも」と不安に思った方は、これから紹介するインプットの習慣を取り入れることをオススメいたします。

インプットのすすめ

デザインに限らず、何かを生み出すにはインプットを行うことが大切です。

これまでの知識・経験がアウトプットに影響するので、インプットの習慣がないとトレンドに対応できなくなったり、新しいアイディアが生まれにくくなってしまいます。

しかし、ただ多くのバナーデザインを見るだけでは表面的な模倣にしか繋がらず、目的に合わせてどの要素にどのような役割を持たせるかを自分で考えて形にすることは難しいでしょう。

ロジカルにデザインするスキルを身につけるためには、見て終わりにせず、良いと思った部分を「なぜ良いと思ったのか」掘り下げて、言語化することが重要です。

インプットというと大変なイメージを抱いてしまう方もいると思いますが、1日5分でもかまいません。まずは習慣化することを目標に、重く考えずに行ってみましょう。

デザインの基本原則を知ることで、より鋭い視点でデザインを見ることができるため、こちらの記事もぜひ読んでみてください。

※記事内のクリエイティブはすべて架空の例によるサンプルです。説明のために要素を簡略化して作成しています

バナーを見る際に意識すること

言語化する際にはバナーを6つの視点で分析します。

  • 要素の優先順位
  • 使用している画像
  • フォント
  • バナーの目的
  • 広告媒体との相性

WebサイトやSNSで、実際に目にして良いと思った広告バナーをピックアップして進めてみましょう。

要素の優先順位

優先順位がわかると「ターゲットの課題は何か」「何を伝えたいのか」デザインの意図が見えてきます。

普段自分がサイトやSNSを見ている時を想像してみてください。他に目的がある中で、突然出てきた広告バナーをじっくり見ていますか?

目的が違うユーザーを惹きつけるために、バナーの制作者は「どうしたらターゲットに一目見ただけで伝えたいことが伝わるか」を考えてデザインしているはずです。

例えばこちらのバナーを見て、まずどの要素が目に入ったでしょうか。一番最初に目に入った内容がこちらのバナーで伝えたいことになります。

このバナーの場合「月収27万円」が目立ちますね。なぜ「月収27万円」を目立たせるデザインにしたのか考えると、保育士さんに「転職をすることで給料が上がる」というベネフィット(ユーザーの利益)を伝えるためだと推測できます。

ベネフィットが分かるとターゲットの課題も見えてきます。「転職をすることで給料が上がる」と伝えているということは、「給与を上げたい」という保育士さんのニーズが推測できます。

このように、掘り下げて考えていくと「現在の給料に不満がある保育士さん」に「転職をすることで給料が上がる」ということを伝えたいバナーということが分かりました。

どの要素が一番目立つかをもとに掘り下げて考えていき、「ターゲットの課題は何か」「何を伝えたいのか」を分析しましょう。

使用している画像

バナー内で使用する画像によって、ユーザーの印象も変わります。

イラストを使用したバナー
写真を使用したバナー

こちらの例で見ると、イラストを使用したバナーはキャッチーで親しみやすい印象、写真を使用したバナーは転職後に充実感を持って働いている印象があります。

画像は印象を左右する重要な役割を持っており、デザイナーはターゲットに与えたい印象と効果を考えて画像を選んでいます。

また画像により、ターゲットを明確にすることもできます。

20代女性のイメージ
50代女性のイメージ

 

例のバナーを比較していただくと、商品のメインターゲットが変わった印象があります。

もし20代の女性に50代女性の写ったバナーが表示されたら、「自分は商品を買う対象ではないかも」と思うのではないでしょうか。

このように使用している画像によって与えたい印象やターゲットが変わってきます。バナーを見る時はなぜこの画像が使われているかを考えてみることで、自分が画像を選定する際も意識できるようになるでしょう。

バナー制作後、上司やクライアントに「メインターゲットである~~な人に〇〇な印象を与えたかったため、この画像を使用しました」と言えるようになれば、納得感がある提案になるはずです。

配色

画像と同様に、色も印象を変えたり視認性を上げる効果があります。

黄緑は落ち着いた印象
赤は緊急度が高い印象

こちらのバナーを見ていただくと、同じ言葉でも印象が変わるのではないでしょうか。

黄緑のバナーに比べて、赤を使ったバナーは緊急度が高い印象があります。赤は視認性が高いので目立たせたい場面でよく使われますが、場合によっては緊急性を感じてしまい「人手不足?」「労働環境が辛い?」とマイナスなイメージに繋がる恐れもあります。

しかしながら、広告を配信したもののインパクトが低く広告をみてもらえていないという課題がある場合などには「ユーザーの目に留まらせたい」という目的を優先して、視認性が高い赤を使う選択は間違いではないかもしれません。どんな印象を与えるかを把握した上で、目的に応じて選択することが重要です。

色でブランドを連想させたり掲載している媒体の雰囲気に合わせたり、バナーの配色には意図があります。その前提を踏まえてインプットすることで、自分がデザインの提案をする際に「どうしてこの色なの?」と聞かれても迷わず回答ができる様になってくると思います。

配色の基本知識に関しては、下記の記事をご参照ください。

フォント

フォントも印象を変える役割があります。

丸ゴシックを使用したバナー
明朝体を使用したバナー

丸ゴシックを使用したバナーと明朝体を使用したバナーを用意しました。丸ゴシックはカジュアルで親しみやすい印象、明朝体は上品な印象を持つフォントです。

今まで要素の優先順位、使用している画像、配色を見てきましたが、これに加えて使用されているフォントの印象がバナー全体で見た時にマッチしているかを見てみましょう。

ひとつひとつの要素を見ることでバナーが「誰に」「何を」「どんな印象で」伝えたいか見えてきたと思います。

与えたい印象から適切なフォントを選ぶことでユーザーのポジティブな反応に繋げることができますが、逆にフォント選びを間違えると違和感が出てしまい、「このブランド怪しい」と思われてしまう可能性もあります。

フォントの基本知識、選び方、与える印象に関してはこちらで詳しく紹介しています。

バナーの目的

バナーを配信する際に広告主、広告代理店は目的を持って配信をします。そしてその目的を達成してこそ良いデザインと言えます。

目的は、購入を増やす、セミナーに参加してもらう、サービスを知ってもらうなどさまざまです。

目的が一番分かりやすい部分はCTA(Call To Action:行動喚起)ボタンです。

購入を増やしたい場合は「購入はこちら」、登録を増やしたい場合は「無料で会員登録する」など、CTAを見ることでユーザーに起こして欲しいアクションが分かります。

こちらのバナーの場合は、CTAが「一緒に働きたい!応募する」となっています。

インプットの際に目的が何かを考察することで、自身がデザインをする際にも目的に沿ったデザインを提案、制作ができるようになるでしょう。

デザイン発注側としては、ただ要素を並べるだけではなく、目標を達成するために自発的に考えて行動してくれるデザイナーに仕事を依頼したいと思うはずです。

広告媒体との相性

サイトやSNSを見ているとバナーが表示されますが、なぜその広告媒体でそのバナーを配信しているのか、分析してみましょう。

媒体のユーザー層、利用目的、時間帯、興味関心、利用時の心情など分析を行うことで、ユーザー心理に寄り添ったバナー提案に繋がります。

ただ自分の感覚だけでは信憑性に欠けるため、ファクトも踏まえられるとより説得力が増します。

私の場合、最近Twitterを見るとアニメイラストを使用した広告がよく表示されます。「Twitterは漫画やアニメを趣味にする方が多く、イラストを入り口にサービスを知ってもらうためかな」と思ったので、その考察が本当に正しいのか確認してみました。

実際に「Twitter ユーザー層」で調べた結果、公式が発信している情報があり、「漫画やアニメを趣味としている人の66%がTwitterを月1回以上利用している」と記載がありました。

参考:Twitterカンバセーションレポート:漫画ファンを逃さない!

デザインを提案する時は、このように公式が出している数値や他社事例などを一緒に伝えることで説得力が増します。インプットする際も、自分の中で仮説を立てるだけではなく、実際に調べてみることをオススメします。

Web広告に携わっている場合、SNS、ディスプレイのバナーを定期的にチェックしておくことで提案の幅が広がるため、良いと思うバナーを見つけたら分析することを習慣化しましょう。

プライベートでSNSを見ながら毎回分析するのが大変だと感じる場合は、まずはスクリーンショットを撮ってあとでまとめて分析する時間を設けても大丈夫です。

媒体の広告クリエイティブが見られるツール

アンテナを張っていても自分の趣味と担当しているサービスがマッチしているとは限らず、参考になるバナーが表示されないこともあります。

そんな時にこれから紹介する「各媒体の広告クリエイティブが見られるツール」で他社、競合の広告クリエイティブを見てみると良いでしょう。

自社で制作したデザインを分析することも重要ですが、他社のデザインも分析することで思考を広げるきっかけにもなるため、ぜひ利用してみてください。

Meta広告ライブラリ

広告の透明性を高めるため、Metaに入稿されているアクティブの広告がすべて確認可能です。

画像内①の「広告カテゴリ」をクリック後、②「すべての広告」を選択し、③の検索ボックスに広告主またはキーワードを入れて検索すると、条件に一致した広告を見ることができます。政治に関する広告を確認したい場合は「社会問題、選挙または政治関連」を選択してください。

検索後、「フィルター」をクリックすると、言語、メディアタイプ、広告主などを絞り込むことも可能です。

TikTok Creative Center

TikTok Creative Centerは成果がいいTikTok広告、人気のハッシュタグや楽曲を見ることができるページです。

今回は「トップ広告ダッシュボード」を見ていきます。

検索窓にブランド名か商品に関連するキーワードを入力して検索すると、関連した動画が表示されます。「トップ広告ダッシュボード」は全ての広告が確認できるわけではなく、広告主の承認を得た広告のみ掲載しています。

業種を絞ったり、リーチやクリックスルー率が高い順にソートも可能です。

検索結果に並んでいるクリエイティブをクリックすると、再生時間ごとのCTR、CVR、クリック数、コンバージョン数を見ることができるため、動画内でどの部分がユーザーの心理に影響したのかを確認することができます。

Google「広告の透明性について」

「広告の透明性について」を使用すると、Google で表示される広告について詳しく調べることができます。一般ユーザーが使用することを目的にしているのですが、広告を出す側にとっても便利なツールです。

「広告の透明性について」では、気になる広告主の名前やキーワードを入力するだけで、その広告主についての情報を見ることができます。

具体的には、以下のような情報が確認できます。

  • 広告主が過去に掲載した広告 
  • 特定の地域で表示された広告
  • 広告が最後に掲載された日や広告フォーマット

これらの情報は、「広告の透明性について」で直接確認できるほか、広告の横にある3つの点のメニューから「マイ アド センター」を使ってアクセスすることもできます。

まとめ

今回はデザインセンスを磨くという目的で、バナーを見る際に意識すること、広告クリエイティブを見られるツールを紹介しました。

大変な工程ですが、1日1本と決めたり、スキマ時間を活用してインプットする習慣をつけるのがオススメです。

バナーを見る際に自分の中で言語化する癖をつけることで、活用できる機会が増えていき、デザイン提案の際に説得力が増します。

インプットを増やして、「デザインが浮かばない」「あの人と比較して自分のバナーが微妙に見える」という状態を減らしていきましょう。

関連記事

【月のまとめ】2023年5月公開の記事ランキング
【月のまとめ】2023年5月公開の記事ランキング
続きを見る
いまだはびこる、悪しきリスティング広告の都市伝説7選
いまだはびこる、悪しきリスティング広告の都市伝説7選
続きを見る
検索離れと検索回帰、中国で感じた未来と2018年の日本というかアナグラム
検索離れと検索回帰、中国で感じた未来と2018年の日本というかアナグラム
続きを見る