HOW TO STUDY

【バナートレース30本達成の秘訣】デザイン初心者がPhotoshopとIllstratorでやってみた

こんにちは、mito@mito_works)です!

今回は、デザイン初心者がPhotoshopとIllstratorでバナートレースを30本続けた結果、どうなったのか?何がわかったのか?どのようにモチベーションを維持して30本のトレースを達成したのか?という内容をお届けします。

「独学でデザイナーを目指したい」

「デザインスキルをあげたいけれど何から始めたら良いかわからない」

「デザインの勉強法がわからない」

「バナートレースをやろうと思っていても継続的にできない」

という方の参考になれば嬉しいです。

バナートレースで学べること

あまりに学んだことが多く、これ以降の文章がとても長いので結論から書きます。

学べることは、

「デザインに対してどのようなツールや手法を使って実現するか理解でき、自分で再現できること」

です。

mito
mito
料理で例えるのであれば、カレーを食べてこれは人参とジャガイモと豚肉を使っていて、無水調理で作っているな・・と分かり同じ味を作れるイメージです。
momo
momo
そこまでできるようになると、もっと甘くしたいから、ジャガイモをさつまいもに変えて、黒糖を入れてみようなど自分なりのアレンジができるようになるね!

つまり、目で見たデザインを自分の手で再現できるだけではなく、アレンジして自分のデザインに使えるようになります

バナートレースとは?

「トレース」とは日本語で「模写、真似する」という意味です。

今回はバナー(広告)に絞って模写をしました。

バナートレースでの素材の選び方

  1. 背景単色もしくは1枚の写真+文字
  2. ①+文字+簡単なオブジェクト
  3. 背景グラデーションやストライプや切り抜き写真+②
mito
mito
まず文字の余白の取り方、フォントサイズの強弱、フォントの種類を重点的に学び、徐々にイラスト入りや切り抜き写真入りなど要素を増やしていくイメージでやりました。

バナートレースをするときの手順(取り組み方)

  1. Pintarestでトレースするバナーを見つける
  2. 近しいフォント、素材を探す
  3. ガイドを引いて配置場所やサイズ感を把握する
  4. PhotoshopIllustratorを使い分けてトレースする
  5. フォント、カラーその他気づいたことをまとめる

やりっぱなしではなく、⑤の気づきをまとめるということは後から見返して学びが深まるので、やってよかったなと思います。

バナートレースを継続的に続ける秘訣

  1. 宣言する
  2. やる
  3. 結果報告+インプットしたことを即アウトプットすること

上記のことを繰り返すことが継続的に続ける秘訣です。

mito
mito
私の場合、twitterやコミュニティで「やります!」と宣言して自分なりのまとめをつぶやいていました。特にやらないと何か言われるということはないですが、心理的な強制力を作る上で有効だと思います!
momo
momo
思わぬタイミングでコメントや励ましの言葉をかけてもらえたりして、励みになることもあるよ!

バナートレースのペース配分と内容

20193月にPhotoshopだけを使い10本トレースをしました。

この時に、やればやるだけどんどんトレースのスピードが上がり、Photoshopの使える手法も増えることを実感。

mito
mito
ちなみにこの時、デザインはもちろん、Photoshopも触ったことがない初心者でした。

出産&その後1ヶ月の休養を経て、20195月にトレースを再開。
Photoshopは、ある程度使えるようになったと思ったので、次はIllstratorを使えるようになりたいと思い、PhotshopとIllastratorを併用して取り組みました。

 

期間 ツール ペース配分
1ヶ月 Photshop 10本 平日隔日(60~120分)
1ヶ月 Illastrator&Photshop 20本 平日毎日(60~90分)

 

1回目のトレースの時は、2時間くらいかかっていたので、かけすぎかなと思い、2回目のトレースの時は特に時間を気にしました。

具体的に、バナートレースを通して成長した点

PhotshopとIllastratorを併用することで再現できないデザインが減った

Photshopだけの時は花びらや傘などオブジェクトの再現ができていませんでした。
よく使う手法もわかってツールを使うスキルとデザインの幅が格段に上がったと思います。

見本と近しい素材(画像やイラスト)を探せるようになった

最初は、画像選びだけでもすごく時間を費やしていましたが、徐々にバナーの雰囲気にあった無料の写真やイラストを探せるようになりました。

mito
mito
トレースでよく使った無料素材はこちらの2つです。

Unsplash
高品質な素材が無料で提供されています。

イラストAC
素材数が多く、目的にあったイラストが必ず見つかります。

 

見本により近いフォントを探せるようになった

最初は、明朝体、ゴシック体という大きなくくりでの区別はつきますが、明朝体の中での違いがよくわかっていませんでした。

mito
mito
「たづがね角ゴシック」と「ヒラギノ角ゴシック」って何が違うか見分けがつかない!!という感じです。

そしてトレースした際にフォントがしっくりこなくて違和感がありましたが、徐々に「これだ!」というフォントを探せるように。


セリフをさらにくづしたSnell Roundhand。イタリック体だと王道感にプラスしておしゃれに見える

というようなフォントの考察もできるようになりました。

バナートレース #04 -Snell Roundhandで高貴におしゃれに-トレース結果 ※左:Sample  右:Trace Time 50min Tool illustrator Fon...

バナーを見てどういう手法を組み合わせているのか分かるようになった

