谷町くんよし、バナーの模写するぞ!



ちょっとまってー!
まだ先に知っておくことがあるよ。
基礎知識を始めに理解してから模写をスタートしましょう。
バナーの目的を知る
バナーのことは知っていますよね?
ネットで検索してたどり着いたサイト内であったり、SNSでの画像であったり、いたるところで見ることが出来ます。
では、バナーの目的とはなんでしょうか??
多くの場合、バナーの目的は広告になります。
広告画像として作成して、クリックしてもらう事が目的でデザインされます。
商業デザインと呼ばれるもので、アートとは全然違うものになります。
バナーの場合は、クリック率(CVR)などが数字で全部出ますので、どれだけかっこよくて、オシャレでもクリック率が低いと差し替えられます。
つまり、クリックしてもらえるデザインにすることが重要です。
そのために、自分が作成したデザインがどこで、誰の、何のために使用されるのか、事前に考えたり知った上でデザインするように心がけてください。


△こういったディスプレイ広告は、Googleやyahooを通じて出せます。このディスプレイ広告の目的は、見た人がクリックして目的のサイトへ進むことですので、これを考えた上でデザインする必要があります。
ブログとかの、記事下やサイドナビに出力されることが多いです。
⇒バナー作成完全ガイド! 作成のコツから出稿媒体別サイズまで
https://digital-marketing.jp/creative/tips-for-creating-banners
バナーのサイズを知る
バナーデザインをする上で知っておくことがあります。
それは、サイズが複数あって規約があることです。
出稿する広告によってサイズが変わるので、詳しくは下記の一覧を確認してください。
▽以下の参考記事に、バナーサイズの一覧の図があります。おすすめと書いてあるサイズが、よく使用されるサイズです。
現場では、一つのデザインに対して複数のサイズのバナーを作ることがありますので、バナーを作った時は、同じものを違うサイズで作る練習をすると良いでしょう。
模写用のデザインを探そう
ここから、模写する用のデザインを探しましょう。
探し方にコツがあります。
主に、この分け方で探しましょう!
サイズは、基本的によく使われるサイズを3パターンほど使います。
デザインの用途で探す分け方は、
このように、色んなパターンのデザインに対応できるように、好き嫌いせずにデザインしてください。
初心者にありがちな、好きなデザインばかりしていたせいで、デザインスキルに偏りができてしまうことがあるので注意してくださいね。
以下のようなサイトから、バナーのデザインを探します。
バナーを模写しましょう!
模写はただトレースしているだけでは意味がありません。
練習として地味なので、模写を嫌がる人も多いです。
ただ、デザインのルールもわからず、引き出しが少ないうちは効果的なトレーニングです。
特に以下の点で効果が見込めるので、数点は模写してみましょう!
①手を動かすのでデザインツールに慣れる(1回で理解は無理)
②デザインのルールを分析できる
③デザインの表現方法に触れられる
模写の時に意識すること
①デザインの4原則の使われ方
②レイアウトのルールと見せ方
③フォントの使い方や種類
④カラーの使い方と見せ方
⑤写真と扱い方
⑥あしらいの使い方
⑦デザインのメリハリの付け方
今回は、こちらで選んだバナーを模写します。
データを貼り付けてあるのを、右クリック→画像のダウンロードで落としてください。


練習として、このバナーを模写してください!
Photoshopの操作については、これより前のPhotoshop基本操作で勉強して下さいね(^o^)
トレース(デザイン)の前の注意事項



今回は、Photoshopでトレースをするので注意事項があります。
広告は小さいものもあるので、デザインツール内でデザインしているときは「ガビガビ」「荒れている」用に見えます。
これは拡大・縮小をしてデザインしているためです。
Photoshopはピクセル形式のデザインツールなため、100%サイズより拡大すると荒れて見えちゃいます。
等倍サイズ


拡大サイズ


文字・写真など特にぼんやりしていますよね。
このように実際の使用のサイズ(等倍)で確認する必要があります。



このような仕様のため、自分で1からデザインするときにも起こりますが、そういった仕様なので気にしないようにしてください!
実際にやってみよう!



ちょっとしたバナーを一個作るだけでも、時間がかかるね。
動画では、作業効率を上げるために以下のことをしているので、みんなも意識してみると良いでしょう。
・ショートカットキーを使う
・コピペできるものは、コピペして複製しながら作業をする
デザイン分析シートを活用しよう!


一緒にバナーを作る過去講座
【特別講座】インパクトのあるバナーから基礎と応用を学ぼう!
https://torikumu.com/member/bnr/
【特別講座】CFバナー講座第2弾
https://torikumu.com/member/bnr2/
【特別講座】CFバナー講座第3弾
https://torikumu.com/member/bnr3/


バナー模写を3つくらい作成すると、Photoshopに慣れてくるので余裕があればどんどんチャレンジしてください。
その際のバナーは自由なものを選んで模写してください!
講座を完了したらクリックしてね!