新米デザイナー必見!Web広告デザインのポイントと参考サイト

Webデザインを始めたばかりの人にとっては、バナーデザインに頭を悩ませることも多いのではないでしょうか。 限られた領域に、文字と画像を詰め込んで、キレイに整えて、更には目立たせなければいけない!! なかなかしっくりくるデザインができずにコネコネしているうちに「パズルでもやっているのかな…」という気持ちになりつつ、「(仕事としては大事だけど)こんな小さいものにこんなに時間をかけてられるか!!」という焦りのようなものがでてくるのでした。 Webデザイナーとして評価を上げるためには、少ない時間でたくさんのデザインを作成したい! そのためには効率的にデザインの制作をしたい!!と誰もが思うもの。 今回は「そもそもバナー広告の役割とは?」というポイントを押さえて、 本来の目的に合った広告デザインを作成しつつ、 効率的にバナーを作成するための参考サイトをご紹介します!

バナー広告とは?(バナー広告の役割)

バナー広告の役割

バナー(banner)とは
(2本の柱につけてスローガンなどを書き、行進の先頭に立つ)旗じるし、(広告・宣伝用などの)垂れ幕、横断幕、(国旗・軍旗・校旗などの)旗、(昔の君主・領主などの)旗、のぼり、旗じるし、表象
(weblio bannerの項目より引用)

要はのぼりとか、旗のことですね。

そしてのぼり同様、宣伝するために作られた旗のような広告をバナーと呼び、
だいたいはインターネット上の広告のことを指すことが多いです。

たとえば、お店の前にのぼりがはためいたら「あ、ここはかつ丼を扱っているんだ」とか
「あ、冷やし中華始まったんだ」とか
お店の中に入らずとも情報が入ってきます(これぞ広告の役割ですね!)。

特にそこのお店に行こうと考えていなくても、のぼりを見て
「今日はかつ丼でいいか…」とお店を決めるきっかけになることもあります。

逆にのぼりがなければ、美味しいかつ丼屋があったとしても、気づかず通り過ぎてしまう場合もある訳です。

「今日はかつ丼を食べたい!!」

とどんなに強く思っていても、
お店をしらない層は何かしらのアプローチがなければ確実に来てくれません。

バナー広告も同様で、
特定のホームページを見に行く場合、URLを知っていれば問題ありませんが(それでもいちいちURLを直接入力するのは面倒ですが)、検索をして目的のページまでたどり着かなければいけません。

そのページのことを知らなければ、ずっと訪れてもらう機会がないですよね。

でも、バナー広告がでていれば、たとえそのWebページのことを知らなくても、
バナー広告を見てその内容を気になった人がWebページに来てくれる可能性がでてくるのです。

知らない人を連れてきてくれる、バナー広告ってとっても大きな役割を果たしていますね!

掲載場所(広告枠)について考える

自ら興味のある単語を検索して目的のものを探している層(顕在層)とは違い、
バナー広告は「潜在層」と呼ばれる、自ら能動的に情報を探している訳ではないけど
欲求が内に潜んでいる人たちに働きかけるものです
(お昼ご飯食べたいけど、何を食べるか決めてない…のぼりをみて「かつ丼」に決めるというのも潜在層ですね)。

また、お店を構えるときに立地条件が重要なように、バナー広告をどこに出すのか?というのも非常に重要です。

例えば、のぼりを設置するときに以下のどちらの方が効果があるでしょうか?

◆店舗すぐ近くの、人通りの多い場所
◆店内の目立つ場所

店内にのぼりがあると、店内にいる人向けにアピールはできますが、
「このお店のことを知らない人も含めた、より多くの人に来てもらいたい!」という目的からは外れてしまいます
(店内にあったらどんなに素晴らしいデザインののぼりでも、外の人には見えませんしね)。

しかしながら、店内に広告を設置する分にはお金がかかりませんが、敷地外に看板やのぼりを設置すると、お金がかかります。
当然、目立つ場所に大きく掲載するほど多くの人にアピールできますし、効果も上がります。
そして比例するようにその分お値段も高くなっていきます。

効果的なデザインを考えるのと同様、のぼりを設置する際に場所と効果を考えるよう、バナー広告も掲載場所について検討する必要があります。

バナー広告は、どの検索エンジン、どのWebページに表示させるかが重要です。
掲載先のWebサイトが検索上位であるほど、アクセス数の増加が期待できます。
また、安い広告枠になると掲載できる情報量が少なかったり、反対に載せられる情報量が多い広告枠だと掲載料は高くなります。

したがって、バナー広告を出稿するときには目的に合わせて広告枠を選ぶようにしなければなりません。

デザイナーであれば、どこの広告枠にバナーを出稿するのか確認し、そこに掲載する目的を理解してバナーのデザインを作成できると、より目指すゴールに近づけるということです。
クリック率を上げたい、認知度を上げたい、もしくはコンバージョン率をアップさせたい、などバナー広告を使用する目的は様々あるはずです。

バナーのデザインを作成する前に、その目的を明確にすることがとても大切です。

バナーに何を載せるか

バナー広告の目的を明確にしたら、デザイン作業の前に、バナー広告に何を入れるか考えましょう。
バナー広告は目立つことによって人々の興味を引き付けることが重要ですが、ただ目立っていてもその内容が分からなければただの模様とか、景色と変わりません。

そこで大切なのがキャッチコピーとなります。

