• コラムトップ
• バナーとは？意味や役割・種類など、基本を初心者様に向けて解説

Webサイト制作や、広告に欠かせない「バナー」。
マーケティングのご担当者様やWeb制作が初めての方の中には、「作ることになったけど、どういうものを作れば良いか分からない」「そもそも言葉の意味が分からない」など、様々な悩みがあると思います。

そんな方々に向けて今回は、バナーの意味や役割、種類など基本的な概要を説明させていただきます。役割を正しく理解すれば、どういったものを制作すれば良いかが見えてくるはずなので、ぜひ参考にしてください。

バナーとは？

バナー（Banner）とは、直訳で「旗、のぼり、垂れ幕」を意味し、それが転じて、広告や宣伝目的の画像を意味するようになりました。Webサイト上で表示される、広告等に使われる画像のことを指しています。

Webサイト上で見られるバナーのほとんどは、関連ページにリンクする仕組みになっています。リンクとは、Webページと別のWebページをつなぐことを意味しており、ユーザー様が興味を持ったバナーをクリック（タップ）すれば、バナー画像に関係するWebページにすぐ遷移できる構造です。つまり逆を言えば、遷移させたいWebページの情報をまとめ、視覚的にわかりやすく画像化したものがバナーです。

バナーの用途

バナーはWebサイト全般で見られますが、用途が主に2パターンあります。

サイト用バナー

主に誘導したいページの入口に使われるバナーです。Webサイトの多くは、1ページだけでなく複数ページに渡り構成されています。そのような中で、ユーザー様が求める情報が載ったページや、誘導したいページに分かりやすく・迷わずたどり着いてもらうため、その道標として使われます。

広告用バナー

主に広告・宣伝目的で使われるバナーです。商品購入やサービス申し込み、資料請求等、広告の最終目的にユーザー様を誘導し、アクションを起こしてもらうための入口に、バナーが使用されます。目的に応じて、画像と文字で分かりやすく情報をまとめ、クリックされやすいような構成に工夫して作られます。

「バナー」は後者の広告用バナーを意味して使われることが多いですが、一般的には見せたいページへリンクさせる目的の意味としても使われます。

バナーの役割と重要性

ページ同士をリンクさせるのはテキストでも可能です。では、なぜバナーは使われているのでしょうか？そこには、画像だからこその良さ・メリットがいくつかあります。

①ユーザー様を訴求したいページに誘導できる

文章だけで構成されたWebサイトや記事よりも、バナー画像があることで視覚的にコンテンツを見つけてもらいやすく、ユーザー様を見せたいページへ誘導しやすくなります。ページの見つけやすさは、サイト運営者側にとってもPV数が上がったり目的を達成しやすくなりますし、サイトを閲覧するユーザー様にとっても、ストレスなくサイト内を巡回しやすくなり、双方にとってメリットになります。

②購買促進できる

バナーは購買促進に効果的で、広告にもよく利用されます。
「画像優位性効果」といって、文字や言葉だけよりも、図や写真、画像のほうがイメージが伝わり、人の印象や記憶に残りやすいと言われています。

例えばラーメン屋をPRする際。「美味しい魚介系のラーメン屋がオープン」と文字だけで広告を出すよりも、どんぶりに入った、出来立てのラーメンから湯気が出ている写真を用いて広告を出したほうが、多くの情報が分かりやすく伝わり、食べに行きたい、もう少し情報が知りたいという気持ちにさせられるのは、なんとなく想像ができるのではないでしょうか。バナーをうまく使うことで、ビジュアルでユーザー様の心をつかむことが可能になります。

逆にあえてバナーのデメリットを挙げるとすれば、3つほどあります。

①制作の工数と費用がかかる

バナーの制作には人的・金銭的コストが発生します。キャッチコピーを考えたり、場合によっては素材を撮影したり等、クリエイティブな時間が必要な上、（広告用バナーは特に）一回作って終わりではなく、定期的に新しいものを作り、古いデザインを見直す必要も出てきます。バナーは広告の効果に重要な役割を持ちますので、複数のバナーで広告効果を比較しながら、悪いバナーを修正したり、または季節やキャンペーンごとに訴求を変えて制作することが求められるためです。そのたびにコストが発生するため、その点は多少負荷がかかります。

②文字よりもデータ量を使う

バナーを掲載する、Webサイト運営者様側のデメリットです。バナーは画像データになるため、文章のみのページよりもデータ量が増えます。そのためサイト上に設置しすぎると、ユーザー様がWebページを開く表示速度が遅くなり、ストレスを与えてしまう要因にもなります。ただし、「見せたいページへ誘導する」という目的の場合は、バナーの掲載数も多くならない為、そこまで意識する必要はありません。

