【2025年7月17日更新】情報を更新するとともに、バナー用の画像作成手順、無料の画像素材サイト紹介、よくある質問を追加しました。

この記事のレベル

初心者	（3.0）
重要度	（3.5）
難しさ	（2.0）

こんにちは、編集長のカワウソです！

「バナーって言葉をよく聞くけど、じつはイマイチ分かっていない……」という方も多いのではないでしょうか？

バナーとは、他のWebページを紹介するための画像のことを指します。
ホームページ制作ではバナーを作る場面も多いため、これを機に理解を深めておきましょう。

そこで今回は、バナーの種類や作るコツを分かりやすく解説します。

この記事を読めば、成果のあがりやすいバナーが作れるようになります。

それではどうぞ！

バナーとは

バナー（英：Banner）とは、日本語に訳すと「旗」や「のぼり」という意味で、商品やサービスなど、他のWebページを紹介するための画像のことを指します。

たとえば、飲食店（実店舗）を例にしてみましょう。
お客さんを呼び込むために、店先に「ラーメン（商品）」や「大盛無料（サービス）」などと書いたのぼりを置きますよね。

ホームページも同様。

バナーにはリンクを設置するのが基本で、こちらが意図したWebページにユーザーを誘導する役割があるのです。

バナーの種類

バナーは大別すると、以下の2種類に分かれます。

それぞれ詳しく見ていきましょう。

ホームページ設置用のバナー

その名のとおり、ホームページ内に設置するバナーのことです。

参考に、弊社が提供するレンタルサーバー『エックスサーバー』のサービスサイトをご覧ください。
赤枠のなかに、バナーが2つあります。

※2025年7月時点の掲載内容です。

試しに、左側のバナーをクリックしてみますね。
すると、以下の詳細ページに遷移します。

※2025年7月時点の掲載内容です。

このように、ホームページを訪れたユーザーに対して、見てもらいたいWebページを案内するのに、バナーは役に立つのです。

なお、サービスサイトについては、以下の記事で詳しく解説しています。

Web広告の配信用バナー

Web広告の配信用バナーとは、バナー広告を配信するときに用いる画像のことです。

ホームページ設置用のバナーと異なる点は、第三者のWebページに表示されることです。

たとえば、弊社の『エックスサーバー』では、バナー広告に以下の画像を使用しました。

※2025年7月時点の掲載内容です。

なお、『Google広告』などの運用型のバナー広告であれば、さまざまな方法で配信対象を絞り込めます。

ターゲティングの種類	説明
オーディエンス ターゲティング	「人」を軸にしたターゲティング 例：〇〇に興味や関心があるユーザーや、自社のホームページを訪問したことがあるユーザーなどに配信可能
コンテンツ ターゲティング	「広告掲載場所」を軸にしたターゲティング 例：指定したキーワードやトピックと、テーマが一致するWebページに配信可能

（参考：Google広告ヘルプ「広告のターゲット設定」）

Web広告については、以下の記事でも解説しているので、ぜひあわせてチェックしてみてください。

バナーのメリット

ホームページ設置用、Web広告の配信用のいずれも、視覚的にアピールできるのがバナーのメリットです。

たとえば、調理器具を販売する会社で考えてみましょう。

調理器具を販売する場合、おいしい料理が作れることをアピールしたいですよね。
それもそのはず。調理器具はあくまでも手段だからです。ユーザーはおいしい料理を作るために、調理器具を探します。

料理から「湯気」や「肉汁」などが出ているバナーを使えば、いかにも「おいしそう」なイメージを伝えられるでしょう。

一方、テキストリンクだと、インパクトが弱いですよね。

なお、これらはWeb広告にも当てはまります。
以下、リスティング広告（検索連動型広告）とディスプレイ広告（バナー広告）の比較です。

リスティング広告はテキストの表示が中心なので、ビジュアル面の訴求が苦手であるのに対し、ディスプレイ広告は得意です。

リスティング広告とディスプレイ広告の違いについては、以下の記事で詳しく解説しているので、あわせてチェックしてみてください。

バナーを作る前に知っておきたい画像作成の手順

バナーはもちろん、そもそも画像自体を初めて作るという方もいらっしゃると思います。
そこで、バナーを作成する前に、画像作成の基本的な手順を押さえておきましょう。

バナー用の画像を作るには、大きく以下の3つのステップを踏みますよ。

詳しい内容については、以下の記事で解説しているので、ぜひあわせてお読みください。

ホームページ設置用のバナーを作るときの3つのコツ

ここからは、ホームページ設置用のバナーを作るときのコツについて解説します。

成果のあがるバナーを作るためには、ユーザーの行動を意識するのがよいです。

それぞれ詳しく解説します。

認識しやすいバナーを作る

