ECサイトのバナーは、バナー広告とサイトバナーの2つに分かれます。
いずれの場合もユーザーにクリックしてもらうため、魅力的なバナーにすることが大切です。
そこでこの記事ではECサイトのバナーの基本的な作り方、効果的なバナーにするためのポイントをご紹介します。
自分でもバナーを作ってみようと思うんだけど、僕にもできるかな？
最近はデザインスキルが無い人でもバナーなどの画像が作れるツールがあるので、ツクル君でも作れますよ！
目次
ECサイトのバナーとは何？
ECサイトのバナーとは、Webサイトに掲載される広告のことです。
クリックするとECサイトの商品ページやキャンペーンページなどに遷移します。
ECサイトにおいてバナーは、商品やキャンペーンなどをユーザーに訴求し、購買意欲を高めるという重要な役割があります。
バナーは主に2種類に分かれる
バナーと一口にいっても、実は厳密には「バナー広告」と「サイトバナー」2種類に分かれます。
バナー広告はその名の通り、広告として外部サイトに掲載するバナーのことです。
まだ自社のECサイトを知らないユーザーにアプローチし、広告バナーからサイトへ訪問してもらうことで、新規顧客獲得を目指します。
一方サイトバナーは、外部のサイトではなく自社ECサイトに設置するバナーです。
ECサイトを訪れたユーザーに対して、おすすめ商品やキャンペーン情報を知ってもらい、ユーザーがサイト内でスムーズに遷移することを目的としています。
サイトバナーはECサイト内の情報を共有することでユーザーの購買意欲を高め、ECサイトのCVR（コンバージョン率）向上を目指します。
ECサイトバナーの基本的な作り方・作成手順
ECサイトのバナーを作るとしたら、どのような手順で進めていけば良いのでしょうか。
基本的な手順を大まかにご紹介します。
1.バナーの目的を明確にする
ユーザーが興味を持つようなバナーを作るには、最初に誰に何を伝えたいのかといった目的を明確にすることが大切です。
まず、作成するバナーが広告バナーなのかサイトバナーなのかを決めます。
外部サイトに掲載し、新規顧客獲得が目的の広告バナーには、ブランドに興味を持ってもらうための訴求が重要となります。
一方、ECサイト内で使用し、商品購入やキャンペーンへの参加を促すサイトバナーには、より具体的な商品情報やメリットの訴求が求められます。
それぞれのバナーの種類を決定した上で、さらに具体的な目的を定めていきましょう。
例えば広告バナーであれば、新規顧客獲得だけでなくブランド認知度の向上なども考えられます。
サイトバナーであれば、特定商品の売上アップ、セール情報の発信、新規会員登録の促進といった目的が設定できます。
このように、バナーの種類と目的を明確にすることで、デザインやキャッチコピーなどが自然と決まってきます。
2.必要な要素を洗い出す
目的が決まったからといって、いきなりデザインに取り掛かるのはおすすめできません。
必要な要素を決めないと、デザインのレイアウトができた後に、必要な情報が足りないと気づいたり、不要な情報があったりして、1からデザインをやり直さなければならなくなる可能性もあります。
そのため、「ユーザーの目を引き、クリックしたくなるようなバナーを作るにはどんな情報が必要なのか？」を考え、盛り込むべき要素を洗い出しましょう。
例えば、セール情報に関するサイトバナーの場合、以下のような要素が考えられます。
- ・セール期間: いつからいつまでセールを行うのか
- ・セール名：サマーセールなど、何のセールなのか
- ・割引率: 商品がどのくらいお得に購入できるのか
- ・対象商品: どの商品がセール対象になるのか など
必要な情報を明確にすることで、ユーザーに分かりやすく、魅力的なバナーとなります。
3.レイアウトを考える
入れるべき内容が定まったら、次はレイアウトを考えます。
レイアウトを考える際には、まずバナーに掲載する情報に優先順位をつけましょう。
商品のセール情報や新商品の紹介など、特にユーザーに伝えたい重要な情報は、目立つように大きく配置するといった調整が必要なので、情報の重要度の順番はあらかじめ決めておきます。
同時に、レイアウトを組む際には、参考となる他社のバナー広告例を集めるのもポイントです。
セールバナーを作るなら、似たようなバナーはたくさんあるので、配色や配置の仕方、余白の使い方などを学ぶためにも、いろいろなパターンの参考バナーを集めてみましょう。
さまざまなバナーを参考にして比較することで、より効果的なレイアウトを見つけ出せるはずです。
4.素材を準備・配置していく
レイアウトが大まかに定まったら、次は素材の準備と配置です。
素材選びはレイアウト作業に比べてすぐに終わりそうですが、意外と重要な工程です。
まず、下記の画像を見比べてみてください。
2つを見比べた時、どちらのバナーの方をクリックしたくなるでしょうか？
写真素材以外は同じデザインのバナーですが、下の写真のほうが子供用水着を売っているということがパッと見でわかるので、思わずクリックしてしまう方も多いでしょう。
このようにユーザーは第一印象で「自分にとって必要か必要じゃないか」を無意識に判断しているため、素材もバナーの情報を伝える大事な要素です。
バナーの内容に合った素材をこだわって探しましょう。
選んだ素材はレイアウトに合わせて、配置していきます。
先ほど決めた優先順位に従い、セール情報や新商品の紹介など、特にユーザーに伝えたい重要な情報は目立つように大きくしたり、反対に商品の詳細情報など重要度は低いものは小さく配置したり、文字の大きさも工夫します。
また、要素同士の間隔も重要です。
適切な余白を設けることで、スッキリとした見やすいバナーになるでしょう。
5.デザインを整える
一旦デザインが完成したらそのまま掲載するのではなく、もう一度見直してより魅力的なデザインに仕上げていきます。
デザインのブラッシュアップでは、客観的な視点を取り入れることが重要です。
手軽に行えるのは、第三者チェックとして作成したバナーを周りの人に見てもらい、率直な意見をもらうことです。
ターゲットとなる顧客層に近い人に意見を聞くと、より効果的でしょう。
意見をもらったらデザインに反映させます。
細かな調整を繰り返すことでバナーの完成度がじょじょに上がり、ユーザーの目に止まりやすく、クリック率の高いバナーを作成することができるでしょう。
ECサイトバナーの効果をアップさせるポイント
バナーの基本的な作り方を把握したところで、ここからは効果的なバナーを作る際のポイントをご紹介します。
キャッチコピーにこだわる
バナーをじっくりと見るユーザーはなかなかいないため、パッと見で情報が伝わるようにしなければなりません。
特にサイト内を遷移させるためのサイトバナーの場合、何の情報のバナーなのかがわかるよう、キャッチコピーにはこだわり、簡潔で伝わりやすい言葉を選びましょう。
下記のバナーは似たような内容ですが、上記は何のためのバナーなのかわかりづらくなっています。
下記のバナーのように「オーダーはこちら」という一言を入れることで、何を伝えたいバナーなのかがすぐにわかります。
どんな情報を載せるかこだわり、伝えるべきことはきちんと伝えましょう。
読みやすさや行間に配慮する
文字情報が読みづらいと、そもそもユーザーがバナーを見てくれないので、情報も伝わりません。
例えば下記の画像ですが、片方は文字が小さすぎて、もう片方は背景色と文字色が似すぎていて読みづらくなっています。
文字の大きさや背景色と文字色の組み合わせに注意し、文字は読みやすくしましょう。
また、文字だけでなく字間（字と字の間）や行間によっても読みやすさが変わってきますので、合わせて注意しましょう。
字間が狭いと文字が詰まった印象のデザインになり、読むこと自体を避けられてしまうかもしれません。
また行間も、狭すぎても広すぎても読みづらさにつながるので、適切な行間になるよう調整しましょう。
写真と文字のイメージを統一する
写真は視覚に訴えるので、文字よりも情報が伝わりやすいといえます。
下記の画像でも、文字では「Beach Wear」と書いているのに、背景が都会のビル写真であるため、文字情報が理解されにくくなっています。
一方、Beach Wearという文字に合ったビーチの写真を使っているバナーは、文字と写真が一致しているので文字情報もすぐに把握できると思います。
先ほどもお伝えしましたが、写真選びは魅力的でわかりやすいバナーになるかどうかを左右する要素のため、きちんと文字情報に合った写真を選びましょう。
内容を詰め込みすぎない
多くの情報を伝えたくて、ついさまざまな情報を載せてしまいがちですが、多すぎる情報はバナーの読みづらさに直結します。
下記の画像のように掲載する情報を絞り、詳細は遷移先のページなどで紹介するようにしましょう。
またフォントやスタイルが多すぎても、情報量の詰め込みすぎにつながるので注意が必要です。
特に、デザインしている時は大きな画面で見ているのでそこまで情報量が無いと思っていても、スマートフォンの画面ではバナーが縮小され、ゴチャゴチャしたわかりづらいバナーになってしまう可能性もあります。
スマートフォンの画面の大きさではどのように表示されるのか、プレビュー画面などを利用しながら掲載する情報を精査しましょう。
写真よりも文字を目立たせる
繰り返しになりますが、文字が読みづらいと情報が伝わらずバナーの目的を果たせません。
文字の背景と文字色の組み合わせだけでなく、文字と背景のコントラストが弱かったり、印象が強すぎる写真を使ったりしても、文字は読みにくくなります。
下記は文字と背景のコントラストが弱いせいで読みづらくなっていますが、文字の色味をはっきりさせるだけで読みやすくなっています。
また、下記は印象の強い写真を使用しているため文字が読みづらいので、できれば避けたいところですが、どうしても使いたい場合は背景を透過させたり、下記のように半透明のテキストボックスを使用するなど工夫をすることで、読みやすくなります。
上記の２例のように、文字のあしらい方を変えるだけでグッと文字の読みやすさは改善します。
「バナーでは写真よりも文字を目立たせる」ことを常に心がけておきましょう。
初心者でも使いやすい！ECサイトのバナーを作れる無料ツール
直観的なレイアウトができたり、ベースとなるテンプレートが豊富だったりと、デザインの知識が無くてもバナーが作れるツールが続々と登場しています。
ここでは初心者におすすめの2つの無料ツールをご紹介します。
Canva
オンライン上で使える有名な無料デザインツールの１つがCanvaです。
Canvaはテンプレートが61万点、写真やイラストなどの素材は1億点以上と豊富なのが特徴（2024年9月現在）。
「SALE」と検索すれば、すでにレイアウト済みのSALE用テンプレートが見つかるので、自社用に文字や素材をアレンジすれば、デザインが初めての方でも簡単にバナーが完成します。
無料でも利用できますが、さらに豊富なテンプレートや素材を使いたい方は有料プランもあります。
編集中ファイルのシェアも簡単にできるので、他のスタッフとデザインを共同して作業したい場合なども便利です。
Adobe Express
Photoshopやillustratorといったデザイン用ソフトを提供しているAdobe社の、オンラインデザインツールです。
Canva同様テンプレートが豊富で、ホーム画面にはInstagram投稿用、LINE広告用などすでに完成されたテンプレートが並んでいます。
直観的な操作が可能なので、文字を入力し直したり、素材の位置を変えたりなどすれば、テンプレートを元にオリジナルのバナーが簡単に作成できます。
テンプレートはデザインのテイストや地域（国）などの条件で絞り込めるので、目的のテンプレートを検索しやすいのも魅力の1つでしょう。
Adobe Expressも基本的には無料ですが、有料プランもあります。
参考になる！プロのWebデザイナーが教えるクリックしたくなるバナーのコツ
バナー作成についてもっと具体的な話を知りたいという方は、「思わずクリックしたくなるバナーデザインのコツ」の著者でもあるデザイナーのカトウヒカルさんのインタビューをぜひご覧ください。
バナーに記載する最適な文字数やフォントについてなど、実践的なテクニックをお話しくださっています。
なお、インタビュー記事ではなく動画で知りたい方は下記のYouTube動画でチェックしてみてください。
ECサイトのバナーは配置や効果測定も重要
サイトバナーの場合、せっかく魅力的なバナーを作成しても、ユーザーの目に留まる場所に配置しなければクリックにつながりません。
そのため、ユーザー目線でバナーを配置しましょう。
セール情報など目立たせたい情報は多くの人が目にするTOPページに、送料無料キャンペーンのバナーであれば商品を検討している商品ページに設置するなど、ユーザーの状況に合わせて配置場所を変えることで、クリック率も高まるはずです。
最適な場所がわからなければ、バナーの設置場所を何回か変えてみて、一番成果があるのはどこかを検証するのもおすすめです。
また、作成したバナーの効果測定も重要です。
アクセス分析ツールを使って効果測定を行うことで、どのバナーがどの程度クリックされ、コンバージョンにつながっているのかを把握することができます。
効果検証してバナーのデザインや配置場所の改善を繰り返すことで、より効果的なバナー運用が可能になり、売上アップを目指せるでしょう。
まとめ
今回の記事では、バナーの目的や種類、基本的な作成手順、効果アップのポイントを紹介しました。
効果的なECサイトのバナーを作成するには、まず目的を設定し、掲載する情報の優先順位を付けることなどが大切です。
また、いろいろと情報を伝えたくて情報を詰め込みすぎたり、写真を目立たせすぎてしまったりすると見づらさにつながるため、逆効果です。
ユーザー目線で考え、パッと見で内容を把握できるようなバナーを心がけることが重要です。
また、効果的なバナーにするためには、バナーの配置にこだわり、効果測定も忘れずに行いましょう。
▼こちらの記事も読まれています▼
