バナーデザインを外注するときの上手な頼み方

バナーを外部に依頼する時、どのように頼めば良いかわからないという方もいると思います。特に初めて依頼する時は、自分の希望を上手く伝えられるか…何を準備したら良いか…素材はどこで探したら良いか…など、わからないことや不安なことありませんか?

せっかくプロに頼むのだから希望通りの満足のいく仕上がりになって欲しいですよね。今回は外部に依頼する際のバナーの上手な依頼方法ついて書きたいと思います。作る側(デザイナー)としては、こんな風に依頼してもらえるととてもありがたいです!

今回はダミーの化粧品「オールインワンクリーム」のバナーを依頼するという例で、バナー依頼に必要なものを一つずつ細かくみていきたいと思います。

1.バナーのサイズ

まずは作りたいバナーのサイズです。バナーのサイズは幅◯ピクセル(px)×高さ◯ ピクセル(px)単位で伝えます。バナーのサイズがpixel単位でわからない場合、例えば、「サイトの今このバナーがある部分に差し替えでバナーを作りたいんだよね。」や、「(サイト上の)この部分に入るバナーが作りたいんだよね。」といったアバウトな感じで正確なピクセル数がわからない場合は、簡単にサイズを測る方法がありますので、下の記事を参考にしてみてください。

パッと簡単にバナー画像のサイズを調べる方法別ウインドウリンク

幅、高さの記入も忘れないように記載しましょう。

例)幅300px × 高250px

 

※バナラボではもしサイズがわからない、調べてほしいなどの際はこちらでお調べいたします!

2.バナー内に掲載する文言

次に、バナーに載せるキャッチコピーやテキスト要素です。まず掲載する全ての文言をリストアップします。その後に、その文言のサイズの大小(強弱)も伝えましょう。

どんな文言にするか

これはバナーを作る上で非常に重要な要素です。バナーは小さい限られたスペースで表現しないといけないので一つ一つの要素が非常に重要になってきます。あれもこれも伝えたい、これも載せたいとなり最終的に文字数が多くなってしまうのはNGです。ごちゃごちゃして読みづらく、結局何を伝えたいかわからないバナーになってしまいます。そもそも小さいスペースで多くの文字がある時点で、読んではもらいにくくなってしまいます。

限られたスペース内でいかに引き付けるキャッチコピーを考える事が必要です。思わず興味を引くような、クリックしたくなるような文言を考えてみて下さい。

例)

上から目立たせたい順
大   メインキャッチ:もっちりハリツヤ肌
↓     サブキャッチ:24h潤い持続、これ1本でok
小  オールインワンクリーム(商品名)

販売価格3,000円税込→お試し980円税込
詳しくはこちら(ボタン)

 

※バナラボでは、キャッチコピー候補が複数あって迷って決められない場合は全てお送りいただいて構いません。こちらで他とのバランスを見たりしながら選定させていただきます。

3.バナー内に掲載する画像

ロゴや商品の画像、イメージ画像 等

ロゴ画像

ロゴを掲載する場合はロゴ画像を準備します。イラストレーターのaiデータや、トリミングされている(背景が切り抜いてある)ものがベストですが、ない場合はpngやjpgデータ等でも構いません。背景は白もしくは単色のものが良いです。ロゴのレギュレーションがある場合はそちらも一緒に送ってくださいね。

その他の掲載画像

商品画像やイメージ画像などです。画像のサイズはバナーサイズより大きいサイズを準備します。実際に表示させるサイズより小さいと、画像がギザギザに荒くなってしまうのでNGです。背景のトリミングは大抵はデザイナー側が行うためトリミング(切り抜き)してなくても構いません。

商品画像は大抵のお客様は商品写真のデータを持っているので良いのですが、問題は手持ちに素材画像がない場合です。その場合は、イメージ写真やイラスト素材を素材サイトなどで探すことになります。

イメージ素材の探し方

今回は2つの素材写真を素材サイトで探したいとおもいます。
1枚目:みずみずしい潤いのイメージ→しずくか水の波紋の写真
2枚目:20代〜30代の女性の笑顔のバストアップ写真 スキンケアしている、頬に手を当てている 等

