初心者Webデザイナー必見！バナーのトレースでデザイン力を向上させる方法

今回は、初心者デザイナー向け「トレースでデザイン力を向上せる方法」を解説します。

トレースは、

こういったものを、手を動かしながら覚えていけるので、とても勉強になります。

ただし、トレースは間違った方法でやると、一向にスキルが向上しません…

今回は「正しいトレース方法」や「トレースの注意点」も合わせて解説していきます。

Webデザインのトレースとは？

トレースは「見本のデザインを下敷きにして、上からなぞっていく作業のこと」です。

▼たとえば、こちら

配置や色、フォント、シャドウ、装飾など、見本そっくりに再現することが大切です。

人物素材だけは、見本から切り抜いて使ってます。

トレースはこんな人におすすめです。

トレースをする4つのメリット

①頻出機能だけを効率的に覚えられる

1つ目のメリットは「デザインツールを効率的に習得できる」ことです。

デザインツールとは？
バナーやWebサイトのデザイン制作などで使用するPhotoshopやillustrator、Figmaといったツールのこと

トレースでは、実際に世の中で使われているバナーやWebサイトを見本に使います。

それによって、実践で本当に必要な機能だけを、ピンポイントで覚えられます。

実際、Photoshopなどのデザインツールは、めちゃくちゃ機能が多いです。

全部覚えようと思ったら、一生かかっても終わらないレベル。

その点、トレースなら無駄がありません！

よく使う機能だけに絞って、効率よくスキルを身につけられますよ。

②デザインを見る目を養える

2つ目のメリットは「デザインを見る目や思考力が鍛えられる」ことです。

トレースをする過程で、

こんな感じで、いろいろと考えながらデザイン制作ができます。

考えながら（＝意図をもって）デザインすることは、とても大事なことです。

これを鍛えることで、「なんとなく感覚でデザインする」という状態を抜け出せます。

あとは、トレースを通じて「共通点」を見つけられることも重要です。

たとえば、

こういったデザインルールやパターンを、自分の中にどんどん蓄積していきます。

そもそもデザインは、ゼロから自分の頭で考える必要はなく、世の中にあるデザインの組み合わせで作っていけばOKなんです。

③デザインの引き出しが増える

3つ目のメリットは「デザインの引き出しが増える」ことです。

トレースの過程で、色んな表現方法・アイディアが、自分の中に蓄積されていきます。

初心者だと、横並びにするくらいしか思い付かないかもしれません。

しかし、実際にはさまざまな表現方法があります。

こういったアイディアは、頭の中で考えているだけでは、なかなか思いつきません。

トレースで様々な表現方法に触れることで、自分の中に新しいアイディアを蓄積していけます。

そして、いざ自分でデザインを作るときに、その中から最適なものを取り出して使えばいいわけです。

引き出しをたくさん持っているほど、

これが作れるようになりますよ。

④細部にこだわる癖がつく

最後のメリットは「細部にこだわるクセをつけられる」ことです。

なぜなら、トレースは見本を細かく観察し、それを忠実に再現する練習だから。

たとえば、

など。

と思うかもしれませんが、実際には非常に重要です！

ほんの少し文字の位置が違うだけで、見栄えが格段に良く見えることがあります。

細部にこだわる練習によって、自分で一からデザインを作る時にも、自然と細かい部分に目がいくようになりますよ。

トレースで気をつけるべき3つのポイント

トレース方法の解説に入る前に、3つの注意点を解説しますね。

①見本探しでミスしない

トレースで気をつけるべきこと一つ目は「見本探し」です。

この見本探しは、とても大切です。

なぜなら、クオリティの低いデザインをいくらトレースしても、デザイン力は上がらないから。

見本選びのポイント①特定の商材に依存していないデザイン

まず、応用の効くデザインを選ぶことが大切です。

具体例を挙げて説明しますね。

たとえば、こちらのゲームのバナーはどうでしょうか。

ボタンのデザインは、別のバナーを作る時にも使えそうですが、それ以外はこのゲームの世界観に依存したデザインといえます。

