ECサイトのバナーの作り方を徹底解説！サイズや素材探し、バナー例を紹介

ECサイトでは、特集ページや特定のカテゴリーページへユーザーを誘導するために、バナーを設置することがあります。しかし、「ユーザーが思った通りにバナーをクリックしてくれない」なんてことも多いです。

「なぜバナーがクリックされないのだろうか」
「バナーのデザインが悪いのであろうか」
「どこのデザインを直せばよいのだろうか」

Web担当者様はこのようなお悩みをお持ちかもしれません。バナーはただおしゃれであればよいというわけではありません。設置場所やついクリックしたくなるような文章やデザインが必要です。

今回は「ECサイトでコンバージョンしやすくなるバナーの作り方」「バナーを売上につなげやすくする導線の設置」についてプロのデザイナーが解説いたします。

ECサイトのバナーの作り方とは

ECサイトのバナーの作り方は以下の通りです。

・バナー制作に事前情報をまとめる
・参考デザインを集める
・バナー構成要素の洗い出し、ラフ案の作成
・バナーの配色の決定
・ラフ案を元にバナーをデジタル加工を行う
・他者な意見を取り入れて、微調整をする

詳しく解説いたします。

バナー制作に事前情報をまとめる

制作する前に事前情報をまとめる作業を行います。

・バナーコンセプト（何を伝えたいのか）
・ターゲット（年齢、性別、職業、年収、興味関心、好みなど）
・バナーの目的（商品・サービスの認知、購入への誘導など）
・バナーに入れる要素（商品の強み、画像、キャッチコピー、クロージング文言など）
・バナーサイズ

制作途中でバナーの方向性がぶれないように事前情報はしっかりまとめておきましょう。

参考デザインを集める

バナーデザインをする際、デザインアイデアは0から生み出すのではなく、既存のデザインを組み合わせて制作することが一般的です。そのため、参考デザイン集のサイトを見てみたり、日頃からWeb広告を意識的に見たりするなどをします。

「余白の取り方」「色の組み合わせ」「コントラストの配分」「要素の配置の仕方」など既存バナーを参考にし、新しいバナーを作成していきます。

バナー構成要素の洗い出し、ラフ案の作成

バナーを作成する際、いきなりデザインに取り掛かるのではなく、バナーの構成要素を洗い出し、簡単なラフ案を作成します。要素（画像やバナーなど）をまとめて、手書きやパワーポイントなどで要素を配置し、ラフ案を作成します。
※photoshopやillustratorで作成してもOK

デザインは要素の配置によって決まるため、ラフ案を最低でも3つほど作成しましょう。

バナーの配色の決定

ラフ案を作成後、商品・サービスやサイトのトンマナを考慮して配色を行います。配色する際は、色の特徴を捉えて配色すると良いでしょう。

【配色による心理的効果の参考】
白：清潔、広さ、始まり
黄：希望、注意
黒：重い、権力、高級感
赤：食欲、購買欲、関心を集める
青：涼しさ、寂しさ、誠実
緑：リラックス、癒し、穏やか

また、複数カラーを使用する際は「テーマカラー」「サブカラー」「アクセントカラー」を意識しましょう。

テーマカラーは色の割合が最も大きく占める色のことです。サブカラーはテーマカラーに次いで大きく占める色です。最後のアクセントカラーはコンセプトやメッセージを目立たせるために使用する色です。

以下の配色割合で作成しましょう。

「テーマカラー」75%
「サブカラー」20%
「アクセントカラー」5%

ただ、配色を選ぶのもなかなか大変ですよね。プロでも正直迷うことが多いです。配色パターンは参考デザインを参考にしつつ、配色を選ぶ方法や、配色パターンを提案してくれるツールを活用するのも良いでしょう。

参考
Material Design Color Palette Generator
上記サイトでは、テーマカラーとサブカラーの２色を指定すると自動的に配色パターンが提示してもらえます。

ラフ案を元にバナーをデジタル加工を行う

まとめてラフ案と配色を元にデザインに取り掛かります。デザインする際はPhotoshopやillustratorなどのツールでデザインすると良いでしょう。ラフ案の時点で既に使用されていると、工数を減らせるのでおすすめです。

他者な意見を取り入れて、微調整をする

作成したバナーの微調整を行います。微調整は余白の調整や強調箇所の調整です。また、他者に意見を求めるのも良いでしょう。別の配色が良いかもしれない、テキストのフォントは別のフォントが良いなどいろいろな意見が出てくることがあります。

最終的に出来たバナー案が最適とは限らないため、多くの方に意見を聞いてみると良いでしょう。

ECサイトのバナーの最適なサイズは？

ECサイトのバナーの最適なサイズは、作りたいサイズ感や設置場所によって異なります。まず、バナーの形が横長、縦長、正方形なのかを決めます。バナーサイズはピクセル単位で決めるのですが、ご自身のサイトに応じて決めるのが良いです。

