バナー作成

LINE広告バナーサイズまとめ【2020年版最新】

LINE広告(旧LINE Ads Platform) は、オンラインで手軽に申し込みができ、少額からの出稿も可能になった為、参入企業も増えています。

幅広い年齢層に利用されており、細かいターゲティング設定ができ、 他媒体ではリーチが難しいユーザー層へのアプローチも可能なため、注目されているSNS広告です。

この記事では、LINE広告(旧LINE Ads Platform)用のクリエイティブを制作するときに最低限必要な情報を、要点だけを抑えて簡潔にまとめました。

※LINE広告のクリエイティブには、大きく分けて動画と静止画がありますが、
今回は静止画のみに絞って記載しています。

クリエイティブのサイズ

静止画では2つのサイズ

  • Card(カード) 1200x628px
  • Square(スクエア) 1080x1080px

広告配信面

サイズ/広告配信面
Smart
Channel
タイム
ライン
LINE
NEWS
LINE
マンガ
LINE
Blog
LINE
ポイント
LINE
ショッピング
Card(横長)
1200×628
Square(正方形)
1080×1080

※2019年8月にはLINE本体アプリだけでなく、「LINE広告ネットワーク(旧:LINE Ads Platform for Publishers) 」と呼ばれる、 LINE独自の広告ネ ネットワークにも広告配信が可能となりました。今後もLINEのサービス拡大に伴って広告配信対象枠は増えていくと思われます。

ファイル形式

  • jpg
  • png

容量サイズ

5MB以内

必須項目

主体者の表記

広告の主体者の明示常に広告の主体を明示し、画像の場合は視認可能な大きさで表示。

テキスト20%ルールあり

