広告用バナー、こうやって考えてつくってリサイズしてます（実演付）
こんにちは、デザイナーのかわさきです。
マウントレーニア（カフェラッテ）の美味しい季節になってきました（個人的に）。ちなみに「コーヒー豆2倍」が売りのダブルシリーズはレッドブル並みに目が覚めるので、眠たい時におすすめです。
さて本題です。
マグネッツでは普段お仕事にて広告用のバナーもよくご依頼いただき、制作しているのですが、今回は受注からデザイン制作・サイズパターン制作までの流れを、実例をつくりながら解説してみようと思います。
目次
まずは着手前に確認！
では、架空のバナーで実演してみます
終わりに
まずは着手前に確認！
出稿先を確認
掲載する媒体やメディア（PC向け/スマーホフォン向けなど）によって必要なサイズや容量が変わってきます。
また、対象になるユーザーや用途も変わってくるので最初に確認しましょう。
主な出稿先としては、以下の様なものがあります。
純広告
ポータルサイトやニュースサイトなど、決まったサイトの広告枠。サイトユーザーを意識した制作を心がけましょう。
アフィリエイト
A8ネット、バリューコマースなど。アフィリエイター自身が選んで使用するので、使いやすいサイズやデザインを用意する必要が出てきます。
Google AdWords
Googleが提供している広告サービス。サイトの内容やサイトユーザーの興味関心に併せて自動で配信されるので、色々な広告内容で使用しやすいサービスです。
例えばマグネッツのブログにも試験的に入れているのですが、磁石を販売しているサイトのバナーが出ているのをたまに目撃します。すみません、それちょっと違が…
バナーの必要サイズ・規定を確認
大体規定をまとめた規定書やサイトがありますので、そちらをしっかり確認します。
また、クライアントにその他気をつけること・必要事項がないかも確認しておきましょう。
確認する内容としては…
- バナーサイズ（横：○○px × 縦：△△px、複数サイズ必要な場合も多い）
- 静止 or 動画（動画の場合、gifアニメなのか？Flashなのか？）
- 容量（ほとんど ○○kb以内 などの指定あり）
- 形式（gif、jpg、png、swf など）
- 別パターンのデザインが必要か（効果を図るため、別のデザインや文言・写真などをちょっと変えたものを準備する場合もあり）
などになります。
動画バナーの場合、代替イメージを準備する・ループ回数・秒数…など細かいルールが更に多いのですが今回は割愛します。
誘導先のページを確認
例外はありますが、基本的に誘導先のページと内容やデザインがかけ離れ過ぎないデザインを心がけます。理由としてはあまりにも違う内容やデザインの場合、ユーザーが戸惑ってしまうからです。
納期の確認
他の制作物でも当たり前ですが、純広告のバナーは「掲載○営業日前までに入稿」など、きっちり締め切りが決まっている場合が多いので、しっかり確認しておきます。
バナーに掲載する情報やデザインテイストを確認
バナーに盛り込みたい原稿や素材・構成を確認します。
文言はリサイズがある場合、サイズによっては削る必要が出てくるので、絶対外せないものがあるか・優先順位などがあるか…なども予め確認しておいた方がいいかもしれません。
ディレクターさんによってはPowerPointなどで実際のレイアウトに近い構成を出してくれることもありますが、そのまま全く同じものをつくってしまうとデザイナーの面目丸つぶれですので、意識しすぎず、最適なレイアウトを考えるようにしましょう。
では、架空のバナーで実演してみます
前提条件を改めて確認
今回は下記のような設定で行きます。
出稿先
Google AdWords・イメージ広告
必要サイズ・規定
イメージ広告 – AdWords 広告掲載のポリシー ヘルプ によると、様々なサイズがあるのですが、今回は
- レクタングル（大）: 336×280
- インライン レクタングル: 300×250
- スクエア: 250×250
- ビッグバナー: 728×90
- バナー: 468×60
- ワイド スカイスクレイパー: 160×600
- スカイスクレイパー: 120×600
- モバイル バナー（大）: 320×100
をつくることにします。
容量は全て150kb以内です 。
誘導先のページ
今回は架空のバナー制作なのでURLがないのですが、「総合オンラインショップのお中元特集」への誘導と設定して進めます。
バナーに掲載する情報
あ、お中元贈らなきゃ！
★まぐモールのお中元2014
★全国どこでも送料無料
★7/20まで最大50％off
→詳しくはこちら
制作意図・デザインに関する注意事項
- 例年お中元を贈る習慣がある人向け
- ★が付いているコピーを優先
- 「送料無料」と「期間限定の割引」は目立たせたいポイント
- スペースに余裕があれば、誘導するようなボタンを設ける
- 写真を豊富に使用し、品揃えが豊富なことをアピール。ただしコピーを優先させる
- お得感であることはアピールしたいが、あまり安っぽくならないように
- 夏らしいデザインに
納期は割愛。
それでは、早速作っていきます！
マグネッツではバナーを作る際、特に指定がない場合はまずは（発注されたサイズにある場合）336×280 もしくは 300×250 サイズを作成し、デザインの確認を取った上でリサイズを行います。
理由としては、一番使用されることが多いサイズであり、かつ正方形に近いサイズなのでそれ以外のサイズにリサイズ展開しやすいからです。
まずはざっくりレイアウトやフォントを考えていく
まずはキャンバスにコピーを置いてみます。
今回は直接PCで作り始めましたが、一度手書きのラフなどをつくったほうがいいかもしれません。
その後、色は付けずに実際の配置を考えながらレイアウトしていきます。
キーカラーが決まっている場合は色をつけながら作っていくこともあります。
（四角く並べている箇所に、商品写真を並べようかなーなどと考えつつ…。）
ベースのデザインを作成してる段階で気をつけているのは以下の点です。
メリハリがあるか？
目立たせたいからといって全ての文字を大きく入れるわけには行きません。目立たせたいポイントを絞って配置したりサイズ感を決めますたりします。
揃っているか？ただし、逆に揃いすぎていないか？
文字やオブジェクトが無秩序においてあると見づらくなるので、ある程度揃えるように心がけて配置します。今回は左側を揃えて配置しています。
ただ、あまりに揃いすぎると面白みのがなく、パッと目を引かないので、私は一部分を外したりしてポイントを設けています。今回は「あ！お中元贈らなきゃ」の部分を吹き出しのセリフ風に入れてみました。
変な余白がないか？
個人的にバナーは、余白を活かしたデザイン以外は要素を詰めて配置したほうがバランスよく仕上がるなと思います。今回のレイアウトだと、「50％off」の横が不自然に空いているので要検討です。
文字周りの処理はしっかりと
小さいスペース内なので、甘い処理をしていると非常に目立ちます。字詰めや行間などしっかりとバランスを見て調整しましょう。
文字がきちんと読めるか？
小さなスペース内で制作することになりますので、文字も小さくなりがちです。予定していたコピーを入れてみてあまりにもきちきちになりそうな場合、コピーを推敲したり、削除を検討します。
また、数字はフォントによって読みづらくなることもあるので、そのあたりもチェックします。「50％off」が「60％off」に見えてしまう…など、かなりまずいです。
デザインをつくりこんでいく
ざっくりレイアウトが固まった時点で、写真やイラストを配置しつつ、色や効果をつけていきます。
今回は「夏」と「和風」を意識して、淡いブルーと渋目の色を使用しました。色を使用するときに迷う場合は、写真からチョイスすると破綻しづらいです。
「50％off」の部分が文字を置いただけでは上のメインコピーと見分けづらいと感じたので、下にリボン帯を敷いて区切りをつけました。ここだけゴールドのグラデーションを使用し、ポイントとしています。
…というわけで完成したのがこちらです。
途中のキャプチャを撮り忘れたので、お料理番組のラストみたいになってしまいすみません…。
Google AdWordsの規定に「広告であることを明確に識別でき、ページのコンテンツと区別できる広告にする必要があります。」と、ありますので、白い背景などページと同化しやすいデザインの場合、忘れずにバナーの周りに枠つけましょう。
というわけで、1サイズ目完成です。
リサイズしていきます
1サイズ目を元に、リサイズしてパターンを作成していきます。
インライン レクタングル: 300×250
こちら簡単です。レクタングル（大）: 336×280 と全く同じ比率なので、そのまま比率固定でサイズを変えたらOK。
はい、完成です。
スクエア: 250×250
（ほぼ）正方形 → （完全な）正方形 に。
インライン レクタングル: 300×250 と縦は同じなので、横のキャンバスサイズを縮めて、配置を中央寄りに調整しました。写真が一枚入らなかったのでカットしてます。
ビッグバナー: 728×90
（ほぼ）正方形 → 横長 へのリサイズです。
基本的にオブジェクトを横に伸ばして配置しなおしていく形になります。
写真を全て同じ比率で入れようとすると、一点一点が小さくなってしまったので、5点→3点に減らし、比率を変えて配置しました。
バナー: 468×60
ビッグバナー: 728×90 とほぼ同じ比率になりますので、728×90を活かしてリサイズします。ただし、そのまま横 468pxに縮小すると、縦が58pxとなるので、2pxを調整する必要があります。
また、60％程度縮小されるため、そのまま小さすぎて見づらい文字などが出てくるので、場合によっては削除して調整します。
今回は吹き出しと「詳しくはこちら」のボタンが小さくなりすぎ、そして、重要度も高くないコピーでしたので削除しました。
ワイド スカイスクレイパー: 160×600
（ほぼ）正方形 → 縦長 へのリサイズです。
縦長バナーは中央揃えを意識して制作するとまとまりやすいと思います。横書きで収めると文字サイズが小さくなってしまうので、メインコピーを縦書にするパターンもよく見られます。（今回は横書きにしています）
スカイスクレイパー: 120×600
ワイド スカイスクレイパー: 160×600 が横40px小さくなったサイズです。
横が小さくなった際にはみ出した部分を調整しました。
今回は写真を増やしたりと細かく調整していますが時間がないときは逆に スカイスクレイパー: 120×600 から作成して、ワイド スカイスクレイパー: 160×600 にリサイズすると、余白を設けるだけである程度バランスよくリサイズすることが可能です。
モバイル バナー（大）: 320×100
スマートフォン用のサイズです。小さな画面で表示されることを考慮して、極力文字や要素を削ってシンプルにしました。（と言っても今回のバナーは文字が多いですね…。）
終わりに
いかがでしたでしょうか？
たかがバナー、されどバナー…簡単そうに見えて実はデザインの技術が大いに要求されます。使用する写真や文言、色などでも効果が全然違ってきたりととても奥が深いです。
今回のデザインはとてもオーソドックスな構成・デザインでしたが、もっと色々工夫ができそうですね。
色々パターンをつくって効果を試すことができるのもWEBならではです。
贈り物をを連想させる水引を入れて、シンプルにしてみたり…
どこかで見た年収低そうな感じにしてみた………りはないですね…。
バナー専門のデザインギャラリーサイトなどもありますので参考にされてみてください。
それでは、皆さまもよいバナー制作ライフを！！
【Special thanks：ウラカワ氏（例のモデル）】