Twitchのチャンネルは、ほぼ他のどのプラットフォームより多くの場所でマークを表示し、そのほとんどは小さいです。チャットメッセージの横のライブバッジ。ディレクトリグリッドのアバターは、100個の他のサムネイルと競り合います。誰も配信していない間画面に留まるオフラインバナー。放送中のオーバーレイコーナーは、数秒ごとに色が変わるゲーム映像の上に置かれます。そしてストリーム開始画面。それはマークが実際に動く十分な余地を持つ、唯一の面です。
それが、早くから内面化しておく価値のある制約です。Twitchにおいて、アニメーションは例外であり、小さな静止画が原則です。つまりTwitchのロゴアニメーションは、他のどこでも機能する静止フレームの周りに設計されなければなりません。静的なものを正しく作れば、アニメーションは短くて高価値なおまけになります。それを飛ばせば、アニメーションは誰も読めないマークの上の装飾になります。
マークが実際に現れる場所
面を、与えられた余裕の大きさで分けると役立ちます。設計の決定はそれに直接従うからです。
ディレクトリのサムネイルとオフラインバナーは、最大の静止配置です。そして前者は配信中だけ表示されます。ディレクトリは発見が起きる場所なので、マークはカテゴリ内の他のすべてのチャンネルと競り合います。
アバターはチャットやフォロワー一覧、レイド通知の横に現れます。小さく、繰り返され、常連視聴者が見る唯一のバージョンであることがよくあります。
オーバーレイコーナーは、決まったサイズのない唯一の配置です。あなた自身のシーン構成に依存するからです。それはまた最も過酷でもあります。動くゲーム映像の上に置かれるからです。オーバーレイのマークは、任意に変化する背景に対して持ちこたえなければなりません。
アラート、トランジション、そしてストリーム開始画面が、動きの宿る場所です。これらは永続的なアイデンティティではなく、ブランドの瞬間のために作られた面であり、アニメーションのマークがその居場所を得る場所です。
オフラインバナーは最も無視される面
チャンネルが配信中でないときも、ページは存在します。訪問者が見るのは、オフラインバナーとアバターと、その下のパネル類です。週に数回夕方に配信するチャンネルなら、それが寿命の大部分です。初めての訪問者の大きな割合、そして検索や共有リンクから間の悪い時間にやってくる人たちのほぼすべてが、最初にオフライン状態に出会います。
その面を機能させるには2つのルールがあります。1つ目、構図は動きなしで完成したものとして読まれなければならないこと。そこに動くものが何もないからです。2つ目、ディレクトリサイズで機能しなければならないこと。同じアセットが、閲覧グリッドで視聴者が見るサムネイルとして再利用されることが多いからです。
ここでの実際の失敗は、全幅のページビュー向けに作られたバナーをサムネイルとして再利用することです。横長の長方形を埋める構図は、小さなカードに押し込まれると最も特徴的な要素を失い、マークとワードマークがほんの数ピクセルの表示領域を奪い合うことになります。小さなバージョンを先に作ります。それはどの<a href="/logo-animation-templates/logo-video-maker">ロゴ動画メーカー</a>の書き出しにも当てはまる同じ原則であり、Twitchの配置の多くが小さいため、ここではより強く当てはまります。
ミュートで見られても耐えるアニメーションを作る
ストリーム開始画面やトランジションシーンは、誰もが予想する以上に頻繁に環境音を自動再生します。そしてチャンネルページに着地した視聴者は、しばしば音を消しています。Twitch自身もライブ動画をミュートで自動再生し、ブラウザでの自動再生メディアの挙動はMDNの自動再生に関するドキュメントでよく扱われています。要約すれば、再生はユーザーの操作なしに始まるので、音は当てにできないということです。
それが、ストリームのロゴアニメーションに対する最も役立つテストを生みます。ミュートして最後まで見ます。トラックなしで登場が場当たり的に感じるなら、タイミングが間違っており、どれだけ音を手直ししても直りません。マークが静寂の中で意図をもって決まるなら、アニメーションはその役割を果たしており、音楽は頼りではなく向上になります。
2つ目のテストはループの挙動です。Twitchはそれを異常に重要にします。ストリーム開始画面は分単位で流れるので、そこのアニメーションは1人の視聴者に対して数十回ループします。1度はよく読める系列も、15回目の反復では苛立たしくなり、1回目では見えなかったループ点でのハードカットが、10回目にはあなたが気づくものになります。
直し方は、長くするのではなくシームレスにすることです。収まり、そして自分自身の開始位置へ溶けて消えるマークは、目に見える継ぎ目なしにループします。一方、黒から始まり黒に戻る系列は、再開のたびを告げます。開始画面で1つだけ確認するなら、ループ点を確認してください。
色、コントラスト、そしてオーバーレイの問題
オーバーレイのマークはゲーム映像の上に置かれます。つまりその背景は、ゲームが描画している何であれであり、絶えず変化し、時には明るく、時にはほぼ黒です。予測可能な背景とのコントラストに頼るマークは、これに耐えられません。
機能するのは3つのアプローチです。
オーバーレイのマークに、それ独自の囲われた背景を与えます。シンボルの後ろに、小さなベタか、ほどよく形作られたプレートを置くのです。それはわずかな画面領域を取り、下で何が起きていようとマークを読めるようにします。
強い内部コントラストを持つマークを使います。そうすれば、どんな背景に対しても少なくとも1つの要素が見え続けます。単色のマークは、セッションの途中で同じトーンの映像に対して必ず消えます。これは仮定ではありません。最初の配信で起きます。
それをアクションから完全に遠ざけます。ほとんどのゲームインターフェースは、自分たちのステータス要素を予測可能なコーナーに置きます。そしてオーバーレイのマークはふつう、彼らが手をつけずに残した空白のどこかに属します。それは、放送用グラフィックが数十年使ってきたセーフエリア慣例の背後にあるのと同じ論理です。
これには文書化された規律があります。マークの使用におけるよく確立された原則は、ロゴを追加の影や境界線や枠で装飾すべきではないというものです。YouTubeのチャンネルブランディングのガイダンスはアバターとチャンネルアートに同じルールを示しており、それは一般化できます。マークが見えるために枠を必要とするなら、根本のコントラスト問題は解決されていないのです。興味深いことに、オーバーレイのプレートはその意味での装飾ではありません。それは可読性の問題を解決しており、だからこそドロップシャドウが間違いとして読まれるところで、意図的だと読まれるのです。
これらすべてをシンプルに保つには、有益な抑制の議論もあります。Nielsen Norman Groupのユーザーインターフェースにおけるアニメーションの研究は、状態の変化を伝える動きと、それ自体のためにある動きを分け、後者のカテゴリは何も返さずに注目を奪うと結論づけています。ストリームのトランジションはコンテンツがまさに始まることを伝え、それは本物の状態変化です。回転し、バウンドし、爆発し、再構成するマークが伝えるのは、ただ誰かがタイムラインを楽しんだということだけです。
必要なサイズ、そしてそれを何度必要とするか
チャンネルに必要なセットは人が思うより小さく、その大部分は1つの絵から生まれます。
アバター向けの正方形の静止画は、プラットフォームが受け入れる最大サイズで書き出し、丸いトリミングの中で読めることを確認します。オフラインバナーとディレクトリのサムネイル向けの横長の静止画は、小さく表示されても構図が生き残るように作ります。ストーリーズ、ショート、ストリームから切り出したあらゆる短尺クリップ向けの縦向きアニメーション。ストリーム開始画面、トランジション、アラート向けのワイドスクリーンアニメーション。そして、パネルや動きを取れない配置向けに、アニメーションの清潔なホールドから書き出した静止フレーム。
アニメーションの書き出しでは、解像度もアスペクト比も重要です。YouTubeのアスペクト比と解像度のガイダンスは、縦9:16、正方形1:1、横16:9と、縦向き動画向けの1080×1920を記録しており、Twitchのクリップとショートも同じ形式に収まります。3つすべてを1つのソースから書き出すと、入場のタイミングがそれらで同一になり、それはストリームのトランジションとそれに合わせた短尺クリップがしばしば立て続けに見られるため重要です。
アニメーションの作り直しを避ける制作順
以下の系列は、厄介な決定を高価な作業の後ろではなく前に置くように順序付けられています。
1つ目。アートワークをSVGとして、あるいは利用できる最大サイズの透過PNGとして書き出し、暗い背景で透過を確認します。
2つ目。正方形のアバターのトリミングを作り、実際のチャットサイズで見ます。これが最小の配置であり、他のすべてを制約するものです。
3つ目。横長のバナー構図を、小さなサムネイルとして表示されても生き残るように設計し、全幅ではなくそのサイズで確認します。
4つ目。アニメーションを作る前に、オーバーレイの配置とそのプレートを決めます。プレートはマークが収まる枠を変えるからです。
5つ目。アニメーション版を、清潔なホールドのある1秒の登場として作り、次に開始画面向けのシームレスなループを加えます。
6つ目。3つの比率と1つの静止画を書き出し、実際に現れる各サイズでミュートしてアニメーションをテストします。
同じ系列を別のプラットフォームに適用した例を見たいなら、<a href="/blog/youtube-animated-logo">YouTube向けのアニメーションロゴ</a>の解説ではワイドスクリーンの場合をより詳しく扱い、<a href="/blog/video-logo">動画ロゴが違うことをしなければならない理由</a>の解説では、どのチャンネルにも当てはまる根本の設計変更を扱っています。
最もよく起きる失敗
5つの繰り返される失敗、すべて回避可能です。
マークがチャットで読めないこと。チャットのアバターは小さく、マークはチャンネルページ向けに設計されていました。上で説明したように、最小のトリミングを先に作ることで解決します。
オーバーレイが明るいゲーム映像に対して消えること。単色のマークは必ずどこかに対して消えます。アニメーションを作る前に、プレートを使うかコントラストを組み込みます。
開始画面に見えるループの継ぎ目があること。視聴者は1セッションでそのループを数十回通します。直すのは長さではなくループ点です。
アニメーションが音ありでしか機能しないこと。ミュートで確認します。視聴者のかなりの割合がそうやってやってくるからです。
バナーが全幅では美しく、サムネイルでは読めないこと。小さな構図を先に作り、横長バージョンを後に続けます。
よくある質問
Twitchのチャンネルでアニメーションロゴはどこに置きますか？
ストリーム開始画面、トランジション、アラート、そして動画対応ならオフラインバナーです。それらはブランドの瞬間のために作られた面です。アバター、チャットバッジ、オーバーレイコーナーはほぼ常に静止しているので、アニメーション版は置き換えではなく追加として扱うべきです。
Twitchのロゴアニメーションはどのサイズにすべきですか？
縦向き配置には9:16を1080×1920で、開始画面とトランジションには16:9で、どちらも1つのソースからタイミングが合うように書き出します。静止するアバターとバナーはそれぞれ独自の要件を持つ別の書き出しであり、どちらも全幅ではなく実際に表示されるサイズで確認すべきです。
ロゴアニメーションに音は必要ですか？
音なしで機能するように設計します。チャンネルページにやってくる視聴者はしばしば音を消しているので、視覚の系列はそれ単体で決まらなければなりません。音声は、音がある視聴者向けの向上として加え、タイミングをそれに依存させないでください。
配信中にオーバーレイのマークが消えるのをどう防ぐか？
シンボルの後ろに囲われたプレートを置くか、どんな背景に対しても1つの要素が見え続ける十分な内部コントラストを組み込みます。ゲーム映像に重なる単色のマークは、セッションの途中でいつか消え、ドロップシャドウでは直りません。
Twitchのチャンネルはメインブランドと別のロゴが必要ですか？
ふつうは別の設計ではなく、別の書き出しセットです。チャンネルには、丸いアバター、小さなディレクトリのサムネイル、オーバーレイコーナー、ワイドスクリーンの開始画面に耐えるマークが必要です。最小のものを先に設計すれば、1つの絵で4つすべてに仕えることができます。
まとめ
見知らぬ人として自分のチャンネルを開きます。間の悪い時間に、オフラインのときに、スマホほどの大きさのブラウザウィンドウで。あなたが見るものが、ほとんどの人が見るものです。そこでマークが読め、バナーがサムネイルサイズでも読めるなら、あなたは基礎を持っており、アニメーションはその上の短く安価な追加です。そうでなければ、どれほど動きを加えても、最もよく表示されるまさにそのサイズで既に負けているマークを救うことはできません。