バナーとは？設置する意味や種類、作り方のポイントを解説

バナーとは、WebサイトやSNSのユーザーに対して、わかりやすく情報を伝えるために用いられる広告画像のことです。うまく活用することによって、サイトへの誘導や商品の宣伝ができます。知っておきたいバナーの役割や作成の流れなどをご紹介します。

バナーとは？

バナーとは直訳すると「旗」や「のぼり」を意味する言葉で、Web業界においてはユーザーに対してわかりやすく情報を伝えるために設置される画像を意味します。バナー画像にはリンクが設置されるのが一般的で、関連情報を掲載したWebページやおすすめしたい商品・サービスのページなどに誘導するのが目的です。

ユーザーが何気なく目にするバナーですが、実際には興味をもってもらえるようなさまざまな工夫がされています。バナーの設置媒体やデザイン、キャッチコピーなどを工夫することで、確度の高いユーザーに訴求できるでしょう。

バナーは2種類ある

バナーは明確な目的をもって設置されるものであり、その設置場所によって種類分けされています。バナーの種類は、主に次の2つです。

サイト用バナー
Web広告用バナー

それぞれの特徴を詳しく解説します。

サイト用バナー

1つ目は、各種Webサイトに設置されるサイト用バナーです。サイト用バナーは、一般的に同一サイト内をスムーズに移動できるように設置される場合が多いでしょう。

たとえば、自社商品のターゲット層が興味を持つであろう記事を作成・掲載する際に、商品ページへ誘導するバナーを設置することで、確度の高いターゲットへの訴求が可能です。また、商品・サービスの専用サイトを別途設けている場合は、同一サイト内ではなく外部サイトへのリンクを設置したバナーが用いられることもあります。

Web広告用バナー

2つ目のWeb広告用バナーとは、バナー広告枠を用いて宣伝をおこなう際に用いられるバナーを意味します。バナー広告が出せる媒体としては、WebサイトをはじめSNSや動画配信サービスなど幅広いのが特徴です。

自社のサイトに広告を設置する場合に比べて、より多くのユーザーにアプローチできます。一方で、広告枠を利用する他の企業や商品・サービスよりも目立たせなければならないため、デザインや設置媒体などを入念に検討する必要があるでしょう。

バナーの設置目的と役割

バナーの概要が掴めたところで、必ずチェックしておきたいのが設置目的と役割です。ポイントとなるのは、次の2点です。

特定の情報を強調する
訴求したい商品・サービスへ誘導する

バナーに関しては、やみくもに設置するのでは意味がありません。目的と役割を正しく理解したうえで、自社を効果的にアピールできる媒体や施策を検討することが重要です。

知っておきたいバナーの目的と役割をご紹介します。

特定の情報を強調する

バナーを設置する1つ目の目的は、特定の情報を強調することです。興味をひくデザインのバナーを設置し視覚的にアピールすることで、多くのユーザーに情報を届けることができます。

バナーは瞬時に情報が伝わりやすい画像であるため、テキストだけで表現する場合に比べて、訴求できる確率が高まるでしょう。

たとえば、飲食店の宣伝をしたい場合に、「新鮮な食材の並ぶ小料理屋」というキャッチコピーだけでは、ユーザーが具体的なイメージをするのが難しいかもしれません。

一方でバナーに実際の料理の写真が挿入されていれば、パッと見ただけでどのような料理を提供するお店かが想像しやすくなります。伝えたい情報を強調するために、視覚的なアピールが得意なバナーが活躍するでしょう。

訴求したい商品・サービスへ誘導する

バナーはユーザーの興味をひいたうえで、訴求したい商品やサービスページへ誘導する役割も果たします。バナーには、リンクが設置されているのが一般的です。

より詳しい情報を知りたいと考えたユーザーがバナーをクリックする動作を経て、特定のページに誘導します。ターゲット層が興味をもつような関連記事や情報ページにバナーを設置することで、実際に商品やサービスを購入・利用してもらえる確率が高まるでしょう。

バナーを設置する際には、最終目標である訴求力を考慮して、ターゲット層にアピールしやすい内容や設置場所を検討する必要があります。

新規開拓から商談獲得までを支援するメールマーケティングサービス「配配メール」では、作成したバナーをWebサイト上に表示させる「ポップアップ機能」を提供しています。

専門的な知識がなくともバナー素材さえあれば、だれでも簡単に設定できます。

