サイトアイコン ホームページ制作&デザイン制作のYORIYORK(ヨリヨーク)| 栃木県佐野市

バナー作成のポイント

バナー作成のポイント_アイキャッチ
今回は「バナー作成のポイント」を、制作過程とともに学んでいきたいと思います。
架空のキャンペーンの告知バナーを作成していきます。
下記がキャンペーンの情報です。この情報をもとに、考えていきましょう!

「女子旅キャンペーン」告知バナー
・夏の女子旅応援企画を告知する
・抽選で5組10名に旅行券3万円分をプレゼント
・募集期間は2019年6月1日〜7月31日とする

1.ターゲットの想定

最初に「ターゲットの想定」をおこないます。
想定したユーザーに対して、ピンポイントにアプローチすることで、バナーのクリック数を上げることが期待できます。
箇条書きでターゲットのイメージを洗い出してみましょう。
ターゲット
・女性
・20代
・旅行や出かけるのが好き
・夏
・アクティブ
・写真映えする体験、風景
今回は『アクティブな20代女性』をターゲットに設定します。


2.イメージの洗い出し

ターゲットに与えたいイメージや、ストーリーなどのアイディアを出していきます。
ライフスタイルや、好まれそうなテイスト、アイテムを連想ゲームの要領で洗い出していきます。
「旅→歩く→歩きやすい靴→スニーカー」
「旅→思い出→共有→SNS→写真」
このようなイメージで、要素をどんどん書き出していきましょう。
今回は、「スニーカー」「アクティビティ」「旅」「爽やかさ」「写真」
という要素を抽出して作成を進めます。
また、併せて「キャッチコピー」も考えます。
今回は賞品が「旅行券3万円分」と、行き先は「ユーザーが自由に決められること」を訴求します。
「旅行の計画を立てる瞬間のワクワク感」と「旅行券が当たったらどこに行こう?何をしよう?」という気持ちをストレートに投げかける文章を考え、
「どこへ行こう?」をキャッチコピーにしました。

3.ラフの作成

洗い出したイメージ・コピーをもとにラフを作成します。
ノートにラフ画を描いていきましょう。
「どこへ行き、何を体験するか」の想像を膨らませるため、複数枚の写真を配置したいと思います。
今回は画面を「文章」+「イメージ」の2分割にしてレイアウトを組みます。
バナーのレイアウトは様々ですが、2分割レイアウトは写真が小さい時や、情報を分けたい時に効果的で使いやすい手法です。
キレイな写真がある場合は、画像を前面に使用し文字を配置するレイアウトが効果的です。
文字組みは各要素の中で、どれが「伝えたいこと」なのか優先度を決めることで、配置をおこなっていきます。
「女子旅」>「旅行券3万円分」>「5組10名」>「募集期間」の順に、優先度をつけて文字の配置をおこないました。


4.レイアウトの作成

ここからはパソコンでの作業になります。

先ほど描いたラフ画をもとにバナーのレイアウトを作成します。
ここでのポイントは「モノトーン」で作成をおこなうことです。
先に色を入れてしまうと、色のイメージに引っ張られてしまうため、白黒で作成しバランスを調整していきます。

5.調整

写真をはめ込み、書体の調整をおこないます。
フォントも変更し、強調したいポイントを考えながら整えていきます。

6.配色


全体を整えたら配色をおこなっていきます。
夏休みを想定したキャンペーンのため、爽やかな色を選んでみました。
色味に悩んだ時は、ビジュアルの中から同じ色を選んで配色するがポイント!

7.全体の調整


全体を見たとき、文章側にもう少し「遊び心」を入れたいと思い、点線で表現した「カモメ」を追加し、「女子旅」の「旅」の文字の一部を「靴跡」に変えてみました。
イメージに配置した「点線」と「靴跡」を取り入れることで全体にまとまりを出すことができました。
これでキャンペーンバナーの完成です!

まとめ

今回一番のポイントは「モノトーン」の状態で全体を調整していくことです。
色のイメージに引っ張られることなくレイアウトを整えられます!
配色はバナー先のサイトのイメージカラーや、ビジュアルの中から決めることで、統一感を出せます。
今回、バナー作成の工程をまとめて感じたのは「前準備が大切」だということです。
ターゲットの想定と、イメージする情報、ライフスタイルの洗い出しがおこなわれているほど、迷いなくバナーに落とし込んでいけます。
クライアントからの「ヒアリング」や、「ユーザー」を意識する想像力が大切です。

モバイルバージョンを終了