【デザインレベル爆速UP】Webデザインのバナートレースやり方と手順

この記事ではデザインレベルを爆速でUPさせることのできる『バナーのトレース（模写）』について解説します。

デザイナーを目指す方でなくても、デザインレベルを上げたいならぜひ挑戦してみてください。

こんな内容を解説します

バナートレースとは？そのメリット

トレースとは「模写」とも呼ばれますが、要は見本そっくりに同じように作っていく練習のことです。

例えば以下のような感じ。

※商品の素材は、見本から切り抜きました。

左がネットで見つけてきたバナーで、右が私がPhotoshopでトレースしたバナーになります。

配置や色はもちろん、フォントやグラデーション、影の付け方など、とにかく見本そっくりを目指して作っていきます。

トレース練習をするメリット

例えばギターや絵、ビジネスなどデザイン以外の分野においてもそうですが、「いいものを真似る作業は、その分野で成功するため近道」ともいいますよね。

私も初心者の頃一日1つのバナートレースを続けたことで、日に日にレベルが上がっていくのを実感しました。

また実際にネット上で使用されているバナーを題材にすることで「本当に実務で使えるツール・機能だけ」を効率よく学んでいくことができます。

というのもPhotoshop入門書などで解説されるツールには、実務ではあまり使わない、初心者が無理に覚える必要のないツールも混じっているからです。

Photoshopを使ったバナートレースのやり方を解説

ここからは「トレースのやり方・手順」をステップに沿って解説していきます。

ステップ1：見本のバナーを探す

見本にするバナーは下記サイトから調達するのがおすすめです。

作れるデザインの幅を広げるためにも、あまり同じようなテイストのバナーばかりを選ばないようにするといいでしょう。

慣れてきたらバナー以外にも、サムネイルやヘッダー、LPのヘッダー画像などにも幅を広げてみると良いと思います。

見本選びの注意点

選ぶ時に気をつけてほしいのは「凝ったデザインのものを選ばないこと」です。

凝ったデザインというのは、そのバナーで紹介されてる商品やサービスにしか適さないデザインのことです。

以下の画像2枚の場合、ゲームのバナーはそのゲームという商品にしか適さないデザインになります（＝応用ができない）。

一方でPaypal決済のバナーは、金融系やWebサービス、男性向け事務のバナーなど他のテーマにも応用できそうなデザインですね。

こういった基準でトレースするバナーを選ぶといいでしょう。

ステップ2：Photoshopでトレースする

見本を選び終わったら、次はPhotoshopを開いてトレースをします。

トレースしたいバナーを下敷きに置き、その上から同じように文字や素材を配置していきましょう。

作る手順は人それぞれですが、私は文字や素材を全て配置した後で色や装飾をやっています。

トレースを繰り返す中で、自分にしっくりくる手順を確立できるのが良いかと思います。

トレースする際に出てくる「この加工どうやるんだろう...」という疑問は、その都度グーグル検索して調べましょう。そうしていく中で、徐々に使えるツール・機能が増えていきます。

▼Photoshopの機能はこちらの記事もぜひ参考にしてください。

ステップ3：そっくりを極める

トレースで大事なことは何といっても「妥協せずにいかに見本に真似られるか」です。

せっかく良いバナーを参考にしても、見本には劣るクオリティで作ってしまってはバナー制作のレベルは一向に上がりません。

確かにバナーに使われている素材などは、まったく同じものを探すことが困難です。

しかしそんな時でも、できるだけ見本に近い雰囲気やイメージを持つ素材を見つけ出す努力が必要ですね。

▼こちらも参考にしてみてください。