今回は、「ローソンアプリのクーポン」バナーのトレースをしてみました(*^^*)
見本バナーを探していた時に、わかりやすくてクリックしてくれそうなバナーだな！と思いこちらのバナーを選んでみました♪
シンプルなのですがとてもわかりやすいバナーなので今後のデザインの参考にさせてもらおうと思います。
トレースした時の使用した素材や感想を書いていますので、興味がある方はぜひご覧ください。
トレース画像
バナーサイズ（幅×高さ）： 800×800
使用ソフト：Photoshop
使用カラー：#01215c #eac702 #e50112
使用フォント： HGP明朝E
参照：BANNER LIBRARY
振り返り
知識・スキル
画像の挿入
2枚の画像は、初めに長方形ツールで形をつくり、クリッピングマスクで設定をしています！
- 長方形ツールで形をつくる
- 使用する画像を反映
- クリッピングマスクを設定
クリッピングマスクとは？
2枚のレイヤーを重ねて、下のレイヤーで上のレイヤーを覆う（＝マスクする）機能です！
使用素材
今回は中央の写真を、素材サイトからダウンロードをして使用しています！
今回も愛用しています写真ACで素材選びをしました！
画像のダウンロードリンクを貼っておきますので、同じバナーをトレースをしようとお考えの方は是非参考にしてみてください。
フォント
今回のフォントは、Adobe Fontsでダウンロードをした”ルイカ”というフォントを使用しています！
はじめは違うフォントを使用していたのですが、「50円引」と「30円引」の文字が細くなってしまったり、全体のバランスがうまく再現できなかったので数字を基準にフォント探しをしました。
クーポンアプリを訴求したいバナーなので、ほかの文字より数字が一番目に行くフォントが重要ですよね(●´ω｀●)
見本と同じフォントではないのですが、「50円引」と「30円引」が際立った文字になっていると思います！
フォント選びはとても深いので、これからも探求していこうと思います。
気づき
クーポンをイメージしたチケットデザイン
テキストメッセージだけでなく、「クーポン」「お得」「割引」を連想させるような、チケットのデザインを採用していてとても訴求力のあるデザインだと思いました。
チケットのデザインと割引の記載があるだけでとてもお得感が感じられます。
また、見本バナーの2つの画像は背景が黄色になっており、使用カラーに黄色を含めて全体的なまとまりが出ていてとても参考になります。
今回選定した画像は背景が黄色のものではないのですが、デザインと使用画像の統一感を意識した細かなデザインをできるようになりたいです。
まとめ
今回の見本バナーは一見シンプルなデザインに見えますが、ユーザー目線や細かな工夫が散りばめられていてとても勉強になりました。
細かな装飾をたくさん盛り込めばいいバナーになるのではなく、コンセプトを明確にしたユーザー目線のデザインをすることがとても大切だと思いました。
今後もバナートレースでたくさんの勉強していこうと思います。
ありがとうございました！
HerTech
