バナー作成の基礎とコツをご紹介！魅力的なバナー作成でCVを増加させよう

web上でサイトを観覧しているときに表示される広告バナーですが、社内などで作成を頼まれたり、フリーランスや副業としても「バナーくらいなら…」と依頼を受ける方も多いのではないでしょうか。

小さいので簡単そうですが、実は小さいが故に難しいバナーデザイン。今回はバナー作成のコツをまとめてみました。

バナーの役割とは？

バナー広告には「旗」や「のぼり」といった意味があります。
バナー制作で大事なことはいかにお店（ここではweb上にあるホームページとします。）に目を止めてもらい誘導出来るかを目的とします。

 

例えばどれだけおしゃれで素敵な店でもこのようなのぼりがお店の店頭にあったら「イメージもいまいちで、なんだか少しお店に入り辛いな…」と感じませんか？
今回はこの非常に個性的なバナーをブラッシュアップしながら、まずはデザインの基礎の説明をしていきたいと思います。

バナー作成の前に

バナーは先ほど言った通りのぼりや広告といった意味があります。

広告を打つ前にまずは

・何を誰に伝えるためのバナーなのか

・ターゲットが何を求めているのか

をきちんと確認して、重要な文章の構成や画像やカラーなどを選んでいきましょう。

情報を整理してPinterestやgoogle画像検索などのサービスで競合のバナーなどの参考イメージを探したり、レイアウトの簡単なラフを書いてから始めるのも手です。

今回はこちらの記事が載っているサイトtreeの現在のこの記事に飛ぶバナーを作成すると仮定して制作します。

サイズは一般的にレクタングルバナー推奨されているバナーサイズ300×250で作成していきます。こちらのバナーは1枚作っておけばPCとスマホ両方で使用する事が出来るバナー画像の基本サイズと言われており、まず最初はこのサイズで作成していくのをおすすめします。

サイズについてくわしくはこちらのサイトで紹介されてます。【2019年最新】GDN・YDNバナーサイズ一覧またgoogleやyahooなどに掲載するWebバナーの場合書き出した後のサイズは150KB以下としましょう。

使用ツールはフォトショップです。最近は無料で作成できるツールもたくさんありますが、どうしても痒いところに手の届かない場合も多いため仕事として作る場合はできる限りフォトショップで作った方が無難かと思われます。

バナー作成のコツその1！文字詰め、配置を見直そう

今回は入れたい文章は決まっているため、まずは一度背景をとり文字の並びや間隔を見直すところから始めていきましょう。背景から色がなくなったため少しすっきりとして情報が見やすくなりましたね。

このただ文字を打ち込んだだけの文字を“ベタ打ち”といい文字の隙間を埋めていない状態のことを言います。この文字を整えてあげましょう。

・コツと！マークの間や、漢字とひらがななどの間隔が整っていないため文字ツールで隙間を調節

・接続詞部分のサイズを90％に調節

・！のサイズを110％に調節し1px文字を下げる

といった調整をし、「読みやすい文字の並び」にしていきます。このような作業を“文字詰め”と呼びます。

上に比べてバナーの文章にまとまりが出て読みやすくなりましたね！文字組みは基本中の基本ですがついつい初心者が見落としがちなので、もししっかりレイアウトなどをきめたのになんだかイマイチ…と悩んだ際には一度文字のレイアウトを整えるといいかもしれません。では次に進んでいきます。

バナー作成のコツその2！サイトの雰囲気にあったバナーを作ろう

文字をしっかりと詰めれたところでいよいよバナーに背景や色を入れてみましょう。しかしこちらもただ目立てばいいものではありません。

1枚目もインパクトといった意味では良いかもしれませんが、あくまで今回はtreeの記事バナーなので背景は配色をサイトにあわせて作成していきます。バナーを作る際はコンセプトがはっきりと決まっているものじゃない場合、迷った時には飛び先のサイトのカラーや雰囲気に似せて作成していくようにしましょう。

バナー作成のコツその3！文章の幅を整えよう

文章の幅を整えると聞いて、今さっき文字の調整をしたのでは？と思った方もいるでしょう。ここで言う幅の調整は“文章の長さ“をあわせるといった調節です。

こちらも先程言ったようにサイトの雰囲気にあわせてあえて文字幅をかえたり、目立たせたい文字のある文章が長くて他と合わせると文字が小さくなってしまう場合を除き、基本的にはしっかりと文章の幅を整えた方がすっきりとして見えます。