③多用すると、広告目的のようなサイトに見られる

これについてもバナーを掲載する側のデメリットです。一つのサイト・Webページ上にバナーを多く掲載してしまうと、ユーザー様に「何かを買わなくてはいけないのか」と思わせる要因になり、警戒されてしまうこともあります。そのため、Webサイトの運営者様には、特に誘導したいページや見せたいものを明確にして、必要な数だけ最低限設置することをおすすめします。

バナーとサムネイル、アイキャッチの違い

Web上で使われる画像を指す言葉は、「サムネイル」や「アイキャッチ」など他のものも存在します。これらの違いについて、少し触れていきます。

サムネイル

英語のthumb（サム）nail（ネイル）から来ており、日本語にすると親指の爪を意味します。本来は、（親指の爪程度に）縮小された見本画像のことを指し、ファイルや詳細ページを開かなくても、一目で中の内容がわかるような画像という役割があります。ただ最近では、動画やブログ記事の閲覧数を増やすことを目的に作られた画像もサムネイルと呼ばれるようになりました。多くの場合、動画や記事の概要を分かりやすくまとめ、コンテンツを見てもらいやすくするために作られた画像がサムネイルと呼ばれています。

アイキャッチ

アイキャッチ画像は、ユーザー様の目を引きつけることを目的とした画像のことです。記事の頭やサイトのメインビジュアルとなる目立つ箇所に設置される画像を言うことが多く、サイトや記事の印象を決める重要な画像です。

これらの説明をまとめると、「バナー」「サムネイル」「アイキャッチ」はそれぞれで目的や役割が異なり、使用するシーンに違いが出てくるわけです。

• バナー ... 広告や記事への誘導目的
• サムネイル ... ファイルを開かなくても分かるように縮小された画像
• アイキャッチ ... サイトや記事の印象となる、ユーザー様の目を引く先頭の画像

ただ実際には、人によって線引や解釈が異なることもあり、会話する人やシーンに合わせて、言葉を使い分ける必要があります。

バナーの形とサイズの種類

バナーは掲載するWebサイトによって様々な形・サイズを使い分けるのが一般的です。形については主に5種類の基本の形があり、それぞれ呼び方があります。

【バナーの形】

• レクタングル ... 正方形に近い長方形。一般的でよく見られる形。
• スクエア ... 正方形。レクタングルとともによく活用される形。
• ビルボード ... 長方形。横長で画面を大きく占有するため、認知施策に効果的な形。
• スカイスクレイパー ... 長方形/縦長。インパクトがあり視覚的な認知に向いており、ブランド認知を目的に使用されることが多い形。
• モバイル ... スマホ向けサイズ。

なお、サイズは、数字を用いて横×縦で表し、pixel（ピクセル/px）という単位を使います。
よく使用される代表的なサイズの一例を紹介します。

バナーの形	よく使われるサイズ（単位：ピクセル）	アスペクト比
レクタングル（長方形）	300×250	6：5
	336×280	6：5
スクエア（正方形）	250×250	1：1
	300×300	1：1
バナー（横長）	728×90	728：90
	468×60	39：5
スカイスクレイパー（縦長）	160×600	4：15
	300×600	1：2
モバイル（スマホ向け）	320×50	32：5
	320×100	16：5

※アスペクト比

画面、画像の長さ（画素数）の比。一般的に横：縦で表記される。

もちろんこの限りではなく、他のサイズが使われることもあります。

自社サイトで使うか、あるいは広告などで他社サイトへ入稿するのか、利用シーンは2パターンあると思いますが、使う予定のサイトへ規定の形・サイズを確認した上で、制作するのが無駄なくスムーズです。

なお、バナーの横縦比やサイズが合っていないまま使用すると、画質が悪くなり、バナーを見るユーザー様の視認性にも影響を与えてしまいますので、各媒体の規定どおり制作するのがベストです。

バナーのファイル形式

画像にはいくつかファイル形式がありますので、バナーに向いているファイル形式を3つ紹介させていただきます。