無料素材サイトで探す

[写真AC] https://www.photo-ac.com/別ウインドウリンク
[イラストAC] https://www.ac-illust.com/別ウインドウリンク

有料素材サイトで探す

PIXTAピクスタ https://pixta.jp/別ウインドウリンク

他にも素材サイトは沢山ありますので検索してみてください。
※必ず各サイト毎に利用規約や使用可能範囲等を確認しましょう。

※バナラボでは自分で素材を探すのが難しい場合は、希望のイメージの詳細をお伝えいただければ代わりに探すことも可能です。有料素材ご希望の場合は別途素材代がかかります。

写真の見せ方などに指示がある場合はそれも一緒に伝えます。

例)

image1.jpg……メイン画像、一番大きく(商品写真)
image2.jpg……サブ画像(女性の写真)
image3.jpg……背景(水の波紋の写真)
logo.png………ロゴ 四隅に掲載

 

これで、バナーの要素であるテキスト文言と画像素材は準備できました。

次に、

4.デザインのイメージを伝える

です。ここが希望のイメージに仕上がるかどうかの重要なポイントとなってきます。

デザインの参考URL

ご希望のイメージに近い参考デザインがあればURL等で伝えます。
参考画像は、どんな感じのデザインにしたいかビジュアルで伝えるためにとても有効です。作る側としても参考サイトがあるとイメージが伝わりやすいので、より希望のイメージにそったデザインがしやすいです。是非参考バナーを探して伝えてください。

バナーデザインの参考サイトはネット上にいくつもありますので、その中から探すのもお勧めです。

バナーデザインの参考サイト集めました別ウインドウリンク

デザインの雰囲気/イメージカラー

参考URLに加え、デザインの雰囲気やイメージがカラーがあれば文章で伝えます。
希望があればできるだけ詳細に伝えるようにしましょう。

例)

デザインの雰囲気・・・・・・みずみずしくうるいおを連想するイメージ
カラー・・・・白をベース さわやかなブルー系を入れる(白×ブルー)

その他レイアウトの指示

レイアウトはデザイナーにお任せ。という場合も多いですが、もしレイアウトの指示など細かい希望がある場合はそれも併せて伝えます。レイアウトは文章だと伝えにくいので、図や手書きで書いてスキャンしたものを送ると良いと思います。

5.その他のバナー情報

ターゲット層

今回のバナーのターゲット層を伝えます。

例)

20代後半~30代の女性

 

今回は、20代~30代の女性といった年代と性別だけのざっくりとした幅広いターゲットですが、例えばこのオールインワンクリームが980円ではなく高額クリームの場合、「美容の為なら価格が高くても惜しまない30代以上の女性。高級志向でワンランク上を目指す女性」などといったようにターゲットを細かく絞り込むことができます。

ターゲットが「20代後半~30代の女性」と「高級志向でワンランク上を目指す30代以上の女性」では、デザインのテイストもガラッと変わってくるのでターゲット情報は重要になります。

バナーの訴求内容

「このバナーが伝えたいこと!」になります。この軸がずれるとデザインが変わってきます。
例えば、①「3,000円が今だけお試し980円!」になることを一番強調したいのか、それとも②「1本で4役カバーできてコスパ!」なのか、または③「1本で24hうるおう」の効果の部分が一番伝えたいのか….どれも伝えたいことには変わりないのですが、前にも書きましたがあれもこれも伝えたい載せたいでは文字数が多くなってしまい、結果、見づらい→読まれない→伝わらない→効果がないバナーになってしまいます。

何を一番伝えたいかです。もし①が一番訴求したい点だとすれば「3,000円が今だけお試し980円!」が目立つようにデザインしますし、②が一番訴求したい点だとすれば「1本で4役カバーできてコスパ!」を強調するデザインになるようにします。

デザイナーは訴求内容を確認して、上手く伝わるように強弱バランスを考えてデザインするため、訴求したいことが複数かある場合は優先順位も合せて伝えるようにしましょう。

例)

