売れるデザインノウハウ

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

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で半角カタカナの文字を全角の文字に変換する方法 画像のように半角カタカナ ...

Excel

Excelで特定の文字が含まれていたら処理を起こす関数

Excelで特定の文字が含まれていたら処理を起こす関数と使い方を知りたい 本記事では、このような疑問を解決します。     特定の文字が含まれていたら処理を起こす関数【COUNTI ...

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

csvファイルを開いた時にjanコードが文字化けしてる時の対処法

csvファイルが文字化けした時の対処法について知りたい 文字化けした時の対処法で直らない原因を知りたい 本記事では、このような悩みを解決します。     csvファイルが文字化け表 ...

ネットショップノウハウ一覧

倉庫内の作業でおすすめな作業服ランキング

発送作業の業務で使いやすい作業服ってなに?少しでも快適に仕事したいから教えて欲しい 本記事では、『春夏用』『秋冬用』に分けて紹介していきます。     倉庫内の作業って夏は地獄のよ ...

新着記事一覧を見る

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

井川 裕輝

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

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

© 2022 ネットショップ情報メディア『WellMaga』