バナーの役割は、ユーザーに商品やキャンペーンなどの存在を伝えたうえで、詳細な情報が載ったWebページに誘導すること。

そのためには、まずユーザーにバナーの存在を認識される必要があります。

参考に、『エックスサーバー』の「機能一覧ページ」をご覧ください。

※2025年7月時点の掲載内容です。

キャンペーン情報ということもあり、目立つ場所に、目立つデザインのバナーを設置していますよね。
これなら、このWebページに訪れたユーザーが見落とす心配はなさそうです。

また、バナーを複数並べるときはデザインに差をつけましょう。
同じようなバナーが並んでいると、ユーザーがそれぞれを認識しづらくなります。

参考に、『エックスサーバー』の「フッター（ページ最下部のパーツ）」をご覧ください。

※2025年7月時点の掲載内容です。

バナーが複数並んでいても、それぞれ色が異なるため、違いが分かりやすいですよね。

また、ホームページの背景は白やグレーなどの色を基調としているため、バナーが埋もれてもいません。

そのほか、テキストリンクとバナーリンクを使い分けている点もポイント。

このように、バナー単体で考えるのではなく、設置先の状況を考慮してデザインを作ることが大切です。

なお、以下の記事では、見やすいホームページの作り方を解説しています。
あわせてチェックしてみてください。

クリックしたくなるバナーを作る

バナーが認識されただけでは、ユーザーを目的のWebページに誘導できません。
誘導するためには、バナーをユーザーにクリックしてもらう必要があります。

そのために、ユーザーの興味をそそるバナーを作りましょう。

おすすめは、「キラーワード」を使用すること。
キラーワードとは、聞いた人が思わず反応してしまう強力な言葉です。

また、バナーをクリックできることが明確に伝わるデザインが好ましいです。

ぜひ参考にしてみてください。

遷移先のWebページで離脱されないバナーを作る

せっかくバナーがクリックされても、遷移先のWebページでユーザーが違和感を覚えてしまっては、離脱されてしまうかもしれません。

基本的に、バナーのデザインはリンク先のWebページと統一感を持たせましょう。
統一感がない場合、ユーザーが「間違ったものをクリックしてしまった」と誤解し、離脱してしまうおそれがあるためです。

たとえば、当メディアのサイドバーに設置してある上側のバナーをご覧ください。
青系の色を基調とした配色で、人物はイラストのデザインですよね。

バナーをクリックしてみましょう。
遷移先のWebページも、デザインの方向性が同じであることが分かります。

これなら、ユーザーとしても、「自分が見たかったWebページが表示された」と判断できますよね。

なお、ユーザーが離脱したかどうかは、『Google アナリティクス』などのアクセス解析ツールで分析可能です。

（参考：アナリティクス ヘルプ「[GA4] 閲覧開始数と離脱数」）

※サイドバーについては、以下の記事で詳しく解説しています。

ホームページ設置用のバナーを作るときの注意点

ホームページ設置用のバナーを作るときは、次の3つの注意点に気を付けましょう。

これらはバナーだけでなく、ホームページで使用する画像全般に言えることです。

詳しくは、以下の記事で解説しています。

Web広告の配信用バナーを作るときの3つのコツ

次に、Web広告の配信用バナーを作るときのコツを解説します。

以下の3つのポイントを意識して、バナーを作成してみてください。

広告の目的を明確にする

まず、バナー広告を配信する目的を明確にしましょう。

目的によって、バナーの内容が変わるためです。

目的は大別すると、以下の2つに分かれます。

たとえば、自社の商品を知らないユーザーに対して、キャンペーン情報を記載したバナー広告を配信しても、クリックされる見込みは少ないかもしれません。

なぜなら、ユーザーがその商品を欲しているとは限らないためです。
もっと言えば、商品の価値さえ知らないかもしれません。

認知拡大を目的とするなら、まずは商品の価値を伝えることを優先すべき。
とくに、商品が「ユーザーのどんな悩みを解決できるのか」を明確に提示することです。

同じ悩みを持つユーザーであれば、興味を持ってクリックしてくれるでしょう。

その後、ユーザーが商品に対して価値を感じれば、以後キャンペーン情報が掲載されたバナーをみたときに、クリックしてくれる可能性が高くなります。

ターゲットを設定する

バナーのデザインを作るときは、ターゲットを設定しましょう。

ターゲットを意識したデザインは、ユーザーに共感を与えやすいためです。

たとえば、自社のビジネスが英会話スクールだとします。
以下のように、ターゲットを設定すると、それぞれに見合ったデザインのバナーを作れますよね。

ユーザーがバナーを見て、「自分に当てはまる」と感じれば、興味を持ってクリックする可能性が高くなります。

行動を促すフレーズを入れる