1番訴求したい点→もっちりハリツヤ肌になれる(効果)
次に訴求したい点→(これ1本で化粧水、乳液、美容液、クリームの)4役がカバーできる点。24h潤いが持続すること
3番目に訴求したい点→価格がかなりプライスダウンしている

使用目的

・google広告用(gdnバナー)
・Yahoo!広告用バナー(ydnバナー)
・サイト内で使用
・ECサイト内での使用
・Facebook広告用…

などバナーの使用目的です。
広告バナーの場合仕様も伝えます。

例)

Google AdWordsディスプレイネットワーク(gdnバナー)
150kb以内
ファイル形式( GIF、JPG、PNG)

掲載ページURL/リンク先URL

サイト内で使用する場合、周囲のデザインの確認のために掲載元のページと、リンク先のページのURLも伝えてください。掲載するページを知らずにバナーを作ると、バナーを実際にページに張り付けた際に周囲と合わずにやたらと浮いてしまったり、逆に他のバナーが目立っていた為埋もれてしまい全然目立たなくなってしまったり・・・それを避けるためにもページ全体のバランスを見るために必要です。

またリンク先のページのURLもバナーのデザインとリンク先のデザインを合わせたるために必要です。バナーをクリックしたら、内容は同じだけど、全然違うテイストのデザインのページに飛んだら…ユーザーはとまどいや違和感を感じるかもしれません。バナーの内容とリンク先の内容がずれていてないかも確認できます。


 

いかがでしたでしょうか。バナー1つ依頼するにも準備するものが多くて大変だな…と思われたでしょうか。時間がないから全部プロにお任せしたいのに・・・と思われるでしょうか。

「デザインはプロであるデザイナーに全て任せたい。」と思っている場合でも、そのバナーで最も伝えたいことや、商品の特徴、ターゲットなどの情報についてはデザイナーにはそこまではわかりません。

バナーはクリックされる為に作るのであり、見てもらいたいページの「入り口」となる重要なエリアです。より効果的なバナーを作るためにはできるだけ詳細に伝えるようにしましょう。

まとめ

上に書いたバナーの依頼情報をまとめます。

1.バナーのサイズ
幅300px × 高250px

2.バナー内に掲載する文言
上から目立たせたい順
大   メインキャッチ:もっちりハリツヤ肌
↓     サブキャッチ:24h潤い持続、これ1本でok
小  オールインワンクリーム(商品名)
販売価格3,000円税込→お試し980円税込
詳しくはこちら(ボタン)

3.バナー内に掲載する画像
image1.jpg……メイン画像、一番大きく(商品写真)
image2.jpg……サブ画像(女性の写真)
image3.jpg……背景(水の波紋の写真)
logo.png………ロゴ 四隅に掲載

4.デザインのイメージを伝える
・デザインの参考URL
http://nonamedesign.info/banner/?p=1349
http://nonamedesign.info/banner/?p=1385

・デザインの雰囲気/イメージカラー
デザインの雰囲気・・・・・・みずみずしくうるいおを連想するイメージ
カラー・・・・・・・白をベース さわやかなブルー系を入れる(白×ブルー)

5.その他のバナー情報
・ターゲット層
20代後半~30代の女性

・バナーの訴求内容
1番訴求したい点→もっちりハリツヤ肌になれる(効果)
次に訴求したい点→(これ1本で化粧水、乳液、美容液、クリームの)4役がカバーできる点。24h潤いが持続すること
3番目に訴求したい点→価格がかなりプライスダウンしている

・使用目的
google広告用(gdnバナー)
150kb以内
ファイル形式( GIF、JPG、PNG)

・リンク先URL
http://www.〇〇〇〇〇.jp/〇〇〇〇.html

 

是非バナーを依頼する際の参考にしていただけると幸いです。

バナラボでは、バナーの準備に迷われた場合はお気軽にご相談ください。
良いバナーができるように一緒に考えていきましょう。

パッと簡単にバナー画像のサイズを調べる方法

ブラウザ上の画像のサイズを測れる便利なアドオンはいくつも存在しますが、アドオンをインストールしなくても簡単にブラウザ上の画像のサイズを調べる方法です。

