バナートレース50本達成!私なりの手順やコツをまとめてみた

バナートレース50本達成!私なりの手順やコツをまとめてみた

6月22日にバナートレースを始めて以来、途中で他のネタの記事も書きつつ、昨日8月22日に50本目のバナートレースを終えました。全然意図していなかったんですが、始めた日から昨日でちょうど2ヶ月が経っていたんですね…!偶然でビックリしました。

バナートレースを始めるときに書いた記事「デザインスキルを磨くため、バナートレースを始めてみた #01」の中でも言及していたように、当初バナー制作に対して苦手意識を感じていた私。

しかし、これまで計50本のバナートレースを行う中で、使えるツールや実現できるデザインの幅が広がっていくのを感じ、今ではTwitterやInstagramのフォロワーさんから「いつも参考にしています!」「このデザイン好きです!」といった嬉しいお言葉をかけていただく機会も少しずつ増えてきました。(もちろん、まだまだ実力不足であることは自覚しています…泣)

そこで今回は、バナートレースを日々どうやって実践していたのか、また、実践するにあたってどのような工夫をしていたのかなどを、私なりにまとめてみようと思います。
需要があるかは分かりませんが、現在バナートレースをしていてやり方に不安がある方や、今後新たに始めようと思っている方の参考になれば幸いです(^^)

※あくまでも個人の感想です。もっと効率的なやり方があるかと思いますが、その点はご了承ください。

バナートレース:〜10本

元々バナー制作は苦手分野だったので、まず最初は「バナー制作=楽しい!」と思えるようになることからスタート。そこで、自分でも作れそうな簡単なバナーからトレースしてみることにしました。

凝ったバナーを作りたい気持ちは分かりますが、最初から難易度の高いバナートレースに着手するのは、個人的にはあまりオススメしません。いざ上手くトレースできなかったときに自信をなくしたり、今後続けていくモチベーションを維持できなくなったりしては意味がないので…。(ネガティブ)

■トレースするバナーを選ぶ

普段の仕事では、300×250など正方形気味のバナーを作る機会が多かったので、最初はそのようなバナーを選んでトレースしてみることに。
どうせやるなら仕事上でも活かしていきたいし、同じサイズのバナーをトレースし続けることで「このサイズはこのあしらいが多い」といった共通点に気づけるようになりたいという思いもありました。実際、あしらいのパターンやよくあるデザインなどを効率良く学ぶことができたので、同じサイズのバナーを繰り返しトレースして良かったなと思っています。

ちなみにトレースは、毎回Illustratorを使用していました。私の勤めている会社では、Photoshopを使う機会がほとんどないため、まずはIllustratorのツールを使いこなせるようになろうと思ったからです。そのため、記事内ではバナーで使用したデザインの作り方を時折載せているんですが、Photoshopでトレースしている方にとってはあまり参考にならないかもしれません…。

というわけで、最初にトレースしたバナーはこんな感じ。クリックすると、詳細ページに遷移します。

本日のバナートレース
本日のバナートレース
本日のバナートレース

記事内に記載している制作時間には、素材やフォントを探す時間やツールの使い方を調べる時間も含まれていて、最初の頃はデザイン制作よりも素材探しや調べ物に時間がかかっていました。
デザインを勉強したくてバナートレースを始めたはずなのに、本末転倒ですよね…。

しかし、お気に入りの素材サイトを見つけ、フォントを探すのに慣れ、ツールの使い方を覚えていくうちに、デザイン制作にかけられる時間がどんどん増えていったので、今思えば最初のうちに時間をかけていて良かったなと思います。

バナートレースで役に立ったサイト4選」では、トレースする際によく使っていたサイトを4つ紹介していますので、よろしければそちらもご覧ください(^^)

■ルールを設定する

バナートレースに関しては、まず初めに以下のルールを設定していました。
「これだけは守る!」というルールをあらかじめ設けておくと、自分の中での軸がブレることなく、最後まで諦めずに続けられるかと思います…!自分との約束は、絶対に守りましょう。
ちなみに「毎日最低1本トレースする」とありますが、2本以上トレースした日は一度もなかったです。(小声)

