「イマイチなバナー」はもう卒業！？ 現役ディレクターによる、バナーデザイン添削事例8選！

本記事は、メディックスのクリエイティブ制作部隊であるB-SOKU（ビーソク）のメンバーが執筆しています。

日頃、バナー広告に向き合っているWeb広告担当者／ディレクター／デザイナーの皆さん、こんなお悩みはありませんか？

・何だかデザインがイマイチ
・何がイマイチなのか上手く言語化が出来ない
・デザイナーや代理店に、的確なデザインのフィードバックができない

その気持ち、とてもわかります…！

「上手くは言えないけれど、なんだか微妙なデザインになる…」
バナー広告を制作していると、1度はぶつかる壁ではないでしょうか？

そこで今回は、これまで数々のバナーを見てきた現役ディレクターによる添削事例とともに、どのようなバナーがイマイチなのか、気をつけるべきポイントを紹介します！

デザインに関わる方々の今後の参考になれば幸いです。

「イマイチなバナー」になってしまう原因

まず、「イマイチなバナー」とされるバナーによくある要素を整理しました。

色／フォント／効果を多用している

特に、まだデザイン駆け出しの方は、「無意味な要素を増やしてしまう」傾向があります。

基本的に色は３色以内（強調色は１色）、フォントは1~2種類、意味のない効果は使わないといったルールを意識することが大切です。

コピーが多い

伝えたい要素が多いが故に、ついコピーが長くなっていませんか？

コピーを詰め込みすぎると、肝心の「1番伝えたいこと」がすぐに伝わらない上、情報量が多く何を伝えたいバナーなのかよくわからなくなってしまいます。

メインコピーは10文字以内、サブコピーは15文字以内を意識してみましょう。

デザインのトンマナがバラバラ

例えば、「ラフなコピー × キレイな写真素材 × かっちりとした色 × 可愛いフォント」のように方向性がバラバラな組み合わせだと、ちぐはぐな印象のバナーになってしまいます。

まずはスタイリッシュな印象にするか、可愛い印象にするかなど、全体のトンマナの方向性を決めてから、コピー／素材／色／フォントを選定しましょう。

デザイン／コピーがアップデートできていない

必ずしも「今どき」である必要はありませんが、古めかしいコピー表現や、垢抜けない写真素材を使用していると「ちょっとダサいな…」という印象を与えてしまいます。

SNSや他社バナー、流行語などを日々意識して見るようにすると、トレンド感のあるクリエイティブのヒントにつながるかもしれません。

視認性が悪い

デザイン性を重視するあまり、コピーの視認性が悪くなっていませんか？

その結果、肝心の「何を伝えたいバナーなのか」が分かりづらく、イマイチなバナーにつながりやすくなってしまいます。

添削事例8選

次に、実際にイマイチなバナーをプロのディレクターが添削するとどうなるのか、次の3つの観点に分けて紹介します。

・情報の整理・視認性
・ターゲット・共感性
・トンマナ・ブランディング

情報の整理・視認性

伝えたいことが多すぎて、「情報の優先順位」や「レイアウト」に問題があるケースです。

要素を詰め込みすぎたり、強弱が弱かったりすると、結局何も伝わらないデザインになってしまいます。

何を伝えるか、という情報の「引き算」と、視線を誘導するための「情報の優先順位付け（メリハリ）」をメインに添削した事例を紹介します。

事例1

▲添削前のバナー

⭕️良い点
・コピーがシンプルで分かりやすい
・強調したい【１分】という訴求が一番目を引くようなデザイン

🔺イマイチな点
・グラデーション、アンダーライン、文字の縁取り、吹き出しなど多くの要素が詰まっており、全体的に窮屈に見える
・同系色でまとめているものの、色数が多い
・商品画像が小さく、あまり味噌汁の魅力が伝わらない

上記を踏まえて、添削した後のバナーがこちら。

▲添削後のバナー

📍添削POINT
・色数は３色以内にまとめてスッキリとさせる
・光彩はやりすぎると垢抜けない印象になるため、最低限に抑える
・味噌汁をアップ＆湯気を足し、シズル感を演出
・余計な装飾や効果は取り、「たった１分」という1番のメリット部分を強調

結果、強調したい部分はしっかりと強調しつつ、全体的にまとまり感のあるデザインになりました。

▲添削後before/after

事例2

▲添削前のバナー

⭕️良い点
・フォントのジャンプ率に強弱をつけることで、一番訴求したい「届いたその日に楽しめる」を強調できている
・色も同系色でまとめられている

🔺イマイチな点
・全体的にコピーが多く、視線が散りやい
・「工事要らずだから」のフォントデザインを変えているが、目立たせているわけでもなく、意図が不明

上記を踏まえて、添削した後のバナーがこちら。

▲添削後のバナー