WEB上の画像のサイズの調べ方

webブラウザ毎に方法が異なりますので、ブラウザ別に説明してきますね。

 

Firefoxの場合(簡単)

1、調べたい画像ファイルの上で右クリック→「画像の情報を表示」をクリック
2、画像サイズが表示されます

Firefox画像サイズの調べ方

IEの場合(簡単)

1、調べたい画像ファイルの上で右クリック→「プロパティ」をクリック
2、画像サイズが表示されます

IE画像サイズの調べ方

Google Chormeの場合

1、調べたい画像ファイルの上で右クリック→「検証」をクリック

クローム画像サイズのはかり方

2、「Elements」タブに画像のソースが青く表示されます。図③の「width=”800″ height=”320″」とあるのが画像の元のサイズです。図②の数値が表示サイズです。注意が必要なのは、レスポンシブサイトの場合は図②の数値がブラウザの大きさによって変わってきてしまうということです。ここの数値は今実際に表示されている画像のサイズということなりますので注意してください。

クローム画像サイズのはかり方

「Elements」のソースに「width=”” height=””」がない場合もあります。(その場合でも図②は表示されています。)
元の画像サイズを調べるには画像を保存してサイズを調べます。
Chormeは画像を右クリックで保存ができません。そこで下記の方法で画像を保存することができます。

1、調べたい画像ファイルの上で右クリック→「検証」をクリック
2、今度は先ほどの「Elements」の横並びにある①「Application」タブを見ます。すると②「Frames」のImages に Web ページで読み込まれている画像が全部一覧で表示されています。その中から該当の画像を見つけると右に表示されるので、右クリックで③[Save]します。ローカルの適当なところに保存したら、続きは下の「パソコン上の画像のサイズのはかり方」をみてください↓

クローム画像サイズのはかり方

Safariの場合(簡単)

1、調べたい画像ファイルの上で右クリック→「イメージを別名で保存」をクリック
2、ローカルの適当なところに保存したら、続きは下の「パソコン上の画像のサイズのはかり方」をみてください↓

Safari画像の保存

 

パソコン上の画像のサイズのはかり方

1、計りたい画像ファイルの上で右クリック
2、windows「プロパティ」、Mac「情報を見る」をクリック
3、windowsは「詳細」又は「概要」タブをクリック
イメージのところに画像サイズが表示されています。

PC上の画像のサイズ

以上、簡単に画像のサイズを調べる方法でした。

Yahoo!ディスプレイアドネットワーク YDNバナーのサイズ【2017年最新】

Yahoo!ディスプレイアドネットワーク(YDN)広告用のバナーのサイズです。
【2017年10月時点最新情報】バナーを準備する前の参考にどうぞ!

ディスプレイ広告バナーのサイズ

PC/タブレット

300×250/600×500(※新サイズ2017年7月より)
468×60
728×90
160×600

スマートフォン

300×250/600×500(※新サイズ2017年7月より)
320×100/640×200(※新サイズ2017年7月より)
320×50/640×100(※新サイズ2017年7月より)

最大サイズ

150 KB
※バナー1点150KB以下にしましょう。

ファイル形式

広告フォーマット .jpg .jpeg .gif .png

「600×500」「640×200」「640×100」ピクセルサイズの画像は2017年7月より配信開始になった新しい画像サイズです。それぞれ、従来の「300×250」「320×100」「320×50」ピクセルサイズの2倍サイズになります。

従来のサイズの画像と、2倍サイズの画像の両方を入稿している場合は、どちらかのサイズの画像をランダムに表示するためデバイスによっては意図した通りに表示されない可能性もあるので2倍サイズの画像を入稿した場合は、従来サイズの画像を削除するようにしましょう。

 

ということで、yahoo広告のバナーのサイズは6種類作ればよいと言う事になります。(インフィード広告やレスポンシブ広告を除く)

実際のサイズはこちらです。※画像はPCで見た際の実寸です。

bnr_yahoo1

バナーサイズ_yahoo2

スマホ専用
bnr_yahoo3

yahooのバナー広告のサイズの種類は現在6種類です。
今後変更になる可能性もあるので、その際は随時最新に更新していきます。