また、バナーを表示させるタイミングも柔軟に設定できるので、Webサイトの閲覧を阻害せずにプロモーションができるので、ご興味のある方は以下より詳細をご確認ください。

関連記事はこちら配配メールのポップアップ機能とは？

バナーの目的別推奨サイズ

バナーのサイズは、これといった規定サイズがあるわけではありません。しかし、バナーを設置する媒体や広告枠によって、ユーザーにとって見やすいサイズが異なります。

バナーを効果的に運用するためには、目的別の推奨サイズを押さえておくことが重要です。具体的には、次の3つのサイズを把握しておきましょう。

レクタングル
スカイスクレーパー
ビルボード

それぞれの用途を詳しく解説します。

レクタングル

レクタングルとは、スマホとPCの両方でよく見られる大きめの長方形のバナーです。レクタングルバナーの代表的なサイズは300×250pxで、収益化しているブログなどのWebサイトに設置されることも多いでしょう。

記事などのコンテンツを配信しているWebサイトの場合、レクタングルバナーが設置場所はサイドバーやコンテンツの下側などです。GoogleやYahoo!などの代表的なディスプレイ広告でも採用されており、ユーザーとしても見慣れているサイズのバナーの1つだといえるでしょう。

スカイスクレーパー

スカイスクレーパーとは、Webページのサイドに設置されることが一般的な縦長のバナーのことです。スカイスクレーパーバナーの代表的なサイズは、次の2つです。

300×600px（ハーフページ）
160×600px（ワイドスカイクレーパー）

縦に600pxの長さがあることで、ユーザーに視覚的なアピールをしやすいのが特徴で、ブランドや商品・サービスの認知度向上のために利用されるケースが多いでしょう。スカイスクレーパーはWebサイト向けサイズのバナーで、スマホには適していません。

ビルボード

ビルボードとは、スカイスクレーパーと同様に主にWebサイトに設置される横長のバナーを意味します。ビルボードバナーの代表的なサイズは、728×90pxです。

ビルボードバナーは、Webサイトのヘッダー近くに配置されることが多いでしょう。Google広告においては、ビッグバナーやスーパーバナーと呼ばれることもあります。

横幅が広くポスターのように見えるため、存在感が大きいバナーの1つです。近年では、ビルボードバナーに動画が埋め込まれるタイプの広告も増えています。

バナー作成の流れとポイント

バナーを作成する際には、次の8つの工程を経る必要があります。

目的とターゲットを設定する
バナーのサイズを決める
バナーの構成要素を決める
キャッチコピーを作る
レイアウトを整える
ラフを描く
フォントや行間の調整をする
配色をする

それぞれの段階で押さえておきたいポイントについても解説します。

1.目的とターゲットを設定する

バナー作成の最初の段階は、目的とターゲットの設定です。ひとえにバナーとはいっても種類やデザインによって効果が異なるため、目的とターゲットを定めることで、どのようなバナーに仕上げるべきかが明確になります。

バナー設置の目的としては、ブランドの認知度向上や商品・サービスの販売促進などが考えられるでしょう。複数の目的がある場合も、とくに優先したい分野を設定しておくとバナー作成がスムーズに進みます。

ターゲットは、ペルソナを設定するなどできるだけ詳しく掲げておくのが重要です。ターゲット設定がしっかりしていれば、その後のデザインがしやすくなります。

2.バナーのサイズを決める

目的とターゲットが定まったら、バナーのサイズを検討しましょう。バナーの推奨サイズの章でも触れたように、バナーはサイズによってユーザーに与える印象が異なります。

ポスターのように存在感を出したい場合はビルボード、1つのコンテンツのようにページ内に溶け込ませたい場合はレクタングルなど、バナーの設置目的とターゲットを考慮してサイズを選びます。

また、バナーの設置場所によっても適切なバナーサイズが異なる点には注意が必要です。自社サイトの場合は好きな位置にバナーを設置できますが、しっかりと効果を検討してバナーを置く場所とサイズを決めるようにしましょう。

関連記事はこちら適切なバナーサイズとは？広告別の一覧や制作に便利なツールを紹介

3.バナーの構成要素を決める

バナーのサイズが決定したら、具体的な構成要素の検討に移ります。バナーには写真や動画、イラスト、キャッチコピー、ロゴなどさまざまな要素が組み合わされているのが一般的です。