三つ目のコツは、「行動を促すフレーズ（文言）を入れること」です。

行動を促すフレーズがあれば、ユーザーがバナーをクリックしたあとに、何ができるのか具体的なイメージを持てるようになります。

たとえば、以下のようなフレーズです。

またこれらは、バナーに興味を持って、クリックするかどうか迷っているユーザーの背中を押す役割もあります。

Web広告の配信用バナーを作るときの注意点

Web広告の配信用バナーを作るときは、広告媒体の審査に通るように、ポリシーやガイドラインを遵守することが重要です。

各媒体の広告審査に通らなければ、広告は配信されません。

たとえば、『Google 広告』の広告ポリシーには、以下4つの分類があり、それぞれ詳細に定められています。

分類	説明
禁止コンテンツ	Google ネットワークで宣伝することが禁止されているコンテンツ
禁止されている行為	Googleでの広告掲載で禁止されている手法
制限付きのコンテンツと機能	宣伝は可能でも制限があるコンテンツ
編集基準と技術要件	広告、ウェブサイト、アプリに関する品質基準

（参考：Google 広告ポリシー ヘルプ「Google 広告のポリシー」）

そのほか、バナー広告（ディスプレイ広告）については、ガイドラインも存在しますよ。

（参考：Google 広告 ヘルプ「ディスプレイ広告: クリエイティブ作成時のおすすめの方法に関するガイド」）

自社が出稿する広告媒体のポリシーやガイドラインを確認してから、バナーを作りましょう。

Web広告の配信用バナーはABテスト用に複数用意しよう

Web広告の配信用バナーは、ABテスト用に複数作りましょう。

Web広告の配信は、費用がかかりますよね。
であれば、少しでも成果があがるバナーデザインを追求していきたいはずです。

ABテスト用のバナーを作るときは、基本的に一回の検証につき、「キャッチコピー」「色」「写真」などのなかから、一つの要素のみに変化を与えます。

一回の検証で、複数の要素を同時に変えてしまうと、どれに効果があったのか分からなくなってしまうためです。

ぜひ参考にしてみてください。

バナー作成の参考になるギャラリーサイト5選

次に、バナーのデザインを考えるときに、参考になるギャラリーサイトを5つ紹介します。

ギャラリーサイトなら、参考になるバナーが一覧で表示されるため、効率的に探すことが可能です。
ぜひ活用してみてください。

バナー広場

▲出典：バナー広場

『バナー広場』は、16,000点以上のバナーを掲載しているギャラリーサイトです（2025年7月17日時点）。

以下6つの大カテゴリのなかに、さまざまな小カテゴリが用意されており、参考にしたいバナーを効率的に探せます。

気になるバナーがあれば、「お気に入り」に保存することも可能です。

retrobanner

▲出典：retrobanner

『retrobanner』は、13,000点以上のバナーを掲載しているギャラリーサイトです（2025年7月17日時点）。

以下4つの大カテゴリのなかに、さまざまな小カテゴリが用意されています。

なお、バナーをクリックすると、構成色が16色で表示されるのも特徴。
デザイン制作時に役に立つでしょう。

▲出典：retrobanner

Bannnner.com

▲出典：Bannnner.com

『Bannnner.com』は、クオリティが高いバナーを紹介するギャラリーサイトです。

サイズ、ジャンル、業種などの一般的なものはもちろん、以下のような「製作者目線」のカテゴリも用意されています。

バナーデザインのマンネリ化を防ぐためにも、上記のような複数の手法を知っておくとよいでしょう。

BANNER LIBRARY

▲出典：BANNER LIBRARY

『BANNER LIBRARY』は、アプリ、SNS、ECサイトの特集、ブランドサイトのキャンペーンなどから、クオリティの高いバナーをデザイナー目線で厳選して紹介しているギャラリーサイトです。

2025年7月17日時点で、7,000点以上のバナーを掲載しています。

さまざまな大カテゴリが用意されており、それぞれの小カテゴリも豊富です。

また、検索ボタンから絞り込み検索が可能であるため、参考になるバナーをピンポイントで探せるでしょう。

banner gallery

▲出典：banner gallery

『banner gallery』は、キーワード、サイズ、色、業種からバナーを検索できるギャラリーサイトです。

2025年7月17日時点で、3,000点以上のバナーを掲載しています。

バナーをクリックすると、ページの下部に「このバナーも見られています」という見出しで、ほかのバナーが表示されるのが特徴。バナー探しのきっかけになるでしょう。

▲出典：banner gallery

バナー作成に役立つ無料の画像素材サイト

ここでは、無料の画像素材サイトのなかから、バナー作成に役立つものをいくつかピックアップして表にまとめました。バナー作成時にぜひ利用してください。

