ネットショップでクリックしたくなるバナーの作り方は？事例集も紹介

ネットショップの販促施策として「バナー」の作成を考えているものの、どのようなバナーを作ればよいか悩んでいる方もいるかと思います。

そこで本記事では、ネットショップで、ユーザーが思わずクリックしたくなるバナーの作り方を解説。やってはいけないNGパターンや参考にしたいバナー事例集もご紹介します。

なお、ECサイト制作会社の探し方・選び方がわからない！という方はEC幹事にお気軽にご相談ください。貴社の目的・予算に合った最適な会社を厳選してご紹介します。相談料・会社紹介料などは無料です。

バナーとは

バナーには「旗」という意味があります。実店舗でいう「のぼり」や「立て看板」のこと。たとえば店舗で「新メニュー始めました」など書かれているのぼりを見たことがあるかと思います。

ネットショップにおけるバナーも同様です。新商品までキャンペーンなどを告知したいときに、サイトのトップページにバナーを設置したり、外部サイトにバナー広告を出稿したりします。

ネットショップでクリックしたくなるバナー作成のコツ

設置するだけでなく、ユーザーが思わずクリックしたくなる魅力的なバナーを作る必要があります。ここでは、ネットショップでクリックしなくなるバナー作成のコツをご紹介します。

1. テキストは最小限にする

ユーザーは、バナーをクリックするかどうか一瞬で判断します。そのためテキストは最小限に抑え、直感的に理解できる内容にまとめましょう。

人間が一目で理解できる文字数は9〜13文字といわれています。バナーに記載するテキストには、キャッチコピーと補足文章があります。少ない文字数のキャッチコピーで印象付け、補足文でさらなる興味喚起へつなげましょう。

2. 具体的な数字を入れて説得力を高める

バナーでは少ない文字数で訴求する必要があるため、数字をうまく活用できるかがポイントです。

たとえば、「1日で1,000個売れた！」「リピート率80%！」など。抽象的な文章表現だけでなく、具体的な数字を示すことで説得力が飛躍的に高まります。

自社ショップの実績などを見て使える数字がないか確認しましょう。

3. 一目でクリック先の情報がわかる内容にする

そもそも何のバナーなのか曖昧になっていると、ユーザーに訴求のしようがありません。デザインに目が行きすぎると、クリック先の情報がわからないバナーになってしまいます。

新商品の入荷情報なら「新商品入荷！」と書く、キャンペーンなら「キャンペーン！」と書くなど、何のバナーなのか明確にすることが大切です。

4. 写真選びにこだわる

バナーは第一印象が重要です。ユーザーはパッと見て「このバナーが自分にとって必要かどうか」を判断します。第一印象で興味を持ってもらうために重要なのが写真です。

たとえば、メンズ化粧水のバナーを作るとします。化粧水だけの写真だと女性向けの商品だと思われる可能性があるので、男性モデルが映った化粧品の写真を選ぶのがポイントです。写真はバナー面積の大半を占めるため、商品のイメージに合った素材を選びましょう。

5. キャッチコピー作成に時間をかける

ネットショップのバナーにおいては、時間をかけてでもキャッチコピーにこだわることをおすすめします。ユーザーに刺さるキャッチコピーはすぐには思い浮かびません。たくさんのアイデアを出し、チームで議論を繰り返すことで、刺さるコピーができあがります。

【キャッチコピー作成で意識したいポイント】

• 数字を活用して説得力を高める
• 文字だけでなくリズム感も意識する
• 文脈によっては漢字よりもひらがなやカタカナを使う

キャッチコピーが読みやすいかどうか、このコピーでクリックしたいかどうか、ユーザーの目線に立って考えてみましょう。

6. ペルソナに合わせたデザインにする

バナー作成ではペルソナ設定が重要です。ペルソナとは、商品を購入してもらいたいターゲットのこと。たった1人のペルソナを想定することで、刺さるキャッチコピーを作れたり、その他にも適切なマーケティング施策を打てたりします。

たとえば、40〜50代をペルソナとする場合、黒やベージュなど落ち着いたデザインが好まれる傾向にあります。フォントもシンプルで癖のないものがおすすめです。

ネットショップにおけるバナー作成の手順

クリックしたくなるバナー作成のコツをお伝えしましたが、どのような手順で作成すればよいのでしょうか。ここではネットショップにおけるバナー作成の手順を解説します。

1. バナーに入れたい要素を洗い出す

「何をどうレイアウトすればよいかわからない」という悩みを解消するために、まずはバナーを構成する要素をすべて洗い出します。たとえば以下のような要素です。

• キャッチコピー
• サブキャッチコピー
• 写真やイラスト
• ユーザーに伝えたいこと

すべてのパーツを並べることで、やるべきことや方向性が合っていることを確認でき、安心感が生まれます。

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

バナーのサイズは、バナーを自社サイトに掲載するのか他社サイトに掲載するのかで異なります。自社サイトの場合、規定はありませんが、他社サイトの場合はGoogleやYahoo!など出稿先によってサイズ規定があります。

たとえばGoogleが運営する「Google AdSense」では、次のようなサイズがあります。

• 300px×250px（横が少し長い長方形）
• 336px×280px（横が少し長い長方形）
• 728px×90px（横長）
• 300px×600px（縦長）
• 320px×100px（モバイルページ向け）

