今回はバナーデザインが上達したいけど何から始めたら良いんだろうという方に向けて
勉強中に行った方法にはなるのですが、デザイン初心者かつPhotoshopを使用したこともほぼなかった状態でバナー模写をしたお話です。
通っていたスクールで勉強のためにもバナー模写をすると良いという話を小耳に挟み実際にやってみることになりました。
結果としてスキルアップできたので、本当におすすめです。
実際に試してみて、やって良かったなと思った理由と、その方法についてまとめて行きます。
この記事の内容
- バナー練習（模写）のやり方
- バナー模写をおすすめする理由
バナー練習（模写）のやり方
では早速具体的に説明していきます。
見本のバナーを見つける
まずは、実際に自分が模写したいバナーを探します。
方法はいくつかあるのですが、一番いろいろなパターンを見ることができるのがバナーまとめサイトです。
バナーまとめサイト
ネット上のバナーを集めてまとめてくれているサイトです。
有名どころだとこの辺りが良いかと思います。サイズ別に検索が出来たりもします。
プロのデザインを一気に並べてみることが出来るのでとても効率的に探せます。
またアイデアのストックとして利用することも出来るので模写をしなくても日常的に見ることをおすすめします。
有名ですが、気に入った画像を保存しておけるツールです。
画像を『ピン』して集めます。
人にシェアして画像を拡散していくコミュニケーションツールというよりは、自分の好きな画像を探して残していきます。
私自身も前職で商品開発のアイデアの参考に、通勤中などによく見ていました。
ワード検索が出来るので、”バナー”などで検索すると多数ヒットします。
英語で検索すると海外の方のものも見られるので多数のデザインをチェックすることができます。
Instagramだと最近は画像に文章がついている投稿が多いですが、Pinterestの場合デザイン単体で見ることが出来、お洒落なデザインも多いので単純に見るのが楽しいです。
後は普通にネット検索していると気になったものが出てきたりするので、スクショ等で保存しておくと良いと思います！バナー模写するようになってから、ネットサーフィンしていてもバナーの方に目が留まることが多くなりました。
見ながら実際に作成してみる(やり方は調べながら）
実際にPhotoshopで参考のバナーをみながら作成していきます。
※大きめにカンバスを作成しておき、上に見本、下に自分の作るものと並べて作成していました。
私の場合は見本と見比べられる状態で保存しておきたかったのでそのやり方をしていましたが、別タブで開いて横並びに配置しても良いかと思います。お好みです。
作業の際に意識すること
そっくりに作成する
普段何気なくみていたバナーでも、作成しているととても細かいところまで意識されていることがわかります。
フォント、色、位置、画像の明るさなど意識して合わせていきます。特にフォントの字詰めなどは細かく指定されていることが多いので注意してみてみてください。
やり方が分からなければとにかく調べる
これとても大事です。何気なく模写を始めてみるものの、最初はやり方が分からなすぎてとても時間がかかるかと思います。
私なんて字詰めの仕方すら分からない状態でしたが、今はいろいろな情報をネットでも得ることが出来るので、行き詰まる→調べる→解決するを経験しておくと自己解決能力が上がりますし、作業がどんどん早くなっていきます。（レベルアップした感じ）
独学の方であればまずは本を買って基礎を学ぶのもありかと思いますが、スクールに通う方は分からなかったら都度調べるの方がピンポイントで学んでいけるため、スムーズかと思います。
だんだんと検索のスキルも上がります。
出来るだけスピードアップする
最初は難しいかと思うのですが、１時間で１バナー作成を心がけていました。（最初は調べることが多すぎたため３時間とかかかってました…）
もちろん細かいところまで合わせていくので、バナーによって難易度は変わりますがクオリティと一緒にスピードを意識することで、その後実際に業務として行う際にスムーズに進めることが出来ました。
仕事の時は、当たり前ですがオリジナルなので、アイデア出しやターゲット分析など時間がかかります。なので単純に作業スピードを上げる練習をしておくと楽です。
ショートカットキーを駆使する
Photoshopに慣れている方は問題ないですが、私のように初心者スタートの方は早めにショートカットキーを覚えておくことをオススメします。
どちらにしろスピードを上げるためにはお世話になるので、最初からクセづけしておくとスピードが変わります。
実際に私は最初ショートカットキーをあまり意識せず、横や上ののメニューから選んだりとやっていたのですが、意識して使うようになってからは作業がとても楽になりました。（今でも使えてないキーたくさんあるとは思いますが…）
Adobeの公式がショートカットキーを公開していますので、ぜひ参考にしてみてください。（ちなみに自分で設定することも出来ます）
バナー模写をおすすめする理由
ここまでバナー模写のやり方とバナー例をご紹介しましたが、私自身やってみてバナー模写をおすすめする理由をまとめてみたいと思います。
おすすめする理由３つ
デザインのポイントに気がつくことが出来る
上でも少し書きましたが、デザイナーはなぜそのデザインにすべきなのか細かい部分まで考えて作成しています。
ターゲットは誰なのか、伝えたいワードはどれなのか、ならば文字の大きさは？色は？
その細かい部分を見つけながら模写していくため、普段何気なくみていたデザインに注目出来るようになります。
Photoshopのテクニックが上達する
初めのうちはとても時間がかかりますが、調べながらやっていく使ったことのあるテクニックが増えてきます。
さらにショートカットを駆使して作業している方はそのスピードもどんどん上がります。
自分の中の引き出しが増える
デザイナーである以上、そのまま丸パクリはもちろんご法度です。
ただ、表現方法を学び意図を汲み取ることによって、自身のデザインのストックが増えてきていざオリジナルのものを作るとなったときにバリエーションが広がります。
別記事のおすすめの本５選でご紹介したのですが、クリエイティブ ディレクターとして有名な水野学さんの著書「センスは知識からはじまる」では、一貫してセンスは先天的なものではなく知識であると語られています。
私自身もまだ多いとは言い切れないのですが、Web上や街中で意識してみているうちに少しずつ表現したいものが増えてきた気がしています。
（商品開発をしていた前職にも影響を与えた本なのでぜひ読んでみてください。）
まとめ
今回はバナー模写のやり方についてまとめてみました。
簡単に要約すると、
模写方法：見本のバナーを見つけてそれをそっくりそのまま再現する（スピード＆質を意識する）
おすすめ理由：デザインの要点を見つけることが出来、テクニックが上達し、デザインの幅が広がる
最初は操作方法もわからず時間がかかるため、ヤキモキしてしまうことも多いです。
ただ、思った通りに表現できるようになってくると、作業する楽しさも倍増するのでぜひできるだけ間隔を空けずにたくさん作ってみてください。
本日もお付き合いありがとうございました！