また、PC用バナー、スマホ用バナーで分けて作成する必要があります。例えば、スマホ用バナーをPC画面に表示させると、小さくなり過ぎることがあります。また、逆の場合は、縦幅が大きすぎるためスクロールの回数が増えます。

画面サイズや設置場所の幅に応じてバナーを作成しましょう。

ECサイトのバナーの素材はどこで探すべき？

ECサイトのバナーを作成しようにも素材をどこで探せばいいのか分からないという担当者も多いでしょう。ここでは、バナー作成に使える素材サイトをいくつかご紹介いたします。

商用利用可能なイラストやアイコンが豊富な素材サイト5選

ICOOON MONO

COOON MONOはアイコン素材全てがモノトーンになっているサイトです。
ECサイトでも利用しやすいようなアイコンが豊富にラインナップされています。

URL：https://icooon-mono.com/
商用利用可否：可能
クレジット表記：不要
ファイル形式：JPG・PNG・SVG・AI・EPS

EC design

ECサイトで利用することに特化したバナー素材を扱っているフリー素材サイトです。イベント・セールなどにも使える便利なアイコンが見つかります。

URL：http://design-ec.com/
商用利用可否：可能
クレジット表記：不要
ファイル形式：JPEG・PNG・AI・EPS

em Studio

em Studioはシンプルで利用しやすいアイコン・ボタン・イラストを揃えているフリー素材サイトです。会員登録不要で商用利用ができるため、ダウンロードもしやすいのも特徴です。

色・サイズも自由に加工可能です。

URL：http://www.emstudio.jp/
商用利用可否：可能
クレジット表記：不要
ファイル形式：PNG・AI・PSD

SILHOUETTE DESIGN

SILHOUETTE DESIGN（シルエットデザイン）は影絵素材のサイトです。

影絵を使って他とは違う印象的なバナーを作成する際にも使えます。AIファイルが用意されているため、担当者ご自身で自由に加工も可能です。

URL：https://kage-design.com/
商用利用可否：可能
クレジット表記：不要
ファイル形式：JPG・PNG・SVG・AI

E. Commerce 予備校

E. Commerce 予備校はアレンジのしやすいバナーだけでなく、すでに完成されたタイプも提供しているフリー素材サイトです。
デザインスキルがない方にも手軽に使えるのでおすすめです。

URL：http://ec-yobiko.com/cat15/800px/
商用利用可否：可能
クレジット表記：なし
ファイル形式：JPG・GIF

商用利用可能な写真が豊富な素材サイト8選

写真AC

写真が豊富なフリー素材サイトの中で、シンプルな使いやすさという点ではトップレベルです。
海外サイトでは見つけにくい、お寺や日本円、和食などの日本国内の写真素材が多く揃っています。

また、日本人をモデルにしたバナーを作りたい方にも最適です。有料プラン、無料プランがあり、無料プランの場合は機能やダウンロード枚数に制限があります。

URL：https://www.photo-ac.com/
商用利用可否：可能
クレジット表記：不要
ファイル形式：JPG

ぱくたそ

ぱくたそは風景や人物などの定番写真から、山盛り系ラーメン店のフリー素材など、一風変わった写真素材を完全無料で提供しているサイトです。
登録不要でダウンロードできるので利用しやすいです。

URL：https://www.pakutaso.com/
商用利用可否：可能
クレジット表記：不要
ファイル形式：JPG

pixabay

pixabayは海外のクリエイターが作品を提供しているフリー素材サイトです。
センスのある写真やおしゃれな写真が欲しいという方にはぴったりです。

URL：https://pixabay.com/ja/
商用利用可否：可能
クレジット表記：不要
ファイル形式：JPG

pro.foto（プロ ドット フォト）

pro.fotoはプロカメラマンが撮影した高品質の写真素材が、無料のフリー素材として公開されているサイトです。種類別にサイトが提供されているため、必要な素材も探しやすいです。

また、女性モデルに特化した素材サイト、料理や食材などのフードに特化した素材サイトなども提供されています。

URL：https://pro-foto.jp/
商用利用可否：可能
クレジット表記：不要
ファイル形式：JPG

PIXTA

PIXTA（ピクスタ）は有料の素材サイトで、その規模は日本最大級の有名フリー素材サイトです。写真、イラスト、アイコンなどはもちろん、動画や音楽素材も購入できます。

URL：https://pixta.jp/
商用利用可否：可能
クレジット表記：不要
ファイル形式：素材に因る

iStock

iStockは8,000万以上の写真・イラスト・映像素材が利用できる有料サイトです。ベーシックプランは月額3,300円(税込)で利用可能です。

URL：https://www.istockphoto.com/jp
商用利用可否：可能
クレジット表記：不要
ファイル形式：素材に因る

CANVA

CANVAはロゴやポスター、名刺などのデザインをブラウザ上でデザイン・編集ができるサイトです。ECサイトだけでなく、ビジネス用にバナーを作りたい方にもおすすめできます。

URL：https://www.canva.com/
商用利用可否：可能
クレジット表記：不要
ファイル形式：PNG・JPG・PDF・MP4・GIF

