バナートレースをしたことはありますか？デザインの勉強を始めると割と最初の方で「トレース」という単語を耳にします。
Erina実際にお仕事をいただけるようになるまでに、とにかく手を動かしてバナートレースをたくさん行いました！
「バナートレース」はデザインツールを使いこなす練習にもなるし、デザインの４原則を身につける練習にもなるためおすすめの勉強法の１つです。私自身、テキストやオンラインスクールでの課題も含めると、実際に案件をいただくまでに200個以上のバナートレースを行いました。私個人の意見ですが、何を学習するにも学習開始の時期は『質より量』だと思っています。とにかく手を動かして、誰よりもたくさん練習してやるぞ！の気持ちで学習を続けていました。
この記事では、「トレースしてみたいけど、どうやったらいいかわからない…」といった方に向けて、バナートレースの詳しいやり方と、実際にやってみた感想をお伝えします！
- バナートレースをどうやるのかわからない
- バナートレースをやると、どんなことが身に付くかわからない
- どんなバナーをトレースすれば良いかわからない
バナートレースとは？
「バナートレース」とは、その名の通り「バナーをトレース（模写）する」こと。厳密に言うと
トレース＝お手本の上に紙を敷くなどして、上からなぞって同じものを作ること
模写＝見本を隣に並べて再現すること
かと思いますが、両方を合わせて「トレース」と呼んでいる方が多いと思います。
バナートレースをおすすめしたい理由
バナートレースってよく聞くけど、何の勉強になるの？
Erinaバナートレースは、ツールの使い方も覚えられるしデザインの基本も身について一石二鳥！誰でもいますぐできる練習法です！
①簡単に誰でもできるから
バナートレースは、教材なしで誰でも簡単にできるデザインの練習法です。「このデザイン素敵だな」と思ったバナーを見つけたら、今すぐに練習を始めることができます！
②ツールの操作方法を覚えられるから
「このデザインどうやったら再現できるんだろう？」と考えながら調べながらトレース練習をすることで、デザインツールの使い方を効率よく覚えることができます。わからない操作方法を自分で調べて実践することはより記憶に残り、ただ教えられて手を動かすよりもしっかりと身につく気がしています。
③デザインの４原則が身につくから
トレースしながらお手本とするバナーをよく観察し、どの部分に「近接」「整列」「対比」「反復」のルールが使われているのかを自分の頭で考え整理します。実際の作品を見ながらデザインの４原則について考えることで、１からデザインする際にもデザインの４原則を意識したデザインをすることができるようになります。
頭では理解していても、「さぁ！自分でバナーを作ってみよう！」となった時に最初の頃はどうしていいのかわからなくなってしまうもの。私はたくさんのバナートレースした後の方が、デザインの４原則を意識した作品作りができるようになりました。
④配色方法が身につくから
様々な業界やテイストのバナーをトレースすることで、ターゲット（ペルソナ）に合った配色の仕方や、色を多用しすぎないことなど、基本的な配色ルールを学ぶことができます。
トレースしたい見本を探す時にたくさんのバナー（デザイン）を目にすることになるので、「20代向けのコスメのバナーなら透明感のある淡いピンクや水色が多く使われている」「男性向けのビジネス系のバナーなら落ち着いた青や濃紺が多く使われている」など、自分の頭の中に知識が自然と蓄積されいく感じがします。
バナートレースのやり方
実際にどんなふうにやればいいの？
Erina私は下記の手順でいつもバナートレースを行っています！
- トレースしたいお手本となるバナーを見つける
- 同じような素材やフォントを探す
- デザインをよく観察しながらトレースを行う
- 学んだことを自分なりにまとめてメモ
- （余裕があれば）アレンジしたバナーを作る
Erina実際にトレースしている様子を、ご紹介します！
バナートレース手順①トレースしたいお手本となるバナーを見つける
まずはじめに、トレースしたいお手本となるバナーを探します。最初から複雑な難しいデザインのものに挑戦しようとはせずに、自分の勉強段階に合ったものを選ぶことが大切です。
私はデザインの勉強を始めた頃にだいぶ背伸びをして、「あ〜このデザイン素敵だな！」と思ったバナーに挑戦し、まったく再現できずに心折れかけたことがあります。
難しいのを選ぶ→できなくて落ち込む→デザインが嫌になる…では元も子もないので、自分のレベルに合ったシンプルなデザインのトレースから挑戦して徐々に複雑なデザインのものへステップアップすることをおすすめします。
バナーデザインがまとめられた参考サイト
私がいつもトレースのお手本を探しているサイトをご紹介します。
デザイナーが参考サイトを探すのに欠かせないサイトPinterest。デザインだけではなく、レシピやインテリアのヒントなど様々な情報を探せる写真共有サイトです。「化粧品 バナー」「若者向け かっこいい バナー」などキーワードで検索をすることができ、自分のボードに保存しておくこともできるので便利です。
バナーライブラリー
https://design-library.jp/
良質で参考になるバナーデザインを集めたギャラリーサイト。お気に入りリストへの追加機能があるので、気になったものは保存しておくことができとても便利です。
Bannnner .com
https://bannnner.com/
クオリティーの高いバナーがたくさん集められたデザイン参考サイト。縦割り、横割り、顔切り抜き…などデザインの構図で絞ることができ面白いです。
レトロバナー
https://retrobanner.net/
こちらもたくさんのバナーが集められた、バナーデザインの参考サイトです。バナーをクリックした詳細ページにはそのバナーで使われいるカラーも掲載されているため、トレースする際に色を参照することもできます。
Erina自分の好きなテイストのデザインや、興味のある業界のバナーから挑戦すると楽しくトレース練習ができます！
バナートレース手順②同じような素材やフォントを探す
Erina私は今回はこのバナートレースに挑戦することにしました！▼
トレースするバナーが決まったら、まずは同じようなフォントと画像を探すことから始めます。このバナーの場合は、同じような構図のパスタの写真とゴシック体の日本語フォント、ゴックタイト筆記体の欧文フォントを探します。
Adobeを契約されている方であればAdobeフォントが一番使いやすいかと思いますが、無料で使えるデザインツールFigmaでトレースしたい方はFigma内で使えるフォントや無料で配布されているフォントから探すとよいです。
\ ポイント /
選んだバナーによっては、有料フォントが使われている場合もあるかと思います。必ずしも全く同じフォントを頑張って探さ必要はありません。似ていればOK！
トレースをしたいけど、素材やフォントを探すのが面倒…という方におすすめのテキストはこちら▼
バナートレース手順③デザインの４原則がどこに使われているか観察しながらトレースを行う
素材やフォントが集まったら、実際にトレース開始！細かな手順は下記に記載します。今回私はIllustratorを使ってトレースを行いました。
- お手本バナー２枚を横に並べて１枚はそのまま、もう１枚は透明度を下げる
- 必要に応じてガイド線を引く
- グレースケールで文字を入れ込み、素材を配置する
- 配色する
\ ポイント /
ここでのポイントは、フォントの大きさや文字間、行間、余白を意識しながらトレースすること！
バナートレース手順④学んだことを自分なりにまとめてメモ
トレースができたらデザインを改めて確認し、このデザインから学んだことを箇条書きにします。（私のやり方なので、ここら辺はご自由に）
（例）上のバナーの場合
- コントラストの強い配色＋写真を大胆に見切れさせることでインパクトを持たせている
- ロゴとテキストの位置を合わせている
- 配色は商品写真から抽出した２色をメインに使用してまとまりを出している
（余裕があれば）アレンジしたバナーを作る
余裕がある日は、同じ構図で写真やフォント、配色などを変えたオリジナルバナーを作成する練習もしていました。もちろんお手本を真似てのバナーなので自分の作品としてポートフォリオなどに掲載するのはNGですが、勉強初期の段階では、少しアレンジしただけで「自分でも作れた！」という小さな達成感がとてもう嬉しかったです。
トレースに慣れてきたら
トレース練習をいくつか続けシンプルなデザインを時間をかけずに作れるようになり、デザインツールの操作に慣れてきたら、徐々にレベルアップ！
背景にテクスチャーが敷かれたものや、光彩が入ったもの、文字組が複雑なものや要素が多いものにチャレンジしていきます。私は得意不得意があまり偏らないように、様々な業界、配色、テイストのバナートレースに挑戦しました。
もっと手軽にバナートレースに取り組みたい人へ
バナートレースをやってみたけど、素材やフォントを探すのって結構時間かからない？
Erinaそんな方へは、デザインのドリルがおすすめ！
バナーデザインの参考サイトからトレースしたいバナーを選び、バナートレースを実際にやってみるとわかるのですが、素材探しにかなり時間がかかります。何枚かトレースした後に「ん？実際に手を動かしている時間より素材を探している時間の方が多くない？」と気づき、調べる中で出会ったのが『デザインのドリル』というテキスト。
自分で探さなくてもトレースの見本が用意されていて、さらに嬉しいことに使われているフォントの種類も記載されているし、使われている素材も全部ダウンロードできるのです。
私は早く力をつけたかったので、デザインのドリルを購入してひたすらトレースに励みました。時間がないけど、デザインの勉強をしっかりやりたい！という方に全力でおすすめするテキストなのでトレース練習に時間がかかりすぎて悩んでいる方はぜひチャレンジしてみてください。
【まとめ】バナートレースはデザイン初学者におすすめ！
バナートレースはデザインの勉強をしている方におすすめの勉強方法のひとつです。特に、初学者にはおすすめ…というより、デザインの勉強をしていれば誰もが一度は実践する練習方法かと思います。
デザインの勉強を始めて最初の2ヶ月ほどは独学をしていたため、聞ける人がおらず何から始めてよいのかわかりませんでした。デザインの勉強をしている方のSNSを見てトレースという練習方法があることを知り、最初は「真似して作ることになんの意味があるんだろう？」と思っていましたが、実際に試してみるとトレース練習で得られることがたくさん！
最初から自分ひとりでデザインをするのは難しく、特に勉強したての時期は「なんでこんなこともできないのだろう…」と思ってしまうのも当然ですが…お手本があってのトレースなら楽しく練習ができました。
Erinaデザインの勉強を始めてみたけれどなかなかうまくいかないと感じている方は、まずはトレースをたくさんやってみることをおすすめします！