悩む人デザイン力を上げたい！
いい練習方法はないかな？
この記事では「トレースでデザイン力を劇的に引き上げる方法」をご紹介します。
トレースは、短期でデザイン力をアップさせるための定番練習方法です。
あおい私も駆け出しの頃、毎日ノルマを決めてやってました。
自分でも驚くほどスキルが向上したので、おすすめです！
ただし、トレースにはコツがあります。
間違った方法でやると、スキルも向上しないし、時間を無駄にしてしまいます…
この記事では、正しいトレースのやり方と注意すべきポイントをわかりやすく解説しますね！
あおいこの記事を書いた人
あおい（＠aoidesign）
2018年からWebデザインを学習。
副業時代を経て現在はフリーのLP専門デザイナーとして活動。
LP制作実績は200件以上。
メンターや講師の仕事も行う。
そもそもトレースとは？
トレースは、見本のデザインを元にして、上からなぞっていく作業のことです。
あおい例えばこちらは、私がトレースしたバナーです↓
フォントや色、シャドウ、装飾まで、見本をそっくりそのまま再現することが大切です。
トレースはこんな人に向いています！
- Webデザイン学習中の方
- PhotoshopやIllustratorの初心者
- デザインソフトのツールや機能をマスターしたい方
- デザインの実力に自信がない方
- デザイン表現が乏しいと感じている方
- もっとデザインのセンスを磨きたい方
あおい要は、デザイン初心者がやると効果が高いです。
私は当時、一日1枚をノルマに、1〜2ヶ月ほどやっていましたね。
トレースをする4つのメリット
- デザインソフトを効率的に習得できる
- デザインを見る目を養える
- デザインの引き出しが増える
- 細部にこだわる癖がつく
デザインソフトを効率的に習得できる
もっとも効果が期待できるのは、Photoshopなどのデザインソフトのスキルが飛躍的に向上することです。
なぜなら、トレースする過程で何度も同じ操作が出てくるので、自然と体に染み込んでいくから。
あおいソフトを操作するスピードも上がります。
例えば、最初は1時間以上かかっていたバナーが、30分で作れるようになります！
なので、まだデザインソフトを使いこなせていない初心者は、トレースを通じて操作に慣れていきましょう！
さらに、トレースをすることで、本当に必要なツールだけを効率よく学べるのも大きなメリットです。
なぜかというと、実際のデザイン制作で使われるツールは限られており、トレースの過程でそれらのツールだけ覚えれば十分だからです。
あおい例えば、Photoshopには膨大な数のツールがありますが、頻繁に使うのは、その中の10〜20個ほど！
なので、実務で使わないツールを全部覚える必要はないんです。
このように、トレースにはデザインソフトの操作スピードを上げたり、必要なツールを効率的に学べるメリットがあります。
デザインを見る目を養える
トレースでは、デザインを見る目や思考力が鍛えられます。
というのも、世の中のデザインには「共通点」があり、それをトレースを通じて見つけることができるからです。
共通点というと、例えば
- 文字と写真のレイアウト法則
- 美容系デザインでよく使われるフォント
- ビジネス系デザインで頻繁に見かける装飾
- …etc
こういったデザインルールやパターンを自分の中にどんどん蓄積していくことで、センスも磨かれていきます。
あおい要するに、デザインは一から自分で考える必要はなくて、世の中にあるデザインの組み合わせで作っていけばいいんです。
そのために、できるだけ多くパターンや法則を知っていることが重要ですね。
デザインの引き出しが増える
3つ目のメリットは、デザインの引き出しが増えることです。
トレースをする過程で、さまざまなデザインの表現方法やアイディアがどんどん自分の中に蓄積されていきます。
あおい例えば、チラシやバナーでよく出てくる「日付」のデザインを例に挙げます！
初心者だと、横並びにするくらいしか思い付かないかもしれません。しかし、実際にはさまざまな表現方法があります↓
こういったアイディアは、ただ頭の中で考えているだけではなかなか思いつきません。
トレースを通じて、いろいろな表現方法を実際に見て触れることで、自分の中に新しいアイディアを蓄積していけます。
そして、いざ自分でデザインを作る際に、その中から最適なものを取り出して使えばいいわけです。
この引き出しをたくさん持っているほど、素人では思いつかない凝ったデザインや、おしゃれで洗練されたプロのデザインを作れるようになりますよ！
細部にこだわる癖がつく
最後のメリットは、細部にこだわる癖をつけられることです。
なぜなら、トレースは見本を細かく観察し、それを忠実に再現する練習だからです。
あおい「良いデザインは、細部にこだわって作られている」とよく言われます。
例えば、文字の間隔がミリ単位で細かく調整されているデザインや、グラデーションの角度が精緻に計算されたボタンなどです。
初心者ミリ単位とか、そこまで考える必要があるの！？
と思うかもしれませんが、実際には非常に重要です。
ほんの少しだけ文字の位置が違うだけで、見栄えが格段に違って見えることがあります。
こうした細部にこだわり抜くことで、自分で一からデザインを作る際にも自然と細かい部分に目が行くようになりますよ。
トレースで気をつけるべき3つのポイント
具体的なトレースのステップに入る前に、3つの注意点をご紹介します。
- 見本探しでミスしない
- 細部まで徹底してこだわる
- スピードを測って時短を目指す
見本探しでミスしない
まずは、ポイントを押さえて見本を探すことが大切です。
なぜなら、クオリティの低いデザインをいくらトレースしても、デザイン力は上がらないからですね。
あおい見本の探し方には、3つのポイントがあります！
それぞれ少し詳しく解説しますね。
- 特定の商材やサービスに依存していないデザイン
- テーマとデザインがぴったり合ったデザイン
- 自分自身がクリックしたい、申し込みたいと思えるデザイン
特定の商材やサービスに依存していないデザイン
まず一つ目が、なるべく応用の効くデザインを選ぶことです。
バナーの例で説明します。
例えば、このゲームのバナーはどうでしょうか？
ボタンのデザインやレイアウトは他のテーマでも使えそうですが、全体のデザインは特定のゲームの世界観に合わせたものです。
あおいこのようなデザインをトレースしても、他のテーマには応用しづらいと言えます。
一方、こちらのPayPalのバナーを見てみましょう。
このバナーの色味や雰囲気は、IT系やビジネス系、男性向けジムなど、他のテーマにも応用が効きそうです。
このように、汎用性が高く応用が効くデザインをトレースすることで、自分がデザインを作る際にも役立つ参考として活用できます。
テーマとデザインがぴったり合ったデザイン
2つ目のポイントは、商品やサービスのテーマとデザインがしっかりマッチしたものを選ぶことです。
なぜなら、実際のデザイン制作では、商材の世界観を視覚的に表現する力が非常に重要だから。
これにより、ユーザーは瞬時にその商品やサービスの魅力を感じ取れます。
あおい例えば、こちらのバナーは「ハワイツアー」というテーマと、華やかな色味や素材がとてもマッチしています。
あおいまた、こちらのシャンプーのバナーは、太めのフォントや力強いデザインが、ターゲット層の男性にアピールする要素をしっかりと押さえています↓
このように、テーマとデザインが調和しているものをトレースすることで、商材やサービスの魅力を効果的に引き出すデザインセンスを養えますよ。
自分自身がクリックしたい、申し込みたいと思えるデザイン
最後のポイントはシンプルですが、自分が実際に魅力を感じるデザインを選ぶことです。
なぜなら、バナーにしろWebサイトにしろ、その目的はユーザーにクリックしてもらい、その先で商品を購入したり申し込みをしてもらうことだからです。
あおい自分が見たときに「これ、いいな！」と思えるデザインを選ぶことが大切です。
細部まで徹底してこだわる
トレースで気をつけるべきこと2つ目は、細部まで徹底してこだわることです。
大雑把にやってしまうと、せっかくのクオリティの高い見本をトレースする意味がなくなっちゃいますからね。
例えば、こんな風に妥協してしまうのは要注意です。
- 同じフォントがないから、適当に似たフォントでいいか！
- なんとなく色味が違うけど、大体合ってるからいいか！
- 雰囲気がちょっと違うけど、同じ桜の素材だからこれでいっか！
こういった妥協は、デザインのレベルアップを妨げます。
あおいもちろん、全く同じフォントや素材が見つからないこともありますが、できる限り似たものを探す努力が必要ですね！
特にフォントや色味、素材の選定において、可能な限り見本に忠実になるよう心がけましょう。
このように細部にまでこだわることで、デザインの完成度が格段に上がり、見本を再現する力がついてきます。
スピードを測って時短を目指す
トレースは、作業スピードを早めるために、時間を測りながら行うのが効果的です。
なぜなら、トレース練習の目的の一つは効率的に作業を進めることだからです。
特に、作業をなんとなくダラダラと進めてしまう癖がある方にはおすすめです。
あおい私もそのタイプなのですが、時間を測っているという事実があると、自然と緊張感が生まれ、集中力が格段に上がります（笑）
最初は1時間以上もかけていたバナーが、30分で作れるようになることもあります。
すると、自分に自信がつくし、やる気もさらにアップしますよ！
初心者Webデザイナー必見！トレースやり方5ステップ
ここからはトレースのやり方を5ステップで解説します！
- トレースするデザインを探す
- アートボードでトレース準備
- レイアウトを上からなぞる
- 色や装飾を加えていく
- 細部にこだわって完成
Step01：トレースするデザインを探す
まず最初に、トレースする見本のデザインを探しましょう。
あおいバナーの見本が探せるおすすめのサイトは以下の3つです。
もちろん、どれも無料で利用できますよ。
- バナーデザインアーカイブ：ジャンルもサイズも様々で、一番おすすめ
- バナーまとめ：私が初心者の時に使っていたサイトで、300×250のバナーが中心
- バナーライブラリー：おしゃれで洗練されたデザインが多め
見本を探す際は「見本探しでミスしない」も参考にしてくださいね！
シンプルすぎるデザインだと学べることが少ないので、文字や装飾が多めのバナーを選ぶといいですよ。
Step02：アートボードでトレース準備
ここからは、実際にソフトを開いてトレースをしていきます。
まず使うソフトですが、どれでも大丈夫です。
有名なデザインソフト
- Photoshop（有料）：Adobeの有名なソフト
- Illustrator（有料）：同じくAdobeの有名なソフト
- Figma（無料）：ブラウザ上で使える人気ツール
あおい今回は、Photoshopを使って進めていきますね。
まず最初に、トレースを始める前の準備をしましょう。
準備の流れ
- 見本のデザインをPhotoshopに読み込む
- レイヤーを右クリックして「アートボードを新規作成」を選択
- 作成したアートボードをコピーして、横に並べる
- コピーした方の透明度を50％くらいに下げる
透明度を下げるには、「塗り」の数値を小さくすればOKです↓
これでトレースの準備が整いました！
Step03：レイアウトを上からなぞる
トレースでは、まずレイアウトを作っていきましょう。
具体的には、テキストや図形、素材などを見本通りに配置していきます。
この時、見本で使われているフォントやその太さなどもきちんと調べて、同じものを使うようにしましょう。
フォントの調べ方
- 「長方形選択ツール」を使って、調べたいフォントを囲う
- 「書式」→「マッチフォント」を選択
- 出てきたフォントの中から、見本とマッチするものを見つける
あおい商品の写真やモデルの写真は、見本から切り抜いて貼り付けても大丈夫です。
同じものを見つけるのは難しいので…
Step04：色や装飾を加えていく
次に、色味や雰囲気といったデザイン部分を作っていきます。
色については、スポイトツールを使って見本から色を抽出しましょう。
また、グラデーションや装飾なども、見本と同じようにしっかり作り込んでいくことが大切です。
あおい模様や吹き出し、イラスト素材などは、以下の無料素材サイトを活用すると良いですよ！
- イラストAC：日本で一番有名なイラストサイト
- 吹き出し素材専門サイト：いろんな吹き出しが見つかる
- フリーピックス：高品質なベクター素材がダウンロードできる
Step05：細部にこだわって完成
トレースが完成したら、最後に細部までしっかりチェックしましょう！
チェック項目一覧
- フォントは見本と同じ？
- フォントの太さは見本と同じ？
- 文字の詰め具合は見本と同じ？
- 文字サイズは見本と同じ？
- 色は見本と同じ？
- グラデーションの掛け方は見本と同じ？
- シャドウの掛け方は見本と同じ？
- 素材は見本と同じ、または雰囲気が似ている？
- 枠の太さや角度の丸みは見本と同じ？
- ボタンのぷっくり感は見本と同じ？
- 写真や素材の切り抜き残しはない？
あおいここまで確認できたら、トレース作業は完了です。
お疲れさまでした！
さいごに：トレースの次は「オリジナルバナー制作」をやろう！
トレースは、Webデザイン初心者にぜひ取り組んでほしいスキルアップ方法です。
繰り返しになりますが、以下のような方に特におすすめです。
- Webデザイン学習中の方
- PhotoshopやIllustratorの初心者
- デザインソフトで使えるツールや機能を増やしたい方
- デザインの実力に自信がない方
- デザイン表現が乏しいと感じている方
- もっとデザインのセンスを磨きたい方
トレース練習でスキルがある程度向上したと感じたら、次は「オリジナルバナーを作る練習」に進んでみてください。
これは、お題に沿って一から自分でバナーを作っていく練習です。
実際の案件と同じプロセスでバナーを制作するので、即戦力として活躍できるスキルが身につきます。
あおい「オリジナルバナー制作」の具体的なやり方や、売れるバナーを作るコツは、下記で詳しく解説しています！
