バナーとは？デザインの作り方や種類も解説
「ホームページ運用にバナーが重要だと聞いたけど具体的に何を指しているのかわからない」
「バナーについて詳しく知りたい」
ホームページ内での導線やCV（コンバージョン＝ホームページが目標とする最終的な成果）において、バナーの存在はとても重要です。
何を伝えたいのかわからない曖昧なバナーを作成すると、クリックはされずにかえって敬遠されてしまうでしょう。
そこで今回は、バナーの基礎知識から、デザインの作り方や種類について解説します。
これからホームページ運用を検討している方は、ぜひ本記事を参考に素敵なバナーを制作してください。
１．バナーとは？
Web上におけるバナーとは、該当ページへ誘導するために用いられる画像広告のようなものです。
例えば、当ホームページでも、トップページにバナーを設置しています。
誰もが目に留まるような位置にバナーは設置される傾向にあり、案内板のような働きをもつのが特徴です。
多くのメディアやホームページで、商品・サービスの認知度向上のためにバナーが使われます。
Yahoo! JAPANのように、他社商品・サービスの宣伝媒体として用いるために、バナー設置の枠を設けている検索エンジンやメディア、Webサービスもあります。
１-１．なぜバナーを設置するのか
バナー設置は、見てほしい情報や誘導したいページを見つけてもらいやすくなるメリットがあります。
例えば、ホームページの中に目立つ色やデザインのバナー画像があると、内容は別として注目してしまうはずです。
さらに、そこに自身が知りたい情報やページがあると理解できれば、クリックを促すことができます。
現在興味がなかったとしても、バナーが記憶に残ってさえいれば、改めて必要になった際にクリックしてくれる可能性もあるでしょう。
バナーは本来、旗やのぼりという意味をもちますが、ホームページ上でも、そこに何があるのか示す重要な役割を持っているのです。
２．ホームページに設置するバナー
バナーは、「ホームページに設置するバナー」と「広告用に設置するバナー」の2種類に分けられます。
今回は特に「ホームページに設置するバナー」について、確認していきましょう。
ホームページに設置するバナーは、ホームページに訪れたユーザーが求めている情報・ページを見つけやすくするために設置します。
ホームページに設置するバナーの大半はページの上部あるいは側面といった、ユーザーが必ず見る部分に設置するのが特徴です。
また、ユーザーが求めている情報だけでなく、運営側が見てほしい情報があるときにも活用できます。
例えば、キャンペーンやイベントの告知、期間限定の商品販売を行う際にバナーを用いているケースが多いです。
３．バナーを「作成する」時のポイント３つ
バナーを作成する際は、以下のポイントを意識するのがおすすめです。
- 目的とターゲットを決める
- 訴求ポイントを決める
- クリックしたくなるバナーを意識する
では、それぞれのポイントについて詳しく解説します。
３-１．目的とターゲットを決める
まずはバナーを作成する目的と見せたいターゲットを決めましょう。
とりあえずバナーを作成しようという曖昧な計画で進めると、ユーザーが見ても刺さらないデザインになってしまいます。
例えば、商品・サービスの認知度向上を目的とする場合、
- 同じジャンルに興味・関心があるかどうか
- 年齢
- 職業
- 住んでいる地域
- 必要としている情報は何か
といった部分まで絞り込んでいきましょう。
人は1日に6,000以上の広告を目にするといわれている中、ユーザーも広告に対する姿勢が厳しくなりつつあります。
その中で、「自分に向けて発信している内容だ」と認識してもらうには、適切なターゲティングが必要です。
目的とターゲットの選定を間違えてしまうと、せっかく作成したバナーの効果も半減してしまうので注意しましょう。
３-２．訴求ポイントを決める
目的とターゲットを決めたら、次に訴求ポイントを決める工程です。
訴求ポイントでは、バナーを通じて何を伝えたいのかを洗い出していきましょう。
例えば、商品・サービスの販売促進を目的としたバナー制作をするとします。
- 商品・サービスを必要としているユーザーの悩みから訴求する
- 商品・サービスを使ったメリットから訴求する
上記のような訴求方法によって、ユーザーへの興味・関心を集めることができるでしょう。
当然、最も伝えたい内容は一番目立たせる必要があるので、優先順位をつけておくのも忘れてはいけません。
ユーザーによってどのような訴求方法が刺さるのかは異なるので、A/Bテストをする前提でいくつかのパターンを用意しておくといいでしょう。
３-３．クリックしたくなるバナーを意識する
バナーはクリックしてもらわなくては意味がないため、訴求力＋目立つデザインで制作する必要があります。
訴求力を高めるには、思わずクリックしてしまうようなワードを組み込むのがおすすめです。
- ○月○日までの限定特典
- 無料
- 初回限定○○円
- 限定○名様のみ
- 今だけ○○
ここで購入・申し込みをしなければお得にならないかもしれない、という気持ちを強くさせるワードを用いると、訴求力は高まります。
その上で、ホームページ内で目立つ色を取り入れる、わかりやすい位置に設置するといった部分を意識し、クリックしてもらいやすい工夫を施しましょう。
４．バナーを「デザインする」時のポイント４つ
バナーをデザインする際には、以下のポイントを意識することが大切です。
- 色
- フォント
- キャッチコピー
- デザインは複数考える
それぞれのポイントを理解し、ユーザーがクリックしたくなるようなデザインのバナーを制作しましょう。
参考：文字のせ画像とバナー作成機能を使って印象的なホームページにしよう
４-１．色
バナーに限らず、色は視覚的に訴えることのできるデザインの根幹を担う部分です。
ホワイトを背景に設定しているホームページに、グレーのバナーを設置しても、あまり目立たないでしょう。
逆に、青色や赤色の配色を取り入れるとホームページ内で際立つため、色の選択は重要であることがイメージできるのではないでしょうか。
目立つ色の中でも、バナーの制作目的に合致しているカラーであるかを確認しましょう。
例えば、商品・サービスが温かさを伝えるために暖色を取り入れているとします。
このとき、バナー画像を青・紫のような寒色をメインにしてしまうと、商品・サービスとのイメージにズレが生じます。
目立つ色とはいえ、バナーの制作目的に矛盾しないようなカラーを取り入れるようにしましょう。
また、取り入れる色を増やしすぎないよう注意してください。
さまざまなカラーを入れると、ユーザーとしてはどこに注目していいかわからなくなるので、最も訴求したい部分が刺さりにくいです。
多くても3色までを使うように意識し、ベース・メイン・アクセントの順に7：2：1の割合で取り入れるようにしましょう。
参考：ホームページデザインで最低限気を付けたい！３つのポイント
４-２．フォント
バナー画像にテキストを挿入する際、フォントによって印象は大きく変わります。
柔らかいイメージを伝えたいなら、丸みのあるフォントや手書き風のフォントを取り入れるなどです。
中には複数のフォントを使用して、メリハリをつけたバナー画像を制作している企業もあります。
しかし、複数のフォントを使用すると統一性が失われる可能性があるため、バナー制作初心者の場合は多くても2種類までに抑えたほうが整いやすいでしょう。
複数フォントを使用する際は、必ず客観的にバナーを見て統一感があるかどうかを確認しながら制作してください。
また、フォントサイズにも注意が必要です。
一番伝えたいメッセージはどのくらい大きくするのか、どの部分で改行するのかを意識しましょう。
また、バナー内で伝えられるテキストは限られているので、最小限かつ的確に訴求できるメッセージを使う必要があります。
後述するキャッチコピーに通ずるものですが、メッセージ性のある文章をフォントによってさらに強調・アピールできるようにしましょう。
４-３．キャッチコピー
キャッチコピーは、伝えたい内容を端的に表現した言葉です。
例えば、以下のようなキャッチコピーがあげられます。
- やめられない、とまらない：かっぱえびせん カルビー
- そうだ 京都、行こう。：JR東海
- 乾杯をもっとおいしく。：サッポロビール
- お、ねだん以上。：ニトリ
聴き心地がよく耳に残るフレーズであるほど、印象を強く与え、記憶に残りやすいです。
そのため、バナーを制作する際も、ユーザーの記憶に残るようなキャッチコピーを用いることをおすすめします。
キャッチコピーとはいかずとも、キラーワードを目立たせるだけでも印象強くなるので、どのようなバナーを作るかによって取り入れてみてください。
４-４．デザインは複数考える
どのようなバナーがクリックされやすいかは、実際に検証してみなくてはわかりません。
そのため、最初からデザインを複数考えておき、A/Bテストでクリック率の高いバナーを選定していくのも効果的です。
A/Bテストを実施する際は、1箇所のみ変更を加えたデザインで効果測定を行いましょう。
例）
- バナーの「ベースカラー」を青と紫を用意した
- バナーの「キャッチコピー」を2種類用意した
- バナーの「メイン画像」を商品と人物の2種類用意した
2種類以上デザインを変更してしまうと、どの要素が効果的なのかが見えづらくなります。
時間・コストはかかってしまいますが、将来的な利益を考えると、デザインは複数考えておき、効果のあるものに絞っていくといいでしょう。
５．まとめ
今回はホームページに使用するバナーについての基礎知識やデザイン、種類を解説しました。
バナーは誘導したいページや情報をユーザーに見つけてもらいやすくするために必要です。
だからこそ、クリックしたくなる、興味・関心が沸くようなデザインを取り入れるべきでしょう。
当システムでは、画像や色の指定と文字を組み合わせて簡単にバナーを作成できる「文字のせ画像」機能があります。
ぜひこちらをご活用いただき、ご自身でバナーを作成してみてください。
参考：文字のせ画像とバナー作成機能を使って印象的なホームページにしよう