ECサイトのバナー効果を140％UPさせる方法｜バナーの作り方も紹介

ECサイトを運営する場合、新商品や季節商品などはバナーを使ってアピールしますが、デザインの良し悪しによって効果はバラバラです。

「なぜバナーがクリックされないのか」「何が悪いのかわからない」といような悩みをお持ちの方も多いでしょう。

そこで、今回はECサイトにおける効果的なバナーの作り方と制作時の注意点をわかりやすく解説していきます。自社ホームページのバナーを改善したい方やこれからサイトを立ち上げる方はぜひ参考にしてください。

この記事を読んだらわかること

・ECサイトに使用するバナーの作り方
・参考になるバナーデザイン事例集
・ECサイトのバナーで注意するポイント

目次【表示】

WEBコンサルタントのご紹介

弊社は、上場企業も含め50社以上のECサイト制作に携わってきました。
ECサイトは、一から構築すると莫大な費用がかかってしまいますが、弊社はWordPressを使用し、最小限に費用を抑えたECサイトの構築が得意です。ECサイトの制作で費用が気になるという方は、お気軽にご相談ください！

ZERO式ECサイト制作はこちら

ECサイトに使用するバナーの作り方

自社のECサイトで成果が上がるバナーを使いたいと思えば、まずはバナー制作の基本を押さえておく必要があります。

ここではECサイトに使うバナーを作成する手順をおさらいしていきます。

１バナーの目的やコンセプトを明確にする
２参考デザインを集める
３バナーに入れる要素を洗い出す
４配置を決める
５バナーの配色を決める
６バナーを複数制作する
７第三者から意見をもらい、調整する

プロセスごとにわかりやすくまとめていますのでぜひ参考にしてください。

1:バナーの目的やコンセプトを明確にする

明確にしたい目的やコンセプトと下記の通りです。

何のために制作するのか？（サービスの認知・紹介、お問い合わせ、購入など）
ターゲット層は？（年齢、性別、職業など）
バナーのサイズは何種類？（PC用、スマホ用）
バナーに入れたい要素（商品写真、キャッチコピー、イメージカラー）

自己満足のバナー制作にならないために、以上の点を事前に理解しておきましょう。

2:参考デザインを集める

設置予定のバナーをどんなデザインにしたいかを予め考えておくと制作がスムーズになります。ライバルサイトを意識した理想のバナーがあれば、そのデザインをストックしておきましょう。

どんなデザインが良いのか迷っている場合にはバナーデザインを集めたサイトなどが参考になります。おすすめのバナーデザイン参考サイトについては後ほどご紹介します。

3:バナーに入れる要素を洗い出す

バナーに入れられる情報には限界があるので、デザインを決定する前に「絶対にこれだけは入れるべき」という要素を洗い出しておくことが重要です。バナーに用いる代表的要素として挙げられるのは

商品・サービス
画像・イラスト
文章・テキスト

の3つです。

制作するバナーの目的に合わせて検討しましょう。

4:配置を決める

次の段階では、先工程で洗い出した要素をバナーのどこに入れたらいいか、ざっくりとしたラフ案を制作し、配置を決めましょう。

アイデアを簡単に書き留めて候補をたくさん出しておき、後で絞り込みを行うのがお勧めです。

5:バナーの配色を決める

ラフ案が絞り込めたら、バナーの配色を決めていきます。配色は、なんとなくではなく商品・サービスの特色やイメージのほか、ターゲット層を意識して決めていく必要があります。

また、色にはそれぞれユーザーに印象づけることのできる役割があるので、以下の色別の特徴を参考にしてみてください。

白：清潔　広さ　始まり　ミニマル
黄：希望　注意　元気　楽しさ
黒：重い　悲しい　権力　高級感　フォーマル　
赤：食欲　購買欲　情熱　エネルギー　注意を集める
青：落ち着き　涼しさ　誠実さ　信用　寂しさ
緑：リラックス　癒し　自然　穏やかさ　裕福

決定した色を7：2：1の割合でバナーに配するとバランス良く見えるとされています。商品・サービスのイメージとして打ち出したいテーマカラーを7に、次いでサブカラーを2、差し色的に使うアクセントカラーを1と考えます。コンセプトに基づいてカラーと比率を決定していきましょう。

6:バナーを複数制作する

バナー制作は1案だけでなく、数パターン用意しておきましょう。次の工程で最終調整を行いますが、バナーを客観的に評価する際に複数案があると、より良い選択ができる可能性が高まります。

7:第三者から意見をもらい、調整する

バナーの候補案が決まったら、第三者から意見をもらって、最終調整します。

第三者とは社外の専門家も良いですが、この際、実際にバナーを見て扱うであろうユーザーの意見を直接聞くのが無駄なく効果的です。

ECサイトの利用者に簡単なアンケートに答えてもらうなど、生の声を反映させてバナーを決定すれば成功への近道となります。

参考になるバナーデザイン事例集

バナーデザインは、参考にしたくなるような優秀なものが既に豊富にネット上に出回っています。ここでは、バナーを作る上でたいへん参考になるバナーデザインの事例が見られるサイトを選りすぐってご紹介します。

バナーデザインまとめ

「バナーデザインまとめ」は2021年1月現在で21000件以上のバナーを掲載しているバナーの参考サイトです。

色・業種・テイスト別で探すことができるため、幅広い業種のバナー作りの参考になります。また、ずらりと並んだバナーの中でよく見てみたいものをクリックすると、縦横サイズが脇に表示されるようになっており実寸の把握も楽です。

banner gallery

バナー制作で悩ましいのがサイズ問題ですが、banner galleryは、サイズごとにカテゴライズしてあるので、便利です。

色や業種が英語表記でやや使いにくいですが、実寸表示や投稿者表示ができます。

レトロバナー

レトロバナーは、色・サイズ・テイスト・業種から様々なバナーデザインを検索できるサイトです。

掲載バナー総数は10,000を超え、一つずつのバナーに対し、使用されているカラーの名称が詳細にわかります。また、Photoshopなどのデザインツールを使用する際、パレットファイルもダウンロードできるため、使い勝手が良いです。

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

バナーデザインアーカイブは2000種類以上のバナーデザインを参考にできるサイトです。

スクロールだけで、バナーが観れるので、いっぺんに多くのデザインを参考にしたい時、便利です。

また、気になるバナーをクリックすると、同サイズのバナーが自動的に表示されたり、最新のバナーや人気のバナーが表示されます。

最近のトレンドだと、動画やjQuery（ジェイクエリー）等で動きをつけたバナーがクリック率が高いです。ユーザーの目に留まり、思わずクリックしたくなるようなバナーデザインを心がけましょう。また、より良いバナーを制作するためにはABテストが必須です。文字だけでもいいので2パターン用意して運用するようにしてください。