参考になるクーポンバナーデザインの作り方！

記事作成日:2022/02/24

最終更新日:2023/07/17

ECサイトに欠かせないクーポンバナー。

クーポンバナー制作にお悩みの方も多いのではないでしょうか？

「毎回似たデザインになってしまう」

「見た目はいいのに、CTRが上がらない」

「目立つだけでなく、ブランドに合わせておしゃれ感も出したい」など…

クーポンバナー制作にお悩みの方は必見です。

今回はパッと目を引く効果的なクーポンバナーや、ブランドのイメージを損なわずに存在感のあるクーポンバナーを制作するための方法を伝授します！

パターン別のクーポンバナーデザイン例
物足りなさを解消！クーポンバナーデザインにひと工夫加えよう
実際にクーポンバナーを作ってみよう！
「クーポンバナー」だけを検索できるバナーデザインギャラリーサイトをご紹介！
まとめ

パターン別のクーポンバナーデザイン例

1．お得感が最も伝わる王道のクーポンバナーデザイン

「赤×黄」の組み合わせは購買色と呼ばれ、広告のバナーやチラシ、値札などによく使用されます。特に「赤」を取り入れることで売り上げが大きく左右されると言われています。

「赤×黄」はとにかく目立たせたいときや、安さを強調したいときにもってこいの王道の配色です。

赤をベースにアクセントとして黄や黒を使用し、少ない色数でまとめることで、インパクトがありつつも読みやすいバナーになります。

2．ショップのイメージを壊さない！高級感のあるクーポンバナーデザイン

知的で信頼性の高いイメージを打ち出したいときには「青」がオススメ。同じ青でも、トーンを落としたり、グラデーションを用いたりすることで高級感を演出できます。

青と白の組み合わせは安定感がありますし、アクセントでゴールドを使用することで特別感がプラスされます。

フォントやレイアウト、あしらいをひと工夫するだけで、赤×黄とは真逆の組み合わせでもクーポンバナーらしさを表現できます。

3．季節感を演出して購買意欲を高めるクーポンバナーデザイン

いつものクーポンバナーデザインの配色を変えたり、季節のモチーフをあしらったりするだけで、季節感のあるクーポンバナーが作れます。

クーポンバナーのデザインでは「数字（値段・割引率）」をしっかりと目立たせることが大切です。季節やシーン、ブランドイメージにぴったりな配色であっても、数字が目立たなければ本末転倒です。

上の参考バナーでいうと「300円OFFクーポン」「10％OFF」の部分を、配色や大きさ、フォントなどを駆使して目立たせることを優先させましょう。

4．シンプルで洗練されたイメージのクーポンバナーデザイン

ブランドイメージによっては、上記のようなシンプルなデザインもアリ。余白をたっぷり使って、上品で洗練されたイメージに仕上げましょう。

バナー設置場所の背景が黒などの暗い色である場合に、このような薄い色味のバナーはかえって映えることも。できるだけ設置するサイトの雰囲気も加味して配色を決めるようにしましょう。

そうすることで、セール感を意識するあまりブランドイメージと合わずにちぐはぐになったり、逆にサイトの色味に合わせすぎて目立たなくなってしまったりすることを防げます。

物足りなさを解消！クーポンバナーデザインにひと工夫加えよう

1．クーポン券っぽいデザインでユーザーの興味を引こう

バナーそのものをクーポン券のようなデザインにすることで、ユーザーの興味を引きましょう。

Web上のクーポンではありますが、紙っぽいデザインにしたり、切り取り線をあしらったりすることで存在感がプラスされます。シンプルな配色でも、インパクトのあるバナーが作れますよ。

2．リボンや丸を使って、視覚的に情報を整理しよう

ユーザーの興味を引きたい気持ちが先行して、情報量が多くなってしまいがちなクーポンババナー。視覚的に情報を整理してあげることで強弱がつき、伝わりやすいバナーになります。

クーポンっぽさを演出するのにぴったりなのが「ギザギザの丸」と「リボン」です。ギザギザの丸の中にテキストを入れたり、アーチ状のリボンの中にテキストを配置することで、クーポンっぽさを出しつつ、情報を区別し整理することができます。

3．背景にちょい足し！集中線やストライプでセールのワクワク感を演出しよう

シンプルにまとめたは良いものの、何か物足りない…、目立たない…。そんなときは背景に集中線やストライプを敷くことで華やかさやにぎやかさをプラスできます。

