バナーとは？意味や種類、基本の作り方まで徹底解説！

Webサイトで導線設計をするうえで欠かせない、バナー。

広告や、サイト内でのページ案内など幅広い用途で使われているバナーですが、作成をするうえでどのようなポイントに気をつければいいのか、どのようなサイズのものがあるのかなどを解説したいと思います。

これからデザインやWebサイト制作に携わる人は参考にしてみてください。

バナーとは一体何？

バナーとは、「旗、横断幕」という意味があります。すなわち、お店の前にある看板や旗などイメージするとわかりやすいでしょう。

Web上で、案内したい情報や遷移してもらいたいページを目立たせる機能を持っています。

出典：YAHOO!JAPAN トップ

こちらは、Web広告業界では最も有名なバナー広告の枠、YAHOO!JAPANの右上バナー。

このように、届けたいターゲットが見ているサイトにバナーを設置することで、商品の認知・購買へとつなげることができるのです。

こちらは本Webサイト「くりたま」に設置したバナーです。ページ右上という見えやすい位置に、サイト内の別ページへとアクセスできるように印象的なバナーを設置しています。（よかったらアクセスしてください！）

このように、外部のサイトや、サイト内の別ページへと案内するための「案内板」的機能を果たしています。

バナーの種類

Webサイトのバナーにはどのような種類があるのでしょうか。解説します。

1:サイトバナー

Webサイト上で広告やコンテンツを表示するためのバナーを指します。ユーザーがWebページを閲覧する際に、サイトバナーが画面上部や側面に表示され、重要な情報や広告を伝えるのに役立ちます。サイトバナーはさまざまな形やサイズであり、目的に応じてデザインされています。

2:バナー広告

バナー広告は、ウェブサイト上で広告主が自社の商品、サービス、イベントなどを宣伝するために使用される広告形式です。バナー広告は通常、画像、テキスト、リンクによって構成されており、各Webページのコンテンツと連動して表示されます。バナーをクリックすることで、ユーザーは関連するWebページに遷移します。

リスティングのようなテキスト広告とバナー広告の違いとしては、バナー広告のほうがよりビジュアルを活かした視覚的な訴求ができ、テキストの方が自然なリンク設置ができるという特徴があります。同じ広告でもそれぞれの特徴を理解して使用していきましょう。

バナーの重要性・役割とは？

Webサイトやサービスを運用するにあたってのバナーの重要性を解説していきます。

商品やサービス、訴求したいページに誘導できる

Webサイトを運用する上で、おすすめしたいページへと誘導するのがバナーの役割です。たとえば、食品系ECサイトを運営している場合は「秋の味覚特集」のような特集ページをバナーとしてサイト内に設置して誘導し、購入につなげるといった施策を組むことが多いでしょう。

バナーはビジュアル訴求ができるのが強み。「秋の味覚特集」であれば美味しそうなきのこやフルーツなどの画像を用いて、魅力づけすることで、購入用のLPへと誘導しやすくなります。

A/Bテストなどをすることで、どのバナーがどのような人たちにどれくらい反応されるのかも数値的にわかるため、ユーザーの反応を理解した上で運用できるのも特徴です。

購買促進できる

バナーは広告として運用することで、ユーザーの購入を促進できます。自社サイト内はもちろん、他のさまざまなWebサイトへの出稿もすることでユーザー獲得につながります。リスティング広告とは異なり、視覚情報からの訴求ができるため、より目を引き付けやすく、商品を知らない人に認知してもらうのにも役立ちます。

また、印象的なビジュアルであればブランドカラーやキャラクターがユーザーの記憶に残り、ブランド認知の向上にもつながる可能性があります。

このように、「自社サイト内での誘導や購買促進」「さまざまなWebサイトからの集客導線」などさまざまな方法でバナーは使用されており、デジタルマーケティング施策を進める上では欠かせないものです。

バナーのメリット・デメリットとは？

バナーのサイズ

バナーには、多くの場合、掲載するサイトや場所によって多く使われるサイズが決まっています。

代表的なバナーサイズをいくつか紹介します。

Google Adsense

Google Adsenseとは、Webサイト上にはタグを埋め込むことで、見ているユーザーにとって最適な広告バナーが表示され、クリックされることでサイト運営者の収益につながる広告システムです。

レクタングル中（300×250）

出典：Google Adsense

レクタングル（中）と呼ばれるバナーサイズです。広告主からの要望が多いサイズです。

ディスプレイ広告を配信しているサイトやWebメディアでよく見られます。

レクタングル大（336×280）

出典：Google Adsense

レクタングル（大）と呼ばれるサイズのバナーです。

テキストコンテンツの中や、記事の末尾に埋め込むと効果的です。

ビッグバナー（728×90）

出典：Google Adsense

「ビッグバナー」と呼ばれるバナーサイズです。

メインのコンテンツの上部や、フォーラムサイトに配置すると効果的です。ビルボードと呼ばれることもあります。

ハーフページ（300×600）

出典：Google Adsense

「ハーフページ」と呼ばれるバナーサイズです。

縦長で印象に残りやすいサイズのため、ブランド認知度の向上を目的とする広告主が好む傾向があるようです。

モバイルバナー大（320×100）

出典：Google Adsense

「モバイルバナー（大）」と呼ばれるバナーのサイズです。

GDN

GDNとは、Googleで出稿できるディスプレイ広告です。

特によく使用されるGDNのバナーサイズには以下のようなものがあります。

300×250
336×280
728×90
160×600
160×600
468×60
320×50（スマホ）
320×100（スマホ）

配信システムや掲載メディアによってサイズがある程度決まっており、目的によって適したサイズのバナーを作成して設置するというわけです。

