スタッフブログ 車業界専門のホームページ制作・システム開発

新人デザイナー育成 バナートレース100本への道①【1本目~10本目】

マーケティング部兼、制作部の北川です。

弊社では、新人デザイナーのスキルアップのため、
バナートレース100本を実施しています。

何をするかというと、
クライアント様のサイトやWeb上に公開されているバナーと1pxのズレも無いようにトレースします。
↓バナーはこういうのです
bnr_okuno001

僕が感じるバナートレースのメリット

まだ数回しかトレースをしていませんが、それでもいくつか感じるメリットがあります。
というかメリットしかありません。

・先輩たちのノウハウをもらえる
参考書を読んだりWEBで調べることもいいですが、
実際に実務で使っているノウハウを聞くことができるのでスキルアップのスピードが段違いです。

・編集ソフトの操作に慣れるので、実務で使うときに時間短縮につながる。
トレースを始めてから作業時間が初期の半分くらいになったので単純に効率が倍くらいになります。

・デザインの基本である「揃える」ということが無意識にできるようになってくる。
世に出回っているバナーは基本的に要素を「揃える」ことを徹底しているので、
自分の体にもそれを覚えさせることができます。

トレースしたバナーとやり取りを公開

1回目のトレースから余すことなく、公開いたしますので
長い記事になりますが、よろしくお願いいたします。

登場人物
<奥野> 弊社代表
<上田> 先輩デザイナー
<北川> 新人デザイナー ブログの執筆者

※画像は上がトレース元、下が僕が作成した画像です。

No.1 2016/11/08
recruit_bnr
banner001
かかった時間 32分

<奥野>
さすが。


No.2 2016/11/10
base002
banner002
かかった時間 30分

<北川>
フォントを探すのに時間を要してしまいました。

<奥野>
基本はいいけど、
・ストライプの濃さ → もう5%くらい薄く?
・フォントの濃さ → アンチエイリアスで調整


No.3 2016/11/13
base003
banner003
かかった時間 24分

<上田>
フォントは「ヒラギノ角ゴ」
トーレース元よりコントラストが低く、パッとしない印象になっています。


No.4 2016/11/13
base004
banner004
かかった時間 17分

<上田>
フォントは「ヒラギノ角ゴ」
トレース元より彩度が低く、見たときのキャッチーさが薄くなってます。


No.5 2016/11/13
base005
banner005
かかった時間 21分

<上田>
色のバランス的にはトレース元とあまり変わらないクオリティですが、
あくまでトレースなので、もう少し色の再現ができればと思います。


No.6 2016/11/14
base006
banner006
かかった時間 44分

<北川>
字間の調整に時間を要してしまいました。
【質問】
赤系統ならこの色コード、青系統ならこの色コードのように、
決まった色コードなどはあるのでしょうか?
スポイトツールで色をとると、どうしても色味が違うので、
直接色コードを指定するのが良いのかと思い、質問させていただきました。

<奥野>
いい感じ
文字のアンチエイリアス調整を頑張ればより良いかな
色は
赤はc00
青は06f
黄色はfc0
を使うことが多いかな

<上田>
今回の分の小さい方のフォントは、MS Pゴシックです。
アンチエイリアスをなくすと、10pxまで綺麗に調整されているので、
一般的にはこちらが使用されます。
字間の調整は「Ctrl+→」「Ctrl+←」で調整可能です。
質問に関してですが、サイト制作時にキーカラーは設定してると思います。
カラーコードがわからない場合、
拡大して一番取りたい色が出ている箇所をスポイトで取れば、同じかかなり近い色になります。
思った色が取れるまで何度かやり直して見てください。


No.7 2016/11/15
base007
banner007
かかった時間 36分

<北川>
文字の立体感の出し方がうまくいかなかったかと思います。
<上田>
ベベルは外にも付けれるんだぜ。

No.8 2016/11/16
base008
banner008
かかった時間 24分

<北川>
macにMSPゴシックが入っていなかったので、営業時間の数字のみ別のフォントで代用しています。
<奥野>
うん 良いやん
シャドウが濃いのがちょっと気になるけど って感じ


No.9 2016/11/17
base009
banner009
かかった時間 15分

<北川>
かなりスムーズにトレースできたと思います。
<奥野>
うん、いい感じ
85点って感じで
残りの15点は
・無料見積もり、の文字が若干濃い
・女性を別のフリー素材の写真で再現
かな


No.10 2016/11/20
base010
banner010
かかった時間 50分

<北川>
矩形の再現に苦労しました。
数字のフォントがわからず別フォントで代用しています。

<上田>
縦位置のバランスが悪いです。
「初めてのお客さま…」と「もれなく…」は一つの情報なので近づけるという風に、情報のくくりを意識するとよりまとまったデザインができるようになります。
色味も彩度が低すぎて沈んでいるので、カラーパレットも使えるようにした方がいいです。
フォントは多分平仮名も数字もメイリオです。

<奥野>
・数字の字詰め
を意識してみようか。

まだまだ続きます!日々更新中

新人デザイナー育成 バナートレース100本への道①【1本目~10本目】
新人デザイナー育成 バナートレース100本への道②【11本目~20本目】
新人デザイナー育成 バナートレース100本への道③【21本目~30本目】
新人デザイナー育成 バナートレース100本への道④【31本目~40本目】

トレースしたバナーが100個になるまで、この記事は更新していきます。
毎日、新しいやり取りが増えていきますので、ぜひチェックしてみて下さい。

デキテルは車業界専門のホームページ作成ツールです。

デキテルバナー 「デキテル」を利用すると1分ほどで御社のホームページが作成できます。
お試し作成が無料となっておりますのでぜひお試しください。
デキテルHPへ

このページの上部へ戻る