いきなりデザインを始めてしまうのではなく、まずはバナーにどのような要素を入れるべきかを検討する必要があります。設定した目的を達成するために、バナーに欠かせない要素を洗い出しましょう。

最初の段階で必要な要素を決めることができれば、その後のデザインがしやすくなります。

4.キャッチコピーを作る

バナーにキャッチコピーが入る場合は、早い段階でキャッチコピーの内容を決めておくことが重要です。キャッチコピーの文字数によって全体のレイアウトに影響が出るだけではなく、ターゲットに与える印象まで左右される可能性があります。

バナーは一瞬で視覚的にユーザーにアピールする必要があるため、短いなかで興味をひき、相手の心を動かすようなキャッチコピーに仕上げなければなりません。バナーは、興味をもってくれたユーザーを最終的に特定のページに誘導する役割をもっています。

クリックすることのメリットなどを強調できるキャッチコピーであれば、ユーザーの行動を引き出させる可能性があるでしょう。

5.レイアウトを整える

バナーに挿入するキャッチコピーが決まったら、構成要素をどのようにまとめるか、具体的なレイアウトを検討しましょう。画像とキャッチコピーをそれぞれエリアで分けて挿入したり、画像の上にキャッチコピーを重ねる形でまとめたりと、レイアウトにもバリエーションがあります。

最初から1つの案に固執してしまうのではなく、複数のレイアウトを作成し、候補を絞っていくのもよいかもしれません。同じ要素を用いる場合であっても、レイアウトによってユーザーに与える印象が異なるからです。

設定したバナーの目的とターゲットに沿ったレイアウトに仕上がるよう意識しましょう。

6.ラフを描く

決定したレイアウトに沿って、ラフを作成する段階です。イラストや写真、キャッチコピーなどの位置を確認しながら、全体のバランスを取っていきます。

ラフの段階では、配色をせずモノクロで問題ありません。反対にラフに色付けをしてしまうと、レイアウトよりも配色に気が取られてしまう可能性があるため注意しましょう。

ラフの作成方法としては手書きでざっくりとしたラフに仕上げる場合もあれば、IllustratorやPhotoshopで本格的に作成する方法もあります。まだ候補が絞り切れていない場合は、手書きのラフを作成することでより具体的なイメージが湧き、比較しやすくなるはずです。

いくつかの候補のなかから実際に採用するレイアウトが定まったら、ツールを使ってデザインの下地となるラフに仕上げていきましょう。

7.フォントや行間の調整をする

ラフが完成したら、フォントや行間など細かい調整に移ります。どのフォントを採用するかによって、キャッチコピーのイメージが変わるため、慎重に検討しましょう。

また、1つのバナーに多くのフォントが混在していると、統一感が失われてしまう点にも注意が必要です。特別な理由がある場合を除いて、フォントは1種類のみ、または組み合わせて使っても違和感のない合成フォントを利用するようにしてみてください。

また、フォントサイズや行間にメリハリをつけるのも、伝えたいメッセージを強調するための重要な手段です。要素を細かく分けて分析し、読みやすくメインメッセージが伝わりやすい仕様に仕上げる必要があります。

具体的には、読みやすさを重視して文章を改行するポイントを検討し、行ごとに横幅を揃える作業は必須です。そのうえで、限られたスペースを有効活用できるように行間を整えます。

8.配色をする

フォントや行間の調整が終わったら、いよいよラフ画に配色をします。フォントにはじまり枠線などのデザイン、画像やイラスト要素まで、全体的な配色バランスを取るのが重要です。

ブランドや商品の伝えたいイメージに合わせて、メインカラーを設定するのもよいかもしれません。あまりにも多くの色を混ぜてしまうと、統一感のない仕上がりになってしまう可能性があるため注意しましょう。

バナーという限られたスペースを美しく配色するためには、色ごとのバランスにも気を配る必要があります。一般的に美しいと感じられる配色バランスは、ベースカラー7割・メインカラー2割・アクセントカラー1割といわれています。

配色バランスを意識しつつ、ユーザーに訴えかけるインパクトのあるバナーにまとめてみてください。

バナー作成に使える3つのツール

バナーを作成するためには、次のようなツールが活用できます。

Canva
Adobe Photoshop・Illustrator
Adobe Express

バナーの作成においては、これと決められたツールはありません。なかにはデザインの知識がなくても使いやすいツールも登場しているため、いくつか試してみて自分に合ったツールを選ぶようにしてみましょう。

