バナートレースすると勉強になるって言うけど、実際どうやってやれば良いのかな？
ーこんなお悩みを解決します！
こんにちは、Mia（@miatok_design）です！
Miaってこんな人
育休を活用してフリーランスWEBデザイナーになる為の勉強中。ママ専用のWEBデザインスクールに1ヶ月通ったあとは、独学で学んでいます。
現在はココナラでも出品中！
駆け出しのWEBデザイナー。
これからWEBデザインを勉強したい！もっとデザイン力を鍛えたい！そう思っている方にオススメの学習法
それが『バナートレースです』
今回は実際のバナートレースのやり方を手順に沿って解説します！
バナートレースの手順【オススメ素材サイトも紹介】：はじめに
私自身勉強を始めたばかりの頃は、どこから学習を進めて良いのか悩みました。
間違った勉強法を続けてしまうと、学習の進みが遅くなるからです。
なんとなく独学でやるより、既にやっている人の方法を学ぶことは上達への近道ですので
是非参考にしてもらえたら嬉しいです。
バナートレースとは？
そもそもバナートレースってなに？
バナートレースとは、その名の通りバナーをトレース（模写）することで、
見本となるプロのバナーを見ながらそっくり同じように自分でも作ってみる練習法のことです。
WEBデザインを学んでいる人なら、駆け出しでもお仕事がもらいやすいバナー制作の為に
バナートレースでセンスを磨く人も多いです。
それ以外に、『Photoshop』や『Illustrator』といった画像編集ソフトの使い方に慣れたり、
プロがデザインしたバナーを模写することで、
文字や写真のレイアウトや文章の構成など色々な技術を盗む事が出来ます。
（勿論デザイン丸パクリで盗むのはご法度ですよ！）
私の通っていたスクールの先生からも、バナートレースはやるべき！とオススメされました。
とにかく勉強を始めたばかりの人は、色々なデザインに触れてみる事が重要です。
そして良いデザインとは、緻密な計算の元に設計されているもの。
実践的に手を動かす訓練と同時に、しっかりと理論に基づいてデザイン設計が出来る様になるために、デザイン教本を使った学習も成長に欠かせない大切なステップです。
是非バナートレースと平行して、教本を読んでデザイン基礎の学習も取り入れましょう！
＼デザイン初心者が先ず読むべき本！／
バナートレースのやり方と手順
実際に私がやっている流れを順番にご紹介します。
使っているサイトはあくまで一例なので、慣れてきたら色々な素材サイトを自分で探せると尚良いでしょう。
バナートレースするお手本を探す
まずはお手本を探しましょう！トレースする為の下地の部分なので重要です。
オススメの参考サイトは
Pinterest（ピンタレスト）
１・Pinterest（ピンタレスト）
色々な人がバナーやLPの作品をアップしているので、見るだけでもとても勉強になります。お洒落なデザインが沢山見つかるので、会員登録が必要ですが是非登録して使ってみましょう。
素敵なデザインが多いですが、LPやチラシなどバナー作品以外のものも多いです。
もし気になるデザインを見つけたら、保存しておく機能もあるのがとっても便利です。
BannerDesignArchive（バナーデザインアーカイブ）
２・BannerDesignArchive（バナーデザインアーカイブ）
色々なバナーデザインが見つけられます。
ピンタレストよりもバナーに特化しているので、バナートレースの場合はこちらの方がお手本を見つけ易いでしょう。正方形バナーを見つけ易いです。
勉強の為には、様々な形のバナートレースに挑戦する事をオススメします。
retrobanner（レトロバナー）
３・retrobanner（レトロバナー）
バナーデザインアーカイブよりも縦長や正方形など、様々なサイズのバナーを見つけ易いです。
私もこちらで見つけたバナーで、今回のバナートレースのお手本を見付けてきました。
そのほか様々なサイトがあるかと思いますが、私が使っている物を紹介させていただきました。
また使ってみて良いなと思うものがあれば追記します。
↓↓今回の見本はこれ！↓↓
Photoshopを開いて、素材を集める
お手本を見付けたら次にPhotoshop（写真加工にはPhotoshopがオススメ）を開きましょう。
見付けてきたバナーをアートボードにコピペします。
ここで重要なのは、必要な素材を集める作業。
- 背景写真
- 女性の写真
- 楽天のロゴ
上記の素材を探してくる必要があります。
それ以外に、キャッチコピーや図形なども見本のサイズに照らし合わせながら作りましょう！
この時に文字の大きさを変えたり、フォントを悩んで見たり、文字詰めしたり、素材を加工するのが練習になるのです。
初めてバナートレースに挑戦した時は、１つ１つ調べながら進めたのでかなり時間がかかりました。
操作を覚えていくと、段々と早く正確にできるようになっていくので
心折れずに何度も練習しましょう！
バナートレースの練習に使える素材サイト
素材は『写真 素材 無料』などで検索すると出てきます。
個人的にはトレースで一番難しいのは、題材に合った素材を見つけることだと思っています。（未だに素材探しには苦労します）
中々トレースしたいバナーのイメージ通りの素材を見つけるのは時間がかかります。
参考までに無料素材のサイトをいつくかご紹介します。
Unsplash（アンスプラッシュ）
１・Unsplash（アンスプラッシュ）
私の超お気にいりの無料素材サイトです！
外国っぽいお洒落な雰囲気の写真はここで探します。ダウンロード出来る素材の数に制限がないのもありがたい！
PAKUTASO（ぱくたそ）
２・PAKUTASO（ぱくたそ）
写真の無料素材を集めているサイトです。日本人のモデルさんの写真はこちらで探します。
見覚えのある女性モデルや男性モデルの写真もあるので、あれはここから拾ってる素材だったのか〜と分かって面白かったです。
いらすとや
３・いらすとや
言わずもがなと知れた日本一（？）有名な無料素材サイトです。
イラスト系を使いたい時には種類も多いので使い易いですね。本当にニッチな素材まであるので、痒いところまで手が届きます。
素材も加工がしやすくてオススメ！
組み立てる
先程までで見付けてきた素材や、キャッチコピーなどを組み立てましょう。
お手本になるべく一致するよう、
- フォント
- 文字サイズ
- フォントカラー
- 写真（イラスト）・図形の大きさ
これらを調整します。
少しずつショートカットキーなど覚えて行けば、ぐんぐん作業効率が上がっていきますよ！
お手本に忠実に配置や色味を再現しましょうね！
もしも
- 全くの初心者で基本操作も分からない…
- 加工するステップまで辿り着かない…
こんな方は一度Udemyのオンライン学習で、ソフトの操作を学ぶ所から初めても良いでしょう。
Adobeのソフトは自由度が高く出来ることの幅が広いので、最初に操作をマスターすれば今後の自分でのデザインの幅が格段に広がります。
＼プロのレッスンを格安で／
出来上がった作品
それでは今回のトレースで出来上がった物を見てみましょう！
↓↓バナートレースで出来上がった作品がこちら↓↓
（始めたばかりの頃の作品なので、粗が目立ちますがご容赦ください）
無料素材では花嫁さんぽい人物の素材を見付けられず、丁度クリスマス時期なのでサンタ帽子を被った女性にしました。
素材として探したのは
- 女性の写真
- 背景画像（元の雰囲気に近いものにぼかしを入れて使ってます）
- 楽天のロゴ
上記の３つです。
それ以外は文字や図形をPhotoshopで加工しています。
↓↓元の画像と比べたもの↓↓
お手本の方が明るくでポップな印象ですね。
もっと色調補正で明るめにしても良かったですね。
旦那にも婚活なのになんでサンタ？って言われたので、素材探しももっと的確に出来るようになるのが、この時の課題でした。
もし友達や先生がいるなら、一度作品を見てもらって感想を聞くのも、自分では分からなかった課題が見付かるのでオススメです。
バナー制作に慣れてきて、次のステップに進みたい人はWEB制作の基礎を学ぶのも良いですね。
無料で学習をスタート出来る方法もあるので、もっとWEBデザイナーの知識を深めていくのに役立てて下さい。
＼WEB制作の基礎！HTML/CSSの勉強法!／
バナートレースの手順【オススメ素材サイトも紹介】：まとめ
実際の手順をお話ししました。
私自身まだまだ勉強する事だらけですが、同じように頑張っている人や、これから始めたいという人にも参考になったら嬉しいです！
何より継続して学び続けられるのが1番ですよ！一緒に頑張りましょう！
参考になったら嬉しいです。