クリックしたくなるECサイトのバナーはデザインと設置場所が重要！

ECサイトで新商品の発売やセールをユーザーに知らせて、売り上げにつなげたいときに使われるのがバナーです。バナーに誘導したいページのリンクを貼り、ユーザーのクリックを促します。しかし、バナーはただ設置すればよいわけではありません。バナーで意図した効果を得るには、デザインに加えてサイト内の設置場所も重要です。

本記事では、バナーの目的や必要な要素、制作手順、適切な設置場所の決め方などについて解説します。記事を参考に、ECサイトの売上アップに貢献できるバナーを目指しましょう。

ECサイトのバナーの目的や必要な要素を理解しよう

バナーを制作する前に、バナーを設置する目的や、バナーに盛り込むべき要素を押さえておきましょう。

バナーはユーザーを見てほしいページに誘導するもの

ECサイトで商品をただ販売していても、売上はあまり伸びません。特定時期に商品を売りたい場合には、セールやキャンペーンを開催し、ユーザーの購買意欲をかき立てる必要があります。そんなときに活用したいのがバナーです。

ECサイトに設置するバナーは、特に販売に力を入れたい商品やキャンペーンをユーザーに告知して、該当するページに誘導するための広告です。バナーは文字や画像で構成され、誘導したいページへのリンクが貼られています。バナーをクリックすると、誘導したいページに遷移するため、サイト内でユーザーの行動が促せます。

バナーの形状とサイズ

バナーの形状やサイズにはいくつかの種類があります。以下のGoogle AdSenseが示している広告サイズの表が一例です。

Google AdSenseの広告サイズは、Webサイト上にGoogleが広告を配信するために定められたサイズで「レクタングル」のように正方形に近いものや「ビッグバナー」のように横方向に細長いものもあります。自社ECサイトに貼るバナーを作成する際の参考にしてください。

バナーに盛り込むべき情報

バナーには、新商品やセール情報、メールマガジン登録など、告知したい内容にあわせて商品・サービスの特徴を表現するテキスト（文字）や画像を盛り込みます。例えば、以下のようなものです。

• 新商品 … 商品名、発売日、キャッチコピー、商品画像
• セール … セール期間、対象商品、キャッチコピー、イメージ画像
• メールマガジン登録 … 登録のメリット、キャッチコピー

盛り込める情報量や画像の大きさは、バナーのサイズにかかわってくるので、バナーのサイズも検討します。

また、どんなデザインのバナーだとよりクリックしたい気持ちが高まるのかは、情報を伝えるターゲットにより異なります。そこでバナーで情報を伝えたいターゲットを明確にしておきましょう。ターゲットを具体的にイメージするために、年齢や性別、職業などペルソナを設定することをおすすめします。

バナーを設置する場所の重要性

バナーそのものと同じぐらい重要とされているのが、バナーを設置する場所です。ECサイトのトップページの上部に設置するのか、下部に設置するのかでユーザーがクリックしてくれる確率が変わります。

また、以下の表のようにバナーの大きさによって、設定に向いている場所が異なります。例えば横300×縦250ピクセルのような正方形に近いバナーは記事の途中や末尾、横720×縦90ピクセルのような横方向に細長いバナーはページのトップに設置するのがおすすめです。

バナーの設置場所にはセオリーがないため、ECサイトのユーザーの行動を分析しながら場所を決めていきます。なお設置場所の決め方について詳しくは後述します。

ECサイトのバナーの制作手順

それでは、バナーの制作手順を見ていきましょう。

1. バナーに盛り込む内容をピックアップする
2. ラフデザインを作成する
3. レイアウト・配色を決めてデザインする

1. バナーに盛り込む内容をピックアップする

まずはバナー設置の目的とバナーに盛り込む情報、バナーの大きさを決めます。バナーには、以下のような内容を盛り込んだキャッチコピーや説明文、画像を入れましょう。

• 商品・サービス・キャンペーンなどの内容
• 紹介する商品・サービスのコンセプトや特徴・長所
• ユーザーがクリックしたくなるような誘導の文章（「セール会場はこちら！」「詳しくはこちら！」など）
• 訴求内容とマッチする画像

2. ラフデザインを作成する

ラフデザインとは、テキストや画像の配置案を描いたものです。ラフデザインは手書きでもかまいません。バナーの大きさには限りがあるため、伝えたいことの優先順位を決めて盛り込む内容を絞り込む必要があります。内容の絞り込みができたら、画像やテキストの大きさ・配置を決めます。

バナーで重要な要素となるのが、キャッチコピーです。わかりやすいキャッチコピーはユーザーの目に留まりやすくなります。また、キャッチコピーと短い説明文をバナーに載せる場合は、文字の大きさや色にメリハリをつけるよう注意しましょう。特に「新商品」「期間限定セール」など、情報の核心部分となる言葉を強調するとユーザーに伝わりやすくなります。

ラフデザインを考えるときは、同業他社のECサイトやバナーのデザイン集サイトなども参考にしましょう。ペルソナに支持されるテイストを考えながら、画像の上にテキストを重ねるパターンや、画像とテキストを分けてレイアウトするパターンなど、複数のラフデザイン案を作成するとよいでしょう。

3. レイアウト・配色を決めてデザインする

手書きのラフデザインを参考に、パソコンで実際にレイアウトを決めていきます。バナー作成のソフトとして、PhotoshopやIllustratorなどのデザインソフトがよく使われます。テキスト・画像のレイアウトと配色は別々の作業と見なして進め、まずは白黒でレイアウトを検討するのがおすすめです。

