アニメーションロゴのデザイン:ツールの前に判断を
アニメーションロゴのデザインは、5つのツールではなく5つの判断です。シルエット、登場、着地、ホールド、音。ロゴをアップロードして、それぞれをブラウザで検証できます。
McDonald'sにロゴモーションが必要な理由
アニメーションロゴのデザインは、5つのツールではなく5つの判断です。シルエット、登場、着地、ホールド、音。ロゴをアップロードして、それぞれをブラウザで検証できます。 Animate your logo with this brand style: a short-form video in minutes. No animator, no agency, no After Effects — just upload and ship.
⚡まずシルエットのテストから
動きを付ける前に、ロゴを40ピクセルまで縮小して見てください。そのサイズで破綻するアニメーションロゴのデザインは、アニメーションでは救えません。スマートフォンで灰色の塊になるワードマークは、動いている間も灰色の塊です。モーションは、静止したロゴがすでに持っているものを増幅するだけです。
⚡1フレームに1動きではなく、1ビートに1動き
アニメーションロゴのデザインで最も多い失敗は、ロゴに毎ビート何かをさせることです。ブランドオープナーがデザインされたものとして読まれるのは、登場が1ビートを使い、着地が次のビートに乗り、その後のビートでは何も起きないときです。静止は空白ではなく、判断なのです。
⚡着地に必要なのは停止であって、漂流ではありません
所定の位置に収まりながら、最後まで到達しないアニメーションは、タイミングが正しくても未完成に見えます。デザイン上の判断は、ダウンビートのハードなフレームに着地させ、あとはホールドに任せることです。これが、到達するロゴと、さまよいながら入ってくるロゴを分けます。
⚡ブランドが認識されるのはホールドの間
腕を伸ばした先のスマートフォンで名前を読むには、少なくとも0.5秒の静止が必要です。尺いっぱい動き続けるアニメーションロゴでは、視聴者はすでにフレームから去りつつあるワードマークを読むことになります。ホールドは無駄な時間ではなく、ブランドが読める唯一の瞬間です。
⚡判断をブラウザで検証
透明なロゴをアップロードし、フレームとトラックを選ぶと、シーケンスは自動で音楽のビートマーカーに合わせてカットされます。フレームを差し替え、ロゴのサイズを変え、もう一度書き出す。5つの判断を、デザインの1ラウンドではなく半日で検証できます。ローンチ期間中は720p、1080p、4Kの書き出しが無料です。
使い方
Upload your logo
Choose frames




Download your video
Why animate your logo
アニメーションロゴのデザインは、たいていソフトの話として扱われます。それが最初の曲がり角です。ツールは簡単な部分です。どんなタイムラインでも図形は動かせますし、どんなテンプレートでも登場は用意してくれます。仕事とは、1フレームも動かす前に下す短い判断のリストです。ロゴが小さくなっても耐えるか、登場をどのビートひとつに載せるか、着地をどこで止めるか、ホールドをどれだけ続けるか、そして音を入れるかどうか。この5つの答えが、結果をデザインされたブランドアセットとして読ませるか、誰かがアニメーションしたファイルとして読ませるかを決めます。
シルエットの判断が最初に来るのは、後から修正できないからです。40ピクセルで読めるロゴは、動いている間も読めます。そのサイズで灰色の塊に溶けるロゴは、動きの中ではさらに速く溶けます。目がそれを解像する時間が短くなるからです。スタイル、フレーム数、トラックを選ぶ前に、スマートフォンが実際に表示するサイズでロゴをテストしておけば、このカテゴリの残念な結果の大半は消えます。
2つ目の判断は配分です。ブランドオープナーはミュージックビデオではありません。ロゴに毎ビート何かをさせたいという衝動こそ、アニメーションロゴのデザインで最も多い誤りです。うまくいくバージョンは、動きを登場に1つ、着地に1つ割り当て、その後のビートには何も割り当てません。静止は空白ではありません。動きに意味を持たせているのは、その静止なのです。
次に着地です。ここが、アニメーションロゴのデザインが技術としてのアニメーションと最も違うところです。なかなか到達しないイーズアウトは漂流に見え、漂流はタイミングが数学的に正しくても未完成に見えます。着地をダウンビートのハードなフレームに置き、そこで止めるというのは、ソフトではなく確かさについての判断です。止まり方が唐突に見えるなら、直すべきは終わり方ではなく、登場の長さです。
ホールドは最後の判断であり、動画が長引いたときに最初に切られる部分です。腕を伸ばした先のスマートフォンで名前を読むには最低0.5秒必要です。毎秒30フレームなら、15フレーム分の静止です。アニメーションを作った人には長すぎるように感じられ、見る人にはほとんど一瞬に感じられる長さです。その静止を意図的にデザインすることこそが、動くロゴを、ブランドが何年も再利用できるアニメーションロゴのデザインに変えるのです。
最適な対象
よくある質問
アニメーションロゴのデザインを良くするものは何ですか?
ほとんどの働きをするのは4つです。動いている間もロゴが読めること、登場が1秒以内に終わること、着地が漂って止まるのではなく強いビートに乗ること、そして名前を読めるだけの長さホールドが続くことです。この4つを満たすモーションはデザインされたものとして読まれます。ホールドを外したモーションはテンプレートとして読まれます。
アニメーションロゴの長さはどのくらいが適切ですか?
ソーシャル向けのオープナーなら2〜4秒です。内訳は、登場が約0.5秒、ダウンビートでの着地、そして少なくとも0.5秒のホールドです。チャンネルイントロやイベントスクリーンは5〜8秒まで伸ばせます。視聴者がすでに見ると決めているからです。どちらの場合も、登場そのものは1秒以内に終わらせてください。
動きはロゴから引き出すべきですか、それともロゴに適用すべきですか?
ロゴから引き出すべきです。ロゴ本来の形状、つまり弧のカーブ、線の太さ、形が閉じる仕方から動きを導いたアニメーションロゴのデザインは、必然的に見えます。ロゴが描かれていないスタイルから持ち込まれた動きは、後付けに見えます。視聴者は言葉にできなくても、その違いに気づきます。
アニメーションロゴにモーションデザイナーは必要ですか?
ロゴの形状に合わせて設計した専用のシーケンスなら、いた方がよいでしょう。しかし、ほとんどのブランドが毎週実際に投稿しているオープナーについては、不要です。フレームとトラックを選んでしまえば、タイミングの判断は機械的なものになります。ブラウザのツールが、タイムラインもキーフレームエディターもレンダーキューもなしに、シーケンスをビートマーカーに合わせてカットします。
ブランドにはアニメーションロゴが何バージョン必要ですか?
3つあればほぼすべてをカバーできます。ソーシャル向けの2〜4秒のオープナー、ウェブサイトやメール署名用の音なしループ、そしてチャンネルイントロやイベントスクリーン用の5秒バージョンです。この3つはすべて、同じフレーム、同じトラック、同じロゴサイズから作られます。それがブランドの一貫性を保つ仕組みです。
ブログから
モーションファーストなブランドのためのワークフロー、リファレンス、戦略。
Video is where customers are: 91% of businesses use video as a marketing tool (Wyzowl), and Wistia's retention data shows a short, branded opener keeps viewers longer than a static frame.