バナー模写したいけどやり方がわからない方、やってるけどもっと勉強になる方法はないか気になっている人は多いのではないでしょうか。
そこで今回私が日頃行っているバナー模写の方法や意識していることをシェアしたいと思います。
目次
バナーのまとめサイト紹介
バナーを言語化して分析する方法
バナー模写のやり方
・初級者編
・中級者編
・上級者編
バナーのまとめサイト紹介
まずは模写の手本となるバナーを見つけてきます。いくつかのバナーまとめサイトがあるので自分の好みに合わせて選んでください。
・Retoro banner
サイズ別、カラー別、業種別にバナーを検索できるサイトです。
・Banner Matome
カラー別、業種別、表現別にバナーを検索できるサイトです。
・Pinterest(ピンタレスト)
キーワード検索ができ、バナーだけではなくHPやLP（ランディングページ）など様々なデザインを探すことができるサイトです。アカウントを作成すればシステム上に保存することができます。
・banner gallery
キーワード検索ができ、サイズ別、カラー別、業種別にバナーを検索できるサイトです。
バナーを言語化して分析する方法
デザイン力を磨いていく上でとても重要になってくるのがデザインを言語化することです。
デザインはアート（芸術）ではなく、集客や売上増加などの目的を達成するための手段なのです。ですので全てのデザインには目標達成するためのデザイナーの意図があります。その意図を汲み取り言語化できるようになると実際に自分がデザインする時にどういう風にデザインするかのヒント（引き出し）になりますのでぜひ力を入れて取り組んでください！
言語化する際の注目ポイント
いきなり言語化しようと思ってもどこに注目していいかわからない人が多いと思います。そんな人のために私が言語化する際の注目ポイントを紹介します。
- 選んだバナーデザインのどこをいいと思ったか
- バナーのターゲットはどんなかを、カラーやフォントを元に考察する
- 文字の間隔や行間はどうなっているか
- 文字のジャンプ率（コントラスト）はどうか
- 目線誘導はどうか
- ベースカラーとアクセントカラーはどうか
上記の視点から自分なりの考えをどんどん書いて言語化の練習をしていきましょう。
模写のやり方
模写は重ねて行うのではなく並べて模写し最後に重ねて同じようにでいているかチェックします。
フォントもできるだけ同じフォント使うようにします。
模写する際は分析した項目に注目しながら行うことで単なる作業ではなく自分の身になる勉強となります。
Photoshopでのフォントの探し方
検索したい文字を長方形選択ツールで選択します
書式＞マッチフォントから簡単に似たフォントを探すことができるのでぜひ活用してください！
初級者編
初めての方は文字だけのバナーの模写から始めましょう。
デザインのやり方がわからない時は自分で調べながらやるようにすると新しい技術を身につけることができます。
ある程度できるようになった、もう少し難しいものに挑戦したいと思ったら次のレベルへ進んでください！
中級者編
文字＋イラスト、写真 / デザインが複雑なものや、少し調べたらわかるようなものから模写していきましょう。
慣れてきたら時間を意識して作業をしてみるてください。30分〜1時間の時間制限を設けて練習していきましょう。
また作業効率アップのためにショートカットを覚えて使うようにしてください。慣れるまではショートカット一覧表などを見ながら作業し、指が勝手に動くくらいを目指しましょう＾＾
上級者編
「バナー模写に慣れてきた」、「もう少し難易度の高いものに挑戦したい」と思ったら、サイト模写やオリジナルバナーの作成をしていきましょう。
サイトは全体を模写してもいいですが、時間がかかるので（ファーストビュー、サービスの流れ、申し込みボタン周り等）模写する箇所を決めてやってみることをお勧めします。やる気と時間があればもちろん全体を模写しても構いません！
オリジナルバナーは自分で依頼内容の設定を決めて作ります。
例）ターゲット30〜40代女性の家事代行依頼を考えている主婦
目的 お問い合わせ数の増加
使用したいカラー ピンク系の明るい色
イメージする雰囲気 爽やか、清潔感
サイズ300×250
この架空依頼を元にテキストを考えて素材探しやフォントの選択などを行ってください。ターゲットと目的を達成できるようなデザインを意識して作りましょう！
作ったバナーは自分のデザイン引き出しとして保存しておきましょう！
今回はバナー模写のやり方を紹介しました。
デザイン力の向上のためバナー模写を作業前のルーティンとして取り入れてみてください！
