バナー開発には4つの段階があります。
- アイデア
- 絵コンテ
- アニメーションとプログラミング
- 広告プラットフォームに配置するためのバナーを準備する
アイデア
これが最も難しい部分です。 専門家の約5％が質の高いアイデアを思いつくことができると思います。 制作のすべての可能性と微妙さを理解しているコピーライターがこれを行っているといいでしょう。
多くの人は、印刷のための静的なアイデアからインタラクティブな環境のアイデアに再調整するのが難しいと感じています。 印刷については、ユーザーとの対話を意味するアイデア、つまりインタラクティブなアイデアを開発して実装することもできます。
どの広告アイデアが良いと考えられますか？
- 販売しています。 妥協することはできません。 タスクが1週間で製品やサービスを販売することであるか、ブランドが50年にわたる戦略を構築しているかどうかは関係ありません。 最終的な目標は常に販売です。
- 画像 そのようなアイデアは最終的には販売に役立ちますが、長期的にはそうです。 有名な自動車ブランド、銀行、および長い歴史を持つ企業は、ブランドに対する消費者の忠誠心を高めることに常に取り組んでいます。
- 感情的 バナーには深い意味はありませんが、ブランドは非常に適切な強い感情的な雰囲気で表示される場合があります。 これは、ブランドの認知、望ましい感情とブランドのつながりの発展に大きく貢献します。
- 情報提供 。 場合によっては、「創造性」を過剰に持たずに情報を伝えることは非常に明確です。
怖いリンクを含むこのブロックが評判の良いHabraユーザーからの制御されない攻撃を引き起こす場合、私はそれを削除します。
絵コンテ
ストーリーボードは、アニメーションのキーフレームを含む画像です。
アイデアの提示に必要です。 顧客は、何を支払うのかを明確に理解する必要があります。 絵を描かずに絵コンテを承認せずにバナーをデザインすることは、目を閉じてターゲットを撃ちます。 このアプローチは、バナーの外観が重要でない場合に、キログラムごとにバナーを注文するときに可能です。
垂直バナーストーリーボード（240x400など）を開発する場合、フレームを一列に並べる必要があります。 4を超える場合、2行目以降へのフレーム転送が許可されます。 フレームのシーケンスを理解するのは難しいため、2列3行で6フレームのストーリーボードを表示することはできません。
水平バナー（たとえば728x90）のストーリーボードは、任意の数のフレームを含む列で行う必要があります。
非標準バナー（フライスクリーン、スクリーンスライドなど）の場合、ストーリーボードは、配置されるサイトの背景に表示される必要があります。 各キーフレームには、サイトの背景のスクリーンショットが含まれます。
バナーストーリーボードを描くデザイナーは、構成、色の取り扱い、タイポグラフィの知識が必要です。 後者は、ロシアでのバナー広告の99％が痛い場所です。 ストーリーボードの開発に進むデザイナーは、最初にバナーの重量の制限（KB単位のサイズ）を考慮する必要があります。 大量の高品質のグラフィックスで美しいストーリーボードを描くことができます。 しかし、それは重さで過ぎず、グラフィックは不名誉に縮小し、その結果、私たちは良いバナーの代わりに静かな恐怖を得るでしょう。 この場合、デザイナーは自分が優れたストーリーボードを描いたと主張することはできず、厳しい要件のあるサイトが責任を負います。 ストーリーボードの開発におけるデザイナーの仕事は、デザイン要件を考慮に入れて、アイデアをバナーの重みの既知のフレームワークに変換する問題の解決策です。
サイトの技術要件を備えたメディアプランを手元に用意して、ストーリーボードの実装方法を事前に選択する必要があります。 バナースクリプトが十分に長く、重量制限が25 KBの場合、ラスターを放棄してベクターグラフィックスのみを使用することは理にかなっています。
メディアプランにさまざまなサイズのバナーが含まれている場合は、垂直フォーマット用に1つ、水平フォーマット用に1つのストーリーボードを描画できます。
アニメーションとプログラミング
この作業は、アクションスクリプトの知識を持つモーションデザイナーが行う必要があります。 深いプログラミングが必要な場合は、フラッシュプログラマーとフラッシュデザイナーが開発に参加する必要があります。 バナーアニメーションを技術的な作業と見なして、フラッシュ技術者（プログラマー）に信頼することはできません。 バナーアニメーションは創造的な作品です。
例 。 バナーのシナリオに従って、ポイントが直線パスに沿ってポイント「A」からポイント「B」に移動することを想像してください。 インテリジェントモーションデザイナーは、技術の専門家（プログラマー、技術者）とは異なり、これを無限の方法で行えることを理解しています。 また、ポイントモーションの実装方法の選択は、コンテキストによって異なります。
例として5種類のアニメーション 。
アニメーションの品質
これで、ポイント「A」からポイント「B」へのポイントの直線的な移動は多くの方法で実現できることがわかりました。 常にコンテキストに合ったアニメーションの方法を正確に選択すること、つまり高品質のアニメーションを作成することが重要です。 これはどういう意味ですか？
高品質のアニメーションとは、現実世界に類似物がないオブジェクトの場合に目を楽しませてくれるアニメーションを意味します。 アニメーションのスタイル設定が可能です。モーションやその他のエフェクトを必要なコンテキストで停止します。
現実の世界（車、やかん、木）からのリアルなグラフィックをアニメーション化し、スタイリングを必要としない場合、アニメーションは現実の世界で実際に起こるように動きを繰り返す必要があります。 私たちは毎日車を見ているので、車がどのように動き始め、どのように止まるかを知っています。 木の葉が微風で揺れる様子、葉が外れて強風で飛ぶ様子などを知っています。優れたモーションデザイナーの仕事は、ユーザーがアニメーションを見ないようにすることです。 ユーザーは、車に乗る、ピアノが落ちる、飛行機が離陸するなど、実装技術に注意を払うことなく、本質を見なくてはなりません。 これは、アニメーションで作業するときに忘れてはなりません。
上記は現実的なグラフィックスに当てはまり、アニメーションには適用されません。 後者の場合、アニメーションの様式はより特徴的であり、ビデオに鮮やかな感情を追加します。
場合によっては、特別なスクリプトを使用すると便利です。
- MC Tween： hosted.zeh.com.br/mctween/documentation.html
- GreenSock：www.greensock.com/v11
スクリプトにはサイト上のすべてのドキュメントがありますが、ここで説明するのは意味がありません。 怠け者だけが理解できません。
広告プラットフォームに配置するためのバナーを準備する
上記の手順（アイデア、ストーリーボード、アニメーション、およびプログラミング）から生じる最初のバナーは、ユニークバナーと呼ばれます。 サイトのサイズと技術要件に応じたこのバナーの後続の適応は、サイズ変更と呼ばれます。
ユニークなバナーは、最も厳格な重量制限のある最も美しいバナーです。 メディアプランに次のアイテムが含まれている場合：
200x300、yandex.ru、25 KB
240x400、mail.ru、35 KB
240x400、sports.ru、40 KB
その後、sports.ruに最大40 KBの一意のバナーを作成する必要があります。 mail.ruに少し適応し、yandex.ruに簡略化します。 このアプローチにより、大規模な広告キャンペーンでは、最高品質のバナーをすべて入手できます。
悪意のない開発者は別のシステムを使用します：最も厳しい重量制限のために最もシンプルなバナーを作成します（この場合はyandex.ru、最大25 KB）。これにより、後続のサイズ変更とクライアントを高品質のバナーから最適化するという困難な作業から解放されます。 最大40 KBのバナーは見栄えがよくなりますが、最大25 KBのバージョンと同じように「単純化」されます。 もちろん、このアプローチは受け入れられません。
PS記事に興味がある場合は、次にバナー広告の黄金律と、残念ながら多くの開発者やサイトで無視されている明らかなことについて説明します。