初心者デザイナーがバナー模写を30個やってみたまとめ

こんにちは。
Webそしてグラフィックデザイナーを目指している、Webエンジニアのあずま（@azuma___web）です。

デザインの勉強法の一つとして、2ヶ月半にわたり30個のバナー模写をやってみた中で感じた良かった点や失敗ポイント、またバナー模写をする上で気を付けたいことをまとめてみました。

バナー模写とは？

独学でWebデザイナーを目指すための勉強法として、皆さんが口を揃えて良い！と仰っている“バナー模写”。
未経験でデザインの勉強を始めた方から、現役のデザイナーさんでも行っているという練習方法です。

やり方は読んで字の如く…ですが、下記は注意しておきたいことです。

バナー模写とバナートレースの違い

そもそも、バナー模写について検索をしていると、“バナー模写”と“バナートレース”というワードがごっちゃになって出てきています。
かくいう私も、その違いを分かっていなかった一人です。

この違いを知っているだけでも、上達率がぐんとアップしますよ。

バナー模写をやってみて良かった点

実際に30個のバナーを模写してみて、良かったと思った点です。

レイアウトのパターンがわかってきた

バナー広告はWebサイトに比べてとても小さなサイズなので、その中に入れられる情報はわずかです。
その小さなバナーの中で、いかに大切な情報を一瞬で見せられるか。
世の中にあるバナー広告は、そんなノウハウが詰まったお手本の山です。
情報の優先順位、ジャンプ率、配色、世界観の出し方、テキストの調整……
得られたものは数え切れません。

よく使われるフォントがわかってきた

デザイン初心者にとって、初期の山場の一つがフォント選びだと思います。

ゴシック体、明朝体、筆記体、手書き……

ジャンルは分かっていても、実際使われているフォントが何なのか特定することはとても難しい。
それでもいろんなバナーを模写していくことで、“数字を使うときはこのフォント”“やわらかい雰囲気を出したいときはあのフォント”といったことがわかってきました。

それぞれのツールの特性がわかった

私はPhotoshop、illustratorについては全くのド素人ではなく、ちょっとかじったことのあるレベルでした。
とはいえ、自分で何かを作り出すことに関してはド素人。

“Webデザイナー＝Photoshop”のようなイメージもあり、当初は特に苦手意識のあったPhotoshopに慣れることを目標に、Photoshop縛りで模写を続けていきました。

しかし、だんだんと自分の思うものがPhotoshopでは実現できないもどかしさもあり、途中で制作ツールをillustratorにチェンジしました。

その時の葛藤は、下記の記事でご覧いただけます。

あわせて読みたい

バナー模写#11　BAYCREW’S STORE　と、制作ツールを変えた理由 前回から長らく間が空きましたが、11回目のバナー模写です。 間が空いた理由は後述します。 ■BAYCREW'S STORE■制作日：2020/09/20所要時間：80分サイズ：750×700px使用...

結果的に、両方のツールを使用したことは大きな収穫でした。
Photoshopにもillustratorにもどちらにも特性があり、それぞれにしか出せない雰囲気がある。

そんな違いを知れたのはいい経験でした。

周りのデザインを見るようになった

以前と比べて、Webバナー広告やサイト、テレビ番組やCM、雑誌・ポスター・チラシ、電車の中吊り広告など、Webに限らず周りにあるデザインを意識して見るようになりました。

そのデザインのターゲット、1番重要なワード、配色の持つイメージ……

世の中のデザインはみんなオリジナリティにあふれたものだと思っていましたが、意外とあるあるデザインが多いな、なんてことにも気づいてしまったり。

特に、下記の『あるあるデザイン』という本を読んでからは、街中の至る所であるあるデザインを探してしまいます。

何より、知らず知らずのうちに自分の中のデザインの引き出しが増えた感覚です。

課題、苦手なことが見つかった

何もできないところから始まり、実際に自分の手を動かして制作してみたことで、自分の中の課題や苦手なことがわかってきました。

私の場合は、下記の課題が判明。

• フォントの選び方、調整
• 縦の余白感の把握
• あしらい等素材を作るのに時間がかかる
• グラデーションや色の調整

自分が作品を作り上げられる楽しさを知った

私の中では、バナー模写をすることで得られた最大のメリットでした。

初心者デザイナーがデザインを1から作り上げるのは無理な話です。
でも、模写であればマネをしているとはいえ、立派に自分で作り上げた作品です。

