ブログBLOG

脱！初心者デザイン～バナー編～

更新日：2022/04/28

WEBデザインに欠かせないバナー、デザイナーであれば一度は作成したことがあるのではないでしょうか？
デザインを勉強する際にバナーのトレースやバナーの作成から始めた人も多く、
デザイナーの登竜門といってもいいかもしれませんね。
ですが、簡単そうに見えて作成に慣れていないとリテイク&迷走の沼にはまりがちなものです。

そんなバナーデザインを作るのが初めての方やバナーデザイン制作が苦手な方に向けて
バナーを作る際のポイントを紹介してきたいと思います。

1 目的を明確にしよう
2 デザイン作成
3 情報の優先順位を決めよう
4 テキストの可読性・視認性を意識しましょう。
5 文字組を工夫してみよう。
6 色は使いすぎないよう注意
7 イラスト素材
8 写真の画質、加工
9 最後の仕上げ
10 参考サイト
11 まとめ

目的を明確にしよう

まず、バナーを作成する前に、バナーの目的を確認しましょう。
この内容は制作の要ともなる部分なので、ぼんやりしたままで進めてしまうと
その後の作業で迷走したり行き詰ったりする原因になりますので、
依頼先にも明確な内容を確認しておくのがよいでしょう。

例えば…
新サービスの提供で利用ユーザーを新たに獲得したい。
新店舗のオープン記念セールで全品30％OFFを伝えたい。
期間限定の商品が店で販売するのでPRしたい。

ターゲット

万人に受け取りやすいものや年齢層を意識させないバナーも多くありますが、
バナーをクリックしそうな人はどんな人なのか、バナーの訴求したいターゲット層を決めましょう。
目的が決まっていれば、ターゲットも絞りやすくなります。

例えば…
男性向けの健康サプリメント商品のPR
「サラリーマン」や「健康が気になる中年男性」

見た目がかわいらしい少し高めスイーツ商品のPR
「働いている女性」「スイーツ好きな人」、「自分へのご褒美や差し入れ、ギフトを考えて入る人」

具体的に決めることでより訴求率の高いバナーになり、同時にデザインのイメージもつかみやすくなります。

サイトの設置場所・リンク先

バナーを設置するサイトやバナーから遷移する先のサイトも確認しておきましょう。
例えば、設置場所は緑を中心としたデザインのサイトで、そこに緑色のバナーを置いても
緑同士でページとバナーを一体感のある印象にしすぎてしまうと目立ちにくく、
バナーのクリック率は上がりにくいものになってしまいます。

また、赤や黄色メインの元気な雰囲気のバナーをクリックした先のページが
黒を基調にした品のある・おとなしいページだった場合、違和感を感じませんか？
この違和感があると、ページを見てもらえないままユーザーは離脱してしまうかもしれません。

他にも、ブランドの認知を挙げることを目的としたバナーであれば、
ブランドイメージから離れるようなデザインもNGです。

ブランドのイメージや、設置場所遷移先のページとあうことを想定し、
デザインのテイストをまとめていきましょう。

バナーのサイズ

バナーサイズには多くの種類があります。
代表的な横300×縦250や横250×縦250などのサイズ以外にもバナーを表示する媒体や、
設置先のエリアのサイズに合わせて作成する必要があります。
設置先によってはバナーサイズにルールがある場合もありますので、デザインの着手の前に確認しておきましょう。

以上の情報がまとまったら、次にデザインの工程に入りたいと思います。

デザイン作成

レイアウトがあらかた決まれば次はいよいよデザインです！
まだデザインがぼんやりしている…という方はパソコンで作業する前に、
アナログでラフ案を書いてみるのもおすすめです。

バナーをデザインする時のポイントをいくつかまとめました。

バナーに入れる要素を決めよう。

目的やバナーの情報、ターゲットを加味しバナーに入れる要素を考えましょう。
依頼先から提示されている素材や情報を利用する場合もありますね。

具体的に例を挙げると以下のような感じでしょうか。
キャッチコピー、期間や締切、金額、企業のロゴ、写真・イラスト、デザインのテイストなど

オススメなのが作成サイズが決まったら一旦すべてテキストの要素を載せてみることです。
これをするとバナー全体のボリューム感が把握でき、デザインがしやすくなります！
資料の目についた場所から作りながら要素を追加していくと、
要素の抜け漏れや画面が散らかって時間がかかってしまいます。

バナーに載せたい情報がたくさんあっても、そのまま載せてしまうと情報が多く、
騒がしい印象や情報を詰めることによって、文字や要素が小さくなり可読性が落ち、
ユーザーからスルーされやすい、目に留まりにくいバナーになってしまいます。

バナーサイズに収まりにくい要素は添削したり、表現を工夫したり、
依頼先に何を優先させるのかを相談するのも良いと思います。

情報の優先順位を決めよう

必要な情報が一通り揃ったら、次はターゲットやバナーの要素を元に、
バナーで強く主張したい箇所の優先順位を決めていきます。
まず、作成するバナーサイズに合わせて文字を全部載せてみましょう、
最初はあまりフォントにこだわらず、シンプルなものをベタ打ちでOKです。
その中で重要度の高いものを選び、文字の大きさや太さを変更して目立たせてみましょう。

バナーには文字を厳選して載せているので全部大きくしたくなる気持ちもわかりますが、
全て大きさが似ているとメリハリがなく、逆に全情報が目立たず
目を惹かれるようなバナーからは遠のきます…

なので、バナーの中で強調すると良いポイントを参考画像と一緒に紹介します。