広告バナーのデザイン作成の学びと意識することまとめ

初めまして、デザインを勉強中のたくとと申します。
今回は、広告バナーについて学んだので、
アウトプットとして文章にさせていただきます。

自分が今後、バナーを制作する際に、
意識して欲することと学んだことをまとめました。
皆様も学べることがあれば幸いですが、基本的には自分用です。

今回は、chot.designさんが新たに始めた、デザイントレーニングに参加させていただいた学びを共有していきます。今回のトレーニングでは出された課題に対し、約1週間で制作し、現役のデザイナーが添削してくれるというもの。
本ページではデザイン素人の僕が作成したものと添削してもらった内容を記載していきます。

制作する課題
テーマ：「和牛の通販のバナーを作ろう」
新型コロナウイルスの影響で和牛の需要が落ちてしまい、JAグループが和牛の無料プレゼントキャンペーンを実施しました。今回はそのキャンペーンの宣伝用バナーを作ってみましょう。

学んだ広告バナーの作成手順

大まかなバナー作成の手順を解説します。
ここでは、上記の課題に対して、自分が「選定したこと」と「意識した部分」を合わせて紹介していきます。

1.ターゲットを考える
最初にどんな人にクリックしてもらいたいかを考えます。
男性向けと女性向けでも色やフォント選びなどが変わってくるためです。
ターゲットを考えることで、明確にユーザーの悩みや有益な部分を考えることができるようになります。

今回はターゲットを、以下にしました
・30代の主婦
・小学校低学年くらいの子供がいる

上記をターゲットにした理由として、通販の内容が響きそう、かつ料理をする割合が多い主婦。
子供や主人に美味しいご飯を食べて欲しいと思っている方に購買して欲しいと考えたからです。
※LPとの関連性を考慮した、ユーザーの悩みとクリックする有益性を考える。
ターゲット選定の際に考えるときはこちらを参照する。

2.キャッチコピーを考える
キャッチコピーを考える際に、
ターゲットから連想されるキーワードを挙げていきます。
キャッチコピーを考える際のテクニックはこちらを参照する。

キャッチコピーやバナーの内容は行動を促すために全体を3つの構成で区切りコピーを作成していくことで、ユーザーの流れを掴みやすいとされています。

1.キャッチコピー
2.バナーの内容(全体像)
3.行動促進のワード（申し込みはこちらとか）

こうすることで、訴求したい内容を整理することができます。
今回はコロナの影響で、自宅にいる時間が増えたと思います。
また、おうち時間という言葉もよく耳にするようになりました。
すてきなお家時間を過ごしたいと思っている人は多くいるという考えのもとキャッチコピーを作成しました。

1.すてきなお家時間をあなたへ
2.ターゲットに向けた画像
3.合計5300名へお肉・乳製品をプレゼント
4.国産畜産物応援キャンペーン
5.お申し込みはこちら

お肉や乳製品が当たるというのは申し込む上で、背中を押す材料になると思いました。あくまでも応援キャンペーンなので、申し込む前に応援するという意識の上、上記を考えました。

3.広告バナーを制作していく
実際にバナーをレイアウトしていきます。
レイアウトを考えるにあたって、流れを考えることが大切です。
バナーを見た人と会話をするような流れで作ることが良いようです。
流れ（優先順位）
①キャッチコピー
②ビジュアル（写真）
③お試しキャンペーン実施中!!
④申し込みはこちら

この流れに沿うように配置していきましょう。
このように流れを考えることは、見た人の心理の流れにも繋がってきますので、しっかり考えてみましょう。

作成した広告バナー

上記を意識して作成したバナーが以下になります。
課題では3つのサイズを作成するとのことから、3つのバナーサイズを作ってみました。

・レクタングル（300 × 250）
・バナー（728 × 90）
・スカイスクレイパー（120 × 600）

現役デザイナーに添削してもらった内容

背景の写真とキャッチコピーの「すてきなお家時間」などの影響により、家政婦や家事代行サービスの広告に見えます。
センスは悪くないのですが、広告内容とキャッチコピーと写真がマッチしていません。

デザイン的問題点
1.一般的に広告バナーには画像の端に1ピクセルの線をつける必要があります。
2.文字がバナーの端や、背景の端は最低でも5ピクセルくらいはあけたほうが見やすい。
3.背景の写真とキャッチコピーの「すてきなお家時間」などの影響により、家政婦や家事代行サービスの広告に見えます。
4.アクセシビリティの観点では、テキストカラーと背景色のコントラスト比率は最低でも 4.5:1 以上でなければなりません。

多くの方は広告バナーを0.2秒から0.3秒程度しか見ないと言われています。そのため一瞬で内容を認識できるようにする必要があります。

たとえば「5300名様へ」の「へ」が数字より下にはみ出していたり、ピンクの横長バナーでは「〜」の記号のように見えてしまいますが、この「へ」は必要でしょうか？

「合計」や「名様」など2文字程度であれば縦書きにするのも良い工夫ですが、横長のバナーでほとんどの文字は横書きなのに「申し込みはコチラから！」の部分だけ縦書きなのは認識に時間がかかってしまうと思われます。

広告バナーを作成して学んだこと

・一般的に広告バナーには画像の端に1ピクセルの線をつける必要がある。
・文字がバナーの端や、背景の端から最低でも5ピクセルくらいはあけると見やすい。
・アクセシビリティの観点で、テキストカラーと背景色のコントラスト比率は最低でも 4.5:1 以上である必要がある。
・優先順位を意識してバナーを作る

感想

まだまだ、デザインの引き出しが少ないと感じたので、たくさんのバナートレースや見たりして、引き出しを増やす必要がある。
ターゲット選定のコツがまだまだ、わからない。
ターゲットに合わせた画像選定が難しい。
ターゲットに当事者意識を持ってもらうための画像選定の正解がわからない