バナー内にある全ての文章の幅を整える必要はありませんが、出来る限りレイアウトを整えてあげましょう。

また文字や図形のサイズはしっかりと整数で入力するのも大事なポイントです。書き出し方にもよりますが、フォントサイズに小数点があると画面上で見たときに文字がぼやけて見えてしまうので注意しましょう。

バナー作成のコツその4！バナーは押せそうにデザインしよう

おそらくこれが一番の他の広告とwebバナーとの違いでしょう。せっかく素敵なバナーを作っても、どのサイトのものなのかがわからなかったり、ただのWeb上に表示される画像として消費されるのは勿体無いです。サイトのロゴや社名、「〇〇はコチラ」などといった訴求を入れて、ターゲットをきちんと目的のサイトに誘導しましょう。

だいぶWebバナーらしくなってきましたね！バナーによっては訴求をつけないものもたまにありますが、指定などがない場合は入れた方が無難です。またロゴなどを使うときはロゴの最小サイズや背景や周りにおいてはいけない色の規約がないか、文字が潰れていないかなどしっかりと確認しましょう。

バナー作成のコツその5！細かい調整でさらにワンランク上のバナーへ

更にここからは細かい調整でワンランク上のバナーを目指していきましょう。

・文字の配置の余白をそろえる調整

・さらに文字を目立たせる装飾の意味での調整

上記の2点があります。

文字の配置の余白をそろえる調整

上に載せた画像は先ほどの画像と色や訴求、文字幅などは全く同じですが、なんだか少しガタガタして見えますね。これが配置の余白を整えていない状態です。

今回はわかりやすくするために少し大げさにずらしましたが、揃っている方がバナー全体がより綺麗に見えるのでしっかりとガイドを引いたり中央揃えなどの機能を使い文字の配置を整えていきましょう。

さらに文字を目立たせる装飾の意味での調整

文字への装飾はより目立たせたい文章に目をひかせたり、バナーやデザインに動きをつけることができよりよいバナーが作成できます。

・一番目立たせたい文章に下線をひく

・上部の文章が色合いが似ていて認識しづらかったため濃いめのドロップシャドウをひいて読みやすくする

今回は上記の２点を適用しました。

しかしこればっかりはデザイナーやお客様の感性によるものも大きく、必ずしもこの方法が正解！とはなりません。しっかりと飛び先のサイトの雰囲気やどのようなことを伝えたいかなどを今一度考え、その時々で一番いいデザインを適用していきましょう。

今回は主にバナーの基礎をご紹介したため、これ以外のデザインテクニックはまたの機会に詳しくお話しします。

バナー作成時に便利なサイトをご紹介

バナー作成の際、イラストや写真などを無料で使えるサイトをいくつかまとめました、これらのフリー素材を利用し時間短縮や、お依頼者からのイメージによ近づけていくよう心がけていきましょう。
イラストAC
・イラストサイト
・会員登録有り
様々なクリエイターが作成したイラストをダウンロードすることができます。イラストに限らず、テクスチャやペンなどの素材も豊富です。

いらすとや
・イラストサイト
・会員登録無し
言わずと知れたイラストサイトです。真面目なものからユーモアあふれるものまで幅広く揃っています。

写真AC
・写真サイト
・会員登録有り
イラストAC同様に、様々なクリエイターが撮影した写真をダウンロードすることができます。ものによってはPSDなどですでにくり抜かれてる素材なども手に入れることができます。

ぱくたそ
・写真サイト
・会員登録無し
企業タイアップやコラボ、パロディなどの特集などが多く、真面目なものからユーモアあふれるものまで幅広く揃っています。

icooon-mono
・イラスト、アイコンサイト
・会員登録無し
様々なアイコンを配布しているサイトです。Wi-Fiやスマホ、メール、コインなど簡単だけど作るのには少し時間がかかるものなどをダウンロードするのに便利です。

上記サイトはダウンロード、加工フリーのものですが、使用前にはどんなサイトでも利用規約を確認するよう心がけましょう。また、便利だからとあまり画像を多用しすぎないようにも注意が必要です。

相手に伝えるためのバナーを製作しよう

 

いかがでしょうか？同じ内容でも最初のものと比べるとガラッと印象が変わりますね。こんなに綺麗なバナーでも、一番伝えたい内容や相手をきちんと理解していないと本来のバナーとしての役目は果たせません。

デザインはもちろん大事ですが迷った時やうまくいかないときは訴求内容や何を伝えたいかなどを洗い出し、競合などとも見比べてその時々に最適なバナーを作成していきましょう。