バナートレース２

Diary 2019/03/27

４月はバナートレース月間に設定してみる

まだあと数日３月ですが・・・
４月をバナートレース月間として、できる限り毎日バナートレスをやろうと思います。

昨日、トレースのやり方を調べつつ、ルールを設定してみました。
先人たちは皆、やはりバナートレースから始めているのですね。。

トレース作業ルール

  • 写真やアイコンなど模写するのが難しいものはそのまま使うか空けておく
  • フォントは同じフォントがなければできるだけ近いものを選ぶ

考察項目

  • フォント
  • 配色
  • レイアウト、余白
  • 使用画像、写真
  • 情報の優先度、伝え方
  • できるがぎり、デザインひとつひとつの意味を考える

ということで、まず今日作成したバナー。
以前ひとつトレースしたので、２つ目にはなります。
まだ・・・２つ・・・。いや、まだまだこれからよ。

バナートレースと考察

 元バナー
トレース
サイズ：300px×250px
制作時間：1:30

  1. フォント
    何のフォントかは不明ですが、太めの角ゴシック。はっきりと見やすい。
    今回は、見出し日本語は「見出ゴMB31」、数字は「Lato」を使用。
    猫のセリフ部分は、少し違う可愛系のフォントを使っているように見えたので、「ロダンProN」を使用。
  2. 配色
    ベースカラー：ベージュ
    メインカラー：・・・猫ちゃん・・・？
    アクセントカラー：黄色
    すいません、よくわかりません。メインカラーが黄色？アクセントはロゴの青？
    むむむ。
  3. レイアウト
    横に２分割。197px : 53px
    余白は、ほぼ全部バラバラの値だったので、法則性は見つけられず・・・
  4. 使用写真
    「週３日働くだけで月５０万稼げるよん」というキャッチコピーに合わせて、のんびり感を表すためにあくびしている猫の写真を使ったものと思われる。
    フリーランスでのんびり稼ご？と猫ちゃんが言っているよう・・・
  5. 情報の優先度、伝え方
    「週3日で月50万」これが最大のアピール部分。はっきりした黄色を敷くことでまず目に飛び込む。
    上段の見出し背景のマーカー、猫や肉球のラフ感と対照的に、下段は黒背景でかっちりした印象。就職サイトだから？エンジニアだからどちらかというと男性向けなのかな？
  6. 反省点
    ・猫の写真の選定＆トリミングの未熟さ。写真が違うことで、余白の取り方がよくわからなくなってしまった。あと、元バナーではそこにいる感があるのに、トレースでは合成感が半端ない。もっと自然な合成にしたい・・・
    ・猫の台詞部分の行間が他と比べてあきすぎ。ちょっと抜け感が出すぎな気がする。

今日はここまで。
トレース自体もだけど、考察にも時間がかかるな・・・
まだ始めたばっかりだし、焦らずやろう。