📍添削POINT
・サブコピーは同じデザインでまとめて、スッキリとさせる
・色はメインコピーに使用しているオレンジと同色を使用し、統一感を出す
・文字量を減らすために、「詳しくはこちら」を削除し、「初心者～」のサブコピーも最低限の文字数に調整。さらに初心者マークを置くことで、初心者でも簡単に設置できることを訴求

結果、構成は変えずとも細かな調整のみで、一番伝えたいメインコピーも目に入りやすくなりました。

▲添削後before/after

事例3

▲添削前のバナー

⭕️良い点
・メインコピーとサブコピーに強弱がついていて、スッキリしている
・「安心感」が伝わる色合いとフォント
・画像・色・コピーの３つの親和性が高く、全体的にまとまり感がある

🔺イマイチな点
・画像内の人物の大きさが異なるため、チグハグな印象
・「資格取得サポート」というコピーが背景に溶け込んでしまっていて、やや読みづらい
・メインコピーが大きすぎるため、全体的に圧迫感がある

上記を踏まえて、添削した後のバナーがこちら。

▲添削後のバナー事例

📍添削POINT
・画像内の人物の大きさを揃えることで、見栄えを改善
・メインコピーに強弱は付けつつも、圧迫感のない程度の大きさに調整
・安心感のあるトンマナは残しつつ、サブコピーの視認性を上げる色合いに

結果、画像の元の雰囲気やメリハリは残しつつも、よりまとまり感のあるデザインになりました。

▲添削後before/after

ターゲット・共感性

デザイン自体は整っていても、写真選びや配色のトーンがターゲット層（ペルソナ）の心情や属性とマッチしていないため、「自分事」化されず、スルーされてしまうケースです。

ターゲット層のインサイト（20-30代女性など）に合わせた写真選定や、共感を生むための「世界観（雰囲気）」作りをメインに添削した事例を紹介します。

事例4

▲添削前のバナー

⭕️良い点
・広告色を避けたシンプルなデザインで、SNSに馴染みやすい
・ユーザが「自分事化」しやすいコピー

🔺イマイチな点
・ターゲットである20～30代の女性にとって、「イケ女」という表現はあまり馴染みがなく、やや古くさい印象
・人物画像が「THE・よくある構図」。デザインがシンプルな分、画像が普通だとチープにみえる

上記を踏まえて、添削した後のバナーがこちら。

▲添削後バナー

📍添削POINT
・「イケ女」という表現は削除
・より日常感のあるリアルな表情／構図の人物画像に変更
・メインコピーのフォントをA1ゴシックに変更＆文字間を広げて抜け感を

シンプルな構成はそのままに、画像の雰囲気を変えるだけでも、ぐっとオシャレな印象のバナーに近づいたかと思います。

▲添削後before/after

事例5

▲添削前バナー

⭕️良い点
・インパクトのあるメインコピーで目を引きやすい
・ハッシュタグをつけたサブコピーの羅列が斬新

🔺イマイチな点
・コピーのインパクトはあるものの、デザインの構成がシンプルすぎるため、ややチープな印象
・フォントやフリー素材の女性の雰囲気が、ぱっと見で男性向けの婚活バナーのように見えるため、本来のターゲットである30代女性が自分事化しづらい

上記を踏まえて、添削した後のバナーがこちら。

▲添削後バナー

📍添削POINT
・ターゲット像(婚活中の30代女性)と親和性の高そうな「女性雑誌感」をイメージした、スタイリッシュな構成に変更
・「幸せなデートをしている未来の自分」を想起させるような写真を選定

このバナーは思い切って構成から変えてみました。
コピーは同じでも、文字の配置や画像を変更することで雰囲気がガラッと変わり、一気に垢抜けたと思います。

▲添削後before/after

事例6

▲添削前のバナー

⭕️良い点
・持ち運びやすいサイズのスピーカーを「いつでも、どこでもライブ会場になる」というコピーでうまく表現している
・使用シーンが伝わりやすい画像選定
・目に留まりやすいメインコピーの大きさ

🔺イマイチな点
・使用用途は伝わりやすい画像だが、日本人を使った素材ではないため、ユーザが自分事化しづらい
・サブコピーが小さすぎるため、商品の良さである「軽量さ」が伝わらない
・商品の実物大イメージが分かりづらい

上記を踏まえて、添削した後のバナーがこちら。

▲添削後のバナー事例

📍添削POINT
・ユーザが自分事化しやすい、楽しげな日本人の若者の画像に変更
・商品の特長である「軽量さ」「コンパクトさ」が伝わるように、手のひらを追加
・サブコピーの位置をフッターに変更し、訴求ポイントも抜き出して「商品の強み」をより強調

結果、商品の強みをしっかり伝えつつも、使用イメージがより想起しやすいデザインになったかと思います。

▲添削後before/after

トンマナ・ブランディング