実際にクーポンバナーを作ってみよう！

1．要件を整理しよう

コスメECサイトのトップページに設置する新規会員登録限定のクーポンバナーを制作することになりました。決定事項は以下のようになっています。

バナー設置場所：コスメECサイトのトップページ
概要：新規会員登録のクーポンバナー
ターゲット：10～30代のトレンドに敏感な女性・コスメが好きな女性

クーポンバナーに記載する情報（テキスト）は以下の通りです。

・新規会員登録
・最大2000ポイントプレゼント
・3日間限定
・いろはフォーラム開催中
・5/14(月)～16(水)
・今すぐクーポンをGET

2．情報に優先順位をつけよう

まずはバナーを見たユーザーにとってどの情報が最もメリットになるかを考え、優先順位をつけていきます。バナーの役割は会員登録をし、クーポンを利用して商品を購入してもらうことなので、「最大2000ポイントプレゼント」が最も重要な情報となります。

このバナーでの優先順位を決めました。

1．最大2000PTプレゼント
2．新規会員登録
3．5/14(月)～16(水)
4．3日間限定
5．いろはフォーラム開催中
6．今すぐクーポンをGET

ここで決めた優先順位をもとにレイアウトを考えて行きます。今回は「最大2000PTプレゼント」を最も目立たせたいので中心に配置しました。

3．視線の動きを意識してレイアウトしよう

その他のテキストについては、優先順位だけでなく視線の動きも意識します。人の視線は左上から右下に移動するので、ストーリーを考えて順に配置することで内容が伝わりやすくなります。

今回は、何のクーポンかを先に伝えるために「いろはフォーラム開催中！」を上部に、最後にユーザーをクリックへと後押しするための「今すぐクーポンをGET」の文言を下部に配置しました。テキストの配置が決まったら、フォントサイズを大まかに決めていきます。

4．大まかなフォントサイズを決めよう

優先順位が高いものを大きく、高くないものを小さくすることで、情報の重要度を視覚的に判断することができます。また、この時、余白を意識して配置しましょう。余白の付け方ひとつで、文字が読みやすくなったり、目立たせたい要素を強調したり、全体のバランスを調整したりすることができます。

5．ターゲットやブランドイメージに合わせて配色を決めよう

文字の大きさが決まったら、次に配色を決定します。今回はターゲットが「10～30代のトレンドに敏感な女性・コスメが好きな女性」なので、パステルカラーを使用してブランドのイメージを崩さないような配色を考えます。

パステルピンクとホワイトを使ってポップで女性らしい配色に。最も目立たせたい「2000PT」にアクセントでイエローを配置しました。クーポンバナーやセールバナーでよく見る「赤×黄」の配色は、購買色と呼ばれており、ユーザーの目を引くとともに「安い！」と感じさせるのにピッタリの配色です。

しかし、セール感を意識しすぎるあまり、ショップのイメージを損なうことは避けたいという場合もあるでしょう。今回は、ブランドイメージを壊さない、ターゲットに適した配色を意識しつつ、モチーフやあしらいでクーポンらしさを演出する方向で進めます。

6．線や形を使って情報に強弱をつけよう

このままだと、まだ情報が散らばって見えてしまうので、先ほど紹介した「クーポンバナーデザインにピッタリのモチーフ」の中から、ギザギザの丸とリボンを使って強弱をつけてみました。

7．読みやすさを意識してフォントを選ぼう

かなり情報が整理され、見やすくなったと思います。また、クーポンらしさもプラスされ、インパクトのあるデザインになってきましたね。次にフォントを決めていきます。セールであることを強調してくれる目にとまりやすいフォントを選びましょう。

今回は「APJapanesefont」と「BudHand」を使用しました。ビジュアル要素としては効果的な装飾体も、使いすぎはNG。読みにくくなってしまうのでポイント使いにとどめましょう。最も目立たせたい「2000PT」を他のテキストと差別化するために黒い線で縁取っています。

8．あしらいを入れて、完成！

最後に装飾を入れて完成です。のっぺりしすぎないように背景をストライプにしました。ストライプはポップで華やかなイメージをもたせてくれます。「Present♥」を女性らしい手書き風のフォントにしたので、バランスをとるために左上に同じフォントで「Welcome!」の文字をあしらいました。全体の雰囲気が統一されたクーポンバナーの完成です！