お久しぶりでございます。
普段はフロントエンジニア兼webデザイナーとして日々精進している山田、いえ
GORILLA-Yこと、ただのゴリラです。
現在私はGrowGroup株式会社でフロントエンジニアとして働いていますが、
前職ではwebデザイナーとし働いておりました。
デザインをしていて初めの頃によく陥っていたのが
「う〜んここがなんか違う」という「目の前の制作物に対する、言葉に出来ないなにか」で延々と悩んだ末に、イタズラに時間が過ぎていってメッチャ納期ギリに叩き込むというスラムダンク納品。
他にもディレクターから「なんか違うんだよねぇ」なんて延々言われ、そのまま作り倒し、
アイディアが尽きて王大人(ワン・ターレン)死亡確認なんてのもよくありました。
今回は上記問題をクリアする
僕なりのワークフローをバナー制作という形でまとめてみました！
はじめに
基本的に「いきなり制作に入るのはNG」だと考えておきましょう。
いきなり入ると行き当たりばったりになりがちなので、全然違うものが出来上がってきたりします。
「自分が今どこにいるのか、どこに向かっているのか」、迷子にならないよう下準備をしてから実制作にとりかかるようにしましょう。
下準備
大別して「要件を抑える」「デザインの方向を固める」の二種類をまとめておくと良いです。
以下を準備しておくと、制作後の「困った！」が軽減します。
要件を抑える
目的を抑える
バナーを作るときはいくつかにパターンが分かれます。新商品が完成したので宣伝のためのバナー。自社サイト内部のコンテンツ誘導バナーなど、さまざまありますが、そのすべてに目的が存在します。なので必ずこの目的は抑えましょう。そしてそれを言葉にしましょう。
言葉にするのとしないのとでは、理解度に大きく差が出ます(経験者かく語りき)。
（例）自社で新商品を開発したからそのプロモーションの一環で、バナーを作成する など。
ターゲットを決める
これも必要です。ですが場合によっては不明瞭なことがあったりするかもしれませんが、必ず据えましょう。
不明瞭な場合は自分で決めてディレクター、お客様に相互に確認をとりましょう。
どうしても決められない場合は、年齢層と性別だけでも決めます。
マストな要望を確認しておく
「これは必ず入れて欲しい」というものを依頼主によっては持っていたりします。
それは写真であったり文言であったりさまざまですので、必ず確認しましょう。
リンク先や設置場所の条件を確認する。
これはバナー制作の場合必須です。以前ネットワーク広告系のバナー制作で、サイズ確認が甘く、大量に作り直した苦い経験があります。
必ず確認しましょう。
・リンク先
バナーはサイト、もしくは特定のページへ誘導するものです。多くの場合というかほぼ定説ですが、リンク先とバナーのデザインが全然違うものだと、
「なんだ違うサイトか」ということですぐ閉じてしまう恐れがあります。最低限テイストだけでも併せたいため、必ず確認しましょう。
・設置場所の条件
広告で外部に出稿する場合、必ず条件があります。
必ず確認しておきたいのはファイル形式、容量、サイズ(縦横比率)です。これを気にせず作ってしまうと後ほど審査が通らず戻ってきたりします。
Retinaディスプレイ対応の広告もあったりしますので、「iphoneで画像が荒れて、全然クリックされなかった」なんてことにも繋がります。
バナー広告を外部に出稿する場合、差し替えも有料ですので必ず確認しましょう。
デザインの方向を固める
ここまでで大体、どんな内容のバナー制作なのかはつかめるかと思うので、
次にその内容に見合ったデザインの方向を固めます。
「誰が」「どうして」「どうなって欲しいか」を言葉にする
誰とはターゲットです。サイト内部コンテンツの動線などではあまり重要ではないかもしれませんが、広告で外部に出稿する場合は必須ですね。
前述のターゲットを想像しましょう。
そしてそのターゲットがあなたのバナーを見てどんな感情を抱くかを想像しましょう。
興味を惹かれて、クリックしたターゲットを想像しましょう。
「何かを伝える」というのはデザインの持つ重要な役割です。
「誰に」届いて「その人がアクションを起こす」テイストを考える
よく「そのデザイン伝わらない」なんて言葉を制作現場では耳にすることが多いかもしれません。
伝えるだけでいいんでしょうか。伝わったその人がアクションを起こしてくれなければ、それは意味がないのではないでしょうか。
それを払拭するためにも、あなたのバナーを見て、その人がアクションをする様子を想像しましょう。
これはキャッチコピーを作るときにとても有効です。決めておきましょう。
制作
いよいよ制作ということですが、まだデザインに入っちゃダメです。
具体的にどんな内容にするかを決めていないからです。
ここで入ると手を動かしながら考えることになり、やはり前述のスラムダンク納品が発生しやすくなります。
バナーに載せる内容(文章)を先にまとめてからデザインに入りましょう。
内容を決定する
広告の内容が決まっていればそれを元に以下の項目に振り分けて抽出していきましょう。
「文章が無いよぉ」という場合は資料をもらうなり相談するなりして、文章を作りましょう。
長文で作り、そこから以下の項目に振り分けて抽出しておくと、キャッチコピーで他の候補欲しいと言われたときも
上手に対応できます。
また、上から優先順位順です。
・メインキャッチコピー
・サブキャッチコピー
・箇条書き項目
・本文
・メインアイキャッチ（画像/イラスト）
メインキャッチコピー
ここが主題になります。見出しですね。
「このキャッチコピーが目に飛び込んできたターゲットは飛びついてくる！」そんなものを用意しましょう。
本デザイン時ももっとも目にとまりやすくしてあげましょう。
サブキャッチコピー
主題を増幅、もしくは補足するコピー文です。リード文と言ったほうがよいでしょうか。
メインキャッチの次に目に留めるよう、デザインします。
ポイントはあくまでサブなので取り外しがきくものにしておくとデザイン時に便利です。
箇条書き項目
おこした長文から文言を抜粋します。ECサイトの広告なんかだと
「送料無料」「24H対応」なんて感じで抜いてキーワードから補足のサービスを伝えようとしたりしますが、
アレです。これも取り外しがきくよう、4〜6つほど作っておくと良いです。
本文
なにぶんバナーは面積が限られますから、ここまでで伝わるようにするのがセオリーですが、
作っておくと「いざ」というとき便利です。使わないのが確定していれば無視しても良いかもしれません。
メインアイキャッチ(画像/イラスト)
外部に出稿するバナー広告であれば、どんなものが考えられるでしょうか。
新商品であれば、商品画像でしょうし、リンク先のキャプチャー画像なんてパターンもあるでしょう。
特にないので人物画像を、というのであればそれがメインキャッチになりますが、
当然画像を使わないケースもあります。その場合は無理して使わずテキストでまとめていきましょう。
また、アイキャッチ画像は配置すると強烈にイメージ付けがされますので、重要度は高いです。
適切なものを先に選んでおきましょう。後から選ぶと死ぬほど迷うことになります。
デザイン準備
このまま入っても良いのですが、以下についてまとめておくと、困ったときに振り返れるので良いと思います
・配色
・レイアウト
・フォント(書体とウェイト)
・装飾素材(アイコン/テクスチャ/パターン…etc)
・余白
特にフォントと配色は重要です。
フォントは決まっているのであればそれを並べておく、配色については
キーカラーやコーポレートカラーが決まっていればそこからパレットをあらかじめ作っておくなどすると良いです。
デザイン
さて、お待たせしました！ここから本当にバナーをデザインしていきます！
これもワークフローとして定義しておくと、迷子になりにくいので良いかと思います。
ワイヤーフレームを用いる
「いきなり何言ってるんだ」と言われそうですが、これ、めっちゃ使えます。
ここでのワイヤーフレームとはメインキャッチ、サブキャッチなど内容を基にしたレイアウト組です。
要素の占有面積の確定や周囲の余白、書体の選定も同時に行えますし、画像の配置イメージもつかめます。
ここで骨組みをざっくり決めてしまうのです。
ゴリラおすすめです。
さらにもっと言うと事前に複数作っておいて、規格別にパターンを自分で作成しておくとひじょーーーに役立ちます。
ぜひトライしてみてください。
全体のテイストが伝わる最低ラインまで持っていき確認を取る
先述のワイヤーフレームを元に、デザインを進めます。
お客様相手であっても、ある程度人に伝わるところまできたら、作りきってしまう前に必ず確認しましょう。
外部サイトの広告バナーの場合、差し替えにもお金がかかりますし、作りきってしまうと修正が大変です。
ある程度で方向性を固めましょう。
確認後、他パターンを作るか、このまま作り込むか決める
確認を取った段階で、「そうそう！この感じこのままお願いします」と作り込みを進められるか、
「他パターンも検討したい」の二択になります。
すりあわせて進めましょう。
完成。お疲れ様でした。
あなたのクリエイティブの全てを叩き込んでください！！！！
まとめ
いかがでしたか？
こうしてフロー化しておくと、自分が迷子になったりしませんし、
例外が来たときも考える際の「軸」があるので良いかなと思います。
ぜひお試しください。
以上ゴリラでした〜