他社サイトにバナーを貼らせてもらう場合は、広告枠を購入しなければなりません。そのため掲載サイトや広告ルールに沿ったバナーを作る必要があります。

3. 手書きでラフ画を描く

要素の洗い出しやサイズが決まったら、手書きでラフ画を描きましょう。

ラフ画とは、概略だけを描いたスケッチのこと。プロでもほぼ必ず行う作業で、頭の中のイメージを形にするために重要といえます。

実際に書いてみたら意外と情報量が多かった、バナーのインパクトが少ないなど、気づきが生まれやすいです。時間がかかるように思いますが、実は簡単なラフ画であればPCよりも手書きの方が短時間で済みます。ざっくりとした全体像を描いて、バナーの方向性を掴みましょう。

4. モノクロでレイアウトを作る

手書きで作ったラフ画をもとに、PCでレイアウトを作成しましょう。

ここで重要なのは、モノクロでレイアウトを作ること。最初からカラーで作ると、配色が気になってしまいレイアウト完成に時間がかかります。

正確にレイアウトを作るためにも、まずはモノクロで始めることが大切です。

5. カラーやフォント、字間を調整する

レイアウトが確定したら、最後にカラーやフォント、字間を調整します。基本的にカラーは、自社ショップのイメージに合った配色にしましょう。

ショップとかけ離れたカラーだと、ユーザーがバナーをクリックして自社ショップを見たときに、ギャップで離脱してしまう可能性があります。

フォントも、ユーザーにとって見やすくて興味喚起につながるものに設定します。字体や字間、サイズを適宜調整しましょう。

バナー作成でやってはいけないNGパターン

無事にバナーが出稿できても、ユーザーにクリックされるとは限りません。バナー作成には、やってはいけないNGパターンがあります。特に以下の3つには気をつけましょう。

1. 情報量が多くて内容が伝わっていない

テキストなどの情報量が多すぎて、ユーザーに内容が伝わっていないケースです。内容がごちゃごちゃしていると、ユーザーも離れてしまいます。

たとえば、「9月から50%OFF！5日間限定で10人のお客様にクーポンプレゼント！」というバナーを見て、ユーザーはどう思うでしょう。情報量が多すぎてクリックしたい気持ちが薄れてしまいます。

そのため、バナーで伝えたいメッセージは1つに絞るのがおすすめ。上記のような冗長な文章ではなく、「この広告を見た人は50%OFF！」など訴求内容はシンプルにしましょう。

2. テキストと写真のギャップが大きい

テキストと写真のイメージがかけ離れている場合も、ユーザーの離脱を招いてしまいます。

たとえば、ベビー用品を販売したいのに綺麗な風景画を差し込んでいるなど、商品と写真にギャップがあると、何の商品を訴求したいバナーなのかわかりません。

バナーではイメージを統一し、目立たせることが重要です。本来の目的は「商品を購入してもらうこと」なので、ユーザーの興味喚起・購買促進につながるような内容にしましょう。

3. 写真の画質が悪くて見づらい

バナーの画質が悪いと、ユーザーにストレスを与えてしまいます。イメージが統一されていて訴求内容がよくても、画質が悪いだけでマイナスな印象を与えてしまいます。購買につながるはずだったユーザーを確実に掴むためにも、バナー自体の画質や見やすさを意識しましょう。

ネットショップのバナー作成で参考にしたいデザイン事例集

バナー作成がはじめてだとイメージが湧きにくく、どのようなバナーを作るべきか悩むかと思います。ここでは最後に、ネットショップのバナー作成で参考にしたいデザイン事例集をご紹介します。

1. Pinterest

Pinterest（ピンタレスト）は、インターネット上の画像や動画を集めたプラットフォームです。バナーをはじめ実店舗の内装やメニュー表など、さまざまなデザインを閲覧できます。検索画面に「ネットショップ バナー 〇〇（商材）」と検索すると画像一覧が表示されます。自社のショップや商材に合ったバナーが見つかるでしょう。

2. バナーデザインまとめ

バナーデザインまとめは、その名の通りバナーデザインがまとめられたサイトです。2023年8月現在で21,300件のバナーデザインが掲載されており、業種をはじめバナーの色や表現、フォントなど目的別に検索ができます。「バナーサイズを調べる」「バナー形式を調べる」など、バナーに関する情報やノウハウも公開されているので、初めての方にはおすすめです。

3. バナーデザインアーカイブ

バナーデザインアーカイブは、さまざまな業種のバナーデザインを掲載しているサイトです。トップページにすべてのバナーが掲載されているため、下にスクロールするだけで多くのバナーを閲覧できます。もちろんカテゴリー選択も可能です。「サイズから選ぶ」「色から選ぶ」「業種から選ぶ」の項目があるので、自社の条件に合ったバナーデザインが見つかるでしょう。

【まとめ】魅力的なバナーを作成し、ネットショップの販売促進に繋げよう

バナー作成の最終的な目的は、商品を売ること。そのためにはターゲットを設定し、伝えたい内容をテキストや画像でシンプルにまとめるなど、ユーザーの興味喚起・購買促進につながるデザインを作る必要があります。魅力的なバナーを作成し、ネットショップの販売促進につなげましょう。

なお、ECサイト制作会社の探し方・選び方がわからない！という方はEC幹事にお気軽にご相談ください。貴社の目的・予算に合った最適な会社を厳選してご紹介します。相談料・会社紹介料などは無料です。