WEB業界未経験者がバナートレース(模写)を2か月やって学んだこと

僕がWEBデザイナーの世界に飛び込んで最初に渡された課題がバナーのトレース(模写)でした。

2か月間バナーのトレースをして、学んだことを紹介したいと思います。

◆IllustratorやPhotoshopの使い方

デザインやバナートレースをするにはまず、ソフトの使い方を覚える必要があります。

多くのデザイナーが使っているのが「Illustrator」と「Photoshop」です。

矩形(図形)の描写や文字を打ったりレイアウトを決めたりする。

写真や画像を合成したり色調を変えたりする。

使い分ける理由としては2つのデータ形式に得意、不得意があるからです。

それぞれのデータ形式の違いを説明したいと思います。

Illustratorは点と点を線で結ぶ「ベクターデータ」というデータ形式を使います。

点と線で構成されるため、矩形(図形)を作ったり簡単な色やグラデーションはきれいに表現できます。

複雑な色使いや繊細な影などには線で表すのできれいに表現されません。

Photoshopは「ビットマップデータ」というデータ形式を使います。

この形式は色のついた四角の「ピクセル」を使い画像を表現します。

ピクセルに色がつくことで線のように区切られることがないため繊細な表現が可能になります。

ピクセルは数が多いほど解像度が高くきれいに表示されます。

数が多いということは、画像のサイズが大きいということになります。

サイズが小さい画像を大きくすると少ないピクセルが伸びてしまうので画質が荒くなってしまいます。

初心者の僕は、上記の各ソフトの特性を理解して使い分けを覚えていきました。

◆時間見積もりの立て方

モノ作りの世界には「納期」が存在します。

納期の守れない人は信用、信頼を失い会社にも迷惑をかけ、使えない人間というレッテルを貼られます。

そうならないためにバナートレースから時間の見積もりを立てる能力を養います。

このバナーをトレースしろと言われてまず、どういう流れで見積もりを立てればいいのでしょうか。

僕が教えてもらったやり方を紹介します。

順番や言葉の言い回しは人それぞれです。

重要なのはいかに自分が見積もった時間通りに作業が進められるかです。

初めは、操作に必死で自分が決めた時間の何倍もの時間がかかって当然です。

僕も始めたころは6時間かかっていました。

バナートレースは絶対的な見本が存在するので、できるだけ近づけながらも早い時間で仕上がるように意識しながらやります。

上記の時間を最終目標に掲げ、時間見積もりを身につけましょう。

◆上司や先輩への報告、連絡、相談

バナートレースから確実な「報・連・相(ほう、れん、そう）」を学ぶことができます。

この3つは、前述に紹介した時間見積もりにも深く関係します。

上司は報告がなければ作業が終わったのかまだ作業中なのかわかりません。

見積もりを立てて開始する時間と終了した時間を確実に報告できるようになりましょう。

見積もった時間内に作業が終わらないと判断できた時には必ず経過を連絡しましょう。

これは後に「納期」に関わる仕事をする際に非常に重要な手段です。

自分一人で判断せず上司や先輩に相談して適切な指示を仰ぐ習慣をつける。

相談することで、効率よく作業を進めることができます。

◆デザインのお作法

なにごとにもお作法(ルール)がありデザインにも同じことが言えます。

文字や矩形、画像などの配置やバランスのお作法をバナートレースから学ぶことができます。

バナーとは、限られた範囲に文字や矩形画像を使って伝えるという目的があります。

この際に、お作法が身についてないと目的が果たせなくなります。

僕が学んだデザインのお作法をいくつか紹介したいと思います。

文字はメインキャッチ・キャプション・日付などを指します。

メインキャッチが見にくい場所にあるとなんのバナーなのかがわかりません。

トレースをするバナーの文字の置き方をよく観察し、なぜそこに置いたかを考えながら作業しましょう。

文字を邪魔しないように配置する。

人間の目は写真や画像の人物の目を見る習性があるので、ユーザー側にメインキャッチが伝わりにくくなります。

トレースの際は、使われている画像の文字と目の位置関係を観察してみるのも良いと思います。

「揃える」というのは、デザインではとても重要なワードです。

トレースに関しては、「揃える」ことができていないとバランスの悪いバナーになってしまいます。

文字や画像は適当に配置されているわけではありません。

各パーツの一つ一つに意味があり配置した理由が存在します。

トレースするバナーの左右のスペースの幅や文字の大きさ、揃えてる場所など意識して見る習慣をつけましょう。

最初はすべてのバナーが初めて見るものばかりで全部難しいと思います。

10枚ほどトレースしたころに上司からこのバナーをトレースしてみろと言われました。

真っ白な背景の中央に文字と矩形があるだけものでした。

この時は簡単だと思いトレースを始めましたが終わってみれば1時間以上かかっていました。

理由はフォントが見つからなかったり左右のスペースの間隔など、かなりよく見ないとわからない小さなこだわりだらけでした。

シンプルなバナーは使うパーツが少ない分伝えるということに特化したり特殊なフォントを使ったりしています。

この時学んだのは、出来上がったバナーは簡単だが作るのは時間がかかっているということでした。

このバナーをトレースしてからより一層バナーを観察し、意味を考えるようになりました。

 ◆トレース(模写)をすれば自分の引き出しになる

トレースしたバナーは必ず保存しておきましょう。

次のバナートレースの時に忘れてしまった操作も一度やっていれば後から見返すことができます。

僕は2か月で30個ほどトレースをしましたが、すべてのバナーに反復と新しい操作の要素が入ったものでした。

新しいことは忘れやすいので過去のバナーを見返すことで自分の引き出しにすることができます。