バナラボでは、広告用バナーもお得なセット制作していますので、もしバナーの外部依頼をお考えの際にはご検討下さい。
yahoo広告用バナー(YDN)のバナー制作はこちら

googleアドワーズディスプレイネットワーク GDNバナーのサイズ【2017年最新】

Google AdWordsディスプレイネットワーク(GDN)広告用のバナーのサイズです。
【2017年10月時点最新情報】バナーを準備する前の参考にどうぞ!

イメージ広告バナーのサイズ

※静止画バナー(アニメーション以外)
まずは全サイズ一覧から

スクエアとレクタングル

200×200     スクエア(小)
240×400     レクタングル(縦長)
250×250     スクエア
250×360     トリプル ワイドスクリーン
300×250     レクタングル
336×280     レクタングル(大)
580×400     ネットボード

スカイスクレイパー

120×600     スカイスクレイパー
160×600     ワイド スカイスクレイパー
300×600     ハーフページ広告
300×1,050     縦

ビッグバナー

468×60     バナー
728×90     ビッグバナー
930×180     トップバナー
970×90     ラージ ビッグバナー
970×250 ビルボード
980×120     パノラマ

モバイル

300×50     モバイルバナー
320×50     モバイルバナー
320×100     モバイルバナー(大)

最大サイズ

150 KB
※バナー1点150KB以下にしましょう。

ファイル形式

広告フォーマット    GIF、JPG、PNG

優先して作ると良いサイズ

google広告のバナーのサイズは実に多いですね。
広告の効果を上げる為には全てのサイズを作るのが理想的かもしれませんが、制作にかかる時間や費用を考えると全てのサイズ準備するのは難しかったり、レスポンシブ広告(後で記載)も視野に入れると一概にそうともいえないかもしれません。

そこで優先して作ると良いサイズをまとめてみましたので、これから広告バナーを作る方への参考にしてみてください。

理由:
・表示回数が多い(採用サイトが多い)
・GDN、YDNと共通のサイズ(googleとyahoo両方に広告を出す、もしくは今後出す予定。等)
・PC/スマホ共通サイズ

「300×250」「336×280」 必須
唯一YDN/GDN、PC/スマホ/タブレット全てに対応しているサイズで、採用されているサイトも多いサイズです。

※画像はPCで見た際の実寸です。

300*250

「336×280」は「300×250」と比率が全く同じ為、サイズの大きい336×280を先に作り、縮小するだけで手間がかからず2サイズ作成することができます。

次に、
「728×90」「160×600」「468×60」

728*90

「120×600」は「160×600」より少し幅を小さくするだけなので一緒に作ると良いですね。

728×90はよくヘッダーやフッターエリアに表示されたりするため、目に留まりやすいサイズです。
160×600はサイドのスペースに縦長に表示されたりするのを見かけると思います。縦長に大きいのでこちらも目立つサイズです。468×60はコンテンツとコンテンツの間に表示されたりします。

そしてスマホ用なら、
「320×100」「320×50」

bnr_size3

こちらも横のサイズは同じで縦のサイズが倍になっただけなのでリサイズしやすいです。

優先サイズまとめ(7サイズ)

300×250
336×280
728×90
160×600
468×60
320×50(スマホ)
320×100(スマホ)

優先サイズとして7つのサイズを挙げましたが、特に300×250などは、表示回数が多いということはそれだけライバルも多いことになります。上記7サイズは準備しておいて、余裕があればプラスでニッチなサイズも作っておくことが効果的かもしれません。

縦サイズが同じで横サイズだけ変更すればOKや、同じ比率なので拡大or縮小するだけでOKなど、リサイズしやすいサイズもあるので、自分で作られる方は一緒に作っておくと良いかもしれませんね。

 

バナーサイズを決める前に…

レスポンシブ広告も考える

