オンラインショップのバナーの作成方法とクリック率を上げるポイント

バナーは、クリックすることでオンラインショップへの流入を促すため、オンラインショップの集客率や利益に深く関わる要素です。オンラインショップの特徴や目玉商品、サービスなどを端的に表現しつつ、クリックしたくなるデザインにしなければいけません。

本記事ではオンラインショップのバナー作成に悩んでいる人のために、オンラインショップのバナーの作成ポイントや作成の流れ、クリック率を上げる効果的なバナー作成のポイントや設置場所について解説します。

オンラインショップのバナー作成前に意識したい6つのポイント

オンラインショップのバナーを作成する前に、以下のポイントを確認しておきましょう。

1. バナーの設置場所
2. バナーのサイズ
3. バナーの可動の可否
4. バナーの目的
5. バナーのコンセプト
6. バナーのターゲット

それぞれのチェックポイントをふまえておくことで、最適なバナーのサイズや種類を選んでオンラインショップのバナー作成ができます。チェックポイントを具体的に解説します。

1. バナーの設置場所

オンラインショップのバナーは、自サイトに設置するか、外部サイトに設置するかでサイズやカラーの選び方が異なります。

「ブログやオウンドメディアでセールのお知らせをする」など自サイトにオンラインショップのバナーを貼るときには、サイズやカラーなどが自由に作れます。一方、外部サイトにオンラインショップのバナーを貼る、または広告として出す際には、サイズやカラーなどに規定があることが多いです。

バナー貼り付け先のサイトの規定を守るのと同時に、貼るサイトの雰囲気を損なわないデザインにも考慮しましょう。

2. バナーのサイズ

バナーにはアメリカのIAB（Interactive Advertising Bureau）が規定した国際基準のサイズがあります。オンラインショップのバナーを、Googleリスティング広告やYahoo!のディスプレイ広告などに掲載するときや他のサイトに貼り付けてもらうときには、国際基準に沿ったバナーのサイズ規定があることがほとんどです。

自サイトに張り付ける場合には、バナーを好きなサイズで作って問題ありません。ただし、あらかじめ国際基準サイズのバナーを作っておくと、後から広告や他サイトに掲載するときにバナーを作り直す手間が省けます。

バナーの国際基準サイズは以下の通りです。

Rectangles and Pop-Ups（長方形とポップアップのバナー）

Banners and Buttons （バナーとボタン）

Skyscrapers（高層ビル型）

IABの国際基準は2年に1度見直しが行われ、Webページのトレンドや動向などを考慮しバナーのサイズが追加または削除されます。ただし使用しているバナーのサイズが削除対象となっても、使い続けていて問題ありません。

バナーの可動の可否

オンラインショップのバナーは、静止画とアニメーションバナーがあります。静止画は文字の情報を端的に伝えるのに有効な一方、ややインパクトに欠けます。パッと目を惹くアニメーションバナーは大きなインパクトを与えるのに有効ですが、複数のアニメーションバナーが同一ページにあると煩雑な印象となるでしょう。

バナーのデザインや伝えたい内容、設置する場所に応じて静止画かアニメージョンバナーかを選ぶのが重要です。

バナーの目的

バナーの主な目的には、以下のものがあります。

• 商品・サービスの認知
• セール、割引の認知
• 商品購入
• 問い合わせ

バナーの目的によって、リンク先やバナーのデザイン、バナーに記載するコピーが異なります。バナーを作成する際は、バナーを挿入する目的を設定しておきましょう。

バナーのコンセプト

バナーの目的を設定後、バナーで一番伝えたいことを決めます。バナー作成においては、バナーのコンセプトを見失わないようにするのが重要です。

まずはバナーで伝えたいことを考えて、ひとつずつ要素を書き出しましょう。要素によって、キャッチコピーや文字、使用する素材が選定されます。

バナーのターゲット

バナーのターゲットを設定します。すべての人がまんべんなくクリックするバナーを作るのは不可能です。そこでバナーをクリックしてほしい年齢、性別、職業、年収などのペルソナを設定します。設定したペルソナが、どんなときにバナーをクリックしたくなるかをふまえて、バナーに取り入れるコピーやデザインなどを考えましょう。

オンラインショップのバナーを作成する6つの手順

チェックポイントをふまえて、バナーのサイズや種類、取り込む要素などが整理できればバナー作成に入ります。オンラインショップのバナーは、以下の流れで作成していきます。

1. 構成要素をすべて書き出しておく
2. 要素をしぼりこんで複数のラフを作る
3. 単色でレイアウトを決める
4. フォントを調整する
5. 配色パターンを決める
6. 文字やレイアウトを微調整する

それぞれの具体的な内容について解説します。

1. 構成要素をすべて書き出しておく

前述のバナー作成前のチェックポイントをふまえて、バナーに取り入れたい構成要素をすべて書き出しておきます。最初にすべての要素を書き出しておくことで、後から要素を入れ忘れることも防げます。複数要素を組み合わせたバナーを作ることで、複数のターゲット向けのバナーを作ることも可能です。

2. 要素をしぼりこんで複数のラフを作る

バナーの構成要素をすべて書き出したら、要素を3つほどにしぼります。要素を入れすぎると、バナーのデザインや印象が雑多になるためです。必要最低限の情報を入れて、できるだけシンプルなバナーにしましょう。

しぼった要素を元にバナーのラフを作ります。3つずつ異なる要素を組みあわせて、複数のラフを作っておくと、複数のバナー作成に役立ちます。

3. 単色でレイアウトを決める

