バナー制作の基本的な５つの要点
バナー制作で意識したい基本的な５つの要点を紹介します。 どれも必ず守らなくてはいけないルールというわけではありませんが、意識すると出来上がりがぐっと良くなりますよ。
1.遷移先との共通性
バナーを作る際には、クリックして開くページ（遷移先ページ）と齟齬がないように注意しましょう。
バナー広告は、web上の看板やチラシのようなもの。 それを見てお店（Webページ）に来てくれても、看板に書かれていることと商品が違ったらお客さんは帰ってしまいます。キャンペーンの内容や商品説明が違えば、お店に不信感を持ってしまうかもしれません。
ですので、バナーに掲載する内容は遷移先と齟齬がないように注意しましょう。 デザインに関しても、遷移先ページと画像やテイストを揃えると確実です。
例えば、下図のバナーは、遷移先ページと配色などに統一感があります。
ページ遷移をしても、クリックしたページが開かれたという安心感がありますね。
2.メイン画像の選択
バナーの第一印象を決めるのは写真やイラストです。
これは、Webページを流し読みしている場合、テキストよりも画像部分の方が目に留まりやすい傾向にあるためです。 バナーに使われている画像が魅力的であれば、ユーザーは自然とバナーを見てくれます。
ただし、使用する画像はキャッチコピーやリンク先ページと齟齬がないものにしましょう。 カッコイイからと言って、全く関係のない画像を使用すると、ユーザーに不信感をもたせてしまいます。
実際に運用されているバナー。 どの画像もインパクトがあり、商品やサービス内容の雰囲気も伝わってきますよね。
画像選定の注意点
バナー素材（画像）の選定には下記３点に注意が必要です。
- リンク先ページ、キャッチコピーと関係がある
- 画像が歪んでいない（縦横比が正常である）
- 画質が良い
- 文字の可読性を阻害しない
特に、最後のテキストの可読性は要注意。 素晴らしい画像・魅力的なキャッチコピーを用意できても、画像と文字がゴチャゴチャして双方潰し合ってしまったら意味がありません。お互いが引き立て合うように配置・配色を工夫しましょう。
3.文字数・可読性
基本的にバナーは限られたスペース内で仕上げなければいけません。
そのため重視されるのは細かく的確に情報を伝えることよりも、まず、ユーザーの目・興味を引くものであるということです。
読みにくい、小さな文字がギチギチに詰まっていてもユーザーは見ません。
例えそれが有益な情報でも「読んでみよう」という気にならないのです。
極端すぎる例を考えると分かりやすいです。
例えば、下の2つ。
ブログページのサイドバーあたりに表示されていたとして、左のバナーにある文字全てを読む方は少数。文字は小さく、おまけに画像と重なって読みにくいので、流してしまう方が多いと思います。
右のように字数を絞って、サイズを大きくする・画像と被らないように工夫したほうが、テキストは目に入ってくるでしょう。
テキスト量の目安はあるの？
かつて、Facebook広告（現在のMeta広告）では「20%ルール」と呼ばれる規約がありました。
これは広告用画像で、画像全体にテキストが占める割合が20%以上のものは認めない、というもの。
現在、Meta広告ではこの「20%ルール」は廃止されています。 しかし、画像内に文字があまりにも多い＝ユーザーに情報が伝わりにくくなるというデメリットは否定できません。
もちろん、テキストが占める割合が多い＝駄目なバナー、ということではありません。
大事なのは「伝えたいことが、ユーザーに伝わるか（刺さるか）」です。画像全体にギチギチに詰めたりしているデザインでも、配色や文字サイズ・配置などの工夫で十分に興味を引くバナーになる可能性はあります。
4.情報の優先度を考える
バナーにはメリハリも重要。 例えば、文字のサイズや色を変えてコントラストを付けます。 大胆すぎるくらいに、ガツンと強調することが多いです。
メリハリのあるバナーを作るためには、情報の優先順位を決める必要があります。 優先順位がわかると、自然とメリハリが出てきます。
- 一番見せたいものを大きく、強く
- 優先順位の低い情報は小さく、もしくは除外する
5.メインコピーに力をそそぐ
バナーは詳細情報が書かれているWebページへの“入り口”。 細かな説明はページを読んでもらえば良いのです。 まずは、ユーザーの興味を引きましょう。
視界に入った時、即座にユーザーが興味を持つ。 そのためにはインパクトのある文言・キャッチコピーが必要です。
コピーはバナーのメインコンテンツと言える部分。 下図は『Retrobanner』というサイトに掲載されているバナーの一部です。
そのジャンルに興味を持っているユーザーであれば「おっ」と思う部分が強調されていますよね。コピーはユーザーにベネフィット（利益・恩恵）を感じさせるものが大半。犬のセリフのように「私のことだ！」と共感させる内容も効果的です。
お仕事をうけるにあたって
お仕事で他社・他人のバナーを作る場合、全て私達が決められるわけではありません。素材画像やメインコピーは決められていることが多いでしょう。 クライアントの指示に従うのも仕事のうちです。
ただし、クライアントがバナー作りに慣れていないような場合は、こちらから積極的にメインコピーを何にするか・情報の優先順位はどう考えているかなど確認していきましょう。 お互いに曖昧なままで制作を進めると、修正に時間がかかってしまう恐れがあります。
今回の５つのポイントを意識すると、デザインしやすいだけではなく、制作業務全般がスムーズに進みます。