1on1レッスン

Xmas BARGAIN’s Banner

こんにちは、Yuriです。

前回に続き、ヒカルさんからバナーの作成のレッスンをして頂きました✨

架空のバナーのお題を出して頂き、まず私が自分で制作しました。そして、ヒカルさんがポイントを解説をしながら新たにバナーを制作してくださるところを見させて頂きました✨

今回のバナーの目的 ネットショップのクリスマスバーゲン

ターゲット 20代女性

雰囲気 シンプル・カジュアル

サイズ 300px x 250px

画像 コートの画像

配色 白ベース

文言

(必須)Xmas BARGAIN  最大80%OFF 期間11/30~12/26 AM10:00まで

(任意)詳しくはこちら

私が初めに作ったものが下の画像になります。全ては直せていないのですが💦、教えていただいたところを修正したのがアイキャッチの画像となります。

Pinterestに、参考になりそうがバナーが沢山あったのですが、いざ自分で作ってみようとすると、文字組の部分に悩み、結局「ほんとに、フォント。」という本の作例を元に作りました。クリスマスの雰囲気を出すため、写真ACで背景の画像をダウンロードし使いました。

今回のお題の求める雰囲気、カジュアル・シンプルからずれてしまったと思いつつ改善することができませんでした💦

今回のバナー作成での学び

  • BARGAINの文字を、私は「Xmas Bargain」とし、「Xmas」と繋げてスクリプト体のフォントにしたが、視認性をよくするため「BARGAIN」の文字は大文字でゴシック体にするとよい
  • 一番目立たせたいMAX80%のフォントも、ゴシック体(今回ヒカルさんはHelveticaを使用して制作)の方が目立ち、カジュアルな雰囲気も出せる
  • コートの画像はそのまま使うと暗く見えるため、補正する(今回は、露光量を少しあげ、シャドウをとって、ハイライトを抑えた)
  • コートの画像をトリミングするとき、カットする位置で印象が変わる。コートをコート足らしめるファーの部分を残したり、コートの合わせが見えることによって、女性の服である事が伝わる。
  • 画像によってレイアウトの分割を決める事ができる。私が最初に作ったバナーでは、袖の下の部分や、上部の余白が気になってしまう。修正したように配置すると、袖の斜めのラインでレイアウトをうまく分割できる。
  • 「Click here」の文字の下の帯は、下にある空白がをなくした方が安定する。

今回、もっと教えて頂いたことがあるのですが💦、私の言葉にする力がまだまだなところも改善していきたいと思います!