Chihiro Matsuda
「バナー広告を作りたい！！…でも、制作者にどう伝えれば良いのか？」と困った事はないでしょうか？
実際に、私もクリエイティブを依頼する時、どう伝えたら良いのかが難しいといったご意見をいただいたこともあります。
また、YouTubeやSNSが一般的になったことにより、WEＢ広告業界も動画広告や、SNS広告は必須になってきました。
そうなると、バナーや動画がないと配信が難しくなり、自身で作成できる場合なら問題ないですが、お願いしないといけない場合に直面することも多くなると思います。
今回はデザイン基礎のご紹介を含めながら、実際にバナー作成をします。そして、どのようにバナーを作っているのかをみていただくことで
制作者とのスムーズな意思疎通へと導く手助けとなればうれしいです。
デモンストレーション 依頼内容
下記のデモンストレーション依頼がきました。それでは、一緒に作成していきましょう。
| 依頼内容 | 「運用型広告改善事例集ホワイトペーパー」ダウンロード促進用 バナー |
| ターゲット | Facebookを使っている全てのユーザー |
| 遷移先URL | https://azkk.co.jp/case_guidebook/ |
| 配信媒体 | Facebook広告 |
| サイズ | 1080×1080px |
STEP１│要素を考える
テキスト要素の書き出し
遷移先のサイトページをみながら、バナーに入れたいテキストを書き出してみましょう。
テキストを考えることが難しい場合は、訴求を軸に誰に、何を伝えたいのかと考えると分かりやすくなるかと思います。
今回の場合だと…
| 訴求 |
|---|
| 運用型広告改善事例集ホワイトペーパー ダウンロード促進 |
| 誰に |
|---|
| Facebookを使っている 全てのユーザー |
| 何を伝える（何をして欲しい） |
|---|
| 運用型広告改善事例集ホワイトペーパーをダウンロードして欲しい |
- リスティング・SNS広告の運用実績と改善事例を掲載
- 運用型Weｂ広告徹底解説
- 事例でみる改善施策10選！
- 無料資料
- ダウンロード
テキストを強調したい順に並べてみよう！
テキストの優先順位を考えていきましょう。実際にバナー枠を書いて考えると、バランスがとりやすくなります。
- 事例でみる改善施策10選！
- 運用型Weｂ広告徹底解説
- 無料資料
- ダウンロード
- Web広告改善ガイドブック
- リスティング・SNS広告の運用実績と改善事例を掲載
メイン素材を考えよう！
今回は、ダウンロード後のホワイトペーパーを素材にしましょう。
もし、サービスの関係で具体的な素材がない場合は、フリー素材を使ったり、素材サイトから探して購入します。
配色を決めよう！
では、次にバナーに使う配色を決めてしまいましょう。基本的にはサイトのカラーを中心に使うようにします。
そうすることにより、バナーとサイトの共通部分ができ統一感がでます。クリックをして欲しいために作るバナーですが、バナーとサイトのデザインの差異が大きすぎるとクリック後「本当に、このページであってる？」とユーザーに不信感を与えてしまい、離脱してしまう可能性を高めかねません。
Facebook広告リード獲得の場合は、クリック後、Facebook広告のフォームに遷移するようになっているので、サイトと全く同じでもなくても問題ないかと思います。遷移先を確認し、適切な配色を決めましょう。- 配色は３色に絞る
- ベースカラー 70%
- メインカラー 25%
- アクセントカラー 5%
今回は下記、配色でバナー作成を進めていきます
◆ベースカラー：企業ロゴのピンクを20％まで薄めた色
◆メインカラー ： ホワイトペーパーの表紙の色（紫の方）
◆アクセントカラー：メインカラーの補色
- ColorZilla ※ Google chrome 拡張機能になります。利用するにはGoogleアカウントが必要です。
STEP２│バナー作成
レイアウトを決めよう！
テキストと素材が宛ては当てはまりそうな、レイアウトを選びましょう。
今回は「②横割りレイアウト」で一度組み立ててみましょう。
「テキスト」と「カラー」と「素材」を
実際に ②横割りレイアウト に当てはめてみました。
デザイン4原則を当てはめてみよう！
レイアウトが決まったところで、見栄えをよくしていきましょう。
デザインには4つの基本原則があり、これらを適用することで、バナーの見え方が変わってきます。
デザイン4原則
整列
要素の端と端を揃えることでデザイン全体に一体感がでるようになります。
黄線のように「見えない線」を引いてみることがポイントです。
近接
関連している要素を近くにまとめることで１つの塊（グループ化）でき、情報が明確に伝わるようになります。
コントラスト（強弱）
要素に大きな差（メリハリ）をつけることで目を引き付けるようなデザインになります。
反復
同じような要素を繰り返し使うこと（色・線・図形・フォント）で暗黙のルールができ、全体の統一感が増します。
先ほど当てはめたレイアウトに、デザイン基本原則を当てはめてみました。
デザイン４原則がどこで使われているのか考えてみよう！
答えは下に記載しています。
- Q 考えてみよう！の答え （ここをクリックして開いてください）
まとめ
最後まで閲覧いただきありがとうございました。いかがだったでしょうか？
多くのデザイナーがいますので、今回ご紹介した手順が全てにあてはまるわけではありませんが、テキストや配色、構成を考える段階は、どの方も同じと思います。
この記事を読んでいただいて、こんな風に考えて作成しているんだなぁと思っていただくことで、デザイナーにご自身の意図を伝える時にどうすれば、伝わりやすくなるかを導き出すための手助けになれば幸いです。
ウェブ広告をはじめ、ウェブマーケティングに関する不安や疑問を無料でスッキリ解決しませんか？
当社では、事業会社様向けにデジタルマーケティングについてのお悩み、貴社の課題に
対して専任のコンサルタントによる無料の個別相談会を毎週金曜に定期開催しております。
運用型広告に関するお悩みごとだけでなく、マーケティングから技術的なことまでお気軽にご相談ください。