Webサイトに設置する「バナー」には、ユーザーの注目を集めて、ほかのページへの遷移を促す役割があります。バナーは画像形式であるため目立ちやすく、写真とテキストによって情報を盛り込めるのが特徴です。

ECサイトのバナーは、商品特集やセール会場などの特設ページにリンクを貼り、ユーザーの流入を増やす目的で役立てられています。バナーで顧客を呼び込むことで、売上アップ効果が期待できるでしょう。

ここでは、そんなオンラインショップのバナーの作り方や、作成時のポイント、最適な設置位置の決め方についてお伝えします。ECサイトの販売促進に、ぜひバナーを活用してみてください。

| オンラインショップのバナーを作る流れ

まずは、オンラインショップのバナーの作り方をご紹介します。画像のデザインに着手する前にも、やるべきことが数多くあります。制作の流れを押さえて、スムーズに作業を進められるよう準備しておきましょう。

●目的の整理

初めに、バナーを掲載することで具体的に「誰に」「何を」伝えるべきかを整理します。このとき、バナーを見たユーザーにどのような行動を起こしてもらいたいのかを起点に考えましょう。商品の購入・会員登録・メールマガジン登録など、最終的なゴールを決めておきます。また、ターゲットを明確化することも重要です。バナーで訴求すべき内容や、ユーザーが思わずクリックしたくなるデザインは、ターゲットによって大きく異なります。ユーザーの人物像を把握するために、ペルソナを設定しても良いでしょう。

●必要要素の洗い出し

バナーの目的が定まったら、次は写真やテキストで盛り込むべき要素の洗い出しを行います。伝えたい内容やターゲットに合わせて、キャッチコピーやメインビジュアルに入れる情報を検討しましょう。たとえば、ECサイトのキャンペーンやセールスを訴求する場合は、集客のために開催期間・場所・対象商品などの情報を必ず盛り込みます。あるいは、会員登録やメルマガ登録を訴求するなら、ユーザーが得られるメリットのほか、登録料金の有無や手続きの所要時間といった情報がアピールにつながります。

●ラフの作成

バナーの必要要素が揃ったら、ラフを作成します。ラフとは、デザイン用語では“大まかなイメージ案”のことを指します。より良いデザインに仕上げるために、ラフは複数のパターンを作るのが基本です。また、第三者に各パターンを見せてアドバイスをもらうと、デザイナーの主観に偏るのを避けやすくなります。方向性に迷ったときは、同業他社のオンラインショップのバナーを参考にしてヒントを得るのもひとつの手です。

●デザインへの落とし込み

ラフを作成して具体的な方向性が定まってきたら、いよいよデザインへと落とし込んでいきます。デザインソフトを使って、バナー画像を作成しましょう。配色では、オンラインショップのコンセプトやユーザーに与えたいイメージを考慮して、適切なカラーを選びます。バナー画像が完成したら、第三者にチェックを依頼して、訴求したい内容が端的に伝わるかを確認してもらいましょう。フィードバックを受け、改善とチェックの工程を繰り返しながら、完成へ向けて仕上げていきます。

| オンラインショップのバナーを作るポイント

オンラインショップのバナー画像は、設置する目的に応じて、適切なレイアウトやキャッチコピーなどを検討する必要があります。ここでは、バナーを作るときのポイントや注意点について解説します。

●盛り込む情報を精査する

バナー画像には必要最低限の情報だけを盛り込み、できるだけシンプルに仕上げるよう心がけましょう。 画像に情報を詰め込みすぎると、ごちゃごちゃとした印象になりやすく、却ってユーザーに興味を持ってもらえないことも。何を伝えたいのかがわからないバナーは、クリック数が下がりやすいため注意が必要です。たとえば、文章はキーワードに重点を置いた簡潔な表現に変えるなど、不要な情報をできるだけ削ぎ落としましょう。

●簡潔でわかりやすいキャッチコピーを考える

バナー画像のキャッチコピーでは、伝えたいことを端的に、かつわかりやすく表現することが大切です。オンラインショップを訪問したユーザーのニーズを捉え、引きのあるキャッチコピーを考えましょう。このとき、多くのユーザーが知らない専門用語など、わかりにくい言葉は使わないのがポイント。ユーザーがバナーを見る時間はほんの一瞬です。瞬間的に理解できない言葉は、クリックされにくい傾向にあると押さえておきましょう。

●記載する文字の大きさに強弱を付ける

バナー画像にテキストを使うなら、文字に強弱を付けて、重要なポイントをはっきりと目立たせましょう。すべての文字を同じ色やサイズで統一すると、どこがもっとも重要なのか、ユーザーが瞬時に判断できません。たとえば、セール会場へ誘導するなら「SALE」、新商品を紹介するなら「NEW」といった重要な文字のみ、色やサイズを変えて強調すると効果的です。

| オンラインショップのバナーの設置位置を決める方法

オンラインショップのバナーが完成したら、最後にECサイト内にバナーを設置します。バナーを設置する位置は、ユーザーの行動を分析したうえで決めると良いでしょう。その理由は、“クリックされやすい位置”に絶対的な正解といえるものがないためです。

基本的に、もっともユーザーの目につきやすいのは、Webサイトを表示したとき最初に見られる「ファーストビュー」の画面だといわれます。しかし、ファーストビューにバナーを設置したからといって、ほかの位置と比べて多くクリックされるとは限りません。たとえば、ユーザーがトップページをほとんど閲覧せずに、すぐに別のページへ移動してしまうケースもあります。このような状況では、ファーストビューに設置したバナーからの流入は期待しにくいでしょう。一般的に目立ちやすい位置よりも、ユーザーに合わせて設計してください。

なお、Webサイトを訪問したユーザーの行動は、「Google Analytics」などのツールを利用して調べられます。ランディングページから多く遷移されるページの傾向を調査して、その付近にバナーを設置するといった形で、クリックされる可能性の高い位置を見つけましょう。バナーを設置したら、その後は必ず効果測定を行います。万が一、クリック数が伸びなければ、再度場所を変えて改善し、最適な位置を見つけましょう。

| 自社ECサイトに効果的なバナーを掲載しましょう

今回は、Webサイトで特定のページへユーザーの流入を増やす「バナー」について解説しました。バナー画像で瞬時に伝えられる情報の量には、限度があります。伝える内容を必要最低限に絞り込み、ユーザーへ的確にアピールできるデザインを作りましょう。また、記載するテキストにはメリハリを与えて、特に重要な情報を強調できると理想的です。自社のECサイトに効果的なバナーを掲載するために、お伝えした情報をぜひ参考にしてみてください。ネットショップ提供サービスの「Cafe24」では、ECサイト構築に関するお役立ち情報をご紹介しています。ECサイト運営のノウハウが豊富で、マニュアルが充実しているのも特徴です。基本無料で簡単にECサイトを構築するなら、ぜひ「Cafe24」にお任せください。