目立つバナーを作成するには？デザインのコツと気をつけたいポイントを解説

目立つバナーデザインを考える前に必要な準備

バナーのデザインを考える前に決めておきたい、以下3つのポイントについて解説します。

• 目的を明確にする
• 情報に優先順位をつける
• バナーサイズを決めておく

目的を明確にする

バナー作成において大切なのは、おしゃれさよりも情報を整理して目的を明確にすることです。

バナーを目にしたユーザーが、瞬間的にどのような商品・サービスなのか、メリットは何かなど、イメージしやすいデザインを目指します。

具体的には、以下の点について明確にしておくとよいでしょう。

情報に優先順位をつける

情報を整理して目的を明確にしたら、どの情報がターゲットに刺さりやすいのか検討して優先順位をつけることが大切です。

要素のサイズや配置を決めるために、伝えたい順番を決めます。情報のすべてに細かい順位をつける必要はなく、3段階ほどに分類しておくとよいでしょう。

テキストの量が同じであっても、コントラストをつけることで、見やすくわかりやすく調整できます。

バナーサイズを決めておく

広告の種類や掲載場所によってバナーのサイズが異なるため、媒体に合わせた適切なサイズで作成する必要があります。

デバイスに合わせて表示形式やサイズが変更されるレスポンシブ広告、画像やキャッチコピーなどで構成されるイメージ広告のどちらにも対応できるサイズを選ぶことが大切です。

Googleが推奨しているバナーサイズ例は、以下のとおりです。

参照：Google Adsense「広告サイズに関するガイド」

目立つバナーを作るコツ

ターゲットに刺さる目立つバナーを作るためのコツは、以下の9つです。

• 興味を引くキャッチコピーを考える
• 情報を必要最小限に絞る
• 人物写真が目立つように大きく配置する
• 複数画像を使用して大小のコントラストをつける
• 文字にメリハリをつけてレイアウトする
• 数字を大きく配置する
• 与えたいイメージに合う色を選ぶ
• イメージに合うフォントを選ぶ
• あしらいを施す

なお、バナーの作り方についてはこちらの記事で詳しく解説しています。

興味を引くキャッチコピーを考える

ターゲットにインパクトや共感を与えられるような、簡潔で伝わりやすい言葉をキャッチコピーとしてデザインに取り入れると効果的です。

キャッチコピーを考える際は、以下の点などを意識するとよいでしょう。

• 端的にまとめる
• ベネフィットを入れる

バナーのスペースは限られているため、ひと目で内容を理解できることが大切です。商品やサービスで得られる効果を伝えることで、潜在的な願望の実現や悩み解決などの恩恵が受けられると、ターゲットにイメージさせられます。

情報を必要最小限に絞る

ひと目で情報が伝わりやすいように、できるだけ情報量を絞ったシンプルなデザインを心がけましょう。

目立たせようと情報を詰め込みすぎると、逆に内容が伝わりにくくスルーされやすいため注意が必要です。

文字や装飾が本当に必要なのかを見極め、伝えたいポイントを整理して、ユーザーが魅力的に感じるような刺さるバナーを目指します。

人物写真が目立つように大きく配置する

人物写真を使用する際は、大きめに配置するほうが、より目を引きやすくなります。

基本的に小さいスペースに配置するため、人物の全身を入れようとすると写真素材が小さく、目立ちにくくなりがちです。また文字と人物写真をきっちり分けてレイアウトすることも、インパクトが薄いバナーになりやすいため避けたほうがよいでしょう。

切り抜いた写真と、目を引く背景を組み合わせるのも効果的です。またデザインにもよりますが、人物がこちらを見ているカメラ目線の写真のほうが、目線をそらした人物写真より目立ちやすい傾向にあります。

複数画像を使用して大小のコントラストをつける

複数の画像を組み合わせて使用する際は、大小のコントラストをつけて伝えたい部分を目立たせます。