ラフが完成したら、Photoshopなどのソフトを使ってバナーをデジタル化する手順に移ります。配色をする前に単色でレイアウトを決めましょう。配色とレイアウトを同時進行しようとすると時間がかかってしまうため、まず単色でレイアウトするのがおすすめです。

主なバナーのレイアウトは以下の4パターンです。

• 分割する
• 画像を全面に使う
• 複数画像を使う
• 余白を入れる

分割する

分割するレイアウトは、文字と画像を分割することで洗練された印象になります。バナーに使用する画像のサイズが足りないときにも有効です。縦2分割、横2分割、1：2分割などいろいろなレイアウトがあります。

画像を全面に使う

使用する画像を全面に使うレイアウトは、画像の美しさをアピールしたいときに向いています。ハンドメイド品や食品のオンラインショップのバナーにも多く使われているレイアウトです。

複数画像を使う

オンラインショップで取り扱う商品の種類が多いときのバナーに有効なのが、複数画像を使うレイアウトの方法です。ただし画像をただずらりと並べると煩雑な印象となってしまいます。メインの商品画像を横に大きく、その他の画像を4点ほど小さめに置く、などメリハリをつけると良いでしょう。

余白を入れる

文字と画像、大きめの余白を取るレイアウトもあります。スクエア型のバナーに多いです。余白を取ることで、スタイリッシュさや清潔感が出せます。

4. フォントを調整する

バナーに入れるフォントを調整します。主なフォント調整の方法は以下の通りです。

• 大きさ・太さ
• 組み方
• コントラスト
• アクセント

文字の大きさ、太さを変えて強弱をつけることで、バナーの目的やコンセプトを視覚から効果的に伝えられます。組み方を変えると、画像との兼ね合いやバナーのサイズに合った文字のレイアウトができます。

一緒に使用する画像とのコントラストも調整しましょう。バナーの中で強調したいところに吹き出しを使うなどの、アクセントを入れるのも効果的です。

5. 配色パターンを決める

レイアウトが完成したら配色を決めます。配色は、バナーの目的やサイトのコンセプトに合うものにします。バナーの配色とオンラインショップのカラーが全く異なると、クリックしたターゲットの離脱の原因となるためです。

さらに、以下の色が与える心理的な影響をふまえて選ぶと良いでしょう。

多くの色を取り入れてしまうと、バナーの印象が雑多となってしまいます。画像を使わない場合は、メインの色を3色にしぼりましょう。もっとも多くの箇所に使うテーマカラーを75％、テーマカラーの次に多くの箇所に使うサブカラーを20％、メッセージの部分などに使うアクセントカラーを5％に配分するのがおすすめです。

6. 文字やレイアウトを微調整する

完成したバナーのデザインを第三者に見てもらいつつ、文字やレイアウトを微調整して完成です。

オンラインショップのバナーのクリック率を上げる4つのポイント

せっかく作成したオンラインショップのバナーも、ターゲットにクリックされないことには利益にはつながりません。オンラインショップにバナーのクリック率を上げるポイントは以下の通りです。

• 端的で分かりやすいキャッチコピーをつける
• シリーズものなら規則性を持たせる
• インパクトや既視感のあるデザインを取り入れる
• ユーザー動線を考えた位置に配置する

それぞれについて解説します。

端的で分かりやすいキャッチコピーをつける

バナーには文字を入れますが、伝えたいことをすべて入れようとすると逆に内容が分かりにくくなってしまいます。バナーで効果的に情報を伝えるのに有効なのがキャッチコピーです。「新商品入荷！」「最大◯％オフ」「今ならポイント◯倍」など、端的で分かりやすいキャッチコピーをバナーに取り入れましょう。

シリーズものなら規則性を持たせる

同ブランドの複数デザイン、季節で味が変わる商品など、シリーズのある商品のバナーには規則性を持たせましょう。バナーの文字のフォントと大きさ、配置、レイアウトを一緒にすると、規則性が出ます。

規則性のあるバナーは、リピーターはもちろん、商品やブランドに対して興味を持っている人のクリックにもつながります。

インパクトや既視感のあるデザインを取り入れる

躍動感のある写真や「どこかで見たような気がする」と感じるデザインのバナーは、思わずクリックしてしまうターゲットも多いです。ただし、バナーの内容とリンク先ページの内容にギャップがある場合、クリックはされても離脱される可能性が高く、コンバージョンにつながらなくなってしまいます。リンク先ページとの兼ね合いも考えてデザインをしましょう。

ユーザー動線を考えた位置に配置する

バナーを置く位置に正解はありません。ターゲットとなるユーザーの動線を考えた位置にバナーを設置するのが重要です。そのためには、自サイトへの流入経路や、サイト内のユーザーのページ変遷をたどって動線を分析し、バナーを設置して検証していくことが有効です。アクセス解析やGoogle アナリティクスのユーザーエクスプローラーなどを活用し、ユーザーの動線を把握しましょう。

オンラインショップのバナーを作成し利益につなげよう

オンラインショップのバナーを作成するときのポイントや作成の流れ、作成したバナーのクリック率を上げる方法について解説しました。バナーはオンラインショップへの新規顧客の流入からリピーターの定着まで、利益につなげる重要な役割を持っています。目的やコンセプト、ターゲットをふまえたバナーを作成し、クリック率を上げる場所に設置しましょう。

バナー作成やサイトのアクセス解析業務の負担を減らしたいなら、フリーランスへのバナー作成やサイト解析を依頼するのもおすすめです。バナー作成に行き詰まりを感じているときや、バナーのクリック率が低いときにも、ぜひフリーランスへの依頼を検討してみましょう。