文字の割合を画像全体の20%以内に収める ( ロゴはテキスト対象外

※画像を5×5で25マスで分割し、5マス以内であれば掲載可能
※画像には、テキストを含まないデザインが推奨されています。

YDNバナーサイズまとめ【2020年版最新】

gdnバナーサイズ

Yahoo!ディスプレイアドネットワーク(YDN)のバナー制作について、要点を抑えて簡潔にまとめました。

YDN広告バナーサイズ

※横×縦/ピクセルサイズ

サイズ
PC SP
600×500(PC/SP)★
300×250(PC/SP)★
468×60(PC)★  
728×90(PC)★  
160×600(PC)★  
640×200 (SP)★  
320×100 (SP)★  
640×100 (SP)★  
320×50(SP)★  

おすすめのYDNサイズ

はおすすめのサイズです。 ※バナラボのYDN9点セットは★のサイズです。

特に600×500は準備した方がよいといわれています。
600×500と300×250は同じ比率のため、先に大きいサイズの600×500を作成するのがおすすめです。それを縮小するだけで簡単に300×250が作成できます。

同じ比率の画像

下記のサイズは
同じ比率で2倍サイズ
にあたります。

2倍のサイズ
300×250→600×500
320×100→640×100
320×50→640×200

この2種類のサイズの画像が入稿可能になったことにより、デバイスによって発生していた余白を解消し、多様化するデバイスサイズにあわせて画像を伸縮表示します。

※2倍サイズの画像を入稿した場合は、従来サイズの画像を削除することをおすすめします。

 

バナー容量

  • バナー広告:3MBまで
    ※ファイルサイズが150KBを超える場合、入稿時に圧縮される為150KBまでがおすすめ

拡張子(形式)

  • JPG
  • PNG
  • GIF

YDNレスポンシブ広告

  • 1200×628
  • 300×300 
  • ロゴ 180×180 ※任意。入稿の際は、透過背景禁止、画像の枠線禁止、角丸禁止

バナー容量

レスポンシブ広告:1200×628 3MBまで300×300 150KBまで
ロゴ:3MBまで

レスポンシブディスプレイ広告における注意点

  • 掲載面に応じて画像の両端がトリミングされる場合がある為(各辺最大5%)
    必要な要素はその中に収めるようにする
  • 文字の割合を画像全体の20%以内に収めるテキスト20%ルールはなし

トリミング確認ツール

レイアウトを最適化するために、自動的にトリミングされる場合があります。
トリミングの影響を受けても、必要な文字などがきちんと表示されるように、バナー作成の際にトリミングの範囲を意識して制作しましょう。

以下のツールを使って入稿前に事前にどのように表示されるか確認できます。

画像広告のスマートフォン表示シミュレーター

バナー内必須要素

  • 主体者表記

会社名、ブランド名、商品名、サービス名のいずれかを入力

バナーデザインにお困りの際は…

バナラボは、実績10年以上のベテランデザイナーが、バナーを作成いたします。YDNバナー制作にお困りの際は是非ご相談ください。

ydnバナー作成

きれいなバナー=(イコール)クリックされるバナーではない


デザインがステキなバナー、かっこいいバナー、今風のおしゃれなバナーが沢山クリックされるとは限りません。イコールではありません。逆に あえて少しダサいバナーや、素人っぽさを出したバナーのほうが良い反応がでることもあるのです。

ではどんなバナーデザインが良いのでしょうか。

バナーを制作する際にどんなデザインにしようかとバナーデザイン集を眺めていると、今トレンドのデザインや、洗練されたオシャレなバナーを見て、いいなぁうちのバナーもこんな風に…と思ってしまったりもしますが、ちょっと待ってください。デザインのイメージを安易に決めるのはNGです。

かっこよくてオシャレな今風バナーだけど、
肝心なことを伝えられていない。
サービス(商品)に全く合っていない。では意味がありません。

多くのバナーの目的は、
いかにそのサービス(商品)に興味のある人にクリックしてもらえるか です。(例外もあります。)

バナーを作る時に、まずこの基本を忘れずに念頭に置くことが大切です。


洗練された無機質なデザインではなく、その商品の良さが伝わる暖かみのあるデザインのほうが合っているかもしれません。

おしゃれなかごに野菜がきれいにまとまっている写真より、生産者の顔が映っていて、みずみずしい新鮮さがあふれているどアップの写真のほうが良いかもしれません。

デザイン次第で、その魅力を伝えることのできるかできないか左右されます。そのデザインが商品(サービス)とミスマッチでは何の意味もありません。

バナーのデザインを考える時に まず 、自社のサービス(商品)の魅力を最大限に伝えるには、どんなデザインが良いかを考えてみることが大切です。

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

バナーを外部に依頼する時、どのように頼めば良いかわからないという方もいると思います。

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

せっかくプロに頼むのだから、希望通りの満足のいく仕上がりになって欲しいですよね。

今回は、外部に依頼する際のバナーの上手な依頼方法ついて書きたいと思います。

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

1. バナーのサイズ

まずは作りたいバナーのサイズです。
バナーのサイズは幅◯ピクセル(px)×高さ◯ ピクセル(px)単位で伝えます。

バナーのサイズがpixelでわからない場合、例えば、「サイトの今このバナーがある部分に差し替えでバナーを作りたいんだよね。」や、「(サイト上の)この部分に入るバナーが作りたいんだよね。」といったように、サイト上にある画像のサイズを知りたい場合は簡単にサイズを測る方法がありますので、下の記事を参考にしてみてください。

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

たいていの場合は、先に「幅」次に「高さ」を記載しますが、まれに高さを先に記載される方もいるので、出来上がりのサイズが逆になってしまわないように念のため幅、高さの記入も忘れないように記載しましょう。

サイズの例幅300px × 高250px

※バナラボでは、バナーをご依頼頂いた際に、サイズがわからない、調べてほしいなどの際はこちらでお調べいたしますのでお気軽にお問い合わせください。

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

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

どんな文言にするか

これはバナーを作る上で非常に重要な要素です。
バナーは小さい限られたスペースで表現しないといけないので、一つ一つの要素が非常に重要になってきます。

あれもこれも伝えたいこれも載せたいとなり、最終的に文字数が多くなってしまったというのはNGです。結局何を伝えたいかわからないバナーになってしまいます。

まず小さいスペースに、文字がたくさんある時点で読んでもらいにくいと思った方が良いです。
バナーは視認性がとても重要なのです。

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

コピーの例:

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

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

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

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

  • 商品の画像
  • ロゴ
  • イメージ画像、イラスト等

商品の画像

商品の画像を掲載する場合は、商品画像を準備します。
なるべく解像度が高いものを用意します。サイズが小さいと、画像がギザギザに荒くなってしまいます。

背景のトリミングや、レタッチ(画像の色の補正や合成などの画像の修整や加工作業のこと)は大抵はデザイナー側が行うため、そのまま送って構いません。

また複数のショットで迷った場合は、全て送ってデザイナーに相談すれば、
他とのバランスを見て一番良い画像を選定してくれると思います。

ロゴ画像

ロゴを掲載する場合は、ロゴ画像を準備します。
イラストレーターのaiデータ、photoshopのpsdデータ、その他png、jpgデータ、pdfデータ等で送ります。

ロゴのレギュレーションがある場合は、そちらも一緒に送ります。

その他の掲載画像(イメージ素材やイラスト等)

今回のバナーに合ったイメージ的な素材写真や、イラストが欲しい場合、ストックフォトなどで探します。

イメージ素材の探し方

今回は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に加え、デザインの雰囲気やイメージがカラーがあれば文章で伝えます。ここでもズレが生じないように、できるだけ具体的に伝えるようにしましょう。

デザインの雰囲気などの伝え方例:

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

その他レイアウトの指示

レイアウトはデザイナーにお任せ。という場合も多いですが、もしレイアウトの指示など細かい希望がある場合は併せて伝えます。

レイアウトは文章だと伝えにくいので、パワーポイントやエクセル等で簡易的な図を作って送るとよいでしょう。また、手書きのほうが良い場合は、手書きで書いて写メやスキャンしたものを送るのも良いです。

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を伝えます。
サイト内で使用する場合、掲載ページも伝えます。
デザイン確認のため重要です。

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

広告バナーの場合は、リンク先のランディングページとトンマナを合わせるために必要だったり、ランディングページの内容を知るためにも必要です。

バナーをクリックしたら、全然違うテイストのデザインのページに飛んだら…ユーザーはとまどいや違和感を感じ信頼性もかけるかもしれません。(あえてランディングページのデザインは参照せず、効果を測定するために別のデザインに変える場合もあります)


いかがでしたでしょうか。

バナー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

最後まで読んでいただきありがとうございます!
是非バナーを依頼する際の参考にしていただけると幸いです。

バナラボでは、初めてバナーを依頼する方にもバナー依頼がしやすいようにヒアリングシートを用意しています。そちらに沿って準備するだけでバナー依頼ができます。是非バナラボをご検討ください。

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