まずは真似から!Photoshopでバナーを模写してみよう

谷町くん

よし、バナーの模写するぞ!

トリペン先生

ちょっとまってー!
まだ先に知っておくことがあるよ。

基礎知識を始めに理解してから模写をスタートしましょう。

記事の内容

バナーの目的を知る

バナーのことは知っていますよね?
ネットで検索してたどり着いたサイト内であったり、SNSでの画像であったり、いたるところで見ることが出来ます。

では、バナーの目的とはなんでしょうか??

多くの場合、バナーの目的は広告になります。
広告画像として作成して、クリックしてもらう事が目的でデザインされます。

商業デザインと呼ばれるもので、アートとは全然違うものになります。
バナーの場合は、クリック率(CVR)などが数字で全部出ますので、どれだけかっこよくて、オシャレでもクリック率が低いと差し替えられます。
つまり、クリックしてもらえるデザインにすることが重要です。

そのために、自分が作成したデザインがどこで、誰の、何のために使用されるのか、事前に考えたり知った上でデザインするように心がけてください。

△こういったディスプレイ広告は、Googleやyahooを通じて出せます。このディスプレイ広告の目的は、見た人がクリックして目的のサイトへ進むことですので、これを考えた上でデザインする必要があります。
ブログとかの、記事下やサイドナビに出力されることが多いです。

参考サイト

⇒バナー作成完全ガイド! 作成のコツから出稿媒体別サイズまで
https://digital-marketing.jp/creative/tips-for-creating-banners

バナーのサイズを知る

バナーデザインをする上で知っておくことがあります。
それは、サイズが複数あって規約があることです。

出稿する広告によってサイズが変わるので、詳しくは下記の一覧を確認してください。

▽以下の参考記事に、バナーサイズの一覧の図があります。おすすめと書いてあるサイズが、よく使用されるサイズです。
現場では、一つのデザインに対して複数のサイズのバナーを作ることがありますので、バナーを作った時は、同じものを違うサイズで作る練習をすると良いでしょう。

参考記事:【2025年最新】GDN・YDNバナーサイズ一覧
https://www.uniad.co.jp/220101

模写用のデザインを探そう

ここから、模写する用のデザインを探しましょう。
探し方にコツがあります。

・サイズで探す
・デザイン用途で探す

主に、この分け方で探しましょう!
サイズは、基本的によく使われるサイズを3パターンほど使います。

デザインの用途で探す分け方は、

・ジャンルで分ける(キャンペーン・セールなど)
・業種で分ける(ビジネス系・イベント系・ファッション系など)

このように、色んなパターンのデザインに対応できるように、好き嫌いせずにデザインしてください。
初心者にありがちな、好きなデザインばかりしていたせいで、デザインスキルに偏りができてしまうことがあるので注意してくださいね。

以下のようなサイトから、バナーのデザインを探します。

◎レトロバナー
https://retrobanner.net/

◎bannnner.com
https://bannnner.com/

◎ピンタレスト
https://www.pinterest.jp/

バナーを模写しましょう!

バナー模写の目的

模写はただトレースしているだけでは意味がありません。
練習として地味なので、模写を嫌がる人も多いです。
ただ、デザインのルールもわからず、引き出しが少ないうちは効果的なトレーニングです。
特に以下の点で効果が見込めるので、数点は模写してみましょう!

①手を動かすのでデザインツールに慣れる(1回で理解は無理)
②デザインのルールを分析できる
③デザインの表現方法に触れられる

模写の時に意識すること
①デザインの4原則の使われ方
②レイアウトのルールと見せ方
③フォントの使い方や種類
④カラーの使い方と見せ方
⑤写真と扱い方
⑥あしらいの使い方
⑦デザインのメリハリの付け方

今回は、こちらで選んだバナーを模写します。
データを貼り付けてあるのを、右クリック→画像のダウンロードで落としてください。


練習として、このバナーを模写してください!
Photoshopの操作については、これより前のPhotoshop基本操作で勉強して下さいね(^o^)

トレース(デザイン)の前の注意事項

トリペン先生

今回は、Photoshopでトレースをするので注意事項があります。

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

Macなど解像度が高いPCを使用している場合は、解像度が2倍になります。

等倍サイズ

拡大サイズ

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

トリペン先生

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

実際にやってみよう!

記事の内容