こんにちは。
Webそしてグラフィックデザイナーを目指している、Webエンジニアのあずま（@azuma___web）です。
デザインの勉強法の一つとして、2ヶ月半にわたり30個のバナー模写をやってみた中で感じた良かった点や失敗ポイント、またバナー模写をする上で気を付けたいことをまとめてみました。
バナー模写とは？
独学でWebデザイナーを目指すための勉強法として、皆さんが口を揃えて良い！と仰っている“バナー模写”。
未経験でデザインの勉強を始めた方から、現役のデザイナーさんでも行っているという練習方法です。
やり方は読んで字の如く…ですが、下記は注意しておきたいことです。
バナー模写とバナートレースの違い
そもそも、バナー模写について検索をしていると、“バナー模写”と“バナートレース”というワードがごっちゃになって出てきています。
かくいう私も、その違いを分かっていなかった一人です。
お手本となるWebバナー広告を隣において見ながら、Photoshopやillustratorといった制作ツールを使用して本物と同じように写し取っていくこと。
お手本となるWebバナー広告を重ねて、模写と同様制作ツールを使用して本物と同じようになぞっていくこと。
この違いを知っているだけでも、上達率がぐんとアップしますよ。
バナー模写をやってみて良かった点
実際に30個のバナーを模写してみて、良かったと思った点です。
- レイアウトのパターンがわかってきた
- よく使われるフォントがわかってきた
- それぞれのツールの特性がわかった
- 周りのデザインを見るようになった
- 課題、苦手なことが見つかった
- 自分が作品を作り上げられる楽しさを知った
レイアウトのパターンがわかってきた
バナー広告はWebサイトに比べてとても小さなサイズなので、その中に入れられる情報はわずかです。
その小さなバナーの中で、いかに大切な情報を一瞬で見せられるか。
世の中にあるバナー広告は、そんなノウハウが詰まったお手本の山です。
情報の優先順位、ジャンプ率、配色、世界観の出し方、テキストの調整……
得られたものは数え切れません。
よく使われるフォントがわかってきた
デザイン初心者にとって、初期の山場の一つがフォント選びだと思います。
ゴシック体、明朝体、筆記体、手書き……
ジャンルは分かっていても、実際使われているフォントが何なのか特定することはとても難しい。
それでもいろんなバナーを模写していくことで、“数字を使うときはこのフォント”“やわらかい雰囲気を出したいときはあのフォント”といったことがわかってきました。
あずま今後自分でバナー制作やデザインをしていく上で、大きな財産になりました。
それぞれのツールの特性がわかった
私はPhotoshop、illustratorについては全くのド素人ではなく、ちょっとかじったことのあるレベルでした。
とはいえ、自分で何かを作り出すことに関してはド素人。
“Webデザイナー＝Photoshop”のようなイメージもあり、当初は特に苦手意識のあったPhotoshopに慣れることを目標に、Photoshop縛りで模写を続けていきました。
しかし、だんだんと自分の思うものがPhotoshopでは実現できないもどかしさもあり、途中で制作ツールをillustratorにチェンジしました。
その時の葛藤は、下記の記事でご覧いただけます。
結果的に、両方のツールを使用したことは大きな収穫でした。
Photoshopにもillustratorにもどちらにも特性があり、それぞれにしか出せない雰囲気がある。
あずま個人の主観ですが、Photoshopは写真を使用したバナーややわらかくふんわりした雰囲気、illustratorはシャープではっきりしたしたものやロジカルなデザインが合っているなと感じました。
そんな違いを知れたのはいい経験でした。
周りのデザインを見るようになった
以前と比べて、Webバナー広告やサイト、テレビ番組やCM、雑誌・ポスター・チラシ、電車の中吊り広告など、Webに限らず周りにあるデザインを意識して見るようになりました。
そのデザインのターゲット、1番重要なワード、配色の持つイメージ……
世の中のデザインはみんなオリジナリティにあふれたものだと思っていましたが、意外とあるあるデザインが多いな、なんてことにも気づいてしまったり。
特に、下記の『あるあるデザイン』という本を読んでからは、街中の至る所であるあるデザインを探してしまいます。
何より、知らず知らずのうちに自分の中のデザインの引き出しが増えた感覚です。
課題、苦手なことが見つかった
何もできないところから始まり、実際に自分の手を動かして制作してみたことで、自分の中の課題や苦手なことがわかってきました。
私の場合は、下記の課題が判明。
- フォントの選び方、調整
- 縦の余白感の把握
- あしらい等素材を作るのに時間がかかる
- グラデーションや色の調整
あずまできないことが悔しくて気持ちが落ち込むこともありましたが、課題がわかってきた分、今後“自分のやるべきこと”が明確になったので、結果オーライです。
自分が作品を作り上げられる楽しさを知った
私の中では、バナー模写をすることで得られた最大のメリットでした。
初心者デザイナーがデザインを1から作り上げるのは無理な話です。
でも、模写であればマネをしているとはいえ、立派に自分で作り上げた作品です。
あずまもちろん、自分の作品だ！なんて名乗り上げてはいけませんよ
初めてバナー模写して完成した時の達成感、これを自分で作ったんだという満足感、あんなコトもこんなコトもやってみたいとどんどん湧き出るワクワク感。
デザインって楽しいなぁ、もっと色んなこと知っていきたいなと、この道を進んでいくことを改めて決意することができました。
何か新しいことを始めるにあたり、最初に心が折れてしまってはそこで終わってしまいます。
程よく自信をつけながら、力をつけていける。
バナー模写はそんな練習だと実感しました。
バナー模写をやってみて失敗したポイント
続いて、バナー模写をやってみて失敗してしまったな、と思う点です。
- “模写する”ことに慣れてしまい、自分で考えなくなってしまった
- 時間に追われて雑なクオリティになってしまった
- 見本に選んだバナーが、本当に“いいデザイン”なのかがわからなかった
“模写する”ことに慣れてしまい、自分で考えなくなってしまった
“デザイン力の基本は「思考力」”
上記の『デザイン力の基本 簡単だけど、すごく良くなる77のルール』でも述べられているワードです。
バナー模写に限らず、デザインの勉強を始めてからデザインは情報整理の積み重ね、という認識が生まれました。
アーティスティックなものではなく、ロジカルなものだった。
（もちろん、アート要素も必要だとは思っています）
模写をしている間は、その形を作り上げることに必死で、なぜそのレイアウト・配色・フォントなのか？を考えるに至りませんでした。
デザインをするにあたり、ツールを駆使して見た目を整える前に必要な、思考力を養えなかったのが失敗ポイントです。
時間に追われて雑なクオリティになってしまった
当初の目標の一つに“30分～1時間くらいで制作できるようになる”というものを掲げていました。
制作にかかる時間を甘く見ていたのもありますが、それがいつの間にか、早く作り上げなければいけないという強迫観念に捕らわれてしまっていたのです。
“神は細部に宿る”といいますが、時間を気にするあまりに細部までこだわることができなかったのも失敗ポイントでした。
見本に選んだバナーが、本当に“いいデザイン”なのかがわからなかった
見本となるWebバナーは、バナーまとめサイトやPinterestから探していました。
でも、選んだバナーは、本当にいいデザインなのか？
勉強になるデザインなのか？
自分の好み、はたまた模写のしやすさで選んでないか？
“いいデザイン”と“残念なデザイン”を見極められる選球眼を養えていない中で、見本バナーを選ぶことに関しては、今も不安が残ってしまっています。
バナー模写後の活用方法
せっかく30個のバナーを模写したので、下記のように1ファイルにまとめました。
一緒にメモしたのは、配色と使用したフォント名。
ここに作成中に使用した機能や作り方なんかもメモしておけばよかったな、とは今更ながら思っています。
未だにフォント名と実際に表示される見え方が一致していないことが多いので、“あ、このフォントはこんな見え方なんだな”と再確認することができます。
あと、こうやって一覧で見てみると、どんな色が良く使われているか、ジャンプ率の高さなど、バナー1つ1つからはわかりにくいことも見えてくるような気がします。
ちなみに、使用ツールはAdobe XDです。
新たなWebサイト制作ツールの主力として、こちらも勉強中です。
もしも次にバナー模写をするなら
色々失敗もしたので、もし真っ新な状態で1からバナー模写を始めるならこんなことに気をつける、というポイントを上げてみました。
- バナー模写を始める前に、ある程度制作ツールに慣れておく
- まずは模写ではなくトレースから
模写だけだと気づきが遅いので、最初はトレースをしてみた方がいい
気づきがあってからの吸収力、応用力が半端ない - 模写するバナーのタイプは順を追ってレベルアップ
テキストメイン→写真付き→自分の苦手なタイプや今後やっていきたいタイプ、など - 時間を計るのなら、文字組・背景など部分ごとに
時間に追われてしまっては元も子もないが、自分が制作にどれだけ時間がかかるかを知ることは必要 - 使用するツールやバナーのタイプ、雰囲気はバランスよく選ぶ
- なぜこのデザイン？をしっかり考えてから模写に入る
- 勢いが大事
期間が長くなればなるほど、目指してるものや今自分が何をしたいのかがあやふやになり、迷いが出てくる
数は少なくても、短い期間でギュッとやってしまった方がいいかも
当時の私は“バナー模写”一つをとっても意外とハードルが高いなぁと感じていました。
そのため、上記のポイントを解消できる『デザインのドリル』という書籍を、バナー模写の前に見てみることをおススメしています。
基礎力をつけた後で行うバナー模写は、きっとより高い効果を発揮しますよ！
まとめ
以上、初心者デザイナーがバナー模写を30個やってみた結果について、まとめてみました。
私もそうでしたが、独学でデザインの勉強を始める時って、何から手を出していいのかわからないんですよね。
そんな方たちにとって、バナー模写は制作ツールに慣れながらデザインの基本やルールを学べて、なおかつ制作する喜びも得られる、効率の良い練習方法なのではないでしょうか。
私の失敗談も含め、これからバナー模写並びにデザインの勉強をしていくあなたにとって、少しでも参考になれば幸いです。
あずま私もデザイナーを目指してまだまだ勉強中の身です。
共にがんばりましょう！