バナーサイズ

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

バナーデザインの参考サイト集めました

バナーのデザインを考えるときに参考になる、バナーデザインのリンク集を集めました。

サイズ別、カラー別、業種別、テイスト別など、絞り込んで探すことができ、とても便利です。

社内でデザインのすり合わせをする際、外部にバナー依頼をする際など、言葉のみで希望のデザインを伝えてしまうと抽象的な表現になりやすいため、人よってはイメージに誤差が生まれてしまう場合があります。思い描いていたイメージを言葉で伝えることは思っていた以上に難しい場合があります。

参考デザインとしてURLを提示することでイメージの共有がしやすくお勧めです。



Retrobanner レトロバナー

http://retrobanner.net/別ウインドウリンク

  • サイズ、色、業種、テイストなどから探すことができます。
    バナーをクリックすると、そのバナーで使われている色も抽出することができます。

blog_img1



BANNER LINKS バナーリンクス

http://nonamedesign.info/banner/別ウインドウリンク
サイズ、カテゴリー、カラーなどから探すことができます。

blog_img2



バナーデザインアーカイブ

http://banner.keizine.net/別ウインドウリンク

  • サイズ、色、業種などから探すことができます。
  • バナーをクリックすると、下に同じサイズのバナーがランダムで表示されます。

blog_img3



BANNER MATOME

http://bannermatome.com/別ウインドウリンク

  • 業種別に加え、表現別に探すこともできます。

blog_img4

 

見やすいくて使いやすいバナーデザインのまとめサイトをご紹介しました。


一度の沢山のバナーデザインを比較して見れるのが良い所です。
同じジャンルのバナー、色使い、レイアウトなどデザインの参考になる部分が沢山あります。

眺めているだけでも楽しく、新たな発見もありデザインの勉強にもなります。
是非参考にしてみてください。