デザインや画像では人によって色んな受け取り方ができてしまいますが、文章であれば明確な内容伝えることができます。
まず最初に、内容が分かるキャッチコピーを用意しましょう。

例えば住んでいる市町村の役場のホームページに、自分が経営しているかつ丼屋さんのバナー広告を掲載してもらうことにしたとします。

同じ地域に住んでいる人に自分が経営しているかつ丼屋の存在を知ってもらい、かつ丼の出前注文をしてもらうのが目的です。
そこで、バナーには

【安くて旨いかつ丼】
【●●市●●町】
【出前承ります】

という文言を入れることにしました。

そして次に画像を用意します。
自分で写真を撮ってもいいのですが、写真というのは奥が深く、おいしそうな画像を自分で写真を撮って用意するのは案外難しいものです。
最近は画像の素材集という良いものがありますので、余程こだわりがなければ、素材集からおいしそうなかつ丼の画像を探して購入し、デザインに利用しましょう。

ここで注意したいことがあります。

文言が少ないと「ユーザーに伝わらないのではないか?」という不安から、商品の特徴を何でもかんでも可能な限りバナー広告へ詰め込もうとする方がいます。

お気持ちはものすごく分かるのですが、バナー広告を見るユーザーの目線で考えてみてください。

小さな四角い箱の中に文字が詰め込まれ、色もカラフルで雑然としたバナー広告があったとして、真剣に熟読しますか?
街中ののぼりも、布地にびっしり商品特徴を掲載したデザインになったとしたら、手に取って隅々まで読み込む人がいるでしょうか?
要素を詰め込み過ぎたせいで各要素が小さくならざるを得ず、
結局全部が小さくなってしまい、
折角作った広告が何を言いたいのか伝わらなくなってしまうのです。

バナー広告は入り口、きっかけです。
訪問者に対して一目で何を伝えたいかわかるものにしましょう。

バナー広告をデザインしてみる

バナー広告に使用する要素(画像、キャッチコピー)が決まったら、いよいよデザイン(配置)していきましょう。

優先順位を決める

【安くて旨いかつ丼】【●●市●●町リスプラ亭】【出前承ります】の中から、いちばんユーザーが反応を示してくれるだろう、伝えたい文言を決めます。

今回はかつ丼の画像が載っかっていればわざわざ【かつ丼】と記載しなくても伝わると判断して【出前承ります】を一番アピールすることにしました。

また、ターゲットになりそうな人が近くにいる場合は興味があることをヒアリングしてみたり、デザイン制作時にディレクターや広告運用担当者がいる場合は相談をすると、デザインの戦略がより明確になります。

とりあえずすべての要素を並べてみる

とりあえずすべての要素を入れてみることによって、なんとなくバランスが見えてきます。

優先順位をもとにバランスを考える

今回【出前承ります】を一番目立たせたいので、いちばん大きい文字にしよう…など、優先順位によって、文字サイズやジャンプ率などを調整していきます(これがデザイン作業になりますね…)。

装飾する

ただ文字が置いてあるだけというのはシンプル過ぎるので、ここでユーザーの目を引き付けるように装飾を施しましょう。
ただし、ここでもユーザーに文字を読ませることを強く意識してください。
文字に装飾しすぎると何が書いてあるのか判読するのも困難になります。視認性・可読性は常に意識してデザインしましょう。

完成

良いバナー広告は分かりやすく、ユーザーに意図が伝わりやすいものです。
ユーザーの視点に立って、広告デザインをしていきましょう。

バナーデザイン参考一覧

ただ「バランスを見て調整せよ」と言われても難しいよ!というあなたは、まずは手本を見つけましょう。
真似することで、バランスの良さやどうやったら目立つバナー広告がデザインできるか非常に身に付きます。

バナーデザイン専門ギャラリーサイト | レトロバナー
http://retrobanner.net/

BANNER LINKS デザインバナーいろいろ集めました
http://nonamedesign.info/banner/

バナーデザインアーカイブ|バナーのデザインをまとめてチェック!
http://banner.keizine.net/

バナーデザインギャラリー | Banner Design Gallery
http://www.banner-design-gallery.com/

バナーデザイン・サンプルデータベース|ホームページ作成 AKAIRO株式会社(アカイロ)
http://aka-design.sub.jp/bd/

バナーデザインまとめ。|Banner Matome
http://bannermatome.com/

Banner Ad Gallery(海外)
http://www.bannerreport.com/html/gallery.php

まとめ

いかがでしたか。
目的から逆算して作成したバナー広告と、ただ見栄えの良いものをと意識して作成したバナー広告ではユーザーの心への刺さり方が異なるので、おのずと結果が見えてきます。

バナー広告を作る際にも、Webページでの役割やその目的を明確にすることが大切です。

デザインの作業的な部分だけでいうと最初のうちは、良いデザインを真似することから始めると悩む時間も短縮でき、最近の流行りも分かり良いでしょう。
自分の得意分野以外のデザインなどの幅も広がります。
たくさん作ってコツをつかんでください。

Web広告でコンバージョン数を最大化する7つの極意をプレゼント!

「Web広告マーケティング大全」
(無料・PDFでのダウンロード)

2018年9月発行の書籍「コンバージョンを最適化する7つの極意」の元となった、電子書籍「Webマーケティング大全」を無料でダウンロードいただけます。
(PDF・全161ページ)

無料でPDFファイルをダウンロードする
(全161ページ)
Web公告マーケティング大全

関連記事一覧