バナーデザインをスピードアップさせる方法！

• By サワワ
• 2016年2月24日
• バナーデザインをスピードアップさせる方法！ はコメントを受け付けていません

バナーデザインをスピードアップさせる方法！

こんにちはふたっぱインターン生のサワワです。今日はインターンを担当している方にお願いして女性をターゲットにしたバナーデザインをさせて頂きました。ここにも何度か書いていましたが、バナー制作も何度目かになってきましたので今回はスピードアップ法について書きたいと思います。

五里霧中！

学生時代、四字熟語の覚え方の本にゴリラがバナナを夢中なって食べてて周りが見えなくなっているっていうイラストがあってそれが的を得すぎてて今でも忘れられません。
いままではやみくもに取りかかっていたのですがそれでは毎回どこから手を付けていいか分からず手間がかかってしまいます。バナー制作時の考え方のテンプレを自分なりに用意しておくと作っていくごとにブラッシュアップされ成長していくと思います。

キャッチコピーを考える。

バナーとは「のぼり」や「旗」という意味があり、お店などをアピールして来店して頂く役割をするものだそうです。そしてwebではクリックさせてランディングページなどに飛ばせるためのものになります。つまり見る人が思わずクリックしたくなる文言を考える必要があります。

• 文字数は極力少なく
• メリットを分かりやすく表現

この点に注意して制作していきます。メインコピーとサブコピーの二つほど用意しましょう。

構成する要素を置いてみる。

文言が決まれば画面に配置しなければならない要素を置いていきます。僕はフォトショップ上でやってます。だいたいメインコピー、サブコピー、商品画像、商品名、会社ロゴとなるとおもいますのでこれらを一旦適当に配置します。

重要度を決める。

配置出来たら、それぞれの重要度を決めます。まぁ、大概メインコピーが一番になると思います。一番から順に決めていきます。
１・メインコピー　２・商品画像　３・サブコピー　など。

手書きでレイアウトする。

重要度が決まったら、それにそってレイアウトを決めていきます。目線の流れなどはセオリーがありますので基本的にはそれに沿って作ります。

グレーでレイアウトする。

手書きである程度レイアウトが決まったらphotoshopでレイアウトしていきます。このときいきなりカラーでがっつり取り掛かるのではなくいったんグレー作っていきます。カラーで始めるとそっちに意識が行ってしまいレイアウトに集中できなくなるからです。なんかこの色いやだなーとか思いながらレイアウトも考えながらだと前に進まなくなってしまいます

文字間を調整する。

カーニングというやつですね。デフォルトだと文字間がバラバラなので詰めたり広げたりしてスッキリさせます。

色を決めていく。

ここでようやく色決めです。グレーの状態でレイアウトをしっかり見てきたのでここでは色だけに集中できます。そして配色はそのサイトのデザイン、もしくは飛ぶ先のサイトのデザインに合わせます。適当にしてしまうとサイト内で浮いたデザインになってしまいます。

ここまでくれば完成です。念のため、もう一度グレーにして全体のバランスを確認するとより完成度の高いバナーが出来ると思います。
僕も今日から取り入れたばかりですが、考える内容がクリアになって作業が少し楽になりました。自分なりのルールを作ると次からそれに沿って作業していけるので改善点なども見えてきそうですね。

ありがとうございました。