売れるデザインノウハウ

桜をイメージした春のクーポンバナーデザインの作り方

4月になって春の陽気に眠くなりながらも、ネットショップの更新作業に大忙しの店長兼デザイナーブロガーの井川です。

デザイナーとは言え新米のデザインに苦手意識のあるなんちゃってデザイナーです。

そこまで質の高い作品をまだ作る事は出来ませんが、今回、私がネットショップ用に作った春用のクーポン券バナーのデザインの作り方を紹介していきます。

 

手始めに下の画像をご覧ください。

全体的な色合いは桜をイメージして柔らかい印象になるよう作ってみました。

この記事では、今回作った春用「春の10%OFFクーポン」を作っている時の手順や考え方などをご紹介いたします。

 

この記事を書いたのはこんな人

ネットショップコンサルタント

 

バナーの作り方

今回作るのは春用商品のクーポン券へ誘導するバナーです。

シンプルな感じに仕上げたかったので春の爽やかさと軽い感じを出せるよう作りました。

それでは、実際の工程をご覧ください。

大きさを決める。

まずは設置するバナーの大きさですが、横800pxの高さ160pxで設定しています。

なぜかと言うと楽天用のバナーで楽天の商品ページの横幅が800pxなので横幅は800pxに、そして楽天のデザインは「8ポイント方眼デザイン」を使っているので高さは8でキレイに割り切れる160pxにしてみました。

 

フレームを決める

本来ならテキストを最初に配置すべきなのでしょうが、最初の段階でピンクのフレームをバナーの中に入れてその中にテキストを収めたいと決めていたので、テキストよりも先に置いています。

このフレームの大きさは特に何も考えず感性で設定しています。

いま測った所、幅が8.6pxだったので「8ポイント方眼デザイン」を参考に8pxにした方が良かったかもしれません。

ちょっと雑だったと後悔。

文章を決める

バナーに入れるテキストは「伝えたい事」と「期間」なので最初は「10%OFF」と「2020/03/29~2020/03/31」のみを入れていました。

「10%OFF」だけだと何の商品が10%OFFなのかが分からないので「全商品対象」と追加

日付だけでも良かったのですが、日付だけだと「10%OFF」とのバランスが合わないので「対象期間」を追加。

デザインでキレイに見せる三角デザイン(三角形の中にテキストを収める)のためにちょっと文字数が足りなかったんです。

 

フォントの色の設定方法として、「10%OFF」の数字「10」の部分は目立たせたかったので明るめの色にしよう。

ただ、赤までいくと数字の色が強すぎるのとピンクと色が被るのでちょっと黄色よりにして黒交じりのオレンジで暖かさを感じさせる色合いに。

「全商品対象」と「%OFF」の色は背景が白な事を考えると無難に黒っぽい色がいいかな?

完全な真っ黒にすると色合いがきつすぎるので軽くグレーよりにしよう。

 

などと考えつつ全体的にどぎつい原色系の色を出さないよう調整してフォントの色合いを決めていきました。

アクセントをつける

バックのカラーに植物系の緑を配置してキャッチコピー「春の10%OFFクーポン」を背景の緑に埋もれない白色で載せました。

バナーの真ん中にも「10%OFF」って記載があるので、わざわざアクセント部分でも使う必要はなかったかも。

もっと「春のパン祭り」みたいなイメージ文章の方がまとまりがいいかもしれません。

バックカラーの緑の線をピンクのフレーム内に収めたのは、外まで緑を出すと緑の割合が多すぎてアクセントが強すぎると思ったので必要最小限に抑えるようにしました。

基本的には桜のピンク色を全面に出していきたいのでピンクより目立つのは個人的にNGです。

 

背景をつける

色合いは桜ですが、色合いだけだと分かってもらえないと思ったので背景にも桜のイラストを配置。

左上と真ん中に空白があって桜の花びらが舞っているようなイラストがあればいいなと思ってイラストAC でイメージに合う物を探しました。

背景で妥協するといままで作った物も全て無駄になるので、自分の理想に限りなく近い物を徹底的に洗い出す作業です。

「桜」で検索するとかなり大量の桜のイラストが出てくるので1つ1つ探した所、6ページ目くらいでイメージに近い物があったのでそれを使う事にしました。

 

さすがに800pxの160pxなんて画像は無いので引き延ばして使用します。

違和感なくぴったり合えば問題なし、違和感があったら再度背景イラストを探していきます。