結果、大体どれくらい時間がかかるか見積もりが立てられるように。

mito
mito
ただ、シンプルで余白があるものほど目に見えない工夫や技が潜んでいて想定以上の時間がかかるということも・・。 シンプルほど奥が深いということも同時に学びました。

デザインの4原則「近接」「強弱」「整列」「反復」を意識して観察できるようになった

ただなんとなく見本に合わせて文字やオブジェクトを配置することが少なくなりました。どういう効果を狙っているのかわかるようになってきたような気がします。

mito
mito
こんな風に考察しています。
バナートレース #13 - スポーティーの作り方 -トレース結果   ※左:Sample  右:Trace Size 300×250 Time 60min Tool illu...

「ポップ」「スポーティー」など抽象的な言葉をデザインで表現するためにどのような手法を使うのかわかるようになってきた

まだまだだとは思うのですが、トレースをして少しわかりかけてきました。
デザインの引き出しを増やすってこういうことなんだと思います。

mito
mito
こんな風に考察しました。

ユーモアの表現

バナートレース #09 - ユーモアの表現方法 -トレース結果   ※左:Sample  右:Trace Size 300×250 Time 35min Tool ph...

若者向けの可愛さ、ポップ

バナートレース #10- パターンの色と大きさを変える & アートボードからはみ出した部分を無視して書き出す-トレース結果   ※左:Sample  右:Trace Size 360×240 Time 90min Tool il...

大人向けの可愛い、シンプル

バナートレース #12 - かわいさの作り方、簡単!波オブジェクトの作り方 -トレース結果 ※左:Sample  右:Trace Size 1964×900 Time 90min Tool Ph...

スポーティー

バナートレース #13 - スポーティーの作り方 -トレース結果   ※左:Sample  右:Trace Size 300×250 Time 60min Tool illu...

ファッショナブルな女性らしさ

バナートレース #15 - 現代的、ファッショナブルな女性らしいデザインとは -トレース結果   ※左:Sample  右:Trace Size  360×214 Time 60min Tool i...

ここからフォントの考察もできるように

見えてきた課題

背景の効果的なデザイン手法

背景は、写真以外にものグラデーション、ストライプ、パターンで表現の幅が広がるということがわかりましたが、まだ使いこなせていません。

バナートレース #05 -グラデーションとオブジェクトで春らしく-トレース結果 ※左:Sample  右:Trace Size 300×250 Time 90min Tool il...
バナートレース #06 -リボン作成&ワープで変形 -トレース結果 ※左:Sample  右:Trace Size 978×330 Time 60min Tool il...
バナートレース #11 -雨の作り方、シアーで平行四辺形、パスファインダーの分割で可愛らしく、アートボードに中心線を引く -トレース結果   ※左:Sample  右:Trace Size 400×600 Time 120min Tool ...

mito
mito
特にブラシ効果がまだ使えていません。

バナートレース #14 -ゴールドの作り方 -トレース結果   ※左:Sample  右:Trace Size 980×250 Time 60min Tool il...

適切な文字の加工

文字をそのまま使うのではなく、加工することで随分見え方が変わるということがわかりました。

ネオン風

バナートレース #07 - 文字の縁取りと切り取り、一部回転方法 -トレース結果   ※左:Sample  右:Trace Size 440×270 Time 60min Tool il...

象形文字っぽく

バナートレース #11 -雨の作り方、シアーで平行四辺形、パスファインダーの分割で可愛らしく、アートボードに中心線を引く -トレース結果   ※左:Sample  右:Trace Size 400×600 Time 120min Tool ...

可愛らしく
バナートレース #12 - かわいさの作り方、簡単!波オブジェクトの作り方 -トレース結果 ※左:Sample  右:Trace Size 1964×900 Time 90min Tool Ph...

爽やかに

バナートレース #20 - photoshopで背景の余分な部分を消す、illustratorで文字の変形 -トレース結果   ※左:Sample  右:Trace Size 1238×536 Time 70min Tool p...
mito
mito
届けたいターゲットやデザインコンセプトに合わせて、思い通りに文字を加工するまでには至っていません。

写真の効果的な加工

「ああでもない。こおでもない」と時間がかったけれど見本に近づけず・・。

もっともやり直したいものの一つです。

バナートレース #18 -文字の均等配置・両端揃え、背景透過の効果、自然体なたづがね角ゴシック -トレース結果 ※左:Sample  右:Trace Size 300×210 Time 60min Tool ph...

結局バナートレースで何を学べるか?

一言で言うと、「ツールの使い方」と「デザインを見る目が養われる」ことだと思います。

mito
mito
「このデザインいいな」とただストックしているだけでは得られるものは少ない。とにかく手を動かさなければ習得できないなと思いました。

バナートレースだけでは学べないこと

トレースは誰かが作ったものをあくまで模写するということ。なのでコンセプト、ターゲットなどを考える部分が抜けています。

トレースで身につけたものを実際の案件で使うというように「練習」と「実践」を行き来するのが良いなと思いました。

まとめ

トレースはあくまで手段!ですが、トレースを通して自分のデザインスキルを上げるためにこれからも使いたいです。

 

バナートレースからデザイントレースへ。50個トレースしてわかったこと&Tipsこんにちは、mito(@mito_works)です! すきま時間に続けていたバナートレースも気づけば50個になりました。 (途中...

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始めました。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、フリーランスを模索しています。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。