バナーのサイズは何でもいい？適切な大きさや画像作成時の注意点を紹介
執筆者
マーケティングサポート「バンソウ」のメディア管理人
株式会社クリエイティブバンクのマーケティングサポート「バンソウ」のメディア管理人。得意分野は、SEO全般・サイト分析・オウンドメディア・コンテンツマーケティング。バンソウはクライアント様のBtoBマーケティングをサポートするサービスです。詳しい内容はこちらをご覧ください。
バナーサイズとは
そもそもバナーとは、Webサイトなどに設置されている画像の中で、商品やサービスの紹介や宣伝を行う目的で作られているものを指します。
バナーにはリンクが設定されており、ユーザーがバナーをクリックすることで、特定のページに遷移させられます。そのため、自社でバナーを設置する際は、商品の購入ページやお問い合わせページなど、自社でコンバージョン（CV）としているページに促せるようバナーを設置するとよいでしょう。
バナーサイズとは、このようなバナーを作成する際に設定する大きさを指し、一般的にピクセル（px）単位で表します。
縦長のバナーや横長のバナーなどさまざまな大きさで設定可能ですが、バナーの設置場所によってはサイズが指定されていたり、ユーザーにとって見やすいサイズが異なったりするため、バナーのデザインだけでなく、サイズも意識することが大切です。
バナーをWebサイトに含む目的
先述のとおり、バナーには「旗」や「のぼり」といった意味合いが含まれており、自社の商品やサービスをアピールする役割を持ちます。
商品の購入ページなどにユーザーを誘導する際は、テキストにリンクを設置する方法もあげられますが、バナーに比べて目立ちにくいため、ユーザーが気づかなかったり、興味を持たなかったりすることから、クリックを促せない可能性があります。
バナーを設置すると、ページ内のテキストと区別できることに加え、デザイン次第ではユーザーの印象に残りやすいバナーを作成できるため、誘導先ページの存在の認知度向上やより高い宣伝効果が期待できます。
バナーサイズを意識する重要性
バナーを設置する際は適切なサイズを意識することが大切です。例えば、本サイトの記事ページ内には、以下のように縦長のバナーが設置されています。
このような縦長のバナーは、ページ内でも大きく表示できるため目立ちやすいです。しかし、記事の本文中に設置してしまうと、ユーザー側でスクロールする手間が発生するなどから、可読性をはじめとしたユーザビリティが低下してしまう可能性があります。
そのため、ただ大きなバナーを本文中に設置するのではなく、設置場所に合わせてユーザーが見やすいバナーサイズを意識して設置することで、ページの見やすさを維持しながらユーザーの興味を引けるようになるでしょう。
主なバナーサイズの種類
ここまで、バナーを設置する際はサイズを意識する重要性についてご紹介しました。ここからは、主にWebページで使用されるバナーのサイズをご紹介します。
120 × 600
120 × 600は、縦に細長いバナーです。主にPCでの画面端（サイドバー）に表示されます。縦に長いため、ユーザーが本文を読んでいても存在感を示しやすい点が特長です。反対に、サイドバーを表示しないスマートフォン用のページでは使いづらさを感じることがあります。
また、画像の横幅が小さく、横書きのテキストを長く記述してしまうと、バナー掲載時に読みづらく感じる場合があるため、こまめに改行を入れたり、短めの文章を意識したりするとよいでしょう。
250 × 250
250 × 250は、正方形のバナーです。正方形のためページ上のさまざまな位置に設置しやすく、PCでもスマートフォンでも見やすいため、柔軟に利用できるでしょう。また、正方形のバナーはInstagramなどのSNS広告用バナーとしてもよく利用されているため、デザインを流用しやすい点も特長です。
しかし、縦長や横長のバナーに比べるとコンパクトに表示されてしまうため、目立たせたい場合はあわせて別のバナーも設置することをおすすめします。
300 × 250
300 × 250は、正方形よりも少し横に長いバナーです。Googleのディスプレイ広告（GDN）でも使用できるサイズで、サイドバーをはじめページ内のさまざまな場所に設置できます。
正方形と同様に、縦長や横長のバナーに比べるとインパクトが小さくなる可能性もあるため、バナーを作成する際はGIF形式のアニメーションを加えたり、目立つ色を使用したりするといった工夫もおすすめです。
336 × 280
336 × 280は、300 × 250よりも一回り大きなサイズのバナーです。300 × 250よりも目立つサイズのため、より多くの情報を含められるでしょう。なお、336 × 280はGoogleのディスプレイ広告に対応しており、一般的によく利用されているサイズです。
Webページ内で使用する際は、サイドバーに入りきらない可能性があるため、本文中に含めることをおすすめします。
468 × 60
468 × 60は、横長のバナーです。ページの本文中によく設置され、バナーにおいて一般的なサイズとして知られています。
468 × 60のバナーはさまざまなWebサイトでも多く使用されているため、どの程度の情報量にすればよいのか、どのようなデザインやテキストを含めればよいのかなどの参考となるバナーが豊富にあることから、作成するハードルが低めな点も特長です。
728 × 90
728 × 90は、468 × 60よりも大きなサイズの横長バナーです。横長にページを表示できるPCで表示することで、468 × 60よりも強いインパクトを与えられるため、商品購入や問い合わせなど、特に強調したいページのリンクを張る際におすすめです。
画像を作成する際も、バナーサイズが大きいことから写真やイラスト、テキストなどさまざまな素材を組み合わせやすいため、ユーザーの印象に残るデザインを意識しながら作成するとよいでしょう。
バナーを保存する際のファイル形式
ここまで、主にWebページや広告などで使用されるバナーサイズについてご紹介しました。バナー画像は、ファイル形式によっても画質や容量などが異なります。バナーを作成する際は、サイズとあわせて以下のファイル形式についても押さえておきましょう。
JPEG
JPEGは最も一般的な画像の形式で、約1,670万色の色を表現できます。色数の多い写真や画像の保存に適しており、容量を大幅に削減した保存が可能なため、Webページへアップロードした際も、読み込みに時間がかからない点が特長です。
一方で、JPEGは非可逆圧縮という方法で画像を圧縮するファイル形式のため、一度サイズを縮小した際に元の画質へ戻せません。そのため、JPEG形式の画像の編集や保存を繰り返すと、画質の劣化が進む点に注意が必要です。
PNG
PNGは、JPEGと同様に最大約1,670万色の色を表現できます。JPEGと異なり画像の圧縮時には可逆圧縮という方法を用いているため、画像の編集や保存を繰り返しても画質が劣化しない点が特長です。
しかし、可逆圧縮はファイルの容量が大きくなるため、サイズの大きなバナーや多くの色数を使用した画像などは読み込みに時間がかかる可能性があります。
GIF
GIFはPNGと同様に可逆圧縮が可能なファイル形式です。JPEGやPNGとは異なりアニメーションのついた画像を保存できる点が強みなため、動きのあるバナーを作成する際はGIF形式で保存しましょう。
ただし、GIFではアニメーションをつけられる一方で、使用できる色数が256色と少ないため、グラデーションなど複雑な色合いを表現できない点に注意が必要です。
BMP
BMPは、Windowsで標準とされる画像のファイル形式です。BMPは保存時に圧縮を行わないため、編集時の画像の色合いなどをそのまま再現できるものの、ファイル容量が大きくなることから、Webサイトへのアップロードなどに対応していない場合もあります。
そのため、BMPは編集中の画像の保存時に使用し、Webサイトへのアップロード用にはここまでにご紹介したJPEGやPNG、GIFの形式で保存するのがおすすめです。
バナーの作成方法
ここまで、主なバナーのサイズや保存形式についてご紹介しました。実際にバナーを作る際は、自身で作る方法と外部に依頼する方法の2種類があります。
自分で作成する
「Adobe Photoshop」や「Adobe Illustrator」などの画像編集ツールを用いて自分で作成することで、コストを抑えてバナーを作れます。中には「Canva」など無料で使用できる高機能の画像編集ツールもあるため、自分に合ったツールを用いて編集するとよいでしょう。
ただし、これらの画像編集ツールを使いこなすには専門的な知識や技術が必要となるため、初心者には難しく感じたり、イメージどおりのバナーが作成できなかったりする場合があります。
デザイン会社などに依頼する
自力での作成が難しい場合や、社内で画像編集のスキルを持つ従業員がいない場合などは、外部のデザイン会社やデザイナーなどに依頼する方法もあげられます。
プロによって作成されるため、自身の要望やイメージに沿ってクオリティの高いバナーを作成できます。ただし、依頼料だけでなく、デザイン会社との打ち合わせや修正依頼などのやりとりが発生するため、時間や手間といったコストがかかる点も念頭に置くとよいでしょう。
バナーを自作する手順
先述のとおり、バナーを作成する際は自分で作成する方法と外部に依頼する方法の2種類があります。自分で作成する際はいきなり画像編集ツールを開いて作り始めるのではなく、以下のような手順に沿って作成することをおすすめします。
1.訴求内容やテキストを決める
初めに、どのような訴求を行うのか、どのようなテキストをバナーに含めるのかを検討します。バナーは大きさが限られているため、なるべく簡潔にテキストをまとめつつ、ユーザーに興味を持たせる必要があります。
商品のキャッチコピーや、「3カ月で売上120％UP」などの数字を含めたテキスト、「今だけ無料キャンペーン中」など、インパクトのある内容を心がけるとよいでしょう。
2.素材を集める
バナーに含めるテキストが決まったら、必要な素材を集めます。バナーの背景画像や人物写真、イラスト、枠の装飾、ボタンなどの素材は、「Shutterstock」や「Adobe Stock」などのストックフォトのサイトや、フリー素材の提供サイトなどからダウンロードしたり、自作したりする方法があげられます。
外部サイトの素材を使用する際は、あらかじめ各サイトで提示されている利用規約を必ずご確認ください。
3.画像を作成する
素材が集まったら、画像編集ツールを用いて画像を作成します。BtoB向けのセミナーや化粧品、子ども向けの食品など、商品やサービスによって適切なデザイン・レイアウトは異なります。自社の商品やサービスとかけ離れたデザインにならないよう意識しながら作るとよいでしょう。
なお、「Meta広告ライブラリ」「BANNER LIBRARY」などのサイトでは、実際に使われているバナーのデザインをジャンル別で確認できます。アイデアが浮かばない場合は、これらのサイトを参考にするのもおすすめです。
バナーを作る際に確認しておくこと
ここまで、自身でバナーを作成する際の基本的な手順をご紹介しました。バナーを作成する際は、手順とあわせて、次にご紹介する確認事項も見ておくことをおすすめします。
素材の画質がよいか
先ほどご紹介したように、JPEG形式でバナー画像を保存した際は、特に画質に気をつけましょう。画質が悪いバナーを掲載したい場合、ユーザーが画像内に何が書かれているか認識できず、クリックしてもらえないことがあります。また、高画質の素材を使用することで、Webページの見栄えもさらによくなるでしょう。
素材を集める際は、拡大縮小などの調整を行った際も画質が劣化しない素材や、元のサイズが大きな素材などを使用し、できるだけ画質の劣化を防ぐことが大切です。
ユーザーの目を引くデザインになっているか
デザインを決める際は、ユーザーの目を引き、バナーをクリックした先のページを読みたくなるよう意識する必要があります。特に以下の要素が重要となるため、初めて画像を編集する方は最低限必要な要素として押さえておくとよいでしょう。
配色
暖色系や寒色系などの配色によっては、同じレイアウトを用いていても画像の印象が大きく変わることがあります。
なお、化粧品や食品などの品物の写真を使用する際は、それらの写真と同系統の色を背景や文字色に使用することで、色のバランスを取りやすくなるため、慣れるまでは同系色を選ぶとよいでしょう。
コントラスト
コントラストとは、画像内の明るい箇所と暗い箇所の明暗の差を指します。
例えば、上記の画像のように、背景色を薄い水色にしたうえで、テキストの色を白色にしてしまうと、背景と文字のコントラストが弱く、文字が読み取りづらくなる可能性があります。一方で、テキストの色を黒色にすることで、背景と文字のコントラストが強まるため、何が書かれているかをすぐに読み取れます。
このように、背景の色と素材のコントラストも意識することで、ユーザーの目を引きやすいデザインを作成できるでしょう。
情報のグルーピング
バナー内にテキストを多く含める際は、関連する要素をまとめるグルーピングを行うことで、見やすくテキストを整理できます。
例えば、上記のようにバンソウで使用しているバナーでは、四角形の背景を入れたり、箇条書きでまとめたりするなどの工夫を行いながらテキストを整理しています。
バナー内のテキストが多くなる場合や、特に目立たせたい要素がある場合は、このようなグルーピングでまとめるのがおすすめです。
広告出稿時にも流用できるサイズであるか
ディスプレイ広告やSNS広告といったWeb広告への出稿も考えている場合は、各媒体で規定されているサイズと合わせて作成することで、広告への流用がしやすくなり作業工数を削減できるため、あらかじめ各媒体のサイズ規定を確認しておくことをおすすめします。
主な広告媒体の規定は、次のとおりです。
■Google 広告
Google 広告の仕様: 広告フォーマット、サイズ、ベスト プラクティス｜Google 広告 ヘルプ
■Yahoo!広告
バナー（画像）-運用型｜Yahoo!広告
■X広告
広告クリエイティブの仕様｜X ビジネス
■Facebook、Instagram広告
配置ごとの画像ピクセルサイズの最小要件｜Meta ビジネスヘルプセンター
まとめ
この記事では、バナーのサイズを意識する重要性や主なサイズ、バナー作成時に確認しておくことなどをご紹介しました。
縦長や横長など、バナーのサイズを意識することで、ユーザーにとって見やすく興味を引きやすい画像を作れるため、自社の商品やサービスへのコンバージョンにもつながりやすくなるでしょう。
バナーの作成時は、ぜひ記事内でご紹介した内容をご参考にしてください。
