白い背景で新しいロゴが承認された瞬間は、それをアニメーションし始めるのに最悪の瞬間です。動画で何が悪くなるか、つまり98ピクセルで崩れるワードマーク、印刷向けに作られた輪郭、圧縮された書き出しで灰色の箱になる透明な領域、はすべて、デザインチームがたった今承認したファイルでは見えません。
ですから作業は決まった順番で進みます。6つのチェック、すべて安価で、すべて1枚のキーフレームができる前に済みます。1回ですべて行えばアニメーションは20分の仕事です。飛ばせばアニメーションは作り直しです。これまでマークを動かしたことがないなら、その仕組みはロゴの動かし方で扱われています。この記事は、その前に真でなければならないすべてについてです。
動画ロゴはロゴファイルではない
最初の認識の修正は、動画ロゴが別のロゴではないということです。それは同じマークが、ずっと過酷な条件の集合の中に存在するものであり、それがどの決定が重要になるかを変えます。
印刷ロゴは、1回、快適なサイズで、それを再圧縮しない表面で見られます。動画ロゴは、すでに細部を捨てた非可逆エンコードの後、腕の長さほど離して98ピクセルのアバターで見られ、時にはフレームの下3分の1に字幕バーが乗ります。それはデザインへの批判ではありません。単に異なる視聴条件であり、それに耐えるアセットはその条件を念頭に置いて作られます。
それが、以下のチェックがその順番になっている理由です。まず小さいサイズ。それが決定的なもので、後で直すのが最も高くつくからです。次に技術的なプロパティ、次にフレームサイズ、次に動きの処理、次に書き出しです。最初の3つのどれかを逆にすると描き直しのコストがかかります。そもそも動き向けに設計されていないマークから始めるなら、制約はロゴアニメーションが実際に必要とするものにまとめられています。
手順1・マークを98ピクセルでテストする
マークを実際の表示サイズで書き出し、スマホに置いて1秒見てください。拡大してでもなく、モニターでもなく、ファイル名が隣にあるフル解像度でもありません。
たいてい3つのことが失敗します。細い線は完全に消えます。原本の1ピクセルの細線は、縮小後に何にもなりません。負の空間は詰まり、カウンターが埋まって文字が合体します。そしてどんなグラデーションも単一の中途調に平らになり、シンボルとワードマークの間の色の関係を静かに変えることがあります。
直し方はすべてを描き直すことではありません。最小の配置が何を見せるかを決めることです。アバター向けのシンボルのみのバージョンと、横長フレーム向けのシンボル＋ワードマークのバージョンは、標準的な分割です。それはリブランディングではなく、1つの午後で済みます。
大きなキャンバスで設計し、小さいサイズで決めることが方法全体であり、それはその後すべてのアセットで報いてくれる1つの習慣です。同じ理屈が、GIFに行き着くマークの静止バージョンにも当てはまります。フォーマットが同じ単純化を強いるからです。それが、ロゴGIFの背後にあるパレットの制約が、動画しか公開しなくても理解する価値がある理由です。
手順2・透明性が本物か確認する
ロゴファイルは透明に見えて、そうでないことがあります。PNGを暗い背景で開き、マークの周りの領域が本当に存在しないか、モックアップの背景がたまたま隠していた白い長方形ではないかを確認してください。
これは動画では他のどこより重要です。アニメーション化したマークは写真の背景、つまり話し手、製品の写真、夜の市街地の上に合成されるからです。マークの後ろの白い板は、白い板として即座に見え、どんな動きのデザインでもそれを隠せません。半透明の柔らかい影はもう1つの一般的な失敗です。エンコーダーがアルファチャンネルを平均すると、灰色の箱として読まれます。
安全なフォーマットはSVGと、本物のアルファチャンネルを持つPNGです。その違いを知っておく価値は、書き出す前にあります。PNGは完全なアルファブレンディングをサポートしますが、GIFフォーマットはフレームごとに1つの完全に透明なインデックスに限られ、それが柔らかい縁がそこでぎざぎざに見える理由です。w3.org — PNG仕様。唯一のファイルがJPEGだけなら、まだ透明なロゴはできていません。
手順3・最初に最小のフレームを決める
フレームサイズは書き出し設定ではなく設計上の決定であり、その集合の中で最小のものが構図を決めます。
縦9:16は通常のコンテンツ集合で最も厳しいトリミングです。ワードマークの横の余地が最も少ないので、そこがロックアップが通用するか、作り直さなければならないかの場所です。正方形1:1は、激しくトリミングされるフィード配置向けの安全な中間です。横16:9（最大4K）はYouTube、ウェブサイトのヒーロー、物理的な部屋の画面の何にでも対応します。
コンテンツがソーシャル優先なら、まず縦バージョンを作り、それから外側へ適応させます。横長のマスターから縦へ適応させるのは、最も多くの描き直しを生む間違いです。構図が縦フレームが持ったことのない余地に合わせて解決されていたからです。問題がアニメーションではなくロックアップにあるなら、配置の慣習はロゴ動画の基本で扱われています。
手順4・マーク自身の幾何学から動きの処理を選ぶ
処理はマーク自身から読み取れるべきです。硬い角を持つ幾何学的なシンボルは、マスクの露出やパーツからの構築を取ります。幾何学がすでにピースの来処を示唆しているからです。円形や有機的なマークは、放射状のスケールや落ち着きを取ります。読めるままでなければならないワードマークは、ほとんど何も取りません。短いフェードアップと静止です。
うまくいかないのは、効果のリストからアニメーションを選び、目の前のどんなマークにもそれを適用することです。それが、マークが自分の形に逆らって動いているように見えるという、よく知られた間違いの仕組みです。観客は理由を説明できなくても素人っぽいと読みます。
効果の選択以上に結果を決めるのは2つの値です。入場に何フレームかかるか、そして停止の前後2フレームで何が起きるかです。24fpsで24フレーム以内の入場は自信に満ちて見えます。40フレームの入場は待たされます。そして到達してぴたりと止まるマークは、動きではなくジンプカットとして読まれます。それが、時間を足す前に2フレームの落ち着きを足す価値がある理由です。
手順5・アニメーションする前に技術的な基準を設定する
この4つの値を1度書き留め、すべての書き出しで再利用してください。プラットフォームの仕様は変わり、記憶から作り直すことが、チャンネル間でセットが一貫しなくなる道だからです。
フレームレート：落ち着きと静止のあるものは24、積極的に再エンコードするプラットフォームでは30。アスペクト比：9:16、1:1、16:9、すべて1つのソースから書き出し、タイミングを同一に保ちます。尺：オープナーは1〜3秒、ローンチカットは2〜6秒。そして色空間：Rec. 709で書き出し、即興で作らないでください。トランスコード後にずれる彩度の高いブランドカラーは、どんな圧縮ノイズより悪く、ファイルが他人のスマホで再生されるまで見えません。
プラットフォームの数値は、想定するのではなく確認する価値があります。人が予想する以上に異なるからです。Meta の Reels Publishing APIは要件を明示的に記録しています。9:16のアスペクト比、推奨1080×1920ピクセルで最小540×960、24〜60fps、2〜5秒のクローズドGOPを持つH.264またはH.265圧縮です。developers.facebook.com — Reels公開。その仕様が示すように、1〜3秒のオープナーはすべての公開された制約の範囲内に収まり、したがって限界要因はプラットフォームの制限ではなく、あなた自身のタイミングの規律です。
手順6・ミュートでフィードサイズで見る
最後のチェックは90秒で、他の5つでは見つけられない失敗を捉えます。完成した作品を書き出し、音なしで、実際のフィードサイズのスマホで再生してください。
音を消しても到達が依然として意図的として読めるなら、タイミングが仕事を担っており、曲はおまけです。ミュートにするとカットがいい加減に感じるなら、問題はカット点にあり、音楽ではありません。whooshやriserを足しても、ビートから数フレームずれたカットは直りません。そこが、メトロノームのようなグリッドのフレームレベルの精度が役立つ場所でもあり、期間にわたってタイミングがどう表現されるかの根底のモデルは、W3Cの<a href="https://www.w3.org/TR/web-animations-1/">Web Animations仕様</a>に記録されています。調整しているものの用語を知りたいなら一見の価値があります。
公開前に1回ではなく3回見てください。1回目はロゴを見ます。2回目はタイミングを見ます。3回目は見知らぬ人が見るものを見ます。それが唯一重要なものです。
新しいロゴを持つことが作業を変えること
確立されたマークをアニメーションすることと、真新しいマークをアニメーションすることの間には1つの構造的な違いがあり、それが6手順の順番のどれだけを飛ばせるかを決めます。
確立されたマークは、すでに公の場でこのフィルターを通っています。何年ものアセットで小さいサイズに現れ、読めないバージョンについて誰かが文句を言い、単純化したバリアントはおそらくすでに副次ファイルとして存在しています。
新しいマークは、正確に1つの文脈でのみテストされています。プレゼンテーション、快適なサイズ、誰もスクロールで通り過ぎない画面です。それはマークがこれまでに出会う最も寛大な視聴条件です。98ピクセルのアバターは考慮されたことがなく、透明な書き出しはまだ存在しないかもしれず、ポスターサイズで持ちこたえる輪郭が動画エンコードに耐えるかを誰も確認していません。
ですから6つの手順は意図的に前に詰め込まれています。そのうち3つ、つまり小さいサイズのテスト、透明性のチェック、フレームの決定は、アニメーションではなくソースファイルに対するチェックです。アニメーションが存在した後にそれらを直すことは、アニメーションをやり直すことを意味します。前もって直すコストは1つの午後と、たいていの場合マークの1つの単純化バリアントです。
完全な制作に踏み切る前に、この規律全体の短いバージョンが欲しいなら、アニメーション化したマークの構造、つまり入場、落ち着き、静止は、ブランドが実際に使うスタイルに示されており、代替を名付けられるようになれば処理を選ぶのは容易です。アニメーション化したロゴのスタイル。
引き継ぎシート
数値の1ページを、書き出しファイルの脇に保管します。1度書くのに10分かかり、それは一貫したブランドと、それぞれが少しずつずれたファイルの集合の違いです。
ソースファイル：アニメーションの元にする透明なSVGまたはPNG。単純化したシンボルのみのバリアントは別に保存します。
動き：フレーム単位の入場時間、秒単位の静止の長さ、合計尺、そしてマークが最終状態でいる処理済みケースの名前です。
技術：フレームレート、3つのアスペクト比、色空間、そして書き出すコーデックプロファイルです。
音楽：曲、BPM単位のテンポ、そして商用公開の承認があることの確認です。
そして再構築ごとに、記憶ではなくそのシートに対して6つのチェックを実行します。6カ月後にキーフレーム間隔を覚えている者はおらず、ブランドのオープナーの2番目のバージョンこそが、たいてい一貫性が入り込む場所です。
よくある質問
新しい動画ロゴが通用するために何が必要ですか？
98ピクセルで読めるマーク、ファイル内の本物の透明性、決まったフレームサイズ、マークの幾何学から導かれた動きの処理、そして再利用する技術的な基準です。アニメーション自体は最後の手順で最短のものです。努力の大部分はその前のチェックにあります。
JPEG でしか持っていないロゴをアニメーションできますか？
できますが、まずマークを切り抜く必要があります。JPEGにはアルファチャンネルがないので、ロゴの周りの領域は、どんな動画背景の上にも見えて乗る単色です。アニメーションする前に、透明なPNGまたはSVGとして再書き出し、暗い背景で結果を確認してアルファが本物か確かめてください。
動画ロゴアニメーションの長さはどれくらいにすべきですか？
チャンネルオープナーは1〜3秒、ローンチや告知作品は2〜6秒です。それより長いものはたいてい3つの仕事を一度に担っています。ロゴ、タイトル、タグラインの3つです。直し方は、3つすべてのタイミングをきつくするのではなく、そのうち2つを削除することです。
縦と横で別のファイルが必要ですか？
異なるアスペクト比は、はい。異なるタイミングは、いいえ。同じソースファイルから9:16、1:1、16:9を書き出せば、入場時間、ビートの整合、静止の長さが同一になります。変わるのはマークの周りのフレームだけです。それこそが、ブランドが3つのチャンネルで3つの別の会社のように見えるのを防ぐものです。
アニメーションはループさせるべきか、フェードアウトさせるべきですか？
ループさせます。最初のフレームに戻る自動再生動画はフィードで1つの連続した物体として読まれ、黒へのフェードは終わったクリップとして読まれてスクロールで通り過ぎられます。同じ映像、違うファイルの結末、測定可能なくらい異なる視聴時間です。ですからハードカットかループにし、フェードが必要ならウェブサイトのヒーロー向けに取っておきます。
まとめ
他の何をする前に手順1をしてください。マークを98ピクセルで書き出し、スマホに置き、1秒見てください。そしてそのサイズで持ちこたえるなら、他の5つのチェックは再設計ではなく計算です。結局アニメーションを描き直すチームは、そのテストを飛ばしたチームです。最小の配置だけがマークについての真実を教えてくれるからです。自分のファイルでそれをブラウザエディターで約10分で実行できます。