つまり、このバナーをトレースしたとしても、他のテーマでデザインを作る時には応用できません。

一方で、こちらのバナーは、どうでしょうか。

このバナーのデザインなら、

など、他のテーマでデザインを作る時にも応用が効きそうです。

見本を選ぶときは、このように「汎用性が高く応用が効くデザイン」を選びましょう。

そうすることで、自分で一からデザインを作るときにも、役立つ参考として活用できます。

見本選びのポイント②商材の世界観が的確に表現されたデザイン

2つ目のポイントは、商材の世界観とデザインがマッチしたものを選ぶことです。

なぜなら、デザインを作る上では「商材の世界観を視覚的に表現する力」が重要だから。

たとえば、こちらのバナーはどうでしょうか。

「ハワイツアー」がテーマのバナーです。

パッと見て一瞬で「ハワイ感」を感じられますね。華やかな色味や素材が、とてもマッチしています。

もう一つ、こちらのバナーはどうでしょうか。

男性向けのシャンプーのバナーです。

太めのフォントや力強いデザインが、商品の魅力にピッタリ合っていると思います。

こんな感じで、商材の世界観とマッチしたデザインを選ぶようにしましょう。

そうすることで、商材の魅力を効果的に引き出すデザインセンスを養えますよ。

見本選びのポイント③自分がクリックしたいと思うデザイン

3つ目のポイントは、自分が魅力的だと感じるデザインを選ぶことです。

私たちが作るデザインは結局のところ、クリックを誘発し、その先で商品購入や申込みをしてもらうために作ります。

なので、自分自身が「これ、いいな！」と思えるデザインを選ぶことが大切ですね。

②細部まで徹底してこだわる

トレースで気をつけるべきこと2つ目は「細部まで徹底してこだわること」です。

というのも、大雑把にやってしまうと、せっかくのハイクオリティな見本も、トレースする意味がなくなってしまうから。

こんな妥協には、要注意です

素材やフォントに関していうと、もちろん、全く同じものが見つからないこともあります。

ですが、できる限り似たものを探す努力が必要です。

③スピードを測って時短を目指す

トレースで気をつけるべきこと3つ目は、作業スピードを徐々に早めることです。

なぜなら、トレース練習の目的の一つは「作業スピードを上げて、時給単価を高める練習をすること」だから。

毎回、時間を測りながらトレースすると効果的です。

作業をダラダラと進めてしまう癖がある方には、特におすすめです。

【バナートレースやり方】5ステップで解説

バナートレースのやり方を、5ステップで解説していきます。

Step01：トレースするデザインを探す

まず最初に、トレースする見本のデザインを探しましょう。

おすすめの無料サイトはこちら

デザインがシンプルすぎると、学べることが少ないです。

初心者は、文字や装飾が多めのバナーを選ぶのがおすすめです。

Step02：アートボードでトレース準備

ここからは、デザインツールを開いてトレースをしていきます。

使うツールは、どれでも構いません。

透明度を下げるには、「塗り」の数値を小さくします

これで、トレースの準備が整いました。

Step03：レイアウトを上からなぞる

トレースでは、まずレイアウトを作っていきます。

具体的には、テキストや図形、素材などを見本通りに配置していきます。

この時、見本で使われているフォントやその太さもきちんと調べて、同じにしましょう。

Step04：色や装飾を加えていく

次に、色味や雰囲気といったデザイン部分を作っていきます。

色については、スポイトツールを使って見本から色を抽出しましょう。

模様や吹き出し、イラスト素材は、無料素材サイトを活用できます。

Step05：細部にこだわって完成

最後が、細部のチェックです。

こちらを参考にチェックしてみてください。

最後に：次はオリジナルバナーを作る練習をやろう

トレースは、初心者なら10〜20枚はやるといいかなと思います。

ある程度やって、スキルの向上を実感したら、次は「オリジナルバナーを作る練習」に進んでみてください。

これは、お題に沿って一からバナーを作る練習です。

実案件と同じプロセスでバナーを作成するので、即戦力として活躍できるスキルが身につきますよ。

以下で、詳しく解説しています。