レイアウトが決まったら、配色を決めます。ECサイトを構成する色のトーンから極端に浮かないように気をつけましょう。

また、色には「青＝涼しい」「赤＝購買欲を高める」など、それぞれ見る人に与えるイメージがあります。ユーザーに与えたい印象を考えて、配色を決めるとよいでしょう。配色を決める段階で、テキストがバナー全体を圧迫しているように感じるときは、テキスト量を絞り込むなど調整を行います。

バナーの設置場所の決め方

できあがったバナーは、ECサイトのユーザーがクリックしてくれる場所に設置する必要があります。どのように設置場所を決めればよいか見てみましょう。

分析ツールを参考に設置場所を決める

ECサイトの中で「ここにバナーを設置すればクリックしてもらえる」といえる場所はありません。ユーザーがサイト内をどのように動いているか分析ツールで調べ、サイト内で多くのユーザーが見ているページに設置しましょう。

一般的にはトップページにバナーを置くと、クリックされやすいといわれていますが、絶対的なものではありません。新商品を購入した人の行動を分析すると、トップページのバナーから新商品のページに流入していないこともたびたびあります。

あるECサイトのリピーターが再度サイトを訪れてから、新商品を購入するまでのサイト内の動きを追うと、まずマイページに移動する傾向があります。そこから前回購入した商品を再び買い、ついでに新商品を見つけて購入ページにたどり着くといったパターンが多く見られます。

このように、ECサイトを訪れるユーザーの行動にあわせてバナーを設置することが大切です。ユーザーの行動を調べるツールとしては「Google Analytics」がよく知られています。

設置後は効果測定を行って検証・改善する

バナー設置後は、どれぐらいのユーザーが実際にバナーをクリックし、商品購入などの行動を起こしたのか調べる「効果測定」を行いましょう。バナーの効果測定でよく使われる指標は「クリック数・クリック率」「コンバージョン数・コンバージョン率」があります。

バナーの設置後にクリックやコンバージョンの数値が伸び悩んでいる場合は、バナーの設置場所を変えるかバナーのデザインを変える必要があります。バナーのクリック率やコンバージョン率が悪いと「バナーのデザインを変えなければ」と判断しがちです。しかしまずはバナーの設置場所について変更を検討しましょう。

バナーの設置場所を改善する際にも、分析ツールでユーザーの行動履歴を追跡します。各ユーザーがどの順番でECサイト内を動き、どのページで長く留まっているかを確認しましょう。また、性別や年齢などユーザーの属性も押さえておきます。

もし「バナーを置いたページにユーザーが来ていない」という結果が出れば、バナーの設置場所がユーザーの行動に合っていないことになります。一方、バナーの設置場所にユーザーを呼び込めているにもかかわらず、クリック数やクリック率が上がらない場合は、バナーデザインを改善しなければならない可能性があります。

バナー制作・設置の相談に乗ってくれる制作会社に依頼するのも手

バナーは良いデザインのものを制作すればよいという単純な話ではありません。ターゲットに訴求できて目的につなげやすくするためは、見つけてもらいやすいデザインを施す必要があります。さらにECサイトを訪れるユーザーの行動パターンに合わせた場所に設置しなければなりません。また、設置後も検証を繰り返し、バナーの効果を上げる必要があります。

コンバージョン率の高いバナーを求めるなら、ECサイトを制作している会社やクリエイターに依頼するのもひとつの方法です。特にフリーランスのクリエイターなら、バナー制作ひとつからでも気軽に相談に応じてもらえるので、おすすめです。

ランサーズには、ECサイトのバナー制作を得意とするクリエイターが数多く登録しています。各クリエイターが得意とするデザインのテイストやECサイトのプラットフォームをプロフィールで確認できるので、ほしいバナーをイメージしながら自社のECサイトに合った人選が可能です。

なお、バナーを外注する場合は、バナーの大きさや作業工程の手間に応じて費用が決まります。バナーのサイズが大きくなるほど、またアニメーションなど作業工程が多いものほど費用は掛かる傾向にあります。また、提案してくれるラフデザインや完成したバナーの修正について、あらかじめ回数が決められているケースが多くみられます。依頼時にバナーのサイズや作業工程ごとの価格、修正対応回数などを確認しておきましょう。

ECサイトのバナーを活用して売上アップにつなげよう

ECサイトのユーザーに対し、新製品やキャンペーンなどを訴求したいときにはバナーを活用します。バナーにはさまざまな大きさがあり、訴求したい内容に応じて大きさを選びましょう。

バナーの限られた大きさの中に盛り込むテキストや画像は、絞り込む必要があります。ECサイトの中で、瞬時にターゲットにバナーを認識してもらうことが重要です。

また、バナーの設置場所によって、ユーザーのクリック率が大きく異なります。バナーを設置する際は、ECサイト内でのユーザーの行動を想定して配置場所を検討しましょう。また、設置後もクリックやコンバージョンの数値を測定するなどして効果確認を行い、必要にあわせて設置場所を変更しましょう。検証結果によっては、バナーデザインの変更が必要になることもあります。

バナーを効果的に使えば、ECサイトの売上アップにつながります。制作会社やフリーランスといった外部の助けも利用しながら「クリックやコンバージョンが期待できるバナー」を作りましょう。