サービス	特徴
Pixabay	海外クリエイターによるコンテンツが豊富な写真系素材サイト 素材数が圧倒的で、バナー素材選びにも役立つ 利用にあたって登録は不要
PhotoAC （写真AC）	日本人モデルの素材が数多く投稿されている写真系素材サイト バナーに使いやすい背景写真も多い 利用には登録が必要
illustAC （イラストAC）	トップクラスの素材数を誇るイラスト系素材サイト リボンや吹き出しなど、バナーに向いた素材も多い 利用には登録が必要
emStudio	シンプルで使いやすいアイコンなどが豊富なイラスト系素材サイト バナー制作に役立つボタンやリボン素材などを提供 素材を使ったバナーサンプルも掲載されているので参考にできる
EVENTs Design	季節イベントに関する画像を提供するイラスト系素材サイト クリスマスや正月、ハロウィンなどの主要イベントを網羅 季節限定のキャンペーンバナーなどに役立つ

上記の画像サイトの素材は、ホームページ用バナーやWeb広告向けバナーに無料で利用できます。

ただし、利用できる範囲やダウンロード数などに制限が設けられているものもあるので、事前にそれぞれの利用規約を入念に確認しておきましょう。

無料で利用できる画像素材サイトについては、以下の記事でも紹介しているので、あわせてご確認ください。

テンプレートから作りたい場合

画像素材というより、まずはテンプレートから作りたいなら『Canva』がおすすめ。

『Canva』は無料で利用できる画像編集ソフトで、バナーテンプレートも豊富に提供しています。無料版の場合、サイズ変更ができないなどの制限があるものの、プロがデザインしたバナーテンプレートを利用できますよ！

『Canva』については、以下の記事でも紹介しています。

バナーに関するよくある質問

最後に、バナーに関するよくある質問についてお答えします。

Q1：ホームページにバナーを設置するデメリットはありますか？

A：ホームページに設置するバナーの場合、画像のサイズ（寸法）や容量によっては、ページの読み込み速度が遅くなるおそれがあります。

たとえば、横幅300pxで十分なところ3,000pxにしてしまったり、本来200KBで十分に収まるにもかかわらず、2MB（2,000KB）で作ったりすると、読み込み速度に影響が出ることも。

そのため、画像は最適化し、見た目に影響がない範囲で、ファイル容量をできるだけ減らすことが大切です。

以下の記事で、画像の最適化方法について解説しているので、あわせてご確認ください。

Q2：バナーとアイキャッチ画像の違いは？

A：バナーとアイキャッチ画像は、それぞれ設置される場所や役割などに違いがあります。

バナーは、商品やサービスなど、他のWebページを紹介するための画像です。

サイドバーやページ中段、フッターなど、多くの人の目に触れる場所に設置し、目的のページへ誘導する役割を担います。

バナー画像

一方、アイキャッチ画像は、「Eye（目）」を「Catch（捕らえる）」という言葉どおり、読者の視線を引き付ける役割を担う画像です。

記事やお知らせの「表紙」として、コンテンツの魅力を伝え、本文を読んでもらうきっかけを作ります。

アイキャッチ画像

Q3：バナーに適したサイズ（寸法）を教えてください。

A：ホームページ設置用のバナーのサイズ（寸法）に決まりはなく、レイアウトに依存する部分も大きいです。

以下を参考に、それぞれの設置場所にほどよく収まるサイズで作ることをおすすめします。

２カラムレイアウトの場合

Web広告として配信するバナーのサイズは、媒体によって異なるため、それぞれの入稿ガイドを確認してください。

たとえば、Google広告では昨今「レスポンシブ ディスプレイ広告」が主流となっており、あらかじめ以下のサイズの画像を登録しておくことで、配信先の広告枠に応じて自動的に表示が最適化されます。

画像タイプ	推奨サイズと最小サイズ
横向き画像	推奨サイズ: 1200 × 628 最小サイズ: 600 × 314
スクエア画像	推奨サイズ: 1200 × 1200 最小サイズ: 300 × 300
縦長画像	推奨サイズ: 900 × 1600 最小サイズ: 600 × 1067

（参考：Google広告ヘルプ「ディスプレイ広告: クリエイティブ作成時のおすすめの方法に関するガイド」）

そのほか、主要な広告媒体の情報が記載されたページを以下にまとめておくので、参考にしてください。

まとめ

今回は、バナーの種類や作るときのコツを解説しました。

魅力的なバナーを作れたら、ホームページの成果もあがりやすくなります。
この記事で紹介したギャラリーサイトなども活用して、ぜひ魅力的なバナーを作ってください。

それでは、素敵なバナーの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

ホームページの開設を検討している方へ

※ 2025年6月時点、W3Techs調べ。

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！