オンラインショップを運営するにあたって、広告の役割を果たすのが様々なページに設置するバナーです。
バナー（Banner）とは本来、旗印を意味する単語ですが、Webでは特定のサイトへの誘導や商品・サービスの認知度アップなどを目的として設置する画像のことを指します。単純なテキストにリンクを貼り付けるよりも、インパクトのあるバナーにリンクを貼った方が消費者の目に留まりやすく、宣伝効果を期待できるでしょう。
バナー（Banner）とは本来、旗印を意味する単語ですが、Webでは特定のサイトへの誘導や商品・サービスの認知度アップなどを目的として設置する画像のことを指します。単純なテキストにリンクを貼り付けるよりも、インパクトのあるバナーにリンクを貼った方が消費者の目に留まりやすく、宣伝効果を期待できるでしょう。
本記事ではオンラインショップの集客率アップに役立つバナーを作成する手順や、作成前に意識したいポイント、クリック率を上げるコツについて解説します。
バナー作成前に意識したいポイント
オンラインショップのバナーを作成するには、少なからず手間と時間がかかります。
行き当たりばったりで適当に作成すると時間と労力ばかりを費やして、思うような効果を得られない可能性がありますので、事前に重要なポイントを押さえておきましょう。
ここではバナー作成前に意識したいポイントを6つ紹介します。
行き当たりばったりで適当に作成すると時間と労力ばかりを費やして、思うような効果を得られない可能性がありますので、事前に重要なポイントを押さえておきましょう。
ここではバナー作成前に意識したいポイントを6つ紹介します。
1. バナーを作成する目的を明確にする
バナーを作成・設置する目的は店舗によってまちまちで、自社の商品やサービスの認知度アップを目指している店もあれば、問い合わせや資料請求ページへの目印にしたり、商品の詳細ページへの誘導に使ったりするところもあります。まずは、なぜバナーを作成するのか。どのような目的を達成したいのか。を明確にし、バナー作成の方針を固めていきましょう。
2. バナーのコンセプトを決める
バナーはテキストやフォント、デザインなどを任意で決められますが、自由度が高い分、コンセプトが定まっていないと訴求軸やデザインの方針があやふやになってしまうおそれがあります。
1.で決めたバナー作成の目的を踏まえつつ、消費者に何を伝えたいのか、どのようなことを知ってもらいたいのかをノートなどに書き出してみましょう。いくつか候補を挙げていくと、おぼろげだったコンセプトがはっきりしてデザインや色使い、キャッチコピーのイメージも固まりやすくなります。
1.で決めたバナー作成の目的を踏まえつつ、消費者に何を伝えたいのか、どのようなことを知ってもらいたいのかをノートなどに書き出してみましょう。いくつか候補を挙げていくと、おぼろげだったコンセプトがはっきりしてデザインや色使い、キャッチコピーのイメージも固まりやすくなります。
3. ターゲットを決める
万人が好むデザインを追求すると、インパクトのない無難なバナーになってしまい人々の目に留まりにくくなります。
オンラインショップや商品の客層をもとに、バナーを閲覧する人を想定してターゲットに響くデザインやキャッチコピーを考えることが大切です。
例えば若い女性ならおしゃれでかわいいデザインを、シニア世代ならフォントなどを大きくして見やすさを重視したデザインを取り入れると、ターゲットの興味を引きやすくなります。
オンラインショップや商品の客層をもとに、バナーを閲覧する人を想定してターゲットに響くデザインやキャッチコピーを考えることが大切です。
例えば若い女性ならおしゃれでかわいいデザインを、シニア世代ならフォントなどを大きくして見やすさを重視したデザインを取り入れると、ターゲットの興味を引きやすくなります。
4. バナーの設置場所をどこにするか
バナーのサイズやカラーの規定は、バナーを設置するサイトによって異なります。 自社サイトに設置するのであればある程度融通が利きますが、他サイトにバナーを設置する場合はそのサイトの規定に合わせてサイズやカラーを調整しなければなりません。
サイトの規定に合わないバナーを作成すると、審査で引っかかって掲載不可になってしまう可能性があるため、バナーをどこに設置するのかを決めた上で、バナーの規定をしっかり確認しておきましょう。
特に規定がない場合でも、設置するサイトの雰囲気やイメージを損なうようなデザイン・カラーは避けた方が無難です。
サイトの規定に合わないバナーを作成すると、審査で引っかかって掲載不可になってしまう可能性があるため、バナーをどこに設置するのかを決めた上で、バナーの規定をしっかり確認しておきましょう。
特に規定がない場合でも、設置するサイトの雰囲気やイメージを損なうようなデザイン・カラーは避けた方が無難です。
5. バナーの国際基準を知っておく
Webに設置するバナーには、アメリカのインターネット広告業界団体であるIAB（Interactive Advertising Bureau）が国際基準として定めたサイズがあります。
バナーを設置する場合は、国際基準のサイズをもとに作成すると規定に反するリスクを予防できるでしょう。 IABが規定したバナーの国際基準サイズは、以下3つのカテゴリに分類されています。［注1］
バナーを設置する場合は、国際基準のサイズをもとに作成すると規定に反するリスクを予防できるでしょう。 IABが規定したバナーの国際基準サイズは、以下3つのカテゴリに分類されています。［注1］
Rectangles and Pop-Ups（長方形とポップアップ）
| 名前 | サイズ（縦×横pixel） |
| Medium Rectangle（中程度の長方形） | 300×250 |
| Square Pop-Up（正方形ポップアップ） | 250×250 |
| Vertical Rectangle（垂直長方形） | 240×400 |
| Large Rectangle（大きい長方形） | 336×280 |
| Rectangle（長方形） | 180×150 |
| 3:1 Rectangle（3:1長方形） | 300×100 |
| Pop-Under（ポップアンダー） | 720×300 |
Skyscrapers（高層ビル）
| 名前 | サイズ（縦×横pixel） |
| Wide Skyscraper（幅広スカイスクレイパー） | 160×600 |
| Skyscraper（高層ビル） | 120×600 |
| Half Page Ad（ハーフページ広告） | 300×600 |
なおIABでは年に2回程度、広告サイズのワーキンググループを開催しており、提案された新しい広告ユニットを確認した上で必要に応じてバナーサイズの見直しを行っています。
バナーを作成するときは、IABから最新の情報を確認して国際標準規格に沿ったバナーの作成がおすすめです。
［注1］IAB：Ad Unit Guidelines
https://web.archive.org/web/20071015042304/http://www.iab.net/standards/adunits.asp
（参照：2022-07-15）
6. 静止画バナーか動画バナーかを決める
バナーには動きのない静止画バナーとアニメーションのように動く動画バナーの2種類があります。 インパクトがあるのは動画バナーですが、1つのページに複数の動画バナーがあるとうるさく感じてしまうかもしれません。 また動画バナーは容量が重くなることが多く、表示スピードが静止画バナーより若干遅れる傾向にあります。
以上の点やバナーを設置する位置、全体のデザインなどをもとに、静止画にするか、動画にするか検討しましょう。
以上の点やバナーを設置する位置、全体のデザインなどをもとに、静止画にするか、動画にするか検討しましょう。
バナーを作成する手順
下準備が終わったら、オンラインショップのバナーを実際に作成してみましょう。
以下では、バナーを作成する基本的な手順をご紹介します。
以下では、バナーを作成する基本的な手順をご紹介します。
1. バナーに載せる情報をまとめる
まずはバナーに載せるべき情報を箇条書きでまとめていきましょう。
例えば会社名、商品名、キャッチコピー、画像などです。 ただしバナーのサイズによってはすべての項目を記載できないため、情報の取捨選択をする必要があります。その場合は情報に優先順位を付け、必ず掲載したいもの、サイズによっては省略してOKなものを区分しておくと、レイアウトを決めやすくなるでしょう。
例えば会社名、商品名、キャッチコピー、画像などです。 ただしバナーのサイズによってはすべての項目を記載できないため、情報の取捨選択をする必要があります。その場合は情報に優先順位を付け、必ず掲載したいもの、サイズによっては省略してOKなものを区分しておくと、レイアウトを決めやすくなるでしょう。
2. メインビジュアルを決める
バナーのインパクトを決めるメインビジュアルを選択します。 画像を選ぶ際は単純におしゃれ、かっこいいというだけでなく、バナーで伝えたいことを具現化できているかどうかを重視するのがポイントです。
例えば冬用のアウターをセールスしたいときは、メインビジュアルに雪景色を持ってくるよりも実際にアウターを着用したモデルを採用した方が、消費者も商品を購入したときの様子をイメージしやすくなります。
例えば冬用のアウターをセールスしたいときは、メインビジュアルに雪景色を持ってくるよりも実際にアウターを着用したモデルを採用した方が、消費者も商品を購入したときの様子をイメージしやすくなります。
3. レイアウトを決める
ステップ1、2で決めた要素を組み合わせて、バナーのレイアウトを決めていきます。 どこに何を設置するかは自由ですが、よく見られるパターンは以下3つです。
- 1. ビジュアルとテキストを縦横に分割するレイアウト
- 2. ビジュアルメインのレイアウト
- 3. テキストメインのレイアウト
1はビジュアルとテキストがはっきり区分されているので、メリハリの効いたデザインになります。2は最小限のテキストのみ添えて、ビジュアルをメインに打ち出すことで、視覚的なインパクトを与えることが可能です。 3は伝えたいことを詳しく説明できるレイアウトで、ビジュアルは背景扱いになります。
バナーに載せる情報や消費者に伝えたいことをもとに、どのレイアウトを選べばよいか慎重に検討しましょう。
4. ラフを描く
バナーに載せる情報やメインビジュアル、大まかなレイアウトが決まったら、ノートなどに手書きでラフを描いてみましょう。
実際にラフを描いてみると、思ったよりバランスが悪い、ごちゃごちゃして見にくいなど手直しが必要な部分が明確になります。微調整を加えながら何枚かラフを描いていけば、理想のイメージに近付いていくでしょう。
実際にラフを描いてみると、思ったよりバランスが悪い、ごちゃごちゃして見にくいなど手直しが必要な部分が明確になります。微調整を加えながら何枚かラフを描いていけば、理想のイメージに近付いていくでしょう。
5. フォントの種類、サイズを決める
大体のイメージが固まったら、フォントの種類とサイズを決めます。
バナーのコンセプトやメインビジュアルとの相性、読みやすさなどを総合的に判断し、適切な種類・サイズを選択します。
フォントの種類、サイズは項目ごとに変更してもOKですが、毛色の異なるフォントを複数盛り込むと、見にくく違和感のある仕上がりになってしまうので要注意です。基本的には情報の優先度をもとに、最も伝えたいことは太く大きく、優先度の低い情報は細く小さく表示するとメリハリのあるデザインになります。
バナーのコンセプトやメインビジュアルとの相性、読みやすさなどを総合的に判断し、適切な種類・サイズを選択します。
フォントの種類、サイズは項目ごとに変更してもOKですが、毛色の異なるフォントを複数盛り込むと、見にくく違和感のある仕上がりになってしまうので要注意です。基本的には情報の優先度をもとに、最も伝えたいことは太く大きく、優先度の低い情報は細く小さく表示するとメリハリのあるデザインになります。
6. バナーの色合いを決める
テキストの背景色や文字色などを決めていきます。 メインビジュアルと相性の良い色や、商品・サービスのイメージに合ったカラーを選ぶのがおすすめです。ビジュアルメインのレイアウトを採用する場合は、テキストが背景と同化しないようにコントラストを重視して文字色を選択するのがポイントです。
7. 全体のバランスを整え、プレビューする
最後にバナー全体を見て、違和感のある箇所や不自然な部分はないかどうかチェックします。バナーの設置場所が自社サイトなら、実際に検証ページなどにバナーを設置してプレビューしてみましょう。
バナー単体で見たときは完璧に思えても、実際に設置するとサイトの雰囲気に合わない、テキストが見にくい、といった問題点が浮上する場合があります。 プレビューの段階では公開されないので、掲載先サイトの雰囲気にぴったり合うまで、微調整を繰り返しましょう。
バナー単体で見たときは完璧に思えても、実際に設置するとサイトの雰囲気に合わない、テキストが見にくい、といった問題点が浮上する場合があります。 プレビューの段階では公開されないので、掲載先サイトの雰囲気にぴったり合うまで、微調整を繰り返しましょう。
バナーのクリック率を上げるポイント
オンラインショップのバナーはクリックされて初めて効果を発揮するものです。
ただバナーを作成して満足するのではなく、クリック率を上げるための工夫をしていくことが大切です。ここではオンラインショップのバナーのクリック率を上げるポイントを7つ紹介します。
ただバナーを作成して満足するのではなく、クリック率を上げるための工夫をしていくことが大切です。ここではオンラインショップのバナーのクリック率を上げるポイントを7つ紹介します。
1. テキストはなるべく簡潔にする
オンラインショップのバナーをじっくり眺める人は少ないので、長々としたテキストを掲載しても最後まで読んでもらえるとは限りません。逆にぎゅうぎゅう詰めのテキストを見てうんざりし、その先にあるページへの興味を失ってしまう人もいます。
バナーの役割はあくまでリンク先に誘導することなので、長い説明は詳細ページに任せ、バナーにはどうしても伝えたいことを簡潔に分かりやすく掲載しましょう。
バナーの役割はあくまでリンク先に誘導することなので、長い説明は詳細ページに任せ、バナーにはどうしても伝えたいことを簡潔に分かりやすく掲載しましょう。
2. キャッチコピーはわかりやすさを重視
ホームページやポスターに掲載されているキャッチコピーの中には、あえて謎めいた言い回しを行い消費者の興味を引こうとするものもあります。
しかしそれはキャッチコピーと同じ画面、同じ紙面に詳しい情報が掲載されている場合に有効な方法であり、間にクリック・タップのようなワンクッションを挟むバナーには不向きな場合が多いです。
バナーのキャッチコピーは、一目見ただけで消費者に「自分に関係がある」と思わせることがクリック率を上げるために重要なので、わかりやすさを重視するのがコツです。
しかしそれはキャッチコピーと同じ画面、同じ紙面に詳しい情報が掲載されている場合に有効な方法であり、間にクリック・タップのようなワンクッションを挟むバナーには不向きな場合が多いです。
バナーのキャッチコピーは、一目見ただけで消費者に「自分に関係がある」と思わせることがクリック率を上げるために重要なので、わかりやすさを重視するのがコツです。
3. 掲載先と同じ色・文体を意識する
自社サイト以外にオンラインショップのバナーを掲載する場合、明らかに広告だと分かってしまうと、クリックするのを敬遠されるおそれがあります。バナーの色やテキストは、掲載先と同じ系統の色・文体を意識しサイトになじませると消費者の警戒感を和らげることができます。
4. ターゲットを意識したテキスト・画像を盛り込む
消費者は「自分に関係がある」と思ったときにバナーをクリックする傾向があるので、バナーに使用するテキストや画像はターゲットを意識したものに絞り込むことが大切です。
例えば「60歳以上の方必見！」「繰り返すニキビにお悩みのあなた」など具体的にターゲットを指定する言葉を入れたり高齢者やニキビに悩む女性の画像を使ったりすると、該当するターゲットの興味を効率よく引きつけることができます。
5. 余白を怖れない
バナーに余白があると「地味すぎる」「もっと情報を掲載した方が良いのでは」と思ってしまいがちですが、すき間なく情報を詰め込むとかえって敬遠される可能性が大きいです。適度に余白があった方がテキストや画像の存在を強調できるので、余白を怖れずにデザイン・レイアウトすることが大切です。
6. 動線を考えてバナーを配置する
バナーはサイトのどこにでも設置できるものの、サイトを閲覧している消費者の目線に入りにくいところに掲載した場合、気付かれずに終わってしまうことがあります。消費者はサイトのページ全体をくまなくチェックするわけではないので、ユーザー目線を意識しましょう。ページに訪れたときにどのような軌跡をたどるのか検証し、目に留まりやすい位置にバナーを配置しましょう。
7. ABテストを実行する
ABテストとはベースとなるパターンと、それに変更を加えたパターンの両方を同じ環境下に掲示しその効果を比較するテストのことです。思うようにバナーのクリック率が上がらないと思ったら、別パターンのバナーを同環境下に貼り付け、クリック率の比較を行ってみましょう。
パターンを変えながら何度かABテストを行っていると、どのようなバナーを作ればクリック率が上がるのか、消費者はどういったバナーに興味を引かれるのか、データ検証できるようになります。
パターンを変えながら何度かABテストを行っていると、どのようなバナーを作ればクリック率が上がるのか、消費者はどういったバナーに興味を引かれるのか、データ検証できるようになります。
オンラインショップのバナーを活用して、集客率を高めよう
オンラインショップのバナーはリンク先で販売されている商品への興味を高め、ショップへの誘導をサポートする役割を担っています。
バナーではサイズ、デザイン、レイアウトを自由に作成できますが、消費者の興味・関心を引くためには、実際の効果を見ながらコツや工夫をしていく必要があります。本記事で紹介したバナー作成方法の手順を参考にしつつ、わかりやすいキャッチコピーにする、掲載先と同じ色・文体にする、テキストはなるべく簡潔にする、動線を考えてバナーを配置するなど、クリック率をアップする工夫をして効果の良いバナーを作成していきましょう。
バナーではサイズ、デザイン、レイアウトを自由に作成できますが、消費者の興味・関心を引くためには、実際の効果を見ながらコツや工夫をしていく必要があります。本記事で紹介したバナー作成方法の手順を参考にしつつ、わかりやすいキャッチコピーにする、掲載先と同じ色・文体にする、テキストはなるべく簡潔にする、動線を考えてバナーを配置するなど、クリック率をアップする工夫をして効果の良いバナーを作成していきましょう。
Oh my goodness! an incredible article dude. Thanks However I am experiencing difficulty with ur rss . Don’t know why Unable to subscribe to it. Is there anybody getting equivalent rss downside? Anybody who is aware of kindly respond. Thnkx