今回は結構ぴったり合ったのでそのまま使用。

 

最終調整をする

最後は最終調整です。

フレームがピンクだけだと背景の桜と色合いが違いすぎて主張が強すぎます。

 

春だし、入学式や入社式などのおめでたい時期なのでフレームにパステルカラーっぽい明るいピンクを紅白幕のような柄になるよう配置します。

多少は背景の桜との違和感がなくなりました。

 

反省点

今回は結構行き当たりばったりで作っているのでフォントの大きさや細かい部分が雑な作りになっています。

最初の時点でしっかり下準備して完成図が頭の中にないと修正ばかりで無駄に手間が増えるなぁっと

デザインは論理で成り立っている」との言葉もあるので次回はもっとちゃんと理論的にバナーを作っていきます。

 

まとめ

今回は桜をイメージした「春の10%OFFクーポン誘導バナー」を作ってみました。

桜の色合いを再現しつつ明るく柔らかいバナーが作れたのではないかと思います。

 

問題はクリック率。

実際にこのバナーを設置してクーポン券の使用率を解析した所、使用率0%でした!

目立つように商品ページ上部に設置したにも関わらず何故か誰も使わないと言う結果に!?

パステルカラーすぎて目立たたないのか、原因追及にデータ収集が必要なバナーでした。

 

今回利用した素材サイト

無料イラストなら「イラストAC」様のサイトはこちら

公式サイト:イラストAC

無料で色々なイラスト背景やアイコンなどが使えるのでデザイン素材として便利なサイトです。

 

お得な特典があるサービス一覧

注目コンテンツ

ネットショップ開業におすすめなショッピングカート10選!現役ネットショップ店長が徹底比較!

ネットショップ開きたいけどネットショップのショッピングカートって種類多すぎてどれを選べばいいのか分からない。各サービス毎に特徴を教えて!ついでにおすすめはどれ? ショッピングカートは機能や規模によって ...

続きを見る

新着記事一覧

Excel 分割

Excel 自分の時間を作るプログラミング技術

【Excelの小技】セル内の情報を自動で一括分割してくれるショートカット『フラッシュフィル』の使い方

Excelデータを一括で分割させる事って出来るのかな? 本記事ではこのような疑問を解決します。 Excelデータを一定の条件や文字が入ってる所で分割出来たら便利ですよね。 データを扱ってる職業だとよく ...

buzztai

ファンを作るSNS運用とは

SNSの投稿を自動で作ってくれるAIサービス『BuzzTai(バズタイ)』が便利すぎた!

SNSの投稿を毎回考えるの大変だなぁ。いっその事AIが自動で作ってくれないかなぁ。。。 今回はそんな悩みを解決するサービスを紹介します。 SNSのアカウントを複数持っているので、毎回投稿作るのが結構大 ...

fliki

ファンを作るSNS運用とは

AIが自動でショート動画を作ってくれるWEBサービス『Fliki』を使ってみた体験談

AIが自動で動画を作ってくれるWEBサービスって無いのかな? 本記事ではこのような悩みを解決します。 AIとかチャットボットが話題になってるいま、「動画もAIが勝手に作ってくれたらいいな」って思います ...

looka 体験談

売れるデザインノウハウ

自動でロゴデザイン作成をしてくれるAIサービス『Looka』がクオリティ高くて便利すぎた!

デザインセンス無くても簡単にクオリティの高いロゴデザインが作れるサービスって無いかな? 本記事では、このような疑問を解決します。 ココナラのようなフリーランスのデザイナーにロゴ依頼が出来るサービスも良 ...

chatGPT ブログ

WEBマーケティングのコツ ブログ運営のヒミツ

chatGPTでブログを作るためのプロンプトを公開!AIをブログ運営で活用するためのコツとは?

chatGPTを使ってブログ作れば自動でブログ運営出来るんじゃない?ラクにブログ運営したいから方法を教えて欲しい! 本記事ではこのような悩みを解決します。 AIが勝手にブログを作ってくれたらラクですよ ...

新着記事一覧を見る

  • この記事を書いた人
  • 最新記事

井川 裕輝

元倉庫業からEC総合責任者へ昇進。副業でもやってたEC事業で独立。その後Lステップと言うツールに出会い、岡山県でLステップ構築代行者として活動を始める。

-売れるデザインノウハウ
-

© 2023 在宅ワーク効率化ブログ『WellMaga』