ferret編集部：2015年8月6日に公開された記事を再編集しています。

バナーくらい短時間でできる！と意気込んだものの、思った以上に時間をとられることはありませんか？

簡単な作業だと思っていたはずが、何回も似たような作業の繰り返しをしているとイライラしてきたり、モチベーションも保てずと負のサイクルへ陥ってしまいます。
　　
そのような問題を解決するためには、バナー作成のための各工程を分解して、何にどれくらい時間がかかっているのかを知り、効率よく作成する方法を知る必要があります。

今回は、30分でバナーを作るための方法として、作業工程と効率化が図れるポイントを順序立てて解説します。
　　

広告バナー制作の全体像

短時間でバナーを作成する前提条件

制作全てに言えることですが、最短距離でゴールまで走るというのが一番の理想型です。バナー制作においても同様です。そのためにも、ゴールまでの筋道を立てる必要があり、ステップを1つひとつ踏むことで、時間短縮が可能になります。

※今回ご紹介する方法は、バナー制作をする上で必要な最低限の知識があることが前提条件です。
　　

30分でバナー制作を行うための具体的な8つのステップ

整理するための方法として、アナログな方法が効果的な場合があります。

今回の手順の中には、紙とペンを使う工程がありますので、紙とペンのご用意をお願いします。
　　

STEP1：サイズを確認し「やること・やらないこと」を決める【アナログ作業】

制作するバナーによって、何を盛り込むかが変わってきます。

やること・やらないこと（できること・できないこと）を先に決めてしまうことで、後々の工程で迷うことが減ります。

バナー作成で時間がかかってしまう場合、最適な回答を探すため何回も似たような作業を繰り返し行う結果、無駄な時間を浪費している場合があります。それを防ぐために、最短距離の道のりを始めに作ります。

このステップで何をバナーの主役にするのかを決めてしまいましょう。例えば、文字をメインにして写真を添えるのか。写真を魅せるようにして文字を添えるのかなど。
　　

STEP2：必要な素材を書き出す【アナログ作業】

バナーに盛り込む素材をリストアップします。

例えば、

・キャッチコピーならメインのものだけにするのか
・メインコピーを補うためのサブコピーを用意するのか
・画像素材を使用するならばどういったものを使用するか
・テーマカラーは何にするか

などになります。商品名や会社ロゴも盛り込む場合もあります。

※写真や文字を加工する場合、複雑なものであればそれだけで時間が取られてしまうので、簡単な加工をする（もしくは全くしない）というのを前提で今回は進めています。
　　

STEP3：キャッチコピーやサブコピー案を出す【アナログ作業】

キャッチコピーに関しては、バナー作成者に一任されている場合もあれば、逆にコピーライターが用意してくださるものもあります。
訴求ポイント、もしくはメインターゲットが興味を持つコピーを考えましょう。文章が中々出てこなかったり、メッセージが弱かったりする場合は、単語を入れ替えることによって補強することができます。

※バナー作成する際にその商品やサービスが全くわかっていなく、伝えたいターゲットも不明な場合、バナー制作は30分では不可能に近い（作成できたとしても伝えたいことが的外れな場合もあります）ので、今回はそれがわかっている前提で進めています。
　　

STEP4：要素を構成し、優先順位付けをする【アナログ作業】

キャッチコピーやサブコピー、写真など伝えたいものに優先順位を付けます。
　　

STEP5：「手書き」でレイアウトする（ラフの作成）【アナログ作業】

バナーのラフを作成する際、手書きで行うことによって注釈を入れることができます。

例えば、キャッチコピーのフォントは何にしようか加工はどうしようか。背景色は何色だろう。画像をどういった形で入れて、どういった加工をするのだろう？
など、メモ書きを実際に入れることでバナーの設計図ができ上がっていきます。これを元に、デジタル作業へ移行していきます。
　　

STEP6：ラフを元に配置する。文字は単色で入れ、全体を調整する【デジタル作業】

作成したラフを元に、素材を配置していきます。文字はそのまま入れてしまう場合、体裁が悪いのでカーニングの設定などを行って整えます。そして、画像や文字の入れ方など全体的に調整します。

文字間の空間が空いたりズレが生じてしまっている場合、人は違和感を感じます。そういった細かい点を自然に魅せるのがクオリティを高める要因です。
　　

STEP7：配色を確定させ、素材を加工する。色のイメージは、サイトやサービスに合わせる【デジタル作業】

基本的に配色は、ホームページのイメージに合わせるようにしましょう。実際に誘導先のホームページで使用されているような色を使うことで時間短縮にもなります。
　　

STEP8：最終確認作業。一度モノクロにして視認チェックも行う【デジタル作業】

バナーが完成したら一度モノクロにして、視認チェックを行いましょう。モノクロにして読みづらい場合は、完成したバナーも読みにづらい場合もあるため、最終調整を行います。