最近、バナーを作ってWebで集客したい！なんて声をよく耳にしますが、
ECサイトのバナーでも、うっとうしいと感じるときと、目に留まってついつい押してしまうときがあるかと思います。

どうせなら”目に留まってついつい押してしまう”バナーを作りたいですよね。

「バナーなんて簡単に作れるだろう」はじめは私もそう思っていました。

しかし実際は情報の選定やレイアウト、配色などを考えると手が止まってしまい、時間がかかってしまうケースが多くあります。

そこで今回は初心者でも効率よく”クリックされるバナー”を作るための具体的な手順をご紹介します。

作成手順

１．要素の洗い出し

まずは、”何を伝えたいのか”を考え、バナーで伝えたい情報を洗い出します。キャッチコピー、キャンペーンの締め切り、会社ロゴ、写真（メインビジュアル）など、とりあえず書き出してみましょう。テキストだけのバナーより、画像がある方がユーザーの目を引くので、なるべく商品画像やイメージ画像など訴求したい内容と関係のある画像を盛り込んでいきます。また、商品などのオリジナル画像が準備できない場合でも、フリー素材などを活用してバナーにアクセントを付けるといいです。

キャッチコピーを考える際には、「メイン」と「サブ」に分けて強弱をつけるのも有効です。あまり文字数が多くなると読みにくくなりますから、メインコピー10字程度、サブコピー20字程度を目安に要約しましょう。

サイズを決める必要がある場合は、要素の量や目的に合わせて考えましょう。複数サイズでバリエーションを作る必要がある場合は、中間サイズから始めて調整するとスムーズが進みます。

２．ターゲット選定

前提として「万人ウケを狙うと誰にもウケない」ということを頭に入れておきましょう。そのため、「これは、自分のためのバナーだ」と思ってもらえるように、バナーを見せたいターゲットの属性を設定していきます。

例えば、「女性」ではなく、「主婦」「甘いものが好きな女性」「女子高生」「子育て中のママ」「40代のマダム」など、具体的に定めることで、より”刺さる”バナー作成に繋がります。

３．ターゲットの行動予測

ターゲットを定めたら、ターゲットになりきって行動を想像してみましょう。「どんなページを見ているときに、どんな気持ちでバナーを押すかな」と考えることで、ユーザー目線で押されるバナーを作れます。

４．制作

１. 構成要素をすべて置く

バナーを制作する際は、初めに一旦必要な構成要素をすべて置いてみましょう。

すべて置かずにデザインを始めると、あとから要素を追加するのは手間がかかり、とても大変です。
また、一つひとつの要素をデザインしながら作業を進めると「配色やレイアウトはどうしよう」と余計なことを考えてしまい、なかなか作業が進みません。

そのため、初めはバナーに必要な情報をすべて置いてみることをおすすめします。

2. 「手書き」でレイアウトする

構成要素が決まったら次はいよいよレイアウトです。

ただし、いきなりPCでレイアウトを考えるのではなく、まずは「手書きで」レイアウトを考えましょう。
いきなりPCでレイアウトしてしまうとどの要素をどこに配置するのかを考えすぎてしまい、なかなかレイアウトを決められません。

一旦手書きでレイアウトを決めることで、PCで悩ながら作業する時間を少しでも短縮することができます。
（イメージ図）

3.　単色でレイアウトする

手書きでレイアウトがある程度決まったら、実際にPCでデザインに落とし込んでいきます。

しかし、レイアウトはいきなりフルカラーで進めてはいけません。フルカラーで進めて配色とレイアウトの両方で躓いてしまうと無駄に時間がかかってしまうので、まず配色は一旦置いておき、レイアウトのみを組んでいきましょう。
（イメージ図）

4.　配色はサイトのイメージに合わせる

バナーの前提ルールにも書かれていますが、基本的に配色はサイトのイメージに合わせるようにしましょう。

ユーザーはバナーに書かれている内容に興味を持ってアクセスしてくるので、飛び先のLPやサイトのカラーとまったく違う配色にしてしまうとユーザーが戸惑ってしまう可能性があります。

また、実際にサイトで使用されている配色を使用することで無駄に配色が増えるのを防げるだけでなく、配色に悩む時間を減らすことができます。
（イメージ図）

 

事例

※泣ける広島県　（出典：http://retrobanner.net/archives/6081）

※amazon（出典：http://retrobanner.net/archives/6047）

※健康家族（出典：http://retrobanner.net/archives/3646）

まとめ

今回はECサイトで売上を伸ばすために重要となるバナー（広告）の作り方をご紹介させていただきました。もちろん商品・ビジネスモデルによって、訴求するべき対象は様々ですが、訴求対象の絞り方であったり、それに基づくバナーの作り方は共通しているので、ぜひ参考にしていただければと思います！