今回は「ドッグフード」のバナーをトレースしてみました！
チワワの写真がとても可愛くて目に入ったので、今回はドックフードのバナーにチャレンジしてみました！
基本的には今まで行ってきたバナートレースの手法で作業を進めることができました。
今回も使用素材や学んだことなど書いていますので、ぜひバナートレースをしたい方は参考にしてみてください！
トレース画像
バナーサイズ（幅×高さ）： 600×500
使用ソフト：Photoshop
使用カラー：#316c4c #eb711c #fef8ae #4c2e0a
使用フォント： HGP明朝E / UD デジタル 教科書体 NP-B
参照：バナー広場
振り返り
知識・スキル
使用素材
今回は、肉球のアイコンと、舌が出ている犬の写真をフリー素材サイトからダウンロードをして使用しています！
肉球のアイコンは「icooon-mono」で元素材と同じデザインがあったのでダウンロードをしています。
「icooon-mono」は、商用利用が可能で、6000個以上のアイコン素材を無料でダウンロードすることができます。
また、クレジット表記や許可なしで使用ができるので、アイコン素材を探す際にはとてもおすすめの素材サイトです。
舌を出す犬の写真は、「写真AC」に可愛い写真があったのでダウンロードをして使用しています！
「写真AC」も無料で、クレジット表記なども不要なので、写真を探すときに一番使用している素材サイトです！
背景はブラシを使用して再現
見本のバナーをよくみると、背景はグラデーションで水玉が重なっているようにみえます。
もしかするとブラシではなく、背景には水玉を重ね合わせた画像を使用しているのかもしれません(・・?
どちらでも再現はできると思うのですが、今回はブラシを使用して同じようなデザインを再現してみました！
ブラシのサイズと大きくして、筆の不透明度と流度を調整して同じようなでデザインを再現しています！
トレースなので同じデザインを再現していますが、実際にバナーを作成する際には画像を使ってみた方がデザインが安定して雰囲気が出るのかもしれないと思いました。
気づき
商品パッケージに合わせた色使い
商品パッケージの”緑”をバナーのメインカラーに採用していて、全体的に統一感が出ていると思いました。
また、サブカラーとして”緑”と相性のいい”オレンジ”を使用しているので、まとまりが出ているデザインになっていると思いました。
ドックフードの写真で使用されいてる”茶色”をフォントカラーに使用しているので、浮いているデザイン要素が全くなくメッセージが伝わりやすいバナーデザインになっていると感じました。
また、背景に黄色と緑のグラデーションを使用していることで、黄色が浮かないまとまりのあるデザインになっていると思いました。
2種類のフォントを使用
2種類のフォントを使用することで、キャッチコピーと、商品の訴求をすみ分けしていてテキストが見やすいデザインになっていると思いました。
キャッチコピーの、「獣医師の94.4%が推奨する 国産無添加ドッグフード」は、”HGP明朝E“を使用しています。
その他のフォントは、”UD デジタル 教科書体 NP-B“を使用しています。
今までフォントはデザインを壊さないように、デザインに一番合うものを選ぶことが重要だと思っていましたが、メッセージごとにフォントの種類を変えることで伝えたいメッセージを強調するような役割もあるのだと勉強になりました。
まとめ
今回は、今までバナートレースで学んだことを駆使しながら再現をすることができました！
しかし、今まででは気づかなかったことに気づくことができるようになり、毎回のトレースでとても学びにつながっています。
バナートレースについては、自分の学習進度に合わせた難易度のデザインを採用することも大切ですが、気に入ったデザインや目に入ったデザインをトレースすることで今まで以上の気づきや学びにつながると思いました。
これからもいろいろなデザインに調整をしていこうと思います！
ありがとうございました！
HerTech