形式	拡張子	特徴	透過処理
JPEG （ジェイペグ）	.jpg/.jpeg	・画像データを低容量・高画質で保存できるため、写真を使ったバナー画像の作成に適しています。 ・「非可逆圧縮方式」で、人が感知できない色情報を削除し、一見違いが分からない程度に画質を落とすことでファイルサイズを大幅に減らすことが可能。ただし、一度落とした画質はもとに戻せない点、圧縮率を高くしすぎると画質が粗くなるになる点には注意が必要です。	☓
PNG （ピング）	.png	・JPEGと同様、フルカラーの約1677万色を反映可能。高画質ですが、ただ容量が重いため、主にロゴや図、イラストなど色の少ない画像に適しています。 ・「可逆圧縮方式」で、ファイルを一度圧縮しても、圧縮前の画質を保持したまま解凍できます。外注先等と画像の送付を頻繁に行う場合、JPEG形式だとどんどん画質が悪くなりますが、PNGはその心配が不要です。	◯
GIF （ジフ）	.gif	・静止画のファイル形式の中で唯一、アニメーション画像が作成可能。簡易的な、パラパラ漫画のような画像が切り替わるバナーや、画像の一部に動きをつけたいときなどは、GIF形式になります。	◯

それぞれにメリット・デメリットがありますが、まとめると、大体以下のような理解で大丈夫です。

• JPEG形式 ... 写真を使ったバナーを制作したい際に使用
• PNG形式 ... イラストを使ったバナーやロゴを制作したい際に使用
• GIF形式 ... アニメーションバナーを制作したい際に使用

また、バナーを使うWebサイト側に規定のファイル形式があるケースもあるので、他社サイトへ掲載する場合には予め確認しておくのがおすすめです。

バナー制作の際に押さえるべきポイント

バナーを制作したいと思った際、何から手を付ければ良いか分からないというお悩みもあると思います。そんなときには、以下の3点をまず押さえることから始めましょう。

①ターゲットを整理する
②目的を明確にする
③どこに掲載するのかを決める

①ターゲットを整理する

ターゲットが定まっていないと、効果的なバナーが出来上がりません。
例えば、スポーツジムの広告用バナーを作る場合。「男女両方がターゲットで、年代も問わず入会者募集したい」というよりも、「30代の働く女性に向けて、高級感あるプライベートジムのような印象を与えたい」など具体的に定めたほうが、バナーのデザインも決めやすくなりますし、掲載した際も該当するターゲット層からのクリック率や入会率が上がったり、より効果的なバナーになります。

②目的を明確にする

バナーを見た人に、どんなアクションを起こしてほしいのかを明確にしましょう。
例えばWebサイト内で「特定のページを見てほしい」という誘導目的のほか、広告用バナーでは、「資料請求につなげたい」「商品購入してほしい」、「新規会員登録と商品購入につなげるため期間限定のセールの告知をしたい」「会社の認知度を上げたい」など、企業様によってユーザー様にどのような行動を期待するのか目的は様々です。これにより、バナーに入れるべきメッセージや構成も異なってくるため、バナーをクリックした後に求めるアクションを事前に明らかにした上で、制作に移れるようにしましょう。

③どこに掲載するのかを決める

可能であれば、どこに掲載するバナーかを決めた上で制作を始めるのがベターです。媒体により使用サイズ、形式が異なるのもそうですが、広告の場合、出稿先により効果的なメッセージが異なるためです。ディスプレイ広告に使うのか、アフィリエイト広告に使うのかで、ユーザー様に求めるアクションも目的も異なるかと思いますので、①②のターゲット/目的と合わせて、掲載先は明確にしておきましょう。

以上3点については、バナー制作を自社で対応するか、外注するか、どちらで進めるにしても重要なポイントになります。制作者としっかり認識をすり合わせた上で、制作を開始することをおすすめします。

自社でバナー制作する場合

自社でバナーの制作を検討している場合、デザインツールの導入からスタートになります。
バナー制作ができるツールは「Photoshop」や「illustrator」などがメジャーでよく使われます。ただこれらは有料になるため、まずは無料のもので試しに画像を作ってみたい、デザインツールに触れてみたいという場合には、「バナー工房」や「Canva」等の選択肢があります。

外部へバナー制作を依頼する場合

バナー制作は外部に依頼することも可能です。デザイン会社や広告代理店、もしくはクラウドソーシングのサービスを通じてフリーのデザイナーさんへ依頼する等が選択肢にあります。費用や納期はそれぞれ見積もりが異なり幅がありますが、バナー1つにつき数千円〜、最短当日納品のサービスを提供している会社もあります。

まとめ

誘導や広告のため使われるバナーについて、制作前に知っていただきたい概要や他の画像との違いをお伝えしました。役割を知り目的を定めれば、より効果的なバナー制作ができるはずなので、ぜひ参考にしてください。