
【2022】バナーデザインの参考サイト8選!効果的なバナー作成のポイントとは?
こんにちは! 新人デザイナーのぱんちゃんです。
入社して早5ヶ月、主にLIGブログのアイキャッチ制作を担当していますが、スピードもクオリティももっともっと上げていかねばならない今日この頃。
デザインがうまくなりたい……!!
もっとスピードをあげたい……!!!
そう思い、新年からデザイントレースをはじめてみました。
今回はデザインの勉強を始めたての方、私と同じく新人デザイナーの方に向けて、私がやっているトレースの方法と、実際やってみての気づきをお伝えできればと思います。あくまで一つのやり方として、参考にしていただけたら嬉しいです。
目次
トレースとは「参考にしたいデザインをなぞって真似する」作業のことです。
とくにデザイン初学者の方にとってはトレースをするなかで細かい配色や、余白の取り方や文字の大きさなど、勉強になることがたくさんあります。デザインの引き出しが増え、いいデザインの共通項を体感として身につけることができるので、おすすめの学習方法です。
よく先輩デザイナーから聞くのが、「ただトレースするだけじゃ意味がないよ!」という言葉。
そうです、目的のないトレースは、「トレースすること自体が目的」になってしまいがち……。なので、トレースを始めようと考えている方は目的をしっかり定めてから取り組むことをおすすめします!
今回私が設定した目的はこちらの3つです。
ここでいう「引き出し」は①ビジュアル面での引き出しと②クリエイティブの切り口やアイデアの2つです。引き出しをじゃんじゃか増やしてデザインのスピードUPを図りたいと思います!
いいデザインにはいいデザインである理由が必ずあります。アイデアを形にする、世界観を統一するためにどんな工夫(レタッチ、情報の優先順位などなど……)がされているのかをじっくり見ていきます。
とにかくデザインツールに触る時間を増やしてスピードUPをしたいという狙いもあります! また、やり方を調べながらトレースをするので、今までに知らなかったツールの使い方もバンバン習得していきたいと思います。
まずトレースするデザインを見つけていきます。
やっぱりトレースするならいいデザインを参考にしたいですよね! 私はPinterestやバナーまとめのサイトで探すことが多いです。(私はこれらのサイトを見ていると時間が溶けます)
バナーまとめサイトは他にも色々あるので、こちらの記事もぜひチェックしてみてください! 【2022】バナーデザインの参考サイト8選!効果的なバナー作成のポイントとは?
トレース用デザインの選び方として意識していたことは、3つです。
せっかく分析&トレースをするので、いいクリエイティブを選ぶことはとても重要!
とはいえ、
いいクリエイティブってどう選ぶの……?
そう思いませんか? そうなんです、選び方が難しいんです。
なので私はしっかりお金をかけて作られているクリエイティブ(有名企業の広告、映画やドラマの広告など)を中心に選ぶようにしていました。
理由は、細部までこだわったクオリティの高いものが多いからです。手の込んだクリエイティブをじっくり観察することは気づきが多く、いい勉強になるのでおすすめです。
今回の目的はデザインの引き出しを増やすことなので、毎回できるだけ違うデザインを選ぶように意識していました。自分では絶対にやらなそうな配色のもの、作ったことのないテイストのものを選ぶと幅も広がるのでいいです!
色々書きましたが、やっぱり自分がやってて楽しくないと続かないですよね。
まず何より続けることが大事! ということで、基本的には自分がトレースをしていてテンションの上がるデザインを選ぶようにしていました。
参考を見つけたらすぐトレースではなく、必ず分析をするようにしています。
分析のポイントはいつもアイキャッチやバナーを作るときの考え方と同じです。どういう思考回路でそのクリエイティブになったのかを自分なりに考えるようにしていました。
バナーであれば以下のような分析をしています。
バナーであればその広告のリンク先や、商品やサービスのサイトを見に行って、どんな人がターゲットなのかを考えるようにしています。
ターゲットの悩みを考えます。バナーを目にしたときのサービスや商品への温度感(どれくらい興味を持っているのか)も考えます。
ターゲットと同じく、商品やサービスのサイトから強みや推しポイントを考えます。強みは複数あると思うので、今回はなぜその強みを押し出そうとしているのかの背景も考えてみます。
クリエイティブで何を達成したいのか(認知拡大、お問い合わせ増加などなど)を考えます。
一言でいうとどんな切り口(メッセージ)のクリエイティブなのかを考えます。
業務でアイキャッチやバナーを作るときも言語化は必ず必要ですし、常日頃難しいと感じている部分なのでいい練習になります。
切り口を印象的に、キャッチーに見せるためにどんなアイデアを採用しているのかを分析します。
最後にその世界観を構築する上での細かい部分を見ていきます。
例えば
などなどです。とにかく細かーーーくみる癖をつけていきます。
これらをただ羅列していくだけではなく、「こういう印象を与えたいからこういう表現をしているんだな」と理由付けをしていくことを意識しています。
分析も終わったところで、やっとトレースに取り掛かります。先程分析していたポイントで習得したい! と思う箇所を中心にトレースをしていきます。
お手本を隣に置いて、その横に不透明度を20%くらいにしたお手本をおいて上からなぞっていきます。
このとき、ガイドなどを駆使してフォントのサイズ、文字間、余白、各要素のサイズや位置を限りなくお手本に近づけます。
あしらいや文字の置き方のトレースがメインなので基本的にはIllustratorを使用していましたが、ブラシを使った表現(影やグラデーションなど)をしたい時はPhotoshopを使用しています。
フォントがわからないときは、デザイン誌「MdN」さんの企画本である「MdN EXTRA Vol. 5 絶対フォント感を身につける。」に付録でついてくる「フォント見本帳」で探すことが多いです。
(ありさんがこちらの記事で紹介されていて速攻買いました……! とっても便利でおすすめです。)
目的から考えて、今回のトレースではやらないことも決めていました。
今回はあしらいを中心にトレースしたかったので、写真を探すことに時間を使うのはやめました。写真やイラストは実際のバナーから切り抜きをして、貼って使っていました。
ただ、レタッチの仕方やイラストのトンマナなどはテキストベースで分析のみするようにしていました。
今回は必ずしも「すべてを完璧にトレースをする」のではなく、デザインごとに盗みたいポイントを絞ってトレースを行っていました(完璧にトレースすることも学びが多いと思うので、またどこかのタイミングでやってみたいなと思っています)。
私はこの方法でやりましたが、ご自身の目的に合わせてどのくらいのレベル感でトレースを行うのかを決めてみるといいかと思います!
トレースを始める前に比べて、デザインのスピードが速くなりました。ツールの使い方もそうですが、引き出しが増えたことが大きいです。
やっぱりまずは量をこなすことが何より大切だと感じました。
今まではPinterestに気になるデザインをストックしたりしていましたが、実際に自分で手を動かしてやってみると、頭への定着具合がまったく違います。
同じになるようによく観察しますし、手を動かしているので頭に残っており、他のクリエイティブを作る際「あのときの表現の仕方を使ってみよう」と思えるようになりました。
今回は私が行っているデザイントレースの方法をお伝えしました。継続することはやっぱり大変ですが、着実に自分の力になってる感覚があります。引き続きやり方もブラッシュアップしながらトレースを続けていきたいと思います。
今回の記事がデザイン力をアップさせたいデザイン初学者の方、新人デザイナーの方のヒントになれば幸いです。
以上、ぱんちゃんでした!