高単価な商品やハイクラスなサービスであるにも関わらず、配色やフォント選びが原因で「安っぽく（チープに）」見えてしまい、ブランド価値を損なっているケースです。

商品単価やサービスの質に見合った高級感や信頼感を演出するための、配色やフォント選びを中心に添削した事例を紹介します。

事例7

▲添削前のバナー

⭕️良い点
・コピーの視認性が良く、読みやすい
・商材の「自然」というコンセプトが、フォントや色とマッチしている

🔺イマイチな点
・グラデーションの境界線がやや不自然
・べた塗り×シンプルな文字組がチープに見える
・ライトな水色の背景が、商品の高級感を消してしまっている

上記を踏まえて、添削した後のバナーがこちら。

▲添削後のバナー事例①

📍添削POINT
・背景はべた塗りをせず、【乗算*】を使い、程良いヌケ感を演出
・文字に薄く【光彩】を追加し、視認性を担保
・濃い背景色を使うことで、高級感を演出
*乗算…色の重なり感を表現したいときや、影の部分をより強調するときなどに活用できる、Photoshopのレイヤー機能。下レイヤーのテクスチャが透けるような仕上がりになるので、自然な合成が可能。

▼より視認性を担保したい場合はこんなデザインもアリ◎

▲添削後のバナー事例②

📍添削POINT
・背景はパッキリと２分割に分ける(グラデーションはなるべく使わない)
・背景がシンプルな分、サブコピーを帯にしたり、ロゴを置いたりなど、デザインにちょっとした「遊び」を入れることで、チープさを払拭

結果、シンプルなデザインながらも、商品の高級感や「自然」というコンセプトイメージは保ったまま、垢抜けたデザインになったかと思います。

▲添削後before/after

事例8

▲添削前のバナー

⭕️良い点
・「年収700万円」というコピーに金のグラデーションがついていることで、一番のフックである「年収の高さ」が伝わりやすい
・人物とコピーの比率がよく、コピーが読みやすい
・良くも悪くも「無難」な、誠実さが伝わるデザイン

🔺イマイチな点
・背景のシンプルさとゴシック体が相まって、質素なデザインに見える
・メインコピーとサブコピーの強弱の差が少ないため、文字文字しい印象
・全体的に印象に残りづらく、「ハイクラス転職」さが足りないデザイン

上記を踏まえて、添削した後のバナーがこちら。

▲添削後のバナー事例

📍添削POINT
・一番訴求したい年収部分は二回りほど大きくし、メリハリをつけた
・サブコピーはフッターに移動させ、メインコピーに目が行くよう調整
・「ハイクラス転職」から想起される「高みを目指す」「挑戦」というテーマに変更し、画像やトンマナを世界観に合わせて調整

結果、「一般的な転職」とは異なる、いわゆる「ハイクラス転職」感が伝わり、かつ一番の訴求ポイントである「年収」も目に留まりやすいデザインになったかと思います。

▲添削後before/after

「イマイチなバナー」を卒業するために

「イマイチなバナー」になってしまう理由は、主に「イメージが固まらないまま、なんとなくデザインに着手してしまう」ことにあります。

いきなりデザインに着手するのではなく、次の手順を踏んで論理的にデザインを組み立てましょう。

まとめ

いかがでしたでしょうか。

今回、様々な添削事例を紹介しましたが、「脱・イマイチなバナー」にあたり1番重要なのは、「意味のないデザインはしない」ことです。

その光彩やシャドウは本当に必要なのか？
その画像で誰に何を伝えたいのか？
その色やフォントを使うことで、どのような印象を与えたいのか？

このあたりを一度振り返りながら改めてバナーを見てみると、新たに修正するべき点が見つかるかもしれません。

本記事が、少しでも「イマイチなバナー」を「イケてるバナー」にするヒントになれば幸いです。

バナーの効果改善から制作まで、まるっと任せたい！ そんなあなたへ

バナーの添削ポイントは分かったけれど、
「どうせなら具体的なバナーの改善提案から、新たなバナーの新規提案までお願いしたい」
「なんならバナー制作も併せてやってほしい」
とお考えのインハウスご担当者様に朗報です！

メディックスのアドクリエイティブ制作専門部隊「B-SOKU（ビーソク）」なら、豊富な広告運用の経験・媒体トレンドの知見を基にした、効果の出るクリエイティブ（バナー静止画、動画、LP）のご提案から制作までを一気通貫でお任せいただけます！

「制作リソースが足りなくて悩んでいる」
「インハウスでバナーを作っているけれど、なかなか効果がでない」
「SNSでは今どういったバナーがトレンドなのかわからない」

そういったお悩みをお持ちの方は、ぜひお気軽に私たちにご相談ください🌸

B-SOKUのメンバー

▼バナーの制作／改善提案の無料相談は次のフォームから
https://www.medix-inc.co.jp/contact/b-soku/