その他
2025.04.25
2025.4.25
ホームページの適切なバナーサイズとは？種類や広告別の一覧、作成の仕方、制作に便利なツールをご紹介！
サービスを詳しく知りたい方はこちら
「WebサイトやWeb広告のバナーってなに？」
「ホームページや広告でバナーを使うメリットってあるの？」
「バナーを作成したいけれど、適切なバナーサイズがわからない」
Webサイトや広告を運用する上で、上記のような悩みをお持ちの方も多いのではないでしょうか。
本記事では、Webサイト・広告の適切なバナーサイズや活用するメリット、作成する方法を分かりやすく解説していきます。
ホームページやWeb広告でバナー画像を作成する際に、ぜひご参考ください。
ホームページや広告のバナーとは？
画像引用元：Yahoo JAPAN
バナーとは、直訳すると「旗」や「のぼり」という意味があります。
Webサイトを見ていると商品やサービス、キャンペーン情報を紹介した画像を見ることがあると思います。
それらの画像が「バナー」と呼ばれるものです。
ホームページや広告で活用されるバナーは、閲覧してもらいたいページへユーザーを誘導させる役割を持っています。
バナーは、写真やイラスト、テキストなどで構成された画像で、リンクが設置されています。
ホームページなどに設置されたバナーをユーザーがクリックすることで誘導したいページに直接遷移することができます。
バナー例
画像引用元：楽天市場
ホームページや広告でバナーを活用する目的・メリット
ここでは、ホームページや広告でバナーを活用する目的やメリットをご紹介します。
目的
バナーを活用する目的は、ユーザーに閲覧してもらいたいWebページに誘導させることです。
例えば、ネット通販の場合、「◯◯SALE 最大50％OFF」というような内容のバナーをWebサイトに設定し、今セール中の商品ページにユーザーを誘導、購入につなげるような活用方法があります。
このように、バナーを設置し特定のキャンペーンの存在を注目させることで、効果的に宣伝をすることができます。
しかし、ユーザーの興味関心を引くような魅力的なバナーでなければクリックしてもらえません。
A/Bテストなどを実施し、より効果的なバナーのデザインを分析していくことで、成果を高めることができます。
メリット
バナーは、視覚的なインパクトで商品やキャンペーンなどの情報をアピールできるので、ユーザーの目に留まりやすいです。
また、わかりやすいメッセージや、インパクトの画像を取り込むことによって商品・サービスの認知度を向上させ、購買促進につなげる効果が期待できます。
バナーのサイズの種類
ここでは、下記の2つのバナーサイズについて解説していきます。
- 国際標準規格
- 媒体ごとのバナーサイズ
それぞれのバナーサイズについて詳しくみていきましょう。
国際標準規格のバナーサイズ
バナーサイズには、国際標準規格があり、ホームページやWeb広告で利用するサイズのものもこの規格の中から採用されています。
この規格は、アメリカのインターネット広告業界団体「IAB（インタラクティブ・アドバタイジング・ビューロー）」が定めたもので、2年ごとに更新されています。
そして、国際標準規格では、下記のように大きく分けて３種類のバナーサイズがあります。
- Rectangles and Pop-Ups（長方形とポップアップ）
- Banners and Buttons（バナーとボタン）
- Skyscrapers（縦細長）
【Rectangles and Pop-Ups（長方形とポップアップ）】
- 横：300px × 縦：250px（ミディアムレクタングル）
- 横：250px × 縦：250px（スクエアポップアップ）
- 横：240px × 縦：400px（バーティカルポップアップ）
- 横：336px × 縦：280px（ラージレクタングル）
- 横：180px × 縦：150px（レクタングル）
- 横：300px × 縦：100px（3:1レクタングル）
- 横：720px × 縦：300px（ポップアンダー）
【Banners and Buttons（バナーとボタン）】
- 横：468px × 縦：60px（フルバナー）
- 横：234px × 縦：60px（ハーフバナー）
- 横：88px × 縦：31px（ミクロバナー）
- 横：120px × 縦：90px（ボタン1）
- 横：120px × 縦：60px（ボタン2）
- 横：120px × 縦：240px（バーティカルバナー）
- 横：125px × 縦：125px（スクエアボタン）
- 横：728px × 縦：90px（リーダーボード）
【Skyscrapers（縦細長）】
- 横：160px × 縦：600px（ワイドスカイスクレーパー）
- 横：120px × 縦：600px（スカイスクレーパー）
- 横：300px × 縦：600px（ハーフページAD）
ホームページやWebサイトのバナーサイズ
ホームページやWebサイトなどで一般的に使用されている主要なサイズには、以下の6種類があります。
表にまとめてみたのでご参考ください。
| バナーサイズ（横x縦） | 特徴 |
|---|---|
| 728×90 | ・横長に大きく、パソコンで見やすい |
| 468×60 | ・一般的なサイズでホームページ・Webサイトに使用されている |
300×250 | ・正方形に近く写真や画像との相性がいい ・GIFアニメーションなど動画広告にも向いている |
| 336×280 | パソコン・スマホの両方で使用されている |
| 250×250 | 正方形でパソコン・スマホ両方で見やすい |
| 120×600 | 横長でパソコンのサイドバーによく使用されている |
ホームページやWebサイトなどのバナーには、目的や掲載する配置によって適切なサイズがあります。
バナーの効果を最大限に引き出すには、目的に応じた適切なサイズを選ぶことが重要です。
また、デバイスや掲載位置を考慮しながらサイズを選択することで、より効果を高めることができます。
DGN・YDAのバナーサイズ一覧
ここでは、代表的なGDN（Googleディスプレイ広告）とYDA（Yahoo!広告ディスプレイ広告）で適用されるバナーサイズをそれぞれ紹介します。
バナーの主なバナーの種類には、以下の3つがあります。
- イメージ広告（バナー広告）
- レスポンシブ広告（GDNではレスポンシブディスプレイ広告）
- デマンドジェネレーションキャンペーン（GDNのみ）
DGNやYDAを作成する際にご参考ください。
【イメージ広告（バナー広告）】
| サイズ（縦x横） | GDN | YDA（旧:YDN） | ||
| パソコンタブレット | スマホ | パソコンタブレット | スマホ | |
| 300×250 | ◯ | ◯ | ◯ | ◯ |
| 728×90 | ◯ | ◯ | ◯ | |
| 160×600 | ◯ | ◯ | ◯ | |
| 320×50 | ◯ | ◯ | ||
| 300×600 | ◯ | ◯ | ||
| 468×60 | ◯ | ◯ | ◯ | |
| 320×100 | ◯ | ◯ | ||
| 250×250 | ◯ | ◯ | ||
| 600×600 | ◯ | ◯ | ||
| 640×360 | ◯ | |||
| 200×200 | ◯ | ◯ | ||
| 336×280 | ◯ | |||
| 300×50 | ◯ | |||
| 120×600 | ◯ | |||
| 240×400 | ◯ | |||
| 250×360 | ◯ | |||
| 580×400 | ◯ | |||
| 930×180 | ◯ | |||
| 970×90 | ◯ | |||
| 970×250 | ◯ | |||
| 980×120 | ◯ | |||
| 300×1050 | ◯ | |||
| 容量の上限 | 3MB ※300KBを超える場合は自動圧縮されて保存 | 150K | ||
| 種類 | JPEG（.jpg、.jpeg）、GIF89a（.gif ※静止画のみ）、PNG（.png） | JPEG（.jpg、.jpeg）、GIF89a（.gif ）、PNG（.png）、アニメーション広告（GIF） | ||
【レスポンシブ広告（GDNではレスポンシブディスプレイ広告）】
| アセットの種類 | GDN | YDA（旧:YDN） | 横縦比 |
| 横長 | 1200×628 | 600×314 以上 | 1.91:1 |
| スクエア | 300×300 | 300×300 以上 | 1:1 |
| ロゴ | 180×180（省略可） | 128×128 以上 | 1:1 |
| ー | 512×128 以上 | 4:1 | |
| 容量の上限 | 3MB ※300KBを超える場合は自動圧縮されて保存 | 5120KB |
YDA（YDN）のサイズを用意すれば、GDNの推奨サイズは要件を満たしています。
※容量上限が異なるので注意が必要です。
【デマンドジェネレーションキャンペーン】
こちらはGDNのみです。
| アセットの種類 | GDN | 横縦比 | |
| 最小解像度 | 推奨解像度 | ||
| 横長 | 600×314以上 | 1200×628 | 1.91:1 |
| スクエア | 300×300以上 | 1200×1200 | 1:1 |
| ポートレイト | 300×300以上 | 960×1200 | 4:5 |
| ロゴ（省略可） | 128×128以上 | 推奨：1200×1200 | 1:1 |
| ー | ー | 4:1 | |
| 容量の上限 | 5MB(ロゴ1MB) | ー | |
ロゴは最大5個まで、画像は合計で最大20個まで選択することができます。
ポートレイトは、 YouTubeに表示されません。
SNS広告のバナーサイズ一覧
ここでは、SNS広告のバナーサイズをご紹介します。
各媒体によってサイズは異なります。
適切なサイズを選択しないと効果は期待できません。
媒体ごとのバナーの推奨サイズを確認しておきましょう。
画像のサイズ
SNS広告の画像の推奨サイズは以下のとおりです。
| アスペクト比（横×縦 ） | LINE | X（旧Twitter） | ||
|---|---|---|---|---|
| 1.91:1 | 1200×628 | 1,200×628 | 1200×628 | 800×418 |
| 1:1 | 1080×1080 | 1080×1080 | 1080×1080 | 800×800 |
| 9:16 | 1080×1920 | 1080×1920 | ー | ー |
| 3:2 | 最小 128×128 | 180×180 | 600×400 | ー |
| 最大容量 | 30MB | 30MB | 5MB | 3MB |
| 推奨ファイル形式 | JPG・PNG | JPG・PNG | JPG・PNG | JPG・PNG |
動画のサイズ
SNS広告の動画の推奨サイズは以下のとおりです。
| アスペクト比（横×縦 ） | LINE | X（旧Twitter） | ||
|---|---|---|---|---|
| 1.91:1 | 1200×628 | 1200×628 | 1200×628 | 800×418 |
| 16:9 | 1920×1080 | 1920×1080 | 240×135 1920×1080 | 1920×1080 |
| 1:1 | 1080×1080 | 1080×1080 | 600×600 1080×1080 | 800×800 1200×1200 |
| 9:16 | 1080×1920 | 1080×1920 | 135×240 1080×1920 | ー |
| 4:5 | 1080×1350 | 1080×1350 | ー | ー |
| 最大容量 | 4GB | 4GB | 100MB | 1MB |
| 推奨ファイル形式 | ・MP4・MOV・GIF | ・MP4・MOV・GIF | ・MP4 | ・MP4・MOV |
バナーの画像形式の種類
ここでは、バナーの画像ファイルの形式の種類について詳しく解説していきます。
バナーの画像ファイルの形式には、以下の4つの形式があります。
- BMP形式（.bmp）
- PNG形式（.png）
- GIF形式（.gif）
- JPEG形式（.jpg/.jpeg）
それぞれの画像ファイル形式を詳しくみていきましょう。
１．BMP形式（.bmp）
BMP（ビットマップ）形式とは、Windowsでの標準的な画像形式です。
BMP形式では画像を圧縮せずに使用するため、ファイルサイズは非常に重いです。
圧縮しないで画像を保存するので画像の劣化はほとんどありません。
しかし、ファイルの容量がとても重いのでWebサイト上での使用には不向きです。
２．PNG形式（.png）
Web上で使用されるために作られたファイル形式です。
約1677万色を反映でき、画像の背景を透明にすることができるので、デザインの幅を広げることができます。
また、「可逆圧縮」方式を採用しているため、画像の編集や保存を繰り返しても、画像の劣化が少ないです。
しかし、容量が大きいためJPEGやGIF形式に比べて若干データ容量が重くなります。
３．GIF形式（.gif）
GIF形式は、画像だけでなくアニメーションにも対応しています。
PNG形式同様に画像の背景を透明にするにすることができます
色数が最大256色と少ないので、色の数が少ないロゴやアイコンなどシンプルなイラストなどにむいています。
フルカラー写真やグラデーション画像など色数が多く使用されている画像には不向きです。
４．JPEG形式（.jpg/.jpeg）
約1677万色を表現できるため、写真向きのファイル形式です。
また、高画質な状態でデータ量を小さくし、軽い状態で保存可能です。
しかし、「非可逆圧縮方式」を採用しているので、圧縮率が高くなる（ファイルサイズを軽くする）と画質が劣化してしまうので注意が必要です。
ホームページのバナーを作成する2つの方法
ここでは、ホームページのバナーを作成する方法をご紹介します。
バナーを作成する方法には、以下の2つの方法があります。
- 自分でバナーを制作する方法
- 専門業者に依頼してバナーを作成してもらう方法
それぞれの方法を詳しくみていきましょう。
１．自分でバナーを制作する方法
バナーは、バナー作成可能なツールを使用して自分で作成することができます。
無料のツールもあるので、初めてバナーを作る方は無料ツールを利用して作成してみることをおすすめします。
自分で作成する場合は、初めての方にも使いやすい「Canva」がオススメです。
ほど、バナーを作成できるおすすめのツールを詳しくご紹介します。
２．専門業者に依頼してバナーを作成してもらう方法
自分でバナーを作成するのが難しい場合は、専門の業者に依頼するという選択肢もあります。
専門の業者に依頼することで、より効果の高いバナーを制作してもらうことができます。
また、短期間で高品質なバナーを作成してもらえるので、バナー作成にかかる時間を大幅に削減できます。
料金の費用は、バナー1枚につき1000円程度から始まり、デザインや作成枚数などの内容に応じて金額が変動します。
あまり制作費用をかけれないという方には、比較的低予算で依頼できるクラウドソーシングサイトを使用するのもおすすめです。
ホームページのバナーを作成する手順
ここでは、ホームページのバナーを作成する手順をご紹介していきます。
バナー広告の作成手順は、大きく3つのステップに分けることができます。
- 広目的や訴求を明確にしコピーを決める
- バナーに使いたい画像や写真、ロゴなどの素材を探す
- レイアウトや配色を決める
それぞれの手順を解説します。
１．目的や訴求を明確にしコピーを決める
バナーを作成する目的や伝えたい内容を明確にし、コピーを決めます。
コピーを決める際は、メインコピー（一番伝えたい内容）とサブコピー（メインを補強する内容）の2つを考えます。
メインコピーは、一番大きな文字で書かれることが多いため、最も注目が集まります。
そのため、メインとなるコピーは、わかりやすく簡潔でインパクトのあるメッセージにしましょう。
分かりやすく強調することで、ユーザーの興味関心を引き、クリック率の向上が期待できます。
２．バナーに使いたい画像や写真、ロゴなどの素材を探す
次に、バナーに使用する画像やアイコン、ロゴなどの素材を探します。
バナーに使用する画像などの素材は、ユーザーの目を引く重要な要素になります。
伝えたいメッセージに関連性のあるイラストや画像を選び、伝えたいメッセージと一貫性をもたせることでユーザに強い印象を与え、商品やブランドの認知度や信頼性を高めることができます。
３．レイアウトや配色を決める
レイアウトと配色を決めます。
バナーのデザインも重要な要素となります。
なぜなら、レイアウトや配色やフォントなどによって、ユーザーに与える印象が大きく変わるからです。
ロゴやアイコン、トンマナ、フォントなどデザインを統一させ、ユーザーの目を引くような目立つデザインにしましょう。
テキストやロゴ、アイコンなどは見やすいように配置しましょう。
情報が見やすく整理されていると、より商品やサービスの魅力が伝わりやすくなるので、クリックしてもらえる可能性が高まります。
バナーを作成する際の5つのポイント
ここでは、バナーを作る際のポイントをご紹介します。
バナー作成をする際のポイントは、以下の5つです。
- 高画質な画像を使用する
- 文字色や背景色のコントラストを上げる
- 配色の組み合わせに気をつける
- 情報を詰め込みすぎない
それぞれのポイントを詳しくみていきましょう。
１．高画質な画像を使用する
バナーに使用する画像は、できるだけ高画質なものを使用するようにしましょう。
なぜなら低画質な画像を使用すると、ユーザーからの印象が悪くなってしまうからです。
クリック率が下がる可能性があるので、注意が必要です。
画質が落ちないようにあらかじめ高画質な画像を作成しておくこと、アップロードした際に画質が落ちるのを防ぐことができます。
２．文字色や背景色のコントラストを上げる
バナーに画像やイラスト、文字を入れる際は、見やすいようにコントラストを上げましょう。
コントラストが弱いと、背景と文字との境目が曖昧になってしまい、パッと見たときに何が書いてあるか分からなくなってしまいます。
そのため、コントラストを強くすることで、背景と文字の境目がはっきりするので重要な要素が目立ちやすくなります。
３． 配色の組み合わせに気をつける
配色バランスや組み合わせによって、可読性や視認性は大きく変わってきます。
例えば、「黒」と「濃い青」のように背景と文字の色の明るさが近い色同士の組み合わせや、蛍光色などは文字が読みにくくなります。
バナーの目的は、情報を伝えてユーザーを誘導することです。
目立つようにバナーを作成することは大切ですが、しっかり読めるような可読性や視認性の高い配色の組わせを選ぶようにしましょう。
４．情報を詰め込みすぎない
バナーに情報を詰め込みすぎるのはやめましょう。
スペースが限られているため、一度にたくさんのことを伝えたいと思いますが、情報が多すぎると見立たせたいことが目立たなくなり、伝えたいことがうまく伝わらなくなってしまいます。
なるべく簡単な言葉でわかりやすく短い言葉にすることで、バナーの効果が高まります。
ホームページ・Web広告のバナーが作れるおすすめのツール3選
ここでは、ホームページやWeb広告のバナーが作成できるおすすめのツールをご紹介します。
すべて無料で使用できるツールなので、ぜひ試してみてください。
- Canva
- PixlrEditor
- GIMP
それぞれのツールを詳しくみていきましょう。
１．Canva（キャンバ）
画像引用元：Canva
Canva（キャンバ）とは、無料で使えるオンライングラフィックデザインツールです。
1億点以上の素材や61万点以上のテンプレートが使えるため、幅広いデザインが作成できます。
使い方も簡単なので、初心者の方でもさまざまなデザインを作成することができます。
２．PixlrEditor（ピクセラエディター）
画像引用元：Pixlr Edito
Pixlr Editor（ピクセラエディター）とは、無料で利用できるオンライン画像編集ツールです。
ブラウザ上で動作するため、インストールが不要です。
WindowsやMac、スマホやタブレットでも利用できます。
３．GINP（ギンプ）
画像引用元：GINP（ギンプ）
GINP（ギンプ）は、無料で使える画像編集ソフトです。
多機能かつ高性能で初心者から上級者まで幅広い層におすすめのツールです。
機能が豊富なので使いこなすのに少し時間がかかってしまうかもしれませんが、こだわったオリジナルのバナーを作成することができます。
まとめ
本記事では、Webサイト・広告の適切なバナーサイズや活用するメリット、作成する方法を分かりやすく解説しました。
ホームページやWeb広告にバナーを設置することで、商品やサービス、キャンペーンなど見てもらいたい情報を発見してもらいやすくなります。
また、目的に応じた適切なバナーサイズを使うことでクリック率やコンバージョン率を向上させることができます。
ぜひ、本記事を参考にホームページやWeb広告にバナーを設置し、成果を高めていきましょう。
弊社では、Web広告の配信において、ターゲティング設計から広告作成、成果改善までサポートしております。
ホームページやWeb広告の運用にてお困りの方は、是非お気軽に弊社までお問い合わせください。
Writer GMSコンサルティング編集部 マーケティング部
私たちは現在の自分に甘んじず、チャレンジをすることで、お客様にプロとしての価値を提供いたします。常に知識・技術をアップデートし、お客様の成長に貢献してまいります。
広告運用でお困りの方はお気軽にお問い合わせください