webデザインの勉強

バナートレースのやり方と、やってみた感想・メリット。〜未経験webデザイナー〜

バナートレースのやり方と、やってみた感想・メリットのバナー

インスタグラムのDMで「未経験でデザインの勉強をするには何をすればいいですか?」とよく質問をいただきます。

その際にまずおすすめしているのが「バナートレース」です。
実際私も未経験からwebデザインを勉強する際にバナートレースをしていました。

今回はバナートレースのやり方メリット感想などをご紹介していきたいと思います!

shio
shio
デザインスクールのトレーナーさんやLIGのデザイナーさんもバナートレースをおすすめしていたので、デザイン初心者さんはぜひやってみてほしいです!

バナートレース とは?

そのままの意味で、お手本となるバナーの模写をすることです。
テキストフォントなどを真似してそっくりに作ります。
ぽめさん
ぽめさん
小さな範囲にデザインが詰まっているので一度に多くのことを学べるよ!

バナートレースのやり方

01.バナーを選ぶ

まずはピンタレストなどの参考サイトでトレースしたいバナーを選びます。

ピンタレストはピンを立てるだけでお気に入りのものだけまとめることができるので使いやすいと思います!
ピンタレスト以外にもバナーのまとめサイトはいくつかあります。

レトロバナー

レトロバナー
優良なバナーのまとめサイトです。
サイズ・カラー・業種・テイストごとに探せます。

バナーデザインアーカイブ

バナーデザインアーカイブ
サイズ・色・業種ごとに探せます。

バナーデザインギャラリー

バナーデザインギャラリー
サイズ・カラー・地域ごとに探せます。

 

02.Photoshopでバナーをトレースする

  1. 選んだバナーをコピーして、Photoshopのアートボードに2枚貼り付ける。(Illustratorでも大丈夫です!)
  2. 1枚は見えるところに置き、2枚目は不透明にする。
  3. 2枚目の上からなぞるようにバナーをトレースする。


右は不透明度50パーセントにしてみました。

作業中のポイント

どこが揃っているのか見つけながら作業する
大体のバナーは揃っている部分があるはずです。ガイドを弾いたり、直線ツールでどこが揃っているのか探しながらデザインのルールを学んでいきます。

このバナーでは青い直線部分が斜めに揃っていまいました

分からない部分はネットで調べる。
調べて欲しい情報を見つける力もwebデザイナーには必須であるとスクールで学びました。
調べて解決したサイトはブックマークしておくと良いですよ!

慣れてきたら、下記のやり方も挑戦して学びを深めていきましょう♪

  • 見本を下に敷かずに、横においた見本を見ながらトレース
  • 自分でこうしたほうがいいと思う部分を加えたり、修正してみる

バナートレースが終わったらSNSで発信しよう♪

まとめの画像を作る

一枚見ればどんなバナーだったのか、何を学んでいたのかがすぐに分かるような画像を作ってみましょう^^
カラーやフォント・デザインをトレースしたバナーのデザインに寄せて作ると、アウトプットにもなります。

どんなことをまとめるのか
  1. 作業時間
  2. デザインの考察…カラーやフォントについて
  3. 反省・課題・学んだこと・できるようになったこと
  4. 参考にしたサイト
  5. 工夫したポイント
まずは上記の5点をまとめてみましょう。
慣れてきたら下記のようにより深く考えてみましょう。

 

  • このバナーは見た人にどんな印象を与えるのか
  • どこのデザインがどのように良いと思うのか
  • どんなデザインが使われているのか

作ったまとめ画像をSNSで発信する

作った画像はぜひSNSに投稿してみましょう^^

shio
shio
InstagramやTwitterで勉強したことを投稿するメリットはたくさんあります!!
  1. 人に見せるから頑張ろう!となる
  2. いいね♡やコメントやフォローが励みになる
  3. 「毎日トレースします!」と宣言することで嫌でもやるようになり続けられる
  4. コメントでアドバイスをくれることがある
私はInstagramに投稿していなかったら、続けられてたか分からないです。
一人でやっていてら、途中でやめていたかもしれない・・・。
続けるためにもSNSはおすすめです!
最初は「こんなものを投稿していいのかな・・」と思うかもしれませんが、一歩踏み出して人に見せることに慣れることも大事だと感じました!

 

shio
shio
コメントをもらったりフォローしてもらえると励みになり、頑張れました!

バナートレースのメリット

バナートレースをして気付いたこと・学び

