バナーデザインの見本とコツ～セールバナー編～
サマーセール、クリアランスセール、閉店セール、クリスマス・年末年始セール。
ECサイトには欠かせないセールバナー。
セールバナー制作にお悩みの方も多いのではないでしょうか？
「毎回似たデザインになってしまう」
「見た目はいいのに、CTRが上がらない」
「目立つだけでなく、ブランドに合わせておしゃれ感も出したい」など…
セールバナー制作にお悩みの方必見！今回はパッと目を引く効果的なセールバナーを制作するためのコツを伝授します！
目次
セールバナー制作の５つのコツ
1．セールということが一目でわかるようにする
そもそもバナーはユーザーに気づいてもらわなければ意味がありません。
Web上の膨大な情報の中から見つけてもらい、クリックしてもらうためには、それが「セールの情報である」とわかってもらう必要があります。
セールのバナーであると一目でわかってもらうための最も簡単な方法は「SALE」というテキストを入れることです。
目立たせるためにはテキストの大きさや色も重要です。目立たせたいテキストは「大きく・視認性の高い色」にすると良いでしょう。
上のバナーでは、まずパッと「SALE」の文字が飛び込んでくるため、一目でセールバナーであるとわかります。その次に、セールの期間が目に入ってきます。このように、情報に優先順位をつけて色や大きさを工夫することが大切です。
テキストは必ずしも「SALE」である必要はありません。
「バーゲン」「最大70％OFF」「半額」「プライスダウン」など、一目で「安売りをしている」「クリックするメリットがある」ということがわかる内容にしましょう。
2．情報を詰め込みすぎない
まずは以下のバナーをみてください。このバナーは旅行会社のセールバナーです。
なんだかごちゃっとして見えませんか？
ユーザーが広告バナーに目を向けるのは一瞬です。このバナーを見ても、一目でセールのバナーであるとわからないかもしれません。
このバナーのテキストを並べてみると次のようになりました。
・新しい時代の、新しいイロハリゾート。
・トラベルキャンペーン実施中
・宿泊代金が最大35％OFF
・期間限定8/1（土）～8/31（月）
・宿泊者専用無料送迎バス運行開始
・ご予約は公式サイトからが一番お得
・公式サイトで限定クーポン配布中
並べてみるとかなり多く感じますよね。これだけの情報をユーザーは一目で理解できるでしょうか？
このように情報を詰め込みすぎているバナーは、ユーザーに理解する時間を与えてしまいます。
セールバナー制作の際には情報を整理し、優先順位をつけましょう。
できるならばカットしてください。目的は「気づいてもらい、クリックさせる」こと。思い切って情報を絞ることも大切です。
情報に優先順位をつけましょう。先ほどのテキストで重要な情報を精査すると次のようになりました。
・新しい時代の、新しいイロハリゾート。
・トラベルキャンペーン実施中
・宿泊代金が最大35％OFF
・期間限定8/1（土）～8/31（月）
情報を整理して作り直したバナーがこちらです。
いかがでしょうか？ かなり見やすくなりましたよね。
情報を絞るだけでなく、強弱をつけて視覚的に情報を整理すると、より伝わりやすくなります。要素もできるだけ最小限に抑え、テキストのみもしくはテキスト＋シンプルな写真やイラストなどでまとめるのがベストです。
3．配色で伝えたいイメージをコントロールする
セールバナーといえば「赤×黄」。この配色は「安い」というイメージを与える効果があります。
また、“目立たせる”という点にフォーカスしたビビットカラーや原色のセールバナーを見たことがあるでしょう。
こういったバナーもセールバナーのデザインのひとつの正解といえます。
ですが、このような配色のバナーは自社のブランドイメージやサイトイメージに合わない、ということも少なくはないでしょう。
ナチュラル志向のブランド、シックで落ち着いた雰囲気のブランド…。そのECサイトに先ほど示したような派手なセールバナーがあることを想像してみてください。悪目立ちしてしまいますよね。ブランドのイメージを崩しかねません。
そんな時は、色のトーンを調節してブランドイメージに合わせましょう。
このように同じ赤でも落ち着いたトーンの赤にするだけで、目立ちつつもブランドのイメージに寄ったセールバナーになります。
このように寒色系でまとめれば、より冬のセールらしい印象を与えることもできます。同じデザインで、色味を変えてピッタリの配色を探してみましょう。
4．2～3色でまとめる
派手でカラフルな方が、気づいてもらえると思ってしまいますが、ほとんどの場合逆効果です。
色も一つの情報として捉えると、全体のカラーは2～3色でまとめることで、より伝わりやすくなります。
左のバナーは一見派手で目立ちますが、色数が多くごちゃっとした印象があり、信頼感がないように感じてしまいます。
右のバナーは、色味を統一し差し色で赤を使うことで、目立たせたい部分を効果的に印象づけています。
セールバナーは基本的に2～3色でまとめ、差し色を使うことでユーザーの興味を引くことができます。
5．限定感・特別感を出す
テキストは最小限に抑えるべきだとお伝えしましたが、限られた情報量のなかでユーザーの興味を引くような文言を入れることも重要です。
例えば、
・期間限定
・1月10日まで
・在庫限り
・今季ラストチャンス
など、限定感や特別感を出すことでユーザーは興味を持ちます。
セールバナーデザインの見本
1．年末年始セールのバナー
「SALE」の文字がパッと目に飛び込んできますね。セールバナー鉄板の「赤×黄」の配色ですが、色味を工夫することでお正月らしさが演出されています。モチーフをちりばめた季節感のあるデザインが興味を引きます。
2．サマーセールのバナー
色味が夏らしさを感じさせるバナーです。情報が視覚的に整理されていて伝わりやすいですよね。重要な情報を鮮やかな黄色で上手く目立たせています。背景の画像もシンプルで、テキストの情報を邪魔せず効果的に使用されています。
3．おしゃれなセールバナー
テキストのみのセールバナーや文字組みのデザインは最近のトレンドです。シンプルでありながら、インパクトを与えることができます。配色を変えるだけでガラッと印象が変わるので、ABテストをしながらより効果的なバナーを見つけるのも一つの方法です。
セールバナーデザインの参考サイトを紹介
ここまで様々な「セールのバナーデザイン」を見てきました。
いかがでしたか？
セールのバナーデザインがもっと見たい！
カラーやサイズ別でさらに詳しく見てみたい！
そんな方にオススメするのが、以下のバナーデザインまとめサイトです。
バナーデザイン参考サイト「バナー広場」では
登録数1万件以上のバナーデザインの中から、
「セールのバナーデザイン」だけを一覧で表示することができます。
サイズやカラー、雰囲気など、あなたが探している
バナーデザインがきっと見つかるはず。
是非参考にしてください！
まとめ
いかがでしたでしょうか？
これから年末年始セールの時期です。セールバナー制作の際は是非参考にしてくださいね。
また、一度制作したバナーでもブラッシュアップすることで、CTRを改善することができます。本記事を参考に今一度あなたのサイトのセールバナーを見直してみてはいかがでしょうか。
おしゃれなセールバナーが完成することを願っています♪