商品や人物の画像を複数使用すると、より派手さが加わりますが、すべて同じサイズだと平面的で目立ちにくい傾向にあります。優先順位を考慮して大きさに変化をつけると、動きのあるバナーを作成できるでしょう。

文字にメリハリをつけてレイアウトする

ターゲットに伝えたい情報を目立たせるために、文字にメリハリをつけてレイアウトすることも効果的な方法です。

あらかじめ優先順位をつけて重要なポイントや伝えたいことがパッと目に入るよう、他の情報より文字を大きくレイアウトします。

たとえば先頭の言葉やキーワードのみを大きくしたり、色を変えたりするといった工夫をすれば、目を引きやすいバナーを作成できます。

強調したい言葉に点や線を用いたり、一文字ずつ丸や四角で囲むなどの方法も視認性を上げられるテクニックです。

数字を大きく配置する

数字だけを大きく配置することで、金額などの情報が見やすくなります。セールやキャンペーンなど、価格や期間を大きく伝えたい場合は、他の文字と差をつけることが必要です。

たとえば「50％OFF」などの割引率や、ユーザーにとってメリットとなる情報を大きく目立たせるとユーザーの興味を引きやすいでしょう。

与えたいイメージに合う色を選ぶ

配色によって印象は大幅に変わるため、与えたい印象によって色を選ぶことも重要です。注意喚起や雰囲気作りだけでなく、感情にも影響を与えるためです。たとえば、赤はエネルギー・興奮、黄は明るさ・注意などのイメージとされています。

基本的にはブランドやターゲット層、遷移先ページのイメージと合うような配色を心がける必要がありますが、セールなど、より目立たせたい場合は赤や黄色などを使うのも効果的です。

配色比率の法則では、ベースカラー70％・メインカラー25％・アクセントカラー5％が美しい配色の黄金比とされています。

目立たせるために派手な色のみで構成するのではなく、少し明るさを抑えた色もバランスよく取り入れると、より鮮やかな色を際立たせられます。

参照：OpenSquareJP「Color Combination」

イメージに合うフォントを選ぶ

全体的なデザインのイメージに合うフォントを選ぶことも、目を引くバナーを作るポイントです。フォントを変えると、バナー全体の印象が大きく変わります。

異なるフォントを組み合わせて大きさにも差をつけることで、賑やかなデザインになります。日本語であれば、ゴシック体・明朝体を使うのが一般的です。

可読性や視認性に優れたゴシック体を使うと、シンプルに情報を伝えやすい傾向にあります。上品さを表現したいときは明朝体が適していますが、多用すると読みにくくなるためバランスよく取り入れましょう。

デザイン書体はインパクトがあり目立ちやすいものの、初心者が使うにはやや難しく、可読性が低くなるケースもあります。多用しすぎず、アクセントとして配置してみるのも手です。

あしらいを施す

目立つバナーを作るために、あしらいを取り入れるとプロ仕様のデザインを演出しやすくなります。

あしらいとは、文字の加工（シャドウや縁文字など）・イラスト・背景のテクスチャなどの装飾やディテールのことです。

あしらいを施すことで、普通のデザインから洗練されたデザインになり、よりユーザーの目にとまりやすいバナーを作成できるでしょう。

たとえば、光の演出を加えて目立たせたい部分を光らせると効果的です。高級感の出るゴールドのフレームやラインも、デザインに取り入れやすい要素です。ただし多用しすぎると見づらくなるため、ポイントを絞って活用しましょう。

バナーデザイン初心者が気をつけたい悪い例

初心者がバナーを作成するときに、気をつけたいポイントについて、以下の悪い例を参考にしながら解説します。

• 文字の視認性が低い
• 原色を使いすぎている
• 情報を詰め込みすぎている
• 画質が悪い写真を使用している

文字の視認性が低い

初心者が陥りがちな失敗例として、画像と文字を組み合わせた際のコントラストが弱く、テキストが背景画像になじんで見づらくなる点が挙げられます。

