バナートレースの手順【オススメ素材サイトも紹介】

バナートレースの手順アイキャッチ WEBデザイン
デザイン勉強中の女性
デザイン勉強中の女性

バナートレースすると勉強になるって言うけど、実際どうやってやれば良いのかな?

  • バナートレースをやり方や手順を知りたい
  • バナートレースにオススメの素材サイトを知りたい

ーこんなお悩みを解決します!

Mia
Mia

こんにちは、Mia(@miatok_design)です!

Miaってこんな人

育休を活用してフリーランスWEBデザイナーになる為の勉強中。ママ専用のWEBデザインスクールに1ヶ月通ったあとは、独学で学んでいます。
現在はココナラでも出品中!
駆け出しのWEBデザイナー。

これからWEBデザインを勉強したい!もっとデザイン力を鍛えたい!そう思っている方にオススメの学習法

それが『バナートレースです』

今回は実際のバナートレースのやり方を手順に沿って解説します!

スポンサーリンク

バナートレースの手順【オススメ素材サイトも紹介】:はじめに

ピンクのノートとパソコンの画像

私自身勉強を始めたばかりの頃は、どこから学習を進めて良いのか悩みました。

間違った勉強法を続けてしまうと、学習の進みが遅くなるからです

なんとなく独学でやるより、既にやっている人の方法を学ぶことは上達への近道ですので
是非参考にしてもらえたら嬉しいです。

バナートレースとは?

デザイン勉強中の女性
デザイン勉強中の女性

そもそもバナートレースってなに?

バナートレースとは、その名の通りバナーをトレース(模写)することで、
見本となるプロのバナーを見ながらそっくり同じように自分でも作ってみる練習法のことです。

WEBデザインを学んでいる人なら、駆け出しでもお仕事がもらいやすいバナー制作の為に
バナートレースでセンスを磨く人も多いです。

それ以外に、『Photoshop』や『Illustrator』といった画像編集ソフトの使い方に慣れたり、
プロがデザインしたバナーを模写することで、


文字や写真のレイアウトや文章の構成など色々な技術を盗む事が出来ます
(勿論デザイン丸パクリで盗むのはご法度ですよ!)

私の通っていたスクールの先生からも、バナートレースはやるべき!とオススメされました。

とにかく勉強を始めたばかりの人は、色々なデザインに触れてみる事が重要です。

そして良いデザインとは、緻密な計算の元に設計されているもの。

実践的に手を動かす訓練と同時に、しっかりと理論に基づいてデザイン設計が出来る様になるために、デザイン教本を使った学習も成長に欠かせない大切なステップです。

是非バナートレースと平行して、教本を読んでデザイン基礎の学習も取り入れましょう!

デザイン初心者が先ず読むべき本!

バナートレースのやり方と手順

鉛筆でクエスチョンマークが描かれた画像

実際に私がやっている流れを順番にご紹介します。

使っているサイトはあくまで一例なので、慣れてきたら色々な素材サイトを自分で探せると尚良いでしょう。

バナートレースするお手本を探す

まずはお手本を探しましょう!トレースする為の下地の部分なので重要です。

オススメの参考サイトは

Pinterest(ピンタレスト)

1・Pinterest(ピンタレスト)

Pinterest
Discover recipes, home ideas, style inspiration and other ideas to try.

色々な人がバナーやLPの作品をアップしているので、見るだけでもとても勉強になります。お洒落なデザインが沢山見つかるので、会員登録が必要ですが是非登録して使ってみましょう。

素敵なデザインが多いですが、LPやチラシなどバナー作品以外のものも多いです。

もし気になるデザインを見つけたら、保存しておく機能もあるのがとっても便利です。

スマホアプリもあるので、電車での移動中や休憩時間など、隙間時間で色々なデザインに触れられますよ!

BannerDesignArchive(バナーデザインアーカイブ)

2・BannerDesignArchive(バナーデザインアーカイブ)

バナーデザインアーカイブ|バナーのデザインをまとめてチェック!
バナーデザインをまとめたサイトです。様々なバナーのデザインをサイズや色から選んで一覧でチェック!バナー作成の参考にご活用ください!

色々なバナーデザインが見つけられます。

ピンタレストよりもバナーに特化しているので、バナートレースの場合はこちらの方がお手本を見つけ易いでしょう。正方形バナーを見つけ易いです。

勉強の為には、様々な形のバナートレースに挑戦する事をオススメします。

retrobanner(レトロバナー)

3・retrobanner(レトロバナー)

バナーデザイン専門ギャラリーサイト | レトロバナー | 「レトロバナー」はバナーデザイン専門のギャラリーサイトです。サイズ・色・業種・テイストからバナーを絞り込む事ができ、バナーを一覧でチェックできます。バナーデザインの新たなアイデア・発想の源として要チェック!
「レトロバナー」はバナーデザイン専門のギャラリーサイトです。サイズ・色・業種・テイストからバナーを絞り込む事ができ、バナーを一覧でチェックできます。バナーデザインの新たなアイデア・発想の源として要チェック!

バナーデザインアーカイブよりも縦長や正方形など、様々なサイズのバナーを見つけ易いです。

私もこちらで見つけたバナーで、今回のバナートレースのお手本を見付けてきました。

そのほか様々なサイトがあるかと思いますが、私が使っている物を紹介させていただきました。

また使ってみて良いなと思うものがあれば追記します。

↓↓今回の見本はこれ!↓↓

見本となる婚活の商業バナー

スポンサーリンク

Photoshopを開いて、素材を集める