私がバナートレースをして、気づいたことは以下です。

  • 縦横、揃っている部分が多い
  • 文字デザインは設定が細かい
  • フォントは多くてもだいたい3種類まで
  • 全体的に統一感がある
  • 良く使われているデザインが分かる

文字デザインは設定が細かい

バナーは文字のデザインにすごく力を入れています。
見やすいように大きさ・フォントの種類・背景との明度・文字間を細かく設定してあります。
なので、文字は良く考えられて作られています。

良く使われているデザインが分かる

数をこなしていくと、「あ!このデザイン前にもあったな!」という瞬間が何回も出てきます。
良く使われているデザインを身を持って実感することができます。

バナートレースのお勧めポイント

  • インプットとアウトプットが同時にできる
  • デザインの引き出しが増える
  • ツールの使い方に慣れる
  • 慣れていくことで作業時間短縮に繋がる
  • 実力不足が分かる

インプットとアウトプットが同時にできる

プロのデザインを学びながら、今まで勉強したテクニックを使ってトレースするのでインプットもアウトプットもできて一石二鳥です!

慣れていくことで作業時間短縮に繋がる

作業時間に関しては、「このデザインはどうやって作られているのかな?」と迷う時間がなくなるし、ツールもスムーズに使えるようになっていき、時短になりました。

教訓

フリーイラスト素材を探しているイラスト

時間を気にしすぎて、学びを疎かにしない!

私は最初の頃は時間をかけて丁寧に作業していたのですが、途中から時間を意識してトレースが雑になっていってしまいました。もっと時間をかければより見本に近づくのに妥協して終わらせることもありました。

早く終わらせることも大事ですが、時間を削ることで学びが減るのはもったいないです。
分からない部分・再現できていない部分は時間がかかってしまっても、1つ1つ調べてできることを増やしていくべきでした。

shio
shio
時間を意識しすぎて、作業が雑にならないように気をつけよう!

▼もっとデザインを勉強したい方へ!おすすめの本をまとめました!

webデザイン初心者おすすめ勉強本3冊|未経験webデザイナーが最初に読んだのバナー
未経験webデザイナーが最初に読んだwebデザイン初心者おすすめ勉強本今回はこれからwebデザインを勉強し始める方に向けてお勧めしたい本をご紹介します。 未経験から勉強を始めた私も実際この3冊を読んで...
【webデザイナーおすすめ】デザインする時に役立つデザイン勉強本8選のバナー
【webデザイナーおすすめ】デザインする時に役立つ勉強本8選+こんにちは ^^💐 今回は私がデザインする時によく読んでいる本をご紹介します。 私はデザインに困ったとき、本...

終わりに

バナートレースをして、私は実力不足をひしひしと感じて落ち込むこともありましたが、自分にはどの部分が足りないのかを知ることができました。

shio
shio
デザインの勉強で何をしようか迷った時は、毎日1つずつバナーのトレースをすることをオススメします★

実際に私がトレースしたバナーやまとめはこちら

GWバナーフェス〜バナートレース前半 5本〜のバナー
GWバナーフェス〜バナートレース前半 5本〜GWバナートレース!〜9日間のまとめ〜 GWはいつも音楽フェスに行っていましたが、今年は外出自粛 ;  ; 代わりに「GWバナーフェ...
GWバナーフェス〜バナートレース後半 4本〜のバナー
GWバナーフェス〜バナートレース後半 4本〜GWバナーフェス〜後半バナートレース 4本〜 「GWバナーフェス」ということで、毎日1本バナーのトレースをすることにしました! 合計...

バナトレース時代を経て、今は自分でバナーやアイキャッチなどを作れるようになりました。あわせて読んでいただけると嬉しいです♡

【1年前と比較】webデザイナーの想いを込めたブログバナー(アイキャッチ)のポイントのバナー
【1年前と比較】webデザイナーの想いを込めたブログバナー(アイキャッチ)作りのポイントこんにちは、shioです^^ 私はブログのバナー(アイキャッチ)を作りながら、デザインの勉強をするようにしてます。 コーディング...

では、またっ🐑🧡

webデザイナー|Canva公式クリエイター
shio
webデザイナーshioのアイコン
*月7000人が読んでるデザインブログ運営 *ナチュラルな婚姻届を心を込めて制作 webデザイナーを目指したい方向けに、 【勉強方法|転職活動|ポートフォリオ制作|制作会社で働いてからのこと|webサイト制作 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきます!
\ Follow me /
webデザイナーの就職活動で使うポートフォリオのバナー