初めてバナー模写して完成した時の達成感、これを自分で作ったんだという満足感、あんなコトもこんなコトもやってみたいとどんどん湧き出るワクワク感。

デザインって楽しいなぁ、もっと色んなこと知っていきたいなと、この道を進んでいくことを改めて決意することができました。

何か新しいことを始めるにあたり、最初に心が折れてしまってはそこで終わってしまいます。
程よく自信をつけながら、力をつけていける。
バナー模写はそんな練習だと実感しました。

バナー模写をやってみて失敗したポイント

続いて、バナー模写をやってみて失敗してしまったな、と思う点です。

• “模写する”ことに慣れてしまい、自分で考えなくなってしまった
• 時間に追われて雑なクオリティになってしまった
• 見本に選んだバナーが、本当に“いいデザイン”なのかがわからなかった

“模写する”ことに慣れてしまい、自分で考えなくなってしまった

“デザイン力の基本は「思考力」”

上記の『デザイン力の基本　簡単だけど、すごく良くなる77のルール』でも述べられているワードです。

バナー模写に限らず、デザインの勉強を始めてからデザインは情報整理の積み重ね、という認識が生まれました。
アーティスティックなものではなく、ロジカルなものだった。
（もちろん、アート要素も必要だとは思っています）

模写をしている間は、その形を作り上げることに必死で、なぜそのレイアウト・配色・フォントなのか？を考えるに至りませんでした。
デザインをするにあたり、ツールを駆使して見た目を整える前に必要な、思考力を養えなかったのが失敗ポイントです。

時間に追われて雑なクオリティになってしまった

当初の目標の一つに“30分～1時間くらいで制作できるようになる”というものを掲げていました。

制作にかかる時間を甘く見ていたのもありますが、それがいつの間にか、早く作り上げなければいけないという強迫観念に捕らわれてしまっていたのです。

“神は細部に宿る”といいますが、時間を気にするあまりに細部までこだわることができなかったのも失敗ポイントでした。

見本に選んだバナーが、本当に“いいデザイン”なのかがわからなかった

見本となるWebバナーは、バナーまとめサイトやPinterestから探していました。

でも、選んだバナーは、本当にいいデザインなのか？
勉強になるデザインなのか？
自分の好み、はたまた模写のしやすさで選んでないか？

“いいデザイン”と“残念なデザイン”を見極められる選球眼を養えていない中で、見本バナーを選ぶことに関しては、今も不安が残ってしまっています。

バナー模写後の活用方法

せっかく30個のバナーを模写したので、下記のように1ファイルにまとめました。

一緒にメモしたのは、配色と使用したフォント名。
ここに作成中に使用した機能や作り方なんかもメモしておけばよかったな、とは今更ながら思っています。
未だにフォント名と実際に表示される見え方が一致していないことが多いので、“あ、このフォントはこんな見え方なんだな”と再確認することができます。

あと、こうやって一覧で見てみると、どんな色が良く使われているか、ジャンプ率の高さなど、バナー1つ1つからはわかりにくいことも見えてくるような気がします。

ちなみに、使用ツールはAdobe XDです。
新たなWebサイト制作ツールの主力として、こちらも勉強中です。

もしも次にバナー模写をするなら

色々失敗もしたので、もし真っ新な状態で1からバナー模写を始めるならこんなことに気をつける、というポイントを上げてみました。

当時の私は“バナー模写”一つをとっても意外とハードルが高いなぁと感じていました。
そのため、上記のポイントを解消できる『デザインのドリル』という書籍を、バナー模写の前に見てみることをおススメしています。

あわせて読みたい

バナー模写のその前に。『デザインのドリル』をやるべき5つの理由 バナー模写の前におススメしたい『デザインのドリル』について、5つのおススメポイントや演習後の活用方法をご紹介しています。

基礎力をつけた後で行うバナー模写は、きっとより高い効果を発揮しますよ！

まとめ

以上、初心者デザイナーがバナー模写を30個やってみた結果について、まとめてみました。

私もそうでしたが、独学でデザインの勉強を始める時って、何から手を出していいのかわからないんですよね。
そんな方たちにとって、バナー模写は制作ツールに慣れながらデザインの基本やルールを学べて、なおかつ制作する喜びも得られる、効率の良い練習方法なのではないでしょうか。

私の失敗談も含め、これからバナー模写並びにデザインの勉強をしていくあなたにとって、少しでも参考になれば幸いです。