バナー作成練習。ムダを省いてさっさと上達するやり方

副業としてのバナー制作練習やWebデザイナーへの学習ステップとして、バナー模写（バナートレース）があります。アプリケーション操作やデザインのよい勉強になるんですよね。
ただポイントを押さえてトレースしないと、無駄に時間を使ったり、頑張った割にあまりスキルが身に付かないということも起こります。
スクールでバナートレース課題を多数添削してきた知見から、デザイン・制作スキルを効率よく身につける手順・トレーニング方法をご紹介します。

この記事で分かること

お手本バナーの探し方
バナートレースで意識しておくコト
バナートレースで気にする必要のないコト

Webデザインとブログで豊かに引きこもる。

Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。

お手本バナーの探し方

まずはトレースするバナー探しからですよね。
役立つサイトをご紹介します。

バナーデザインアーカイブ

URL：http://banner.keizine.net/
バナーの検索条件：サイズ・色・業種
サイト自体に広告としてのバナーが貼られているので、一期一会で現役活躍中のバナーにも出会えます。

Banner Matome

URL：http://bannermatome.com/
バナーの検索条件：色・業種・表現（手書き風とか）
更新は止まっているようですが、20,000点以上のバナーが紹介されています。申し分ない量ですね。

Bannnner.com

URL：https://bannnner.com/
バナーの検索条件サイズ・テーマ
業種ごとの検索はもちろん、季節イベント（春・クリスマス等）や「写真メイン」「縦割り」などのデザイン手法ごとにも探せるので、バナー練習にはうってつけかもしれません。

Retrobanner

URL：https://retrobanner.net/
バナーの検索条件：サイズ・色・業種・テイスト
IlustratorやPhotoshop等があれば必要ないかもしれませんが、バナーに使われている配色をカラーコードで見ることができます。掲載件数10,000点以上。

目についた物をストックしておく

そもそもネット上はバナーだらけですから、気に入った物を随時スクショorダウンロードするなどしておいてもいいですよね（あくまで個人の学習用として。著作権等気をつけてくださいね）

お手本バナーの選定基準

そもそもネットの世界はバナーだらけ。
それゆえにネタには事欠かないバナートレースですが、逆に選択肢が多すぎてどれを選んでいいかわからなくなってしまうかもしれません。
どのバナーを手本にするか。私がオススメしているのは、以下の基準です。

カンタンにできそうなものをお手本にする

最初はラクしましょう。
要素の数が少ないバナー、複雑なイラストが使われていないバナー等を選びましょう。

これにはちゃんと理由があります。
スキルを身につける前に、学習習慣を身につける必要があるんです。
最初は時間が上手く作れないとか、ちょっとした作業でつまづく等で挫折しがちなので、まずは超絶難易度の低い作品をこなして、成功体験を作ることをおススメします。

好きなものをお手本にする

これは説明のいらない話だと思います。
やっぱり好きなテイストのバナーをお手本にした方が、モチベーション上がりますもんね。

慣れてきたら「じゃない方」をお手本に

実際の仕事では、自分の好みではないテイスト、興味のない分野のバナーを承ることがあります。
カワイイのが好きなのに、カッコイイを求められたり。
運転免許持ってないのに、自動車のバナーを請け負ったり。

好みのバナー制作が一段落したら、ぜひ守備範囲でない世界観にも挑戦してみてください。
新鮮かつ意外な発見が必ずありますよ。

バナートレースで意識しておくコト

続いて、学習時に気をつけたいことです。

当然そっくりに作る

基本はここですね。
要素自体を真似るのももちろんですが、その周囲にある余白、要素同士の整列、テキストであればカーニングなどにも気をつけてあげてください。

デザインの意図を想像してみる

バナーは広告です。
どんなターゲットに何を伝えたいのか、なぜその配色やフォントが選ばれているのか、必ず戦略を持っていますので、そのストーリーを自分なりに考えてみましょう。
バナートレースの最終目標は、ゼロから独力でバナー作成が行えるようになることです。
いずれ自分から提案していく立場になるわけですから、今のうちに予行練習しておきましょう。

これはやらなくていいと思うコト

先に言ってしまうと、完コピを目指すんだけど、完コピにこだわる必要はないと言うことです。
バナートレースの目的はアプリケーションの基本操作とデザインを学ぶ事なので、どうやって作っているのかどうしても読み解けない要素がある場合はスルーしてしまって大丈夫です。

フォントがわからないなら代替を使えばいい

スクールのバナートレース課題で、手本に使用されているフォントを一生懸命探す事に時間を費やしてしまっているケースがあります。
フォントデザインの目利きを目指すわけではないので、どうしてもわからないのであれば、手持ちのフォントから似ている物を選んで使えば十分です。

どうしても作り方がわからない要素にこだわらない（アイコンや写真加工の方法など）

経験を重ねるうちにいつかわかるので、その場は適当に笑
汎用的な表現ならともかく、手本に選んだそのバナーでした見たことのないようなテクニックであれば、そこに何時間も頭を悩ませる事は相当もったいないですよね。

完成時間は、意識はするが気にはしない

選んだバナーによって差が出るから、と言うのもあるのですが、時間に気を取られて作業に集中できなくなるのを避けてほしいというのが主な理由です。

最初は学習習慣をつけることが大切だとは、先程言った通りです。
「目安時間内にできなかった…」と自信をなくしてそのまま挫折するのは本当にもったいない。
数をこなせば確実に制作スピードは速くなります。学習開始時は、時間は気にしないでください。

一方、完成した上でかかった時間を把握しておくことはお勧めします。
そうすれば、次回いつ学習するかスケジューリングができますし、だんだん短時間で完成できるようになってくる自分の成長も実感しやすくなります。

慣れたらバナトレからは卒業して、自分の作品を作ろう

当たり前ですが、バナートレースにはデザインアイデアを考えるためのフェーズが含まれていません。
バナトレはあくまで、バナーやWebサイトのデザインを自ら産み出せるようになるための準備段階。
ある程度力がついたと思ったら、自分でデザインを考えられるような制作に移りましょう。

まとめ

バナー練習のコツ

最初は、カンタンにできるバナー、好みのバナーをお題にする
慣れてきたら、表現の引き出しが増やせるようなバナーにも挑戦してみる
完コピが目標だけれども、目的ではない
学習目的に影響しない範囲で、わからない事はスルーしてよし
当初は学習の習慣をつける事が大事。自分に優しく、楽しくトライ！

バナーという小さな世界の中には、デザインの基本がたくさん詰まっています。
気に入ったお手本バナーと楽しく戯れて、そのエッセンスを自分のモノにしていってくださいね。