目を引くバナーを作成するためには、視認性が確保されていることが大切です。どれだけ丁寧に作成しても、ユーザーにとってわかりにくいバナーはクリックしてもらえないでしょう。

背景画像と文字のコントラストを強くしたり、文字の下に白地を加えたりすることでデザインの一部が際立ち、読みやすく目立つバナーに仕上がります。

原色を使いすぎている

原色同士の組み合わせは、目がチカチカして不快感を与えるハレーションを起こしやすいため配慮が必要です。見た目に違和感が生じると、ユーザーは離れてしまいます。

目立たせるために原色を多用するとチープなイメージを与えやすいため、避けるほうがベターです。ただし注意喚起やネオン風など、わざとハレーションを起こすデザインを取り入れるケースもあります。

基本的には読みやすさを重視して、明るさや鮮やかさを調整します。また、色数が多すぎても強調したい点が伝わりづらいため、多くても4色以下に抑えるとよいでしょう。

情報を詰め込みすぎている

バナーのような小さな画像の中に情報を詰め込みすぎると、目線が散りやすくなります。

情報が整理できていなければ、ターゲットに訴求したい内容が伝わりにくいバナーになってしまいます。詳細な情報は遷移先のページで紹介し、必要最低限の情報に絞りましょう。

デザイン初心者は余白があると埋めたくなる傾向にありますが、適切に余白を作ることで、目立たせたい部分に注目してもらいやすくなります。

バナー作成中は拡大して作業を進める場合が多く、情報量の多さや文字の小ささに気づかない場合もあります。完成後に視認性の低さが発覚する状況を避けるために、実際に表示されるサイズでチェックしておくことも大切です。

画質が悪い写真を使用している

視認性に配慮してバナーを作成しても、写真の画質が悪いと広告自体の魅力を下げるリスクがあります。

解像度の低い画像を使用することで、ブランドや商品にもマイナスイメージがつきかねません。画質はもちろん、ライセンスがクリアになっているかどうかについても、必ず確認しておきましょう。

なお、写真の著作権についてはこちらの記事で詳しく解説しています。

目立つバナーにするにはクリックしたくなる写真を使うのがベター

目立つバナーにするためには、ユーザーがクリックしたくなるような写真を選ぶことが大切です。画像を使用すると、文字や装飾のみのバナーよりも情報がダイレクトに伝わりやすい傾向にあります。

ブランドや商品のイメージに合う適切な写真を選ぶことでユーザーの印象に残りやすく、インパクトや共感を与えやすくなるでしょう。

思わずクリックしたくなるような目を引く写真を使いたいなら、有名タレントを起用するのも効果的な手段です。通常ならタレント起用はコストがかかりがちなものの、定額料金でタレントを起用できるタレントサブスクを利用すればコストを抑えられます。

有名タレントの宣材素材提供サービスSkettt（スケット）は、最短1か月から利用できるのでお試しのハードルが低く、月20万から利用可能です。

クリック率アップを狙うためのキャッチコピー考案から企画・制作まで、一気通貫したサポートを受けられます。

なお、タレントサブスクとSketttについてはこちらの記事で詳しく解説しています。

目立つバナーを作成して顧客獲得を目指そう

目立つバナーを作成する際には、広告の目的やターゲットなどを明確にしたうえでデザインに取り組むことが必要となります。

目立たせるために派手な配色を選ぶのではなく、瞬間的に内容を理解しやすいシンプルなデザインかつターゲットの興味を引く画像を選ぶことが大切です。

ユーザーの興味を引くメインビジュアルを選びたいなら、タレント起用も有効です。

有名タレントの宣材素材提供サービスSketttは、幅広いカテゴリの有名タレント250名以上の中から、企業・事業イメージに合うタレントを選択可能です。タレント選定からクリエイティブ制作、効果測定まで、事業ブランディングを一気通貫して受けられます。

主要タレントサブスクをそれぞれ比較したい方はこちらの資料をダウンロードしてください。

資料のダウンロード