ディスプレイ ネットワークのあらゆる広告枠に対応できる「レスポンシブ広告」というものがあります。バナーサイズを考える際にこのレスポンシブ広告も視野に入れると良いかと思います。
全サイズのバナーを用意するのではなく、レスポンシブ広告も出して対応できないサイズをバナー画像で準備する方法もあります。イメージ広告のメリット、レスポンシブ広告のメリット、それぞれ違った良さがあるので、バナー広告の内容や特性をよく考えて、どの方法が自社に合っていて効果的かを検討するとよいと思います。

レスポンシブ広告とは別ウインドウリンク(google公式サイトリンク)

最後に

googleのバナー広告のサイズの種類は沢山ありますが、全てのサイズを準備することが必ずしも良いとは限りません。
サイズがわからなかったり迷われた場合は上の7サイズを参考にしてみてください。

バナラボでは、広告用バナーもお得なセット制作していますので、もしバナーの外部依頼をお考えの際にはご検討下さい。
アドワーズ広告用バナー(GDN)のバナー制作はこちら

バナーとは?

webに携わっているとバナーという言葉をよく耳にすると思います。
バナーとは一体なんでしょう。ちなみにバナーは英語で(Banner)と書きます。

辞書で調べてみると、

banner
(2 本の柱につけてスローガンなどを書き、行進の先頭に立つ)旗じるし、
(広告・宣伝用などの)垂れ幕、横断幕、(国旗・軍旗・校旗などの)旗、(昔の君主・領主などの)旗、
のぼり、旗じるし、表象

引用:weblio

とあります。
「旗じるし」ということで、よくファミレス、回転寿司屋などの実店舗のわきにあるあれですね。
あの「のぼり」「垂れ幕」のこともバナーということです。

のぼり旗の写真

 

ではwebで使うときの「バナー」とは何でしょうか。
ウェブサイト上で使うバナーも同じで、ウェブページ上の「のぼり」「旗」のような存在です。
主にウェブ上の広告・宣伝用の画像のことを言います。
大抵リンクが張られていてウェブサイトへのハイパーリンク用に利用されています。

バナーは主に四角などの形で囲われた画像でできていて、文字や写真がレイアウトされてます。
このような感じですね。(手書きで少々わかりにくですが…)

ポータルサイトの広告バナー

大抵のバナーはそのバナー画像をクリックすれば、
他のページにリンク(移動)されるようになっています。
いわば、その先のページに誘導される為の最初の入り口ともいえます。

広告用のバナーではなく、サイト内の別コンテンツに移動する為のリンク画像。これもまたバナーといいます。例えばサイト内にある「採用情報はこちら」「制作実績はこちら」など…

例)

サイト内バナー

 

大まかにいうと、
バナーとは他のページ(場所)にジャンプするための画像といったところでしょうか。

 

バナーの役割とは?

広告・宣伝用のバナー画像の場合は、「いかにクリックしてもらえるか」がバナーの大きな役割になってきますが、すべてのバナーがこれに当てはまるわけではありません。サイト内に置くページ移動のバナーの場合は「いかにクリックしてもらえるか」という役割とは少し異なってきます。

周りとのデザインバランスや、他にもっと目立たせたいバナーがあるときはそのバナーとのバランスも考慮してデザインする必要があります。

一概にに「バナーの役割」といっても、そのバナーの目的によって変わってきます。
バナーのデザインを考えるときは、その目的をよく考えてその目的に合ったデザインを考える必要があります。

 

ちなみにバナーのサイズについて

サイト内に置くバナーのサイズには特に決まりはなく、サイトのスペースやバランスなどをみて制作者の自由で作ればよいものです。web広告バナーについては、広告の出稿先によってサイズが決められているので、指定のサイズで作る必要があります。

バナーには国際標準規格というものがあり、
実はバナー広告は、国際標準規格のバナーサイズに合わせて決められている場合がほとんどです。

IAB Interactive Advertising Bureau(IAB) インターネット広告協会によって定められていて、
定期的に見直しがされているようなので今後変わる可能性もあります。

参考:バナーサイズの豆知識 | 国際標準規格別ウインドウリンク

 

今回は「バナーとはなんぞや?」バナーの意味について改めて考えてみました。
おまけ:たまに「バーナー」という表記を見かけるがあるがこれは誤った記載です。

バナー制作ならバナラボにお任せください。