こんにちは、mito（@mito_works）です！
今回は、デザイン初心者がPhotoshopとIllstratorでバナートレースを30本続けた結果、どうなったのか？何がわかったのか？どのようにモチベーションを維持して30本のトレースを達成したのか？という内容をお届けします。
「独学でデザイナーを目指したい」
「デザインスキルをあげたいけれど何から始めたら良いかわからない」
「デザインの勉強法がわからない」
「バナートレースをやろうと思っていても継続的にできない」
という方の参考になれば嬉しいです。
Contents
バナートレースで学べること
あまりに学んだことが多く、これ以降の文章がとても長いので結論から書きます。
学べることは、
「デザインに対してどのようなツールや手法を使って実現するか理解でき、自分で再現できること」
です。
つまり、目で見たデザインを自分の手で再現できるだけではなく、アレンジして自分のデザインに使えるようになります。
バナートレースとは？
「トレース」とは日本語で「模写、真似する」という意味です。
今回はバナー（広告）に絞って模写をしました。
バナートレースでの素材の選び方
- 背景単色もしくは1枚の写真＋文字
- ①＋文字＋簡単なオブジェクト
- 背景グラデーションやストライプや切り抜き写真＋②
バナートレースをするときの手順（取り組み方）
- Pintarestでトレースするバナーを見つける
- 近しいフォント、素材を探す
- ガイドを引いて配置場所やサイズ感を把握する
- PhotoshopとIllustratorを使い分けてトレースする
- フォント、カラーその他気づいたことをまとめる
やりっぱなしではなく、⑤の気づきをまとめるということは後から見返して学びが深まるので、やってよかったなと思います。
最初の頃は②の近しいフォントや素材を探すに時間を多く使ってしまいがちです。
バナートレースを継続的に続ける秘訣
- 宣言する
- やる
- 結果報告＋インプットしたことを即アウトプットすること
上記のことを繰り返すことが継続的に続ける秘訣です。
＜#バナートレース #20＞
シンプルなバナーほど難しい。。パスを変形させて、文字の流れるような加工にすること、背景に沈まないように背景の色と文字色のバランスを考えること。
文字が見えずらくなって残念＞＜。
イラレは文字をアウトライン化すると元に戻せないから断念してしまいました。 pic.twitter.com/bsW29qTUvt— mito@フリーランスWebデザイナー (@mito_works) May 24, 2019
バナートレースのペース配分と内容
2019年3月にPhotoshopだけを使い10本トレースをしました。
この時に、やればやるだけどんどんトレースのスピードが上がり、Photoshopの使える手法も増えることを実感。
出産＆その後1ヶ月の休養を経て、2019年5月にトレースを再開。
Photoshopは、ある程度使えるようになったと思ったので、次はIllstratorを使えるようになりたいと思い、PhotshopとIllastratorを併用して取り組みました。
| 期間 | ツール | 数 | ペース配分 |
| 1ヶ月 | Photshop | 10本 | 平日隔日(60~120分) |
| 1ヶ月 | Illastrator&Photshop | 20本 | 平日毎日(60~90分) |
1回目のトレースの時は、2時間くらいかかっていたので、かけすぎかなと思い、2回目のトレースの時は特に時間を気にしました。
具体的に、バナートレースを通して成長した点
PhotshopとIllastratorを併用することで再現できないデザインが減った
Photshopだけの時は花びらや傘などオブジェクトの再現ができていませんでした。
よく使う手法もわかってツールを使うスキルとデザインの幅が格段に上がったと思います。
見本と近しい素材（画像やイラスト）を探せるようになった
最初は、画像選びだけでもすごく時間を費やしていましたが、徐々にバナーの雰囲気にあった無料の写真やイラストを探せるようになりました。
Unsplash
高品質な素材が無料で提供されています。
イラストAC
素材数が多く、目的にあったイラストが必ず見つかります。
見本により近いフォントを探せるようになった
最初は、明朝体、ゴシック体という大きなくくりでの区別はつきますが、明朝体の中での違いがよくわかっていませんでした。
そしてトレースした際にフォントがしっくりこなくて違和感がありましたが、徐々に「これだ！」というフォントを探せるように。
セリフをさらにくづしたSnell Roundhand。イタリック体だと王道感にプラスしておしゃれに見える
というようなフォントの考察もできるようになりました。
バナーを見てどういう手法を組み合わせているのか分かるようになった
結果、大体どれくらい時間がかかるか見積もりが立てられるように。
デザインの4原則「近接」「強弱」「整列」「反復」を意識して観察できるようになった
ただなんとなく見本に合わせて文字やオブジェクトを配置することが少なくなりました。どういう効果を狙っているのかわかるようになってきたような気がします。
「ポップ」「スポーティー」など抽象的な言葉をデザインで表現するためにどのような手法を使うのかわかるようになってきた
まだまだだとは思うのですが、トレースをして少しわかりかけてきました。
デザインの引き出しを増やすってこういうことなんだと思います。
↑ここからフォントの考察もできるように
見えてきた課題
背景の効果的なデザイン手法
背景は、写真以外にものグラデーション、ストライプ、パターンで表現の幅が広がるということがわかりましたが、まだ使いこなせていません。
適切な文字の加工
文字をそのまま使うのではなく、加工することで随分見え方が変わるということがわかりました。
写真の効果的な加工
「ああでもない。こおでもない」と時間がかったけれど見本に近づけず・・。
もっともやり直したいものの一つです。
結局バナートレースで何を学べるか？
一言で言うと、「ツールの使い方」と「デザインを見る目が養われる」ことだと思います。
バナートレースだけでは学べないこと
トレースは誰かが作ったものをあくまで模写するということ。なのでコンセプト、ターゲットなどを考える部分が抜けています。
トレースで身につけたものを実際の案件で使うというように「練習」と「実践」を行き来するのが良いなと思いました。
まとめ
トレースはあくまで手段！ですが、トレースを通して自分のデザインスキルを上げるためにこれからも使いたいです。
