バナーデザインの失敗例16選|反応が落ちる原因と直し方
公開日 更新日
バナーデザインでよくある失敗を16個、「見えない・読めない」「伝わらない」「ずれている」「作り方」の4つに分けて、なぜ反応が落ちるのかと直し方をセットで解説します。公開前に使えるチェックリスト付きです。
目次
見えない・読めない失敗
まず多いのが、そもそも内容が目に入らない失敗です。どんなに良い文言でも、読めなければ伝わりません。
1. 文字と背景の色の差が小さい
写真の上に文字を直接のせたり、似た明るさの色を重ねたりすると、文字が背景に溶けて読めません。
直し方:文字の後ろに帯や影を入れる、写真の暗い部分や無地の部分に文字を置くなど、文字と背景の明るさにはっきり差をつけます。
直し方:文字の後ろに帯や影を入れる、写真の暗い部分や無地の部分に文字を置くなど、文字と背景の明るさにはっきり差をつけます。
2. 文字が小さすぎる
制作画面で拡大して見ていると読めても、スマホの実際の大きさでは小さすぎることがよくあります。
直し方:文字の量を減らして一つひとつを大きくし、書き出した後に必ずスマホの実際の画面で読めるか確かめます。
直し方:文字の量を減らして一つひとつを大きくし、書き出した後に必ずスマホの実際の画面で読めるか確かめます。
3. 要素を詰め込みすぎている
文字・写真・アイコン・飾りを全部入れると、どこを見ればいいか分からず、どれも目に入りません。
直し方:伝えたいことを一つに決め、関係のない要素を削って余白をとります。直し方の手順はバナーの余白の取り方で解説しています。
直し方:伝えたいことを一つに決め、関係のない要素を削って余白をとります。直し方の手順はバナーの余白の取り方で解説しています。
4. 写真や画像が粗い
小さな画像を引き伸ばすと、ぼやけたりギザギザになったりして、商品やお店まで安っぽく見えます。
直し方:バナーの大きさ以上の解像度の写真を使います。ロゴは拡大しても粗くならない形式のデータを用意してもらいます。
直し方:バナーの大きさ以上の解像度の写真を使います。ロゴは拡大しても粗くならない形式のデータを用意してもらいます。
伝わらない失敗
目には入っても、何の広告か、何をすればいいかが分からない失敗です。
5. 伝えたいことが多すぎる
「安い」「早い」「品質が良い」「今だけ」と全部言おうとすると、結局どれも印象に残りません。
直し方:バナーで伝えるのは一番強いひと言だけにし、ほかの魅力は押した先のページで伝えます。
直し方:バナーで伝えるのは一番強いひと言だけにし、ほかの魅力は押した先のページで伝えます。
6. 次に何をすればいいか分からない
ボタンが無い、または周りに埋もれていると、見た人は押していいのか、押すと何が起きるのか分かりません。
直し方:「詳しく見る」「無料で試す」など、押した後が分かる言葉のボタンを、目の流れの最後に一つだけ置きます。
直し方:「詳しく見る」「無料で試す」など、押した後が分かる言葉のボタンを、目の流れの最後に一つだけ置きます。
7. 情報の順番がばらばら
価格が一番大きく、商品名が小さいなど、見る順番が整理されていないと、内容が頭に入りません。
直し方:「何の商品か→何がうれしいか→どうすればいいか」の順に、大きさと位置で優先順位をつけます。目の動かし方はバナーの視線誘導とは?で解説しています。
直し方:「何の商品か→何がうれしいか→どうすればいいか」の順に、大きさと位置で優先順位をつけます。目の動かし方はバナーの視線誘導とは?で解説しています。
8. 写真と文字がぶつかっている
商品写真の上に文字が重なっていたり、人物の顔に文字がかかっていたりすると、どちらも見にくくなります。
直し方:写真と文字の場所を分けます。横長なら左右に、縦長なら上下に分けると整理しやすくなります。
直し方:写真と文字の場所を分けます。横長なら左右に、縦長なら上下に分けると整理しやすくなります。
ずれている失敗
デザインとしては整っていても、相手や目的とずれていて反応が出ない失敗です。
9. ブランドの色や書体がばらばら
バナーごとに色や書体が違うと、同じ会社の広告だと気づいてもらえず、何度見ても印象が積み重なりません。
直し方:ブランドの色・書体・ロゴの置き方を決めて、どのバナーでもそろえます。
直し方:ブランドの色・書体・ロゴの置き方を決めて、どのバナーでもそろえます。
10. 押した先のページと見た目が違う
バナーの言っていることや雰囲気と、押した先のページ(LP)の最初の画面がずれていると、違うページに来たような印象を与え、すぐ閉じられてしまいます。
直し方:バナーの訴求とLPの最初の画面の訴求をそろえ、色や写真のトーンも合わせます。バナーとLPの関係はバナーとLPの違いとは?で解説しています。
直し方:バナーの訴求とLPの最初の画面の訴求をそろえ、色や写真のトーンも合わせます。バナーとLPの関係はバナーとLPの違いとは?で解説しています。
11. ターゲットに合わない見た目
若い人向けの派手なデザインを年配の人向けの商品に使うなど、見てほしい人の好みとずれていると、自分向けだと思ってもらえません。
直し方:誰に見てほしいかを先に決め、その人が普段見ているもの(雑誌・サイト・SNS)に近い雰囲気で作ります。
直し方:誰に見てほしいかを先に決め、その人が普段見ているもの(雑誌・サイト・SNS)に近い雰囲気で作ります。
12. 大げさな表現や表記ミス
事実より大げさな表現や、根拠のない「No.1」などは、見る人の信頼を失うだけでなく、景品表示法に触れるおそれもあります(参考:消費者庁「景品表示法」)。価格や日付の誤記も同じく信頼を落とします。
直し方:表現は根拠を確かめてから使い、公開前に価格・日付・社名などを複数人で確認します。
直し方:表現は根拠を確かめてから使い、公開前に価格・日付・社名などを複数人で確認します。
作り方の失敗
一枚目はうまくいっても、作り方や運用で反応を落としてしまう失敗です。
13. サイズ違いを縮めただけ
正方形のバナーを横長や細長い帯にそのまま縮めると、文字が読めなくなったり、余白がおかしくなったりします。
直し方:サイズごとに要素の並べ方を組み直します。進め方はバナーのリサイズ(サイズ変更)のやり方で解説しています。
直し方:サイズごとに要素の並べ方を組み直します。進め方はバナーのリサイズ(サイズ変更)のやり方で解説しています。
14. スマホで確認していない
パソコンの画面だけで仕上げると、スマホで見たときに文字が読めない、端が切れているといった問題に気づけません。
直し方:書き出したバナーは必ずスマホに送り、実際の大きさで確かめてから公開します。
直し方:書き出したバナーは必ずスマホに送り、実際の大きさで確かめてから公開します。
15. 媒体の決まりを確かめていない
サイズや容量、文字の量などの決まりを守っていないと、入稿できなかったり、審査で止まったりします。
直し方:作り始める前に、出す媒体の公式の入稿規定を確かめます。
直し方:作り始める前に、出す媒体の公式の入稿規定を確かめます。
16. 同じバナーを出し続けている
同じバナーを長く出し続けると、見慣れて反応が落ちていくことがあります。
直し方:反応の数字を見ながら、写真や文言を変えたバナーを用意して入れ替えます。2種類を同時に出して比べるのも有効です。
直し方:反応の数字を見ながら、写真や文言を変えたバナーを用意して入れ替えます。2種類を同時に出して比べるのも有効です。
公開前のチェックリスト
- スマホの実際の大きさで、すべての文字が読めるか
- 文字と背景の色に、はっきり差があるか
- 伝えたいことは一つにしぼれているか
- ボタンがあり、押すと何が起きるか分かるか
- 押した先のページと、言っていること・見た目がそろっているか
- 価格・日付・社名などに誤りがないか
- 表現に根拠があるか
- 媒体の入稿規定(サイズ・容量)を守っているか
失敗しないバナーを頼むなら
まとめ
- 失敗は「見えない・読めない」「伝わらない」「ずれている」「作り方」の4つに分かれる
- まずは文字が読めるか、伝えたいことが一つにしぼれているかを確かめる
- 押した先のページとバナーの言っていること・見た目をそろえる
- 公開前にチェックリストで確かめ、公開後は反応を見て入れ替える
この記事を書いたライター

※アンケートモニター提供元:ゼネラルリサーチ
調査期間:2020年8月7日~12日
調査方法:インターネット調査
調査概要:デザイン制作会社10社を対象にしたサイト比較イメージ調査
調査対象:全国の20代~50代の男女 1052名














へのお問い合わせはこちらから