– ルール –
1. 毎日最低1本トレースする
2. 30日間続ける
3. バナー1本につき、所要時間は1時間以内
4. 画像やフォントはなるべく似たものを探す
5. 気づいた点や学んだ技はメモしておく
■トレースの手順

そして肝心なトレースの手順ですが、最初のうちは見本バナーの上から画像やテキストを重ねていく感じで進めていきました。もちろん、見本バナーをアートボードの横に置き、定規ツールで幅や高さを確認しながらのトレースはより効果的かと思いますが、とにかく「見本を再現する」ことに重きを置いていたので、まず最初は重ねてトレースしていました。

今回は「本日のバナートレース #07」で作成した以下のバナーを例に挙げて、私なりのトレースの手順を説明します。

  1. まず、見本バナーをアートボードの上と横に置きます。今回、アートボードは右側です。
  2. トレースの手順

  3. レイヤーをロックし、右の見本バナーの不透明度を50%に設定します。自分がやりやすい%でOKです。
  4. トレースの手順

  5. 上から画像やテキストを重ねていきます。このとき、色は左の見本バナーから抽出します。
  6. トレースの手順

  7. 最終的に、全てのパーツをトレースできたら完成です。
  8. トレースの手順

    見本の上に画像や背景色をしくと見本バナーが見えなくなってしまうので、そういうときは画像の不透明度を下げたり、画像の重ね順を最背面に変更したり、あらかじめアートボードに背景色をしいておいたりするなどして対応していました。

    ■文字間調整の大切さ

    重ねてトレースすると、フォントサイズや文字間、行間といった細かい部分の把握がしやすいので便利です。何本かトレースしていくうちに感じたのは「文字間を空けてデザインしているバナーが思ったよりも多い」ということ。ただテキストを流し込むだけではなく、カーニングやトラッキングを設定することで、バナー全体にゆとりが生まれ、洗練された印象を与えられるということを学びました。
    逆に圧迫感や勢いを感じさせたいときは、文字間を詰めて窮屈な感じで文字を配置するなど、デザインに合わせて文字間を調整するのはとても大切です。

    バナートレース:〜20本

    トレースにも徐々に慣れ、「バナー制作=楽しい!」と思えるようになった頃、簡単なバナーだけだと単純なスキルしか身につかないよな…と反省した私は「どうやってデザインすればいいのか分からないバナー」をなるべく選ぶようにしました。

    例えば「本日のバナートレース #12」では以下のバナーをトレースしたんですが、このバナーを選んだ理由は「パーツごとの文字色の変え方と、吹き出しの上手な作り方が分からなかった」から。
    今ではパッとデザインできますが、当時は「アクセントデザインの部分ってどうやって作ったの?!」と完全なるお手上げ状態でした、お恥ずかしい…。

    見本
    本日のバナートレース
    トレース
    本日のバナートレース

    この時期にトレースしたバナーはこんな感じ。クリックすると、詳細ページに遷移します。

    本日のバナートレース
    本日のバナートレース
    本日のバナートレース
    ■意識的に「作れないバナー」を選ぶ

    自分のデザインスキルの無さを再認識することとなりましたが、私はこの基準でバナーを選んで良かったなと思います。無意識のままだと、どうしても自分が「作れるバナー」を選んでしまいがちですが(私だけ?)、意識的に「作れないバナー」を選ぶことで、使えるツールが格段に増えました。
    当たり前ですが、できないことから目を逸らすのではなく、しっかりと向き合っていきましょう…!

    作れないバナーを選んでいたこともあり、この期間に投稿したバナートレースの記事では、初めて知ることができたデザインの作り方/ツールの使い方を紹介していることが多いです。そして、練習していくにつれて全く再現できないデザインは徐々に減っていったので、記事内で作り方を紹介することも次第に少なくなっていったように思います。

    バナートレース:〜30本

    こうして「30日間続ける」というルールのもと毎日トレースに励んでいたんですが、ラスト10本は自分が直感的に「素敵だなと感じたバナー」を中心に選んでいました。これまでに身につけたスキルを活用しつつ、自分の思う素敵なバナーを作れたら、少しは自信に繋がるのでは?と思ったからです。

    トレース方法

    そしてこの辺りから、見本の上に画像やテキストを重ねてのトレースではなく、見本をアートボードの横に置き、定規ツールを使いながらのトレースに切り替えていきました。

    見本と重ね合わせることで気づけた部分ももちろん沢山あったんですが、少しずつステップアップしていきたいという思いもあったので、自分で幅や高さを測りながらトレースすることに。
    本日のバナートレース #26」でトレースした上のバナーを例に挙げると、右上のリボンとその下の四角(WEBからの応募で〜)の幅が同じであることが、線を引くことでより分かりやすくなっていますよね。規則正しく並べてあるもの、あえてずらして並べてあるものなど、線を引くことで得られた気づきも沢山あったように思います。

    この時期にトレースしたバナーはこんな感じ。クリックすると、詳細ページに遷移します。

    本日のバナートレース
    本日のバナートレース
    本日のバナートレース

    最初に載せた3本よりも、バナーの難易度が上がっているのが伝わりますか…?
    おそらくトレースを始めた当初だったら、これらのバナーは作れていなかった(作れたとしても1時間では終わらなかった)ので、毎日コツコツ続けていった甲斐があったと心底思います。

    ■継続は力なり

    毎日続けていると、自分の成長具合があまり分からないのですが、こうして比べてみると上達しているのが目に見えて分かるので、モチベーションのアップに繋がりました。努力のベクトルを間違っていない限り、必ず上達していけると思うので、「継続は力なり」をモットーに頑張りましょう!

    平日も休日も毎日トレースを続けなければならなかったので、仕事が忙しいときやゆっくり休みたいときは正直「面倒…」と思ったりもしましたが笑、ルールを掲げた以上破るわけにはいかないので、ひたすら毎日トレースしていました。誰に言われたわけでもなく、自分で決めたことなので(^^)

    バナートレース:〜40本

    30本のバナートレースを終え、一旦は休止していたんですが、長方形のバナー制作にも挑戦してみたいとの思いから、6日ぶりに再開することに。デザインの幅をより広げるため、その当時の自分にとって少し難易度が高めのバナーを選んでトレースしました。
    また、これまで「画像やフォントはなるべく似たものを探す」というルールを設けてトレースしていましたが、この時期からは素材探しにこだわりすぎないゆるめのトレースにシフトチェンジ。当たり前ですが「トレース=同じ画像やフォントを探すための勉強ではなく、レイアウトやあしらいの勉強」なので、今回からはあくまでもデザインセンスを磨くことに重きを置こうと決めました。

    ■満足度の高いバナートレース

    長方形のバナーは正方形よりもサイズが大きく、デザインが複雑なことも多いため、トレースするのに時間がかかってしまうことも多々ありましたが、その分作り終えたときの達成感もひとしお。出来上がりに満足できたバナーも、個人的には多かったように思います。

    この時期にトレースしたバナーはこんな感じ。クリックすると、詳細ページに遷移します。

    本日のバナートレース
    本日のバナートレース
    本日のバナートレース
    本日のバナートレース

    バナートレース:〜50本

    こうして40本のバナートレースを終えた頃、見本をそのままトレースするだけでは面白みがなくなってきた私。そこで、41本目からは見本バナーの文言やフォント、テイストなどを変えたオリジナルバナーを作ることにしたんですが、これが個人的には大正解でした!

    初心者の方はトレースだけでも十分勉強になるんですが、デザインスキルを身につけていくうちに若干物足りなさを感じてくる方も多いはず。少なくとも私はそうでした。それでも「一からバナーを作るのはまだ難しい…」という方もいらっしゃると思うので、そういうときは見本バナーを真似しながらオリジナルバナーを作ってみるのがオススメです。難易度としては「トレースするだけよりも難しく、一から作るよりも簡単」といったところ。見本のレイアウトやあしらいを踏襲しつつ、テーマや色味を変えることで、トレース前とは雰囲気の異なるバナーを比較的簡単に作ることができます。

    ■バナーのテーマを変える

    バナーを選ぶスピードを上げるコツは「作りたいオリジナルのテーマがパッと見で浮かぶかどうか」。例えば、ビールのバナーならワインに、秋のバナーなら冬に、夕食のバナーなら朝食に…というように、テーマをちょっと変えるだけで案外すんなりデザインのアイディアが浮かんでくるものです。
    もちろん、家具のバナーを化粧品に、楽器のバナーをカフェに、パンのバナーを映画に…など、テーマをガラリと変えてみても面白いと思います(^^)

    というわけで、私は見本バナーのテーマを以下のように変更し、自分なりのアレンジを加えながらトレースしていました。クリックすると、詳細ページに遷移します。

    ■青空 → 夜景
    見本
    本日のバナートレース
    トレース
    本日のバナートレース
    ■カレー → ティラミス
    見本
    本日のバナートレース
    トレース
    本日のバナートレース
    ■ネイル → アイシャドウ
    見本
    本日のバナートレース
    トレース
    本日のバナートレース

    あくまでもレイアウトや画像の配置などは見本を真似して作っているんですが、雰囲気がグッと変わったと思いませんか?ただ真似するだけではなく、例えば夜景のバナーなら文字をネオン風加工にしてみる、アイシャドウのバナーなら丸ではなく斜めで区切って対比させてみるなど、「このテーマ=このデザインにしよう」といったことを自分で考えながら作れるようになると、もっとトレースを楽しめると思います。

    今回私は試していないんですが、いくつかのバナーのそれぞれの要素を組み合わせてバナーを作ってみるというのも、デザインの勉強には効果的だと思います。

    例えば、資料請求のバナーなら…

    「実際に届く資料の写真」+「資料請求者だけの限定特典」を組み合わせて作ってみる

    資料請求
    資料請求
    例えば、インテリアのバナーなら…

    「家具の写真を上&テキストを下」+「マーカー風テキスト」を組み合わせて作ってみる

    インテリア
    インテリア

    などなど。今パッと調べただけなので、あまり良い例ではないかもしれませんが、このように複数のバナーのセクションを上手く組み合わせてみることで、しっくりくるバナーが意外と簡単に作れそうな気がします。どうせやるなら楽しんでやった者勝ちなので、自分が飽きずに続けられるやり方を見つけてみるのは大切です。
    私は、一からデザインを練っていく発想力がやや乏しいので(致命的)、こうしていろんなバナーの素敵なところをたくさん真似していくことで、少しでも自分自身のデザインの引き出しが増えていったら良いなあと思いながら、日々トレースしていました。

    ■SNS用のまとめ画像を作る

    あと、今回のバナートレースでやっておけば良かったと思うことが一つあって、それが「SNS投稿用に正方形のまとめ画像を作っておくこと」。
    TwitterやInstagramで「バナートレース」と検索すると、多くの方がご自身でトレースされたバナーをアップされているんですが、そのほとんどがSNS用に綺麗にまとめられたもの。使用したフォントや色、トレースしていて気づいたことなどが正方形の枠内に上手くおさめられており、一覧で見たときにパッと目に留まりやすいので素敵だなと思いました。私の投稿は、ただバナーを並べているだけで、フォントや気づいたことはブログの中で紹介していたので、ブログを見ていない方にはそのあたりを上手く伝えることができていなかったなと反省。
    今後トレースされる方は、ご自身で一つバナートレース投稿用のテンプレートを作っておくと、今後SNSなどにアップするときに役立つかと思います。

    皆さんの投稿
    まとめ画像
    私の投稿
    まとめ画像

    バナートレースの作業自体は一人で黙々やるものですが、どうせ作るのならSNSやブログなどでたくさんアピールした方が良いと思います。誰かに「トレース上手ですね」「このバナー素敵ですね」とコメントをいただけると、とても嬉しいので…!「ここはもっとこうした方が良いですよ」と自分では気付けなかった部分を指摘してもらえることもあるので、そういった心優しいフォロワーの皆さんの存在は、私にとってすごくありがたかったです(^^)

    ■仕事への影響

    バナートレースを始めてからというもの、普段の仕事で依頼されるバナー制作のスピード・質ともに向上してきたのを実感できたため、自分のデザインスキルに対して少しずつ自信が持てるようになってきたのも事実。
    とはいえ、作り終わったバナーを見て「何か物足りない」「何かが違う」と感じることや、他の方が作ったバナーを見て「今の私には到底作れない…」と落ち込むことも未だによくあるので、今後は「デザインの違和感に気づく力」なども同時に磨いていきたいと思っています。

    まとめると、トレース用バナーを選んできた基準の経過は以下の通りです。

    ■トレース用バナーを選ぶ基準
    〜10本 自分でも作れそうな簡単なバナー 正方形
    〜20本 どうやってデザインすればいいのか分からないバナー
    〜30本 直感的に素敵だなと感じたバナー
    〜40本 自分のデザインの幅を広げられる難易度高めのバナー 長方形
    〜50本 作りたいオリジナルのテーマがパッと見で浮かぶバナー

    おまけ:アイキャッチ画像

    今回この記事を書くにあたって、地味に悩んだのが「アイキャッチ画像」でした。
    これまでのバナートレースの記事では、トレースしたバナーをそのままアイキャッチに設定していたので問題なかったんですが、今回はそういうわけにもいかず…。
    一からデザインすることも考えましたが、せっかく今までトレースを続けてきたので、トレースした中のどれか1つを参考にデザインしてみることに!

    本日のバナートレース #33」で作った、青と黄色の組み合わせが印象的な以下のバナーにアレンジを加えて、この記事のアイキャッチ画像を作ることにしました。

    見本
    本日のバナートレース
    トレース
    本日のバナートレース
    ■アイキャッチ画像制作の手順
    1. 背景に青色(#164d69)をしきます
    バナートレースの手順やコツをまとめてみた
    2. テキストを白色(#ffffff)で追加します
    バナートレースの手順やコツをまとめてみた
    3. キーワードを黄色(#ece006)に変えます
    バナートレースの手順やコツをまとめてみた
    4. 文字のジャンプ率を大きくします
    バナートレースの手順やコツをまとめてみた
    5. 吹き出しのあしらいを追加します
    バナートレースの手順やコツをまとめてみた
    6. 文字を左寄せにして、バランスを調整します
    バナートレースの手順やコツをまとめてみた
    7. 背景に英字のテキストを追加します
    バナートレースの手順やコツをまとめてみた
    8. 不透明度を下げ、背景となじませて完成です
    バナートレースの手順やコツをまとめてみた

    こうして、見本バナーを元にデザインしたアイキャッチ画像が完成しました。色は見本と全く同じで、吹き出しのあしらいもそのままに。あまり大幅なアレンジは加えていないので、10分程度で作り終えることができました。

    見本のアイキャッチ画像
    本日のバナートレース
    今回のアイキャッチ画像
    バナートレースの手順やコツをまとめてみた

    つらつらと書いてしまいましたが、実は私はデザインよりもコーディングの方が得意なので笑、デザインのプロの方から見たら的を得ていない部分、疑問に思う部分がたくさんあるかもしれません。そのときは、優しくこっそり教えていただけましたら幸いです…。
    そして、この記事の最初でも書きましたが、最後にもう一度書いておきます。

    ※あくまでも個人の感想です。もっと効率的なやり方があるかと思いますが、その点はご了承ください。

    「私はこうやってトレースしています!」「このやり方だともっと効率的です!」といったご意見ご感想をお持ちの方がいらっしゃいましたら、是非TwitterやInstagramのコメント欄で気軽に教えてください。皆さんと情報交換できたら嬉しいです(^^)

    それでは、最後までお読みいただき、ありがとうございました。どなたかのお役に立てますように!

Bannerカテゴリの最新記事