はじめに
彼らのキャリアのある時点で、ほぼすべてのデザイナーはバナー広告のセットを設計する必要があります。 彼らは彼らの最初のバナー広告を行っていたことを私に言った誰かに触発され、私は何千ものバナー広告を設計し、アートは長年にわたって何千もの方を指示しているので、このデザインのサブジャンルを調べるのは良いことだと思った。
この記事では、デザイナーがこれらを変更できないため、広告が表示されるページの種類やクリックスルー率などの問題には触れません。 私はそれらをより魅力的に見させるために旗を設計することの技術を専ら見る(そしてうまく行けばもっとclickable)。
バナー広告は、
バナー広告の風景
に接続しているページを標識する必要があります最も一般的なオンラインバナー広告は、MPU（Messaging Plus Units）、leaderboard、およびskyscraperです。 これらは、図形がwebページの幅（リーダーボード）または個々の列（Mpuおよび高層ビル）内に収まるように、web上に表示されます。 このような場合には、以下のようなことが考えられます。
バナー広告は通常、既存のキャンペーンの一部となるため、その成分はクライアントによって提供される可能性があります。 キーは2秒のウェブサイトのユーザーに興味深い方法でそれらの原料を結合するか、または広告をスキャンすることを使うように(広告を周辺にスキャンしていればより少し)。 説得力のあるイメージ/メッセージで彼らの注意をつかみ、次に何をしたいのかを明らかにすることが重要です。 あなたの目を細め、広告に明らかな焦点がなければそれから働くことはまずない。
バナーは、webユーザーがクリックしているものを明確に示すべきだと強く感じています。 このようにして、ユーザーはそこに送信した広告のようなページに到着します。 そうでなければ、彼らは自然に失望したり、彼らが期待していたもののように何も見えなかった場合に延期されます。
その結果、私は通常、バナー広告を設計するときに先のページを最初に見て、そこから逆方向に作業します。 次にそれは広告のさまざまな原料の右の階層を解決する場合である(例えばロゴ最初にしかし小さい、見出し次しかし支配的な等。). その後、コピーに結び付け、目的のアクション/応答を綴る適切なアクション呼び出し（CTA）を追加します。 メッセージングの階層がソートされると、3つのバナー広告サイズに個別に適用できます。
要素は、正方形の形状
Mpuのために、ほとんどのMpuで互いに競合します(300×250)
MPU（Messaging Plus Unit）は、通常、ページの狭い右側の列に配置され、その結果、フォーマットがほぼ正方形で、サイズが小さくなり、折り目の上に表示されます。 Squarish形式は、人間の目がやや水平（横長形式）またはより深い（縦長形式）画像を好むため、構成上の問題を提示します。
私は、Mpuのロゴ、イメージ、見出し、CTAのミックスは、多くの場合、広告の焦点を形成するための四つのいずれかの余地を残していないと感じています。 これは、すべての要素がwebユーザーの注意を喚起するために互いに戦っているHPとX-Factor Mpuで簡単に確認できます。 どちらの場合も、背景は単に要素を配置するためのタブレットとして使用されます。
対照的に、上記のCSI MPUは背景画像を使用して、影から出現させることによって要素をまとめました。 丸で囲まれた銃、黄色の証拠カード、足の手も影から出てきて、トーンを設定し、コピーが読まれていない場合は目に他の視覚情報を提供します。
見出しはリーダーボード
リーダーボードの重要な焦点要素です(728×90)
リーダーボードの長い水平形状は、上記のHPの例のように、一連の等しいチャンクとして要素を使用するデザインにつながる可能性があります。 しかし、私は見出しが他の二つのバナー広告ユニットよりもはるかに大きい場合、リーダーボードは、より多くの影響を持っていることを発見しました。 これは明らかにあなたがすぐに広告をスキャンした場合でも、キーテイクアウトは”あなたはそれを持っている”です上記のX-Factor広告で実証されていますか？”
リーダーボードは通常、ページの一番上に配置されているので、見出しに焦点を当てることは、新聞や雑誌を読んでからの残留記憶であるwebページをどのように処理するかという既存の心理学に適しています。
ディスプレイ解像度のサイズが大きくなるにつれて、以前の728x90sはますます冗長になります（もともとは1024×768解像度用に設計されています）。 この結果、CBS Interactiveは、サイトのネットワーク上のすべての728×90を970x66s（スーパーリーダーと呼ばれる）に置き換えるために動いています。 これらの新しい広告は、サイトのユーザーのためのより少ない侵入であり、すべての今970px幅である様々なページとよりぴったりフィットします。 スーパーリーダーの追加された長さと浅い深さは、キャンペーンの見出し駆動の反復にさらに適しています。
倍は、ユーザーがスクロールダウンするまで半分に切ります。
細長い超高層ビルは、小さな見出しと大きな画像を持っています
超高層ビル(160×600)
Mpuとリーダーボードは通常、折り目の上のページに配置されますが、超高層ビルはページの折り目によって半分にカットされます（通常は約600px下–上の図を参照）。 その結果、ロゴ、見出し、CTAなどの重要な情報は上半分にある必要があります。 超高層ビルの狭さはまた、彼らの見出しが小さくなる傾向があることを意味します。
私の経験では、高層ビルは情報が重く、画像が軽いページに配置される傾向があることがわかりました。 彼らはMpuやリーダーボードよりもimagaryのためのより多くの部屋を持っているので、これは超高層ビルに最適です。
高層ビルの上の3つの160×600の例では、左から右への折り目を考慮して設計されています。 HPの超高層ビルでは、上記のすべての要素が同等の卓越性を与えられており、その結果、目に焦点がありません。 Xファクター広告は、キャンペーンの他の反復よりもプレゼンターが大きくなっていますが、小さな見出しは他のすべての要素に圧倒されています。 CSIの超高層ビルでは、より大きな画像が要素を一緒にもたらし、第二のロゴは上部に少し過密を引き起こしています。
この728×90バージョンの広告を以下の300×250と比較する（アニメーション広告を参照）
アニメーションは、時間の経過とともに要素を分割するのに役立ちます
アニメーション
バナー広告にアニメーションを追加すると目が引くことは言うまでもありません。 バナーのFlashバージョンは、時間の経過とともにこれらの要素を分割するのにも役立ちます。 上の同盟国728×90では、完全な鉛筆を示すことは、目が次に何が起こるかを見るのを待っている300×250バージョンよりも魅力的ではありません。
最近、アニメーション広告にはより多くのリプレイボタンが表示されています。 彼らは、タブレットやスマートフォンなどのフラッシュが再生されない環境では、デフォルトのJpegとしてロードされるように広告の静的バージョンは、再び、より関連性の高いとなっています。
アニメだけでは広告を良くするのに十分ではありません。 まだそれ以外の場合は、クレジットスコア、食事、抵当条件広告をつかむすべてのそれらの安い注意のようなものに向かってveers広告で説得力のある 私はもともとこの記事のために上記の二つの同盟国の広告をアニメーションGifに変えていましたが、私（そしておそらくウェブ上のほとんどの人）がお互いの上に積み重ねられたアニメーション広告を無視するのに慣れているので、私の目は自動的にそれらをスクリーニングしました。
バナー広告デザインのヒント
私はここで非常に多くのバナー広告をやったので、私は長年にわたってピックアップしたいくつかのヒントがあります。 彼らは明らかに見える場合は謝罪、私はそれらが常に適用されていない参照してくださいので、私はそれらを述べています:
コピー
•ユーザーが
を読むのが難しいので、すべての大文字のコピーを避けてください•見出しと本文のコピーは、読者が
をスキャンしやすくするために、異なるサイズを持つ必要があります•見出しおよび/または本文のコピーは、三つ以下の行にする必要があります
•メッセージングの階層を保持し、すべてのテキストを一貫して整列させる必要があります(左、右、中央)
•スペースを節約するために、興味深いタイポグラフィを画像として使用することを検討してください。less要素
アクション呼び出し(Cta)
•は短く、”今すぐ行く”や”チェックする”のようなポイントにする必要があります Out”
•160×600と300×600単位（ユニットのほぼ中央）の折り目の上にある必要があります
•スキャンを容易にするために、各単語の先頭に大文字である必要があります
Buttons
•派手に見えずに対照的な色である必要があります
•コピーの終わりおよび/または右下に位置する必要があります
•コピーの終わりおよび/または右下に位置する必要があります
•コピーの終わりおよび/または右下に位置する必要があります
•コピーの終わりおよび/または右下に位置する必要があります。バナー広告のセット全体のサイズ
*明らかにバナー広告のテキストのみのリンクよりも多くのクリックを取得します（後者はよりエレガントに見えますが）
misc
*広告に1pxの灰色の境界線を追加します 白い背景で-それは白いページに配置することができます
*最初のラウンドの承認のために私は時々アニメーションGIFに個々のPhotoshopのフレームを回す
*最終的な提出
ページスキンは、
結論
ウェブユーザーはバナー広告（および一般的な広告）を見ることに慣れているので、先に多くの変更があります。 MPUの三位一体は、リーダーボードと超高層ビルがバナー広告の風景を支配しているが、私は他のサイズは、このような640×480インタースティシャル（ビデオがより優勢になると）と300×600″ハーフページ”広告のように、より一般的になってきている見てきました右の列を支配するために深いMPUを持っています。 将来的にインターネットを移入する可能性が高い新しいユニットの完全なリストについては、ここをクリックして、件名にIABのページをチェッ
より包括的で調和のとれたブランディング体験のために、ページスキン（または”壁紙”）は、バナー広告を一緒に包むように、インターネット上で（特にIMDBで）より多く 私たちは、CBSインタラクティブで年間約900スキンを行います（続きを読むには、このpdfをダウンロード）。 スキンがあまりにも多くなるにつれて、特にRFPsで求められているカスタムメイドのリッチメディアの買収の増加もあります（これについての詳細はこちらの私の記事を参照してください）。 しかし、スキンとリッチメディアの両方の買収のために、ページ上の標準的なバナー広告とそれらのユーザーの経験と連携して動作するように広告のエク
付録
バナー広告の歴史：http://en.wikipedia.org/wiki/Web_banner
インタラクティブ広告局（IAB）の基準:
http://www.iab.net/guidelines/508676/508767/displayguidelines
折りたたみ:http://en.wikipedia.org/wiki/Above_the_fold
特定のブランドのバナー広告を検索:http://www.moat.com
画面表示解像度:http://en.wikipedia.org/wiki/Display_resolution
DIY広告作成:http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
Adobeからのバナー広告: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
いくつかのクラウドソースバナー広告ページ:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
いくつかの安価な（と過密）webバナーデザインサイト:
http://www.justgothere.com/web_banners/web_banner_example/300x250_web_banner_example.htm
http://www.decentbanners.com/portfolio_300x250.html
http://www.banner4five.com/business_banners_300x250