バナー工房

バナー工房はCANVA同様にブラウザ上で素材を編集・加工できるサイトです。トップページから必要なアイコンやエフェクトを選ぶことができます。直感的な操作でバナーを作れるので、デザインに関する技術が不要で制作可能です。

URL：https://www.bannerkoubou.com/
商用利用可否：可能
クレジット表記：なし
ファイル形式：JPG・GIF

ECサイトのバナーを作成するなら事例を参考にしよう

バナーデザインまとめ。

バナーデザインまとめでは、21,300本のバナーを掲載中で、参考としたいバナーを探すにはうってつけのサイトです。
業種はもちろん、色やバナーの表現、手書きフォント等、見たいバナーを目的別に検索できます。

バナー広告に関するノウハウも掲載されているため、はじめてバナーを作る際に参考にできます。

http://bannermatome.com/

Pinterest

バナーだけではなく、デザイン全般を探す際に役に立つサイトです。スマホアプリもあるため、電車の中でも気軽にデザインを探すことができます。また、お気に入りを保存できる機能があるため、目的別に分けておくと制作が捗ります。

https://www.pinterest.jp/

レトロバナー

レトロバナーは、バナーに使用されている色のカラーコードが確認できます。カラーコードが分かれば、バナー作成の際、工数削減になるので非常に便利です。

また、Photoshopで使えるカラーパレットのファイルもダウンロードできるだけではなく、検索機能が充実しているサイトでもあります。
「サイズ」「色」「業種」「テイスト」から希望のデザインも簡単に閲覧可能です。カテゴリーも細かく、多様な条件でバナーアイデアの収集が可能です。

https://retrobanner.net/

banner gallery

banner galleryはバナーの詳細ページにはタグがついており、関連するバナーをたどることができるバナー探しには便利なサイトです。しかし、英語表記なのでやや使い勝手が悪い部分がありますが、困ったときに見てみると良いでしょう。

https://bannergallery.net/

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

バナーデザインアーカイブは、「サイズ」「色」「業種」で検索が可能で、ページの切り替えを行わなくともスクロールして数多くのバナーを見ることができます。

バナーサイズの中に「Twitter」と「スマートフォン」があるのは特徴的です。詳細のページを見ると、同じサイズのバナーがランダムに表示されています。参考デザインを多く集めるのに最適です。
http://banner.keizine.net/

成果に繋がるECサイトのバナーはどこに設置する？

バナーデザインを改善しただけでは成果に繋がりにくい

「バナーへのクリックが少ないのはデザインが原因だ！」と考えてしまいがちですが、デザインを改善してもその効果にも限界があります。ユーザーはデザインを見てクリックをしているわけではないため、デザインももちろん大切ですが、バナーの設置場所も慎重に考える必要があります。

店舗で商品を探す場合は考えてみましょう。例えばスーパーでは「台所用品」「調味料」などのカテゴリーが天井に吊るされているかと思います。その誘導を参考にして、行動し、商品をかごの中に入れますよね。

ECサイトも同じように上手く誘導するための導線を確保しなければなりません。そこでバナーが役立つわけですから、デザインはどちらかといえば二の次です。ユーザーが分かりやすい設置場所を考えて、そこにバナーを置くことが大切です。

クリックしたくなる導線に設置するのが効果的

「導線を確保することが大切」とお伝えいたしましたが、実際にどこに設置すればよいのか分からないという方も多いでしょう。

まず設置場所としておすすめなのが、TOPページのファーストビュー、もしくはファーストビュー直下です。TOPページは多くのユーザーに閲覧されるページで、いわゆるお店の顔にあたります。多くのユーザーが閲覧するということは、その分バナーの視認率も必然と高くなります。

次にGoogleアナリティクスを活用してバナーを適切に設置してあげることです。どのページの情報が好まれて閲覧されているのか、どのページから目的のページへたどり着いているのか、どのくらいサイトに滞在しているのかなどを確認し、適切な箇所にバナーを設置しましょう。

ECサイトのバナー制作まとめ

今回は、ECサイトのバナーの作り方と導線設置について詳しく解説いたしました。バナーは自社の商品・サービスを購入してもらうために設置するのが目的です。そのため、ただおしゃれなバナーであればよいというわけではなく、興味を持ってもらいやすいバナーを作成することが重要です。

また、ユーザーはバナーを見るためにサイトを訪れているわけではありませんので、適切な位置にバナーを設置することで、その効果を最大化できます。バナーを設置する際は、TOPに置くことは大前提とし、必要に応じて設置場所を変えて効果を見てみるのも良いでしょう。

最後に、バナー制作についてお困りごとがありましたら、PULL-NETへご相談いただけますと幸いです。バナー制作代行はもちろん、設置のアドバイス、設置作業も代行可能です。売上に繋がるバナーを作っていきましょう。

関連記事
ECサイト制作の費用相場｜IT導入補助金・費用内訳詳細について
ECサイトで月商100万を目指す！｜売れるためのノウハウを全公開