Canva

Canvaは、世界中のデザイナーたちが作成したデザインテンプレートを利用できるツールです。バナーだけではなく、SNSの投稿や動画など、さまざまなデザインが作成できテンプレート数は60万を超えます。

ツール自体もデザインの知識がなくても使いやすい仕様になっているため、これまでバナー作成に苦戦していた場合でも、テンプレートを活用して手軽にデザインができるのが特徴です。無料で利用することもできますが、使用できるデザイン要素やテンプレートに制限がかかるため、本格的にビジネスで利用するためには有料プランの契約が向いているでしょう。

また、専用のソフトやアプリをインストールしなくても、Webに接続できる状態であればバナー作成ができてしまうのもCanvaのメリットです。

Adobe Photoshop・Illustrator

Adobeが提供するPhotoshopとIllustratorは、デザイナーの分野で広く活用されているツールです。デザイナー向けのツールである分、色彩のグラデーションや特殊効果など、細部までこだわったデザインに仕上げることができます。

ただし、ツール自体が初心者にもわかりやすくできているわけではないため、ツールの使い方を学んでからバナー作成をする必要があるでしょう。ツールの細かい説明に関しては、ツール上に解説がなくその都度検索する必要があるなど、ある程度知識がないとデザイン作成が難しいかもしれません。

テンプレートを利用して作るのではなく、いちからバナーデザインを作り上げたいという場合に適しています。

Adobe Express

Adobe Expressは、同じくAdobe社が提供するツールで、ノンデザイナーでも利用しやすいアプリです。搭載機能はPhotoshopやIllustratorよりもシンプルで、操作画面が複雑ではないため、デザインの知識がなくても活用できます。

テンプレートを使ってデザイン作成ができるほか、クイックアクションで簡単に色彩の選択やデザイン要素の追加が可能です。無料プランもありますが、機能が制限されているため、凝ったバナーデザインをするためには有料プランの契約が必要となります。

ゆくゆくはPhotoshopとIllustratorを使ったバナーデザインをしてみたいと考えている場合には、Adobe Expressを利用するメリットが大きくなるでしょう。

まとめ

バナーとは、WebサイトやSNS、アプリなどに設置される画像を意味します。ユーザーの目をひくデザインに仕上げることで、特定の情報を強調するのが役割です。

バナーには主に別ページへのリンクが設定されているため、ブランドや商品・サービスのページに誘導することができます。目的やターゲットに合ったバナーをデザインし、ターゲット層の目につきやすい場所に設置することで、認知度向上や売り上げ増加が期待できるでしょう。

ただし、サイズやデザインを検討せずにバナーを作成しても、プラスの効果は生まれません。ご紹介したポイントを参考にしながら、自社の戦略やターゲットにマッチしたバナーに仕上げてみてください。

また、近年ではデザインの知識がなくても利用できるデザインツールが多く登場しています。デザインツールは無料で操作感を試すことはできても、本格的にビジネスに活用するためには有料プランの契約が必要となるケースも多いかもしれません。

しかし、社内のリソース不足でデザイン性の高いバナーが作成できていない場合には、ノンデザイナー向けのツールを利用するのも1つの手段です。バナーを設置する目的をいま一度整理し、ターゲットの心を動かすようなデザインを作り上げてみましょう。

作成したバナーをサイト上に掲載する場合は、新規開拓から商談獲得までを支援するメールマーケティングサービス「配配メール」の利用がおすすめです。

専門的な知識がなくともバナー素材さえあれば、だれでも簡単にポップアップ形式でバナーの表示設定ができます。

関連記事はこちら配配メールのポップアップ機能とは？

－メルマガ・メール配信サービス－

「配配メール」は、企業の集客・販促活動に携わる方のメールマーケティング業務を支援するサービスです。
シンプルな配信操作、見やすい成果指標レポート、メールの反応による見込み客の可視化、サイト来訪通知といった機能によりメールマーケティングの実践をサポートします。
また、機能の提供だけではなく、ナレッジ提供や個社の運用に踏み込んだ手厚いアフターフォローにより、お客様の販促の成功に向け伴走します。
メール配信の初心者から本格的なメールマーケティングの実践を目指している方まで、どなたでも安心してお使いいただけるサービスとして、お客様に長く愛され、98%の継続利用率を維持しています。