バナーデザインの作り方|キャッチコピー・配置・CTAの型

バナーデザインの作り方のアイキャッチ画像。目的の明確化・デザインテイスト・NG例・伝わるバナーの型の4つのポイント

副業Webデザイナーのリアルなバナー単価はいくら?では、バナー制作の値付けや案件の取り方を実体験ベースでまとめました。今回は、その中身に絞って解説します。つまり、「どう作れば伝わるバナーになるのか」というデザインの部分です。

これまで100件以上のデザイン案件に携わってきました。その中で、バナーは「なんとなくかっこよく」作るものではなく、目的から逆算して型を選ぶものだと感じています。

目次

まずターゲットと目的を明確にする

バナーを作り始める前に、必ず確認していることがあります。それが「誰に」「何をしてほしいのか」です。同じ「バナー」でも、目的が違えば正解のデザインはまったく変わります。

代表的な目的を挙げると、次のようなものがあります。

  • 採用:応募・エントリーしてほしい
  • 購買:商品やサービスを購入・申し込みしてほしい
  • リーチ数の向上:まずは知ってもらいたい、認知を広げたい

「とりあえずかっこいいバナーを作ってください」という依頼を受けることがあります。そのときほど、この目的をヒアリングで確認するようにしています。もし目的が曖昧なまま進めると、見た目は整っていても成果につながりません。見た人に何もしてもらえないバナーになりがちです。

目的に応じたデザインテイストの考え方

ターゲットと目的が決まったら、それに合わせてフォントや色味を選びます。いくつか具体例を挙げます。

採用バナーの場合

採用バナーで重要なのは、安心感・親しみやすさです。応募する側は「ここで働く自分」をイメージできるかどうかで反応が変わります。

  • 写真:できるだけ実際に働くスタッフの顔や、職場の雰囲気が伝わるカットを使う
  • フォント:角の丸いゴシック体(丸ゴシック)は、硬すぎず親しみやすい印象を与えやすい
  • 色:企業のブランドカラーをベースにしつつ、暖色系や優しいトーンを差し色に使う。すると、堅すぎない印象になる

購買・セール系バナーの場合

購買を促すバナーは、緊急性とお得感をいかに伝えるかが鍵になります。

  • フォント:視認性が高く、インパクトのある太めのゴシック体を使う。価格や割引率などの数字は大きく見せる
  • 色:赤やオレンジなど、注意を引きやすい暖色系を使うと購買行動を後押ししやすい。ただし使いすぎると安っぽく見えるため、差し色として使う範囲を決めておく
  • 情報の優先順位:「何が」「いくらお得か」「いつまでか」を、この順番で目に入るように配置する

リーチ数向上・認知拡大系バナーの場合

こちらは「クリックさせる」よりも「覚えてもらう」ことが優先です。

  • フォント・色:ブランドガイドラインがあればそれに沿う。ない場合も、ロゴや既存の販促物と色味・フォントを揃える。繰り返し見たときに「あの会社だ」と認識されることを意識する
  • 情報量:あれもこれも詰め込まず、伝えたいメッセージを1つに絞る

素人感が出てしまうデザインの例

依頼を受けたバナーを見返すと、「これは直したほうがいい」と感じるパターンがあります。そこにはある程度、共通点があります。

  • 装飾のかけすぎ:ドロップシャドウや縁取りなどを複数重ねて、文字が読みにくくなっている
  • フォントの使いすぎ:1枚のバナーに3種類以上のフォントが混在し、統一感がなくなっている
  • 余白のなさ:情報を詰め込みすぎて隙間がなく、どこを見ればいいか分からなくなっている
  • コントラスト不足:背景と文字の色味が近く、読みづらくなっている
  • 図形を拡大しただけの角丸ボックス:角丸の四角形を縦横比を変えて拡大縮小し、角の丸みが不自然になっている

これらに共通しているのは、「要素を足すこと」に意識が向きすぎている点です。その結果、「情報を整理して伝える」という本来の目的から離れてしまっています。良いバナーほど、実は装飾よりも情報の優先順位づけと余白の使い方に気を配っています。

伝わるバナーの型:キャッチコピー・配置・CTA

最後に、実務でよく使っている基本の型を整理します。

  1. キャッチコピー:一番伝えたい一言を、最も大きく・最初に目が行く位置(左上または中央上部)に置く。情報を詰め込みすぎず、短く言い切る
  2. 配置:視線の流れ(左上→右下、またはZ字型の動き)に沿って並べる。順番はキャッチコピー→補足情報→CTAにする。余白を意識し、詰め込みすぎない
  3. CTA(行動喚起):視線の最後にたどり着く位置(右下が定番)に、周囲と色味の異なるボタンや帯を置く。「今すぐ申し込む」など、具体的な行動を示す言葉を添える

この型に沿って組み立てるだけでも、伝わるバナーに近づきます。行き当たりばったりで作るより、目的に沿った仕上がりになります。

まとめ

バナーデザインは、目的とターゲットを明確にすることから始まります。

  • 「採用」「購買」「リーチ数向上」など、目的によって最適なフォント・色味は変わる
  • 装飾を足すことより、情報を整理して余白で見せることの方が効果的
  • キャッチコピー・配置・CTAの型に沿って組み立てると、行き当たりばったりを防げる

単価や案件の取り方については副業Webデザイナーのリアルなバナー単価はいくら?でも解説しているので、あわせて参考にしてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次