お手本を見付けたら次にPhotoshop(写真加工にはPhotoshopがオススメ)を開きましょう。

見付けてきたバナーをアートボードにコピペします。

ここで重要なのは、必要な素材を集める作業。

  • 背景写真
  • 女性の写真
  • 楽天のロゴ

上記の素材を探してくる必要があります。

それ以外に、キャッチコピーや図形なども見本のサイズに照らし合わせながら作りましょう!


この時に文字の大きさを変えたり、フォントを悩んで見たり、文字詰めしたり、素材を加工するのが練習になるのです。

初めてバナートレースに挑戦した時は、1つ1つ調べながら進めたのでかなり時間がかかりました。


操作を覚えていくと、段々と早く正確にできるようになっていくので
心折れずに何度も練習しましょう!

あくまでトレースなので練習ですが、なるべく実践に近い動きを意識して無料で商用OKの素材を使うと良いですよ!
※商用不可のものを間違って掲載してしまうと、著作権侵害で損害賠償を求められる事もあるので注意!

バナートレースの練習に使える素材サイト

素材は『写真 素材 無料』などで検索すると出てきます。

個人的にはトレースで一番難しいのは、題材に合った素材を見つけることだと思っています。(未だに素材探しには苦労します)

中々トレースしたいバナーのイメージ通りの素材を見つけるのは時間がかかります。
参考までに無料素材のサイトをいつくかご紹介します。

Unsplash(アンスプラッシュ)

1・Unsplash(アンスプラッシュ)

Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

私の超お気にいりの無料素材サイトです!

外国っぽいお洒落な雰囲気の写真はここで探します。ダウンロード出来る素材の数に制限がないのもありがたい!

PAKUTASO(ぱくたそ)

2・PAKUTASO(ぱくたそ)

ぱくたそ - 会員登録不要、無料の写真素材・AI画像素材
「ぱくたそ」は、会員登録せずに今すぐダウンロードできる無料の写真素材・AI画像素材のフリー素材サイトです。一部を有料販売したり、枚数制限による課金など一切ありません。美しい日本の風景を中心に人物やテクスチャーなどの写真とAIで生成した背景画像の素材を配布しています。2024年3月 5日現在、52,948枚の写真を掲載中...

写真の無料素材を集めているサイトです。日本人のモデルさんの写真はこちらで探します。

見覚えのある女性モデルや男性モデルの写真もあるので、あれはここから拾ってる素材だったのか〜と分かって面白かったです。

いらすとや

3・いらすとや

かわいいフリー素材集
いらすとやは季節のイベント・動物・子供などのかわいいイラストが沢山見つかるフリー素材サイトです。

言わずもがなと知れた日本一(?)有名な無料素材サイトです。

イラスト系を使いたい時には種類も多いので使い易いですね。本当にニッチな素材まであるので、痒いところまで手が届きます。

素材も加工がしやすくてオススメ!

組み立てる

先程までで見付けてきた素材や、キャッチコピーなどを組み立てましょう。

お手本になるべく一致するよう、

  • フォント
  • 文字サイズ
  • フォントカラー
  • 写真(イラスト)・図形の大きさ

これらを調整します。

少しずつショートカットキーなど覚えて行けば、ぐんぐん作業効率が上がっていきますよ!

お手本に忠実に配置や色味を再現しましょうね!

もしも

  • 全くの初心者で基本操作も分からない…
  • 加工するステップまで辿り着かない…

こんな方は一度Udemyのオンライン学習で、ソフトの操作を学ぶ所から初めても良いでしょう。

Adobeのソフトは自由度が高く出来ることの幅が広いので、最初に操作をマスターすれば今後の自分でのデザインの幅が格段に広がります。

プロのレッスンを格安で

出来上がった作品

それでは今回のトレースで出来上がった物を見てみましょう!

↓↓バナートレースで出来上がった作品がこちら↓↓

トレースしたバナーの画像

(始めたばかりの頃の作品なので、粗が目立ちますがご容赦ください)

無料素材では花嫁さんぽい人物の素材を見付けられず、丁度クリスマス時期なのでサンタ帽子を被った女性にしました。

素材として探したのは

  • 女性の写真
  • 背景画像(元の雰囲気に近いものにぼかしを入れて使ってます)
  • 楽天のロゴ

上記の3つです。

それ以外は文字や図形をPhotoshopで加工しています。

↓↓元の画像と比べたもの↓↓

見本とトレースを比較した画像

お手本の方が明るくでポップな印象ですね。

もっと色調補正で明るめにしても良かったですね。

旦那にも婚活なのになんでサンタ?って言われたので、素材探しももっと的確に出来るようになるのが、この時の課題でした。

もし友達や先生がいるなら、一度作品を見てもらって感想を聞くのも、自分では分からなかった課題が見付かるのでオススメです。

バナー制作に慣れてきて、次のステップに進みたい人はWEB制作の基礎を学ぶのも良いですね。

無料で学習をスタート出来る方法もあるので、もっとWEBデザイナーの知識を深めていくのに役立てて下さい。

WEB制作の基礎!HTML/CSSの勉強法!

バナートレースの手順【オススメ素材サイトも紹介】:まとめ

マグカップに入ったコーヒーの画像

実際の手順をお話ししました。

私自身まだまだ勉強する事だらけですが、同じように頑張っている人や、これから始めたいという人にも参考になったら嬉しいです!

Mia
Mia

何より継続して学び続けられるのが1番ですよ!一緒に頑張りましょう!

参考になったら嬉しいです。

タイトルとURLをコピーしました