YouTube のチャンネルアバターは98×98ピクセルで表示されます。それは、4000ピクセルのマスターを書き出して終わりとした時、多くの人が想定するより小さいものです。その隣では、チャンネルバナーが2560ピクセルの幅に広がり、テレビではその一部しか映りません。そしてすべての動画の最後で、同じマークは2つの競合サムネイルの隣にいて、読めなくなってはいけません。
つまり YouTube アニメーションロゴは1つのアセットではありません。1つのマークを1回描き、ほとんど幾何学的な共通点のない3つの箱に適応させ、そして3つすべてに対して1回だけ動かしたものです。順番を間違えるとマークを3回描き直します。正しくやれば全体は1つの午後で済みます。これまでマークを動かしたことがないなら、まずロゴを動かす基本から始めてください。
YouTube アニメーションロゴが埋めるべき3つの箱
各配置を単なるリサイズではなく設計上の制約として扱うと役立ちます。3つに共通しているのはマーク自身だけです。
アバターは正方形で、円形のトリミングの中で表示され、小さいものです。その正方形の内接円の外にあるものはすべて切り取られるので、マークは偶然周りに余白がある長方形ではなく、設計上円の中になければなりません。
バナーは横長で、ほとんど見えません。YouTube は2048×1152ピクセルのアップロードの中で1235×338ピクセルの安全領域を表示し、さらにトリミングするテレビもあります。その中央帯の外にあるものは、特定の画面サイズの視聴者向けの装飾であり、それは嬉しいおまけであって設計の前提になることは決してありません。
エンド画面は、他者が関わるものです。あなたのマークは、動画カードや登録ボタンの脇に、自分がコントロールできない映像の上に、小さな円形の要素として現れます。同じセッションで、明るい話し手と暗い格闘シーンの両方に対して読める必要があります。
まず98pxのアバターを設計する
最小のサイズから始めて上に向かいます。逆ではなく、最後のチェックでもありません。
理由は簡単です。大きいから小さいへ行くとディテールを失います。バナーサイズで美しく読めるワードマークを描き、アバターサイズで文字が灰色のにじみに崩れているのを発見し、今さら描き直すことになります。小さいから大きいへ行くと何も失いません。98ピクセルで読めるマークは、それ以上のどのサイズでも読めるからです。小さいバージョンが制約です。それより大きいものは不要な余白です。
実践的には、これは作業中にアバターを単独のシンボルとして設計し、その後にバナーとエンド画面向けのワードマークを足すことを意味します。その分離は、ロゴGIFや、モノグラムを中心にした小フォーマットのアセットを作る際の理屈と同じです。最も厳しいトリミングに耐えるバージョンこそが、動かす価値のあるバージョンです。
円の中で通じるマークを決める
2つの形は、円形トリミングに対して一貫して失敗します。境界ボックスの四隅に重要な内容があるもの、つまり左から右へぴったり組まれたワードマークや、名前の脇にシンボルがあるロックアップは、名前の両端を失います。そしてその幅を前提にした内部の間隔で作られた横長の長方形は、円が食い込むと中心がずれて見えます。
直し方は、箱がすでに円であるかのように設計することです。マークを正方形の内接円の中に収め、各側に直径の約8〜10%の余白を空け、ブランドにワードマークがあるなら、アバターサイズに必ず出現するものではなく、横長の配置向けの別アセットとして扱います。モノグラムに任意のワードマークを足す構造が、3つの箱すべてに耐えるものです。
実際のサイズで、拡大してではなくマークをテストする
4000ピクセルで設計し、98で判定します。マークを実際の表示サイズで書き出し、スマホを腕の長さほど離して置き、1秒以内で見てください。細い線は消え、負の空間は詰まり、どんなグラデーションも平坦な中間調になります。そのテストを生き残るものが、あなたが動かす絵です。
居心地の悪い点は、そのテストがたいていマークの最も面白いバージョンを殺すことです。それは飛ばす理由にはなりません。詳細なイラストをアバターに使っているチャンネルは最終的にそれを置き換え、しかもこのテストが最初から生み出していたものに近いものに置き換えます。
動きもアバターサイズで読めなければならない
同じ理屈がアニメーションにも当てはまり、ここが多くのチャンネルロゴが失敗する場所です。スライド、スケール、回転から作られた入場は1080ピクセルではきれいに読めますが、98では読めない泥になります。それらはすべて位置とサイズの動きであり、小さい縮尺では目が追えないからです。
小さくても生き残るのは、形と不透明度の変化です。ワイプ、描き込み、同じシルエットの2つの状態間のフェードです。それらは動きではなく状態の変化として読まれ、サムネイルサイズの要素でも即座に認識されます。
その背後の仕組みは、CSSアニメーションモデルに記録されています。それはアニメーション可能なプロパティを、滑らかに補間できるものとできないものに分けます。w3.org — CSSアニメーション仕様。不透明度とtransformはきれいに安価に補間され、アニメーション中に完全なレイアウトの再計算を強いるものは、描画が重く、小さいサイズでの読みにもくいものです。その同じ原理は、アニメーションがブラウザで動くか動画にレンダーされるかに関わらず成り立ちます。
あと2つの制約がプラットフォームから来ます。1つ目は、アニメーションが着地して静止することです。アバターはちらっと見られるので、マークは実行時間のほとんどを最終状態でいるべきです。2つ目は、そのアセットが動くサムネイルやイントロに使われるなら、ループ点は最初のフレームに戻るべきです。見えるジャンプでリセットする動くマークは壊れて見えるからです。
アニメーション化するエンド画面とイントロ
アバター以外で、アニメーション化したチャンネルマークが本領を発揮する2つの場所です。
1つ目は短いチャンネルイントロ、1〜3秒で、マークが到達し、静止し、消えます。3秒以内に収めます。イントロの1秒は、コンテンツが始まる前に使われる視聴維持の1秒だからです。そのフォーマットのよりタイトな版本がロゴイントロアニメーションで、最初のフレームが単独で成立するように設計されています。
2つ目はエンド画面です。YouTube 自身のチャンネルブランディングに関するドキュメントは、他のチャンネルカードと並んで現れる要素にドロップシャドウや枠、フレームを追加しないようクリエイターに求めています。プラットフォームがすでに独自の処理を適用しており、積み重ねた効果がレイアウトをうるさくするからです。したがってエンド画面のアニメーション化したマークは、強調のための光や輪郭を足さず、くっきりした縁で独立しているべきです。
どちらの配置もアバターと同じルールを共有します。最終状態のロゴを先頭に置くことです。YouTube 自身のガイダンスは、円で表示されるアバターを最小98×98ピクセルでアップロードし、バナーのメッセージを1235×338の安全領域に収めることです。2048×1152のアップロードの残りは、たいてい完全にトリミングされます。support.google.com/youtube/answer/10456525。そのドキュメントが指摘するように、アップロード幅いっぱいに設計されたバナーはデスクトップでは中央に見えますが、テレビでは両端を失います。
1つのアニメーション、3つの書き出し
アバターのトリミングに合わせてアニメーションを1回作り、それからチャンネルが必要とする各比率で書き出します。タイミング、イージング、静止は同一のままです。変わるのはマークの周りのフレームだけです。
短いリストはこうです。静止とアニメーションの両方のプロフィールアセット向けに、アバターとサムネイルサイズの正方形書き出し。チャンネルバナー領域やウェブサイト、プレス用に横長の書き出し。イントロとエンド画面向けに16:9の書き出しです。チャンネルが縦のShortsも投稿するなら、9:16のカットダウンを足します。同じソースファイル、同じビートの整合です。
書き出しのビットレートは、普通の映像以上にここでは重要です。平坦な背景にある高コントラストなマークこそが、圧縮ノイズが最初に現れる場所だからです。H.264をHighプロファイルで、キーフレーム間隔を約2秒、プラットフォームが一般動画に推奨する以上のデータレートにすれば、細い線のリング状のにじみを防げます。
同じダイアログに隠れた2つ目の書き出しの決定があります。平らな背景のマークは色空間の間違いに異常に敏感で、デフォルトが正しいと仮定するのではなく、コンテナが期待する値を持っていることを確認する価値があります。その違いは、他人の画面でわずかにずれるブランドカラーとして現れます。フォーマットがメタデータをどう扱うかを確認することは、後回しではなく仕事の一部です。developer.mozilla.org — フォーマット処理の参照。
マークが他に現れる場所
チャンネルのマークは、公式の3つの箱だけに留まりません。YouTube が仕様書をくれない場所にも現れ、そこがアニメーション版が最も働く場所になることが多いです。
サムネイルは明らかなものです。サムネイルの隅の小さなマークは認識の手がかりであり、すべての動画で同一、つまり同じ位置、同じサイズ、同じ処理の時にもっともよく働きます。隅のマークがアップロードの間に動き回る瞬間に、認識の値は崩れ、それは装飾になってしまいます。
2つ目はShortsです。同じマークの縦のカットダウンは、Short向けのエンドカードとして働き、9:16のフレームは1つのソースファイルから作られたロゴ動画が本領を発揮する場所です。タイミングは変わらず引き継がれ、マークの周りのフレームだけが異なります。
3つ目は完全にプラットフォーム外です。同じアニメーション化したマークは、メールの署名、プレスキット、Discordサーバー、スポンサーの資料に行き着きます。それらすべてが、誰かがバージョンを求めるたびに動きを作り直すのではなく、ソースファイルを1か所に保管する理由になります。
心に留めておく価値のある比較
3つの配置は寸法以上に異なり、書き出しを始める前に違いを1か所にまとめておくと役立ちます。
アバター — 正方形、円で表示、画面上で約98ピクセル、1秒以内で判定、しっかりした、あるいは単純に対比する背景を持つ単独のシンボルとして作るのが最良です。
バナー — 横長、見え続けなければならないものには実質1235×338、2048×1152でアップロード、デスクトップとテレビで異なるトリミングで読まれ、マークを片側に、メッセージを安全帯の中に置いて作るのが最良です。
エンド画面 — 小さく、円形、コントロールできない映像の上に置かれ、動画カードや登録ボタンと競合、輪郭や影を足さず、長いアニメーションではなく短い静止を持つくっきりした縁のマークとして作るのが最良です。
1つのマーク、1つの動きの言語、3組の数値。数値を書き出しファイルの脇に書き留めておけば、チャンネルに触る次の人がマークを記憶から作り直し、ビートから2フレームずれるのを防げます。
よくある質問
YouTube チャンネルのロゴのサイズはどれくらいにすべきですか？
少なくとも98×98ピクセル、可能ならそれ以上でアップロードしてください。プラットフォーム自身のガイダンスは、円形トリミングで表示されるアバターの最小を98ピクセルとしています。4000ピクセルで設計しますが98で判定し、重要なものすべてを正方形の内接円の中に収めます。
YouTube チャンネルのロゴをアニメーション化できますか？
アバター自身は静止画像ですが、同じマークをイントロ、エンド画面、動くサムネイル、すべてのプラットフォーム外の配置向けにアニメーション化できます。アバターのトリミングに合わせて1つのアニメーションを作り、必要な比率で書き出せば、マークが現れるどこでもタイミングが同一になります。
チャンネルアバターにするとロゴがなぜぼやけて見えるのですか？
ほとんどいつも細い線と細かいディテールです。98ピクセルでは1ピクセルの線は消えるか、ちらつくかのどちらかで、たいていはちらつきます。最小のサイズで持ちこたえるまで絵を単純化し、マークと背景のコントラストを上げ、詳細なものではなく単純化したバージョンを動かします。
チャンネル名をロゴに入れるべきですか？
名前は別のアセットとして扱います。ワードマークはアバターサイズでは読めません。文字が灰色のにじみに崩れるからです。ですからモノグラムを主要なマークとして使い、ワードマークは横幅を使えるバナー、イントロ、エンド画面にだけ足します。
チャンネルイントロアニメーションの長さはどれくらいにすべきですか？
1〜3秒で、週刊で投稿するチャンネルなら1秒に近い方です。マークは速く到達し、1拍静止し、視聴者の注意を再び稼がなければならない前に消えます。それより長いものは、動画の視聴維持をロゴと引き換えにします。それは投稿するすべての動画で悪い取引です。
まとめ
4000ピクセルで設計し、98で決めます。その1つの習慣、バナーの前にアバターのトリミング向けにマークを作り、大きな位置の動きではなく形の変化を動かすこと、こそが、2度の描き直しなしで3つの配置すべてで通用する YouTube アニメーションロゴを生み出します。チャンネルアバターは、ほとんどの視聴者がフルサイズで見る唯一のバージョンです。それ以外はその周りの文脈です。アニメーションを決める前に、自分のマークで小さいサイズのトリミングをブラウザエディターで試せます。