loading

バナーのデザインについて

2017年4月5日

Webの広告や宣伝であるバナーですが、様々な大きさやデザインなどがありますね。
そんなバナーのデザインには何が必要なのか、またどのように作られているのかデザイナー暦1年の私が恐れ多くも説明いたします。

1.バナーを作る際に必要なもの

まず、バナーを作る際に必要なものは
「表示サイズ」「訴求原稿」「使用する画像素材」「デザインテイスト」です。

表示サイズはその名の通り表示するサイズです。
サイトで使用するサイズだと配置したい場所に合ったサイズにしますが、広告バナーの場合はすでに決まっております。
よく見かけるサイズですと、「728×90」や「300×250」や「160×600」ですね。
バナーの作り方参考画像00

訴求原稿はバナーに載せる文言です。
基本的にキャッチコピーや商品説明等ですが、あまり多すぎると文字が入らなくなってしまう可能性が高いです。
特にスマホで表示される一番小さいサイズですと、キャッチコピーと画像で埋まってしまう場合があるのでもっとも必要な情報以外を削ったりします。

 

使用する画像素材はバナーで使用する画像です。
小さいバナーだとあまり問題がありませんが、大きなバナーを作る際素材が小さいと劣化したまま使用する可能性が出てきます。
バナーの作り方参考画像01

なので、素材を渡す際は大きいサイズが好まれます。
ただ、大きいと言ってもどれぐらいのサイズがあれば問題ないのか、と言いますと作成するバナーの二倍のサイズぐらいあるとデザイナーとしては助かります。

デザインテイストはバナーで表現したいデザインのことです。
弊社では「参考バナーデザイン」からデザインテイストを判断します。
「さわやか」「ポップ」「エレガント」などありますが、デザインテイストを決めることが難しい場合は、商品をどのようなイメージで伝えたいのかを考えると自然と決まります。

 

2.情報、素材確認に優先順位づけ

次に頂いた情報を確認します。
確認しながら情報の優先順位をつけていくのですが、基本的に3つの優先順位を決めます。

 

1番目はターゲットユーザーが反応する情報です。
例をあげますと「キャッチコピー」「セールの値段」「商品画像」です。
これらの情報によりターゲットユーザーがバナーを目にした時に興味を持ちます。

2番目はバナーを見た人に知ってほしい情報です。
例をあげますと「商品の詳細」「説明」「イメージ画像」です。
バナーを見ているユーザーがさらに興味を引くような情報です。

3番目は気がついたら良い情報です。
「詳しくはこちら」などの載せた方が良いが、もっとも優先順位が低い情報です。

バナーで表すとこのようになりますね。
バナーの作り方参考画像02

優先順位をつけることにより、情報にメリハリがつくのでユーザーの目に留まりやすくなり、バナーをターゲットユーザーに読んでもらいやすくなります。

 

3.バナーのデザイン

情報確認できましたらバナーのデザインの開始です。
情報の優先順位付けもできているので、その優先順位に合わせてレイアウトをしていきます。
Web上では文章は左上から読むので優先順位の高い情報や、ユーザーの気を引くような情報は基本的に左側に配置します。

今回の参考に出すバナーの情報は
「え?まだ電話で予約しているの?」「業界初スマホ/PCで3分!引越し予約」
というテキストとロゴ画像が二枚です。
「え?まだ電話で予約しているの?」というテキストがキャッチーなので左側に配置します。
バナーの作り方参考画像03

 

その後は目線の流れを考えながら情報を配置していきます。
また、その際に同時に大きさにもメリハリをつけて配置していきます。
バナーの作り方参考画像04

 

レイアウトがおおよそ完了しましたら、テイストに合わせて配色を決めます。
配色はほぼテイストによって決まりますが、ユーザーの目に入るように基本的にはメリハリのついた配色にします。
バナーの作り方参考画像05
特にキャッチコピーの中でさらに目立たせたい箇所などはアクセントカラーや暖色系を使用することで印象的になります。

この時点でフォントを選んだり、位置の細かい調節等も行います。
フォントもキャッチコピーと本文では違うものを選びますとメリハリがつきます。

 

後はテイストに合わせてテクスチャやパターンの配置、影やグラデーションを追加したりします。
バナーの作り方参考画像06

いかがでしたでしょうか?
かなり駆け足でバナーデザインについて説明させていただいたので、この辺が足りないという部分もありますが、また次回にでも別のテーマでまとめたり、一つのテーマを掘り下げていきたいと思います。

ページトップへ