こんにちは!belulu(ベルル)です!
突然ですが、デザインの勉強ってどうしてますか?
初学者の方や、これからデザインを学んでいきたいという方には
ぜひ『バナートレース』に挑戦して頂きたいと思います!
デザインスキルを向上させるのにとってもいい『バナートレース』。
私もチャレンジしています!
今回は私個人のバナートレース方法を紹介します。
バナートレースとは
トレースとは「模写」のことです。
お手本のバナーを探してデザインソフトでなぞることを「バナートレース」といいます。
バナートレースすることで、デザインスキル向上だけではなく
デザインソフトの使い方に慣れていく事が出来ます。
また、分からないことを自分で調べて解決する力が養われます。
バナートレースの手順
実際にバナートレースをする手順を紹介します。
色々なやり方があると思いますので、ご自身にあったやり方で取り組んで下さい!
参考になればうれしいです。
1. 模写する見本のバナーを探す
2. デザインソフトで模写(トレース)する
① 素材を探す
② フォントを探す
③ 配置していく
3. 振り返りをする(考察する)
1.模写する見本のバナーを探す
文字だけのバナーからはじめるといいです。
まずはデザインソフトに日々触ることが大切!なので難易度の低いものから始めて、
成功体験を積んで行きましょう!

文字だけのバナー例。
バナーさがしおすすめサイト
下記、バナー探しの参考にどうぞ。
バナーデザインギャラリー
バナー特化サイトで、カテゴリーで検索できる。
サイト自体のデザインがシンプルなので、主役のバナーに集中して探せます。
BANNER LIBRARY
こちらもバナーに特化したギャラリーサイト。
メニューバーでカテゴリー分けされていて、わかりやすい。
お気に入り登録機能があるので、気になったバナーをお気に入りにしておけば、
お気に入りリストで絞り込みができて便利です。
レトロバナー
13,000アイテムのバナーを掲載。 ※2024年10月時点
サイズ・色・業種・テイストから絞り込みできて、バナーをクリックすると、サイズ・使用カラー・
業種・テイストが載っているので参考になります。
上記サイトは一例ですが、これらのバナーギャラリーサイトから作ってみたいバナーを決めたら、
いざトレースです。
2.デザインソフト(photoshopなど)で模写する
① 素材を探す
1 で決めた模写するバナーに使われている素材(写真)を探します。
この写真探しが、最初は時間がかかって大変だと思うのですが、
ある程度似た写真ならOK!という気持ちで探してください。
そうしないと、模写に取り掛かる前に写真探しで数時間・・・なんてことになります。
あくまでも『模写してデザインソフト操作やデザインにふれる事が目的』ですので、
写真探しの沼にハマりそうになったら、その事を思い出してください。
素材探しおすすめサイト
下記素材探しの参考にどうぞ。
写真AC
無料でダウンロード。加工・商用利用OK。日本人モデルの画像が多いです。
ダウンロードするには無料会員と有料のプレミアム会員があります。
無料会員だと、検索は1日4回まで・ダウンロードは1日9点まで(画質によっては1日1点)など
制限があります。
最初は無料で試してみて、沢山使いたい様なら有料のプレミアム会員になるのもいいと思います。
pixabay
高品質な画像を、会員登録なしで無料でダウンロードできます。
加工・商品利用もOKですが、全ての素材が無料でダウンロードできるのではなく、
素材によっては有料もあります。
Canvaと提携して選んだ画像をCanvaで編集できる様になっています。
SNS投稿するには、Canvaで画像加工してそのままSNSにUPできるので便利ですね!
Unsplash
1点1点がアート作品の様なハイクオリティでおしゃれな写真が多いサイトです。
加工・商用利用OKで、外国人モデルの素材がほとんどです。
アート性が高いので見ているだけで面白いサイトです。
② フォントを探す
こちらも、写真同様ぴったり同じものでなくてOKです。
書体がほぼ同じならOKぐらいに思いましょう。
理由としては、バナーのフォントはそれ自体にこだわりが強いので
全く同じものにこだわると、何時間も経ってしまうからです。(私もそうでした・・・)
何時間かけてもそっくりな書体が見つからない!なんて事もあります。。
バナートレースでフォントを探すにはphotoshopなら「マッチフォント」機能を使うと早いです。
③ 実際に配置していく
Photoshopでのトレース方法を載せていきます。
1. アートボードからバナーを貼り付けて、アートボードごとコピー
2. コピーした方を透明度を下げる(50〜60パーセントがおすすめ)

3. 文字を打ちこんでいく(最初は黒やグレーなど)

4. 配置を合わせたり(ガイドをつかう)、文字色を変更して完成。



3. 振り返りをする(考察)
トレースが完成して完成の余韻にひたっているだけではもったいない!
勉強のあとの振り返りがその後の成長に繋がります。
ぜひ振り返りをしてみましょう。その際、下記の点に気を付けて振り返ってみてください。
初めは模写するだけでも大変ですが、気づいたことやデザインを言語化していくと
次第にデザインの力がついていくので根気良く続けてみてください!
まとめ
デザイン初心者にお勧めの勉強法『バナートレース』についてお話ししました。
バナートレース手順
1. 模写する見本のバナーを探す
2. デザインソフトで模写(トレース)する
① 素材を探す
② フォントを探す
③ 配置していく
3. 振り返りをする(考察する
ひとつひとつの手順は慣れるまで大変だと思いますが、何個かこなしていくと
バナー一つに対しても見え方がかわってくると思います。
私自身もまだまだ勉強中です。一緒に頑張りましょう!
この記事が参考になれば嬉しいです。