バナーの基本的な制作フロー

それでは、実際にデザイナーやWeb担当者がバナーを作成する上で考えておきたいポイントを紹介したいと思います。

目的・ターゲットの明確化

バナーを作成すると一言でいっても、広告用バナーとサイト内の遷移バナーでは目的が異なります。また、どういった商材を扱っているのかによっても、トンマナは異なりますし、設置箇所のレイアウトやサイズなどによっても内容は大きく変化します。

だからこそ、いきなり作成に取り掛かるのではなく、まずは目的を整理しておきましょう。

ターゲットは誰なのか（年齢、性別、職業、趣味は何かなど）
ターゲットにはどんな悩みがあるのか
ターゲットをどう行動変容させたいのか
自社商材の何を訴求したいのか

これは一例ではありますが、ターゲットペルソナと、ターゲットが抱えている課題の明確化、訴求したい内容をシンプルに伝えるための方法を考えたうえで作成に移るようにしましょう。

伝えたい内容の整理

こちらの若手向け転職サイトのバナーを例に解説してみます。

出典：キャリアトレック

おそらく以下のようなペルソナ設定があったのではないかと予想します。

ターゲット：20代前半の社会人2~4年目

悩み：まずは3年働いてみることを大事にしていたが、現状のキャリアのまま進むかどうかを悩んでいる。

性別：女性

職種：IT系やベンチャー企業がメインターゲット

視認性が高く、転職検討層の若手社会人にとって深く刺さるようなキャッチコピーでサイトへを認知してもらうようなバナーだといえるでしょう。

バナーを作成する際は、まずターゲットとなるユーザーにヒアリングをして、どんな悩みがあるのかを実際に聞いておくと、リアリティのあるアウトプットになるでしょう。

設置位置・サイズの決定

バナーと一言でいっても、設置する位置やサイズによってクリエイティブが変わります。

バナーを掲載する箇所ごとの特徴を考えた上で、必要な分のバナー制作に取り掛かりましょう。

バナー掲載する情報の決定

前述したペルソナやターゲットを考えた上で、必要な要素を洗い出し、バナーの構成要素をまとめていきましょう。

バナーはサイズが大きいものであっても、載せられる情報には限界があります。キャッチコピー、使用する画像を設置位置やサイズを考えた上でラフ制作に移ります。

ラフの制作

上記のようにペルソナ設定やキャッチコピーの方向性が決まったら、まずはラフの作成に取り掛かりましょう。

いきなりIllustratorやPhotoshopでラフをつくってもいいですが、メモ帳などに手描きでいいのでざっくりとしたイメージを描いておくのもよいです。

バナーはたくさんクリックされればいいというわけではありません。バナーのクリエイティブを作成するうえで、メディアのトンマナやルールにマッチした内容にしないと、媒体側から掲載停止をされたり、ユーザーからクレームが挙がることもあります。

ですから、他のデザイン業務同様、クライアントやユーザーニーズを汲み取りながらも倫理観を持った上で作成する必要があります。

バナーと遷移先のLPの内容がズレているとユーザーはがっかりして離脱したり、動揺してしまうこともあるでしょう。ですから、掲載する文言や素材選びは慎重におこないましょう。

もう少しテクニカルな話をすると、バナーは色が多すぎたり、掲載する媒体とカラーやフォントの相性がよくないと、浮いてしまう可能性があります。ですから、掲載媒体のトンマナを崩さない、だけどクリックしたくなるようなものを作成するように心がけましょう。

バナーは複数パターン作ろう

バナー作りはなかなか抽象度の高い作業になります。当初のイメージのすり合わせをしっかりしていても、いざアウトプットしてみると色合いやキャッチコピーのフォントなどなど、手戻りが発生する可能性があります。

ですから、より依頼者とマッチしたイメージを作成するためにも、複数パターン作成しておくと、すり合わせ工数を減らせます。

・思い切ったAパターン

・手堅く作ったBパターン

・ガラッと雰囲気を変えたCパターン

のように2,3種類ほど作っておくと、選定する側も判断しやすいです。

このように、バナーデザインは事前と事後のコミュニケーションが非常に重要な仕事です。デザイン力はもちろん、要望やユーザーニーズを汲み取って、形にするためのすり合わせ力がデザイナーには問われるでしょう。

バナーデザインのポイント

バナーデザインをする上で、具体的にどのようなポイントに気をつけながら制作するとよいかをまとめます。

配色

フォントから画像まで全体の配色のバランスをとるのは非常に重要です。企業ごとに決まっているブランドカラーがあればそちらを使用するレギュレーションがあることも多いです。配色する上で、色合いの与える印象によってユーザーの受け取り方も変わるので、選択した色味が与える影響についても考えながら色を選定していきましょう。

フォント

フォントはメッセージの印象を大きく左右します。ブランドとして決まっているフォントがあればそちらを使用するのがよいでしょう。フォントを選ぶ際に、大事なのが視認性の高いフォントを選ぶことです。一見かっこいいのだけど、メッセージが伝わりにくい　というフォントもあるので、視認性と伝えたいメッセージにマッチしたものの両立を目指しましょう。

また、フォントサイズが与える影響力も大きいです。サイズ感によってキャッチコピーの掲載できる範囲にも影響が出ますし、キャッチコピーから与える印象も大きく変わるでしょう。

キャッチコピー

キャッチコピーはバナーのコアとなるメッセージを伝える存在です。いかに簡潔でわかりやすく態度変容を起こしてもらうかを考えながらメッセージを決めていきましょう。なんとなくかっこよかったり、収まりがよいフレーズではなく、バナーからどんな行動をとってもらいたいかを考えた上で案を書き出してみて、選定していきましょう。