Twitch のチャンネルは、同じマークを4つの場所に同時に置く。そのうち3つはサムネイルより小さい。丸い切り抜きのプロフィール画像、すべてのメッセージのそばのチャット内マーク、配信のオーバーレイの隅、そして配信が止まっているときにプレーヤーを埋めるオフライン画面だ。最大のものを先に作ると、最小のものが失敗する。
これは、4つすべてを生き残るアニメーション付き Twitch ロゴを作るための指南だ。さらに、2つのロゴが同じフレームを共有するときに画面に何を置いてよいかを決めるプラットフォームのルールも扱う。
4つの配置、4つの異なる絵
本能では1つのロゴを描いて拡大縮小する。それはスライド資料のワードマークには効き、他では失敗する。なぜなら、チャンネルの4つの配置は本当に異なる絵を求めるからだ。アイコンは隅をすべて切り取る丸だ。チャットマークは数ピクセルの高さで描画される四角だ。オーバーレイは明るさが激しく変わる動く映像の上に乗る。オフライン画面は、たいてい新しい訪問者が最初に見る、フルサイズの16:9キャンバスだ。
それらを1つのファイルを4回置くのではなく、4つの現れ方で表す1つのアイデンティティとして扱え。モノグラムがアイコンとチャットマークを担い、チャンネル名を含むフルロックアップがオフライン画面とバナーに向く。オーバーレイ版は、ゲームプレイを生き残るために必要なアウトラインやプレートを加えた簡略マークだ。同じブランド、4段階のディテール。
最小の表示を先に設計する
最小の配置が、他すべての制約を決める。先にそれを描けば、残りのシステムはそこから導かれる。最後に描けば、描き直しになる。
なぜアイコンが最も難しい枠か
Twitch はプロフィール画像を丸い切り抜きで表示し、アップロードよりずっと小さいサイズでも使い回す。サイズの業界ガイドは推奨アップロードを256×256ピクセル以上としているが、同じガイドが重要な点を説く。マークはチャットやチャンネル一覧でも小さく現れるため、大きくなるずっと前に読める必要があるのだ。256ピクセルでしか映えないデザインは、最もよく見られる2つの場所で消えるデザインである。
モノグラムのテスト
チャンネル名を最も強い2〜3文字に減らし、シミュレートできる最小サイズで読めるか見てください。読めなければ、フルネームにどれだけ手をかけてもアイコンは直りません。丸の中では3文字で既に読みやすさの限界だ。5文字は灰色の帯になる。名前が自然に収まらない配信者は、全体を圧縮するのではなく最も強い2文字を選ぶべきだ。
小さいサイズでの線の太さ
細い線は、マークが消える最も一般的な理由だ。2000ピクセルのマスターでの1ピクセル線は、チャットでの描画では1ピクセル未満になり、単に灰色になる。マスターに最小の線の太さを決めよ。最小の書き出しを生き残るほど太く、そして大きいバージョンは最初に想像したよりやや太く見えることを受け入れよ。太いほうが読める。粋なほうが消える。
同じ理屈は内部ディテールにも当てはまる。細かいクロスハッチ、細いカウンター、線の間の小さな隙間は、マークが縮むとすべて埋まる。アイコン版は、意図的な簡略化として作れ。形を減らし、隙間を広くし、コントラストを高く。詳細な絵の拡大コピーではなく。
オフライン画面が最も見られる素材
チャンネルブランディングの逆説的な部分はこうだ。オフライン画面は、たいてい配信より多く見られる。新しい訪問者は1日のあらゆる時間にチャンネルに着き、その到着の多くは誰も配信していないときに起きる。1920×1080のオフライングラフィックがその瞬間にプレーヤーを埋めるため、それがチャンネルで最もレバレッジの高い画像になる。
公開されている Twitch のサイズガイドは、オフライン画面を標準的な16:9 HD（1920×1080、プレーヤーとぴったり一致、推奨最小1280×720、ファイルサイズ上限付きで GIF を受け付ける動画オプション付き）として扱う。StreamScheme の Twitch 画像サイズ参考は、多くの配信者が初回アップロードで間違える320ピクセルのパネル幅を含め、チャンネルアート一式の役立つ作業チェックリストだ。
オフラインカードが答えるべきこと
3つの質問、この順で。このチャンネルは何か、次はいつ配信か、他にどこで見つかるか。アニメーション付き Twitch ロゴは、最初の答えに位置する。それは、訪問者が正しい場所に着いたと告げるアイデンティティの確認だ。残りはテキストで、テキストはスマホでも読める大きさを保たなければならない。多くのオフライン画面が静かに崩れるのはそこだ。
ループ安全なアニメーション
オフライン画面が動くなら、ループの継ぎ目は見る人がフォローするか決める約10秒以内に見える。アニメーション付き Twitch ロゴは、ほとんどの時間を静止していなければならない。ゆっくりした脈動、さりげない光、数秒ごとの1回のビート同期の動き、そして始めたフレームと同じフレームに戻る。誰も見ていないページでの絶え間ない動きは、止まった動画に見え、止まった動画は閉じられる。
オーバーレイとアラート：ゲームプレイに耐える動き
オーバーレイは最も難しい技術的な配置だ。マークは、明るさ・色・ディテールが1秒に数回変わる映像の上に乗る。色見本の上でくっきり見えたロゴが、明るい空や忙しい爆発の上では完全に消えうる。
アウトラインとプレート
2つの修正を、順に適用する。まずコントラストのあるアウトラインを2〜3ピクセル幅で、マークの色を変えずに後ろのものから切り離す。次に、アウトラインだけでは足りない忙しいシーン向けに、40〜60%の不透明度のやわらかいプレート（角の丸い長方形）を。どちらも描画の変更ではなくオーバーレイの設定なので、1つの動くファイルが、ゲームごとに色を変えたバリエーションを用意する代わりに、すべてのシーンにこれらを運べる。
1つの動き、3つではなく
スタンプ（やや大きく登場し、ビートにパンと下りるマーク）は、この分類を支える動きだ。どのサイズでも読め、アラートの後に続く落下と自然に組むからだ。同じビートに揺れ・色分割・フラッシュを重ねるのは典型的な失敗。3つの効果が同時に降りると互いに打ち消し合い、マークはまさに認識されるべき瞬間に読めなくなる。1つの強い動きは、3つの競う効果より強く響く。
2つのマークが同じフレームを共有するときのプラットフォームルール
アニメーション付き Twitch ロゴが単独で現れることはめったにない。オフライン画面ではプラットフォームのUIと、クリップのサムネイルではゲームのキーアートと、パネルでは Discord や YouTube のマークと並ぶ。それぞれに独自のルールがあり、最も安全な出発点は第三者のコピーではなくプラットフォーム自身のアセットページだ。Twitch のブランドアセットページはプラットフォームのマークの正典な情報源であり、冒頭の1行で、ファンアートを落とすのではなく正しいアセットを見つけてくれたことを謝している。
同じ規律は、配信者が投稿する他のプラットフォームにも当てはまる。Google の YouTube 向けチャンネルブランディングの指針は、バナーが許容すべきことを特異的に具体的に示している。最小アップロード2048×1152ピクセル、テキストとロゴの可視が保証される1235×338ピクセルの安全領域、テレビ向け推奨2560×1440、そして装飾的な影・枠・境界を追加しないという指示だ。このことを、Google のチャンネルブランディングのドキュメントは、同じバナーがパソコン・モバイル・テレビのすべてで表示されるが各々で異なる切り抜きになると述べている。それこそが、1つの画面のために中央に置くのではなく、マークを安全領域の中に収めるべき全体の理由だ。
Discord は、たいてい同じ画像に収まる3つ目のマークだ。Discord のブランドガイドラインは、マークの独自の使用ルールを定めている。配信者への実践的な教訓は他と同じだ。プラットフォームのマークは変更せず、余白を空け、自分の要素のようにロックアップに合成してはならない。
午後1つで作る
構築順はツールより重要だ。シミュレートできる最小サイズでモノグラムを描き、読めるようになってから始めよ。それを拡大してアイコンにする。チャンネル名を加えてオフラインロックアップを作り、その後、簡略化した絵からアウトラインを適用したオーバーレイ版を作る。それから初めて動かす。そして簡略バリエーションを動かせ。動きはマークがすでに持つものを増幅するので、ごちゃごちゃした絵は動くにじみになり、清潔な絵は動くアイデンティティになる。
絵ができてしまえば、アニメーション自体は短い仕事だ。透過 SVG または PNG をアップロードし、背景フレームを選び、楽曲を選び、ツールにビートマーカーに合わせて動きをカットさせる。そして同じソースから、クリップと Shorts 用に9:16を、オフライン画面とチャンネルトレーラー用に16:9を書き出す。読める最初のフレームを中心に作ったオープニングが、その書き出しを静止サムネイルとしても使えるようにし、ブラウザのエディターは覚えるタイムラインなしで全体の処理を回す。マークを動かすのではなく一から描くなら、ゲーミングマークのデザインルールが、このステップの前に来る描画の決定を扱っている。
よくある質問
アニメーション付き Twitch ロゴのサイズは？
ベクターマスターから作れば、サイズは決定事項ではなくなる。実際には、丸いアイコンの切り抜きを生き残る四角、チャットで読める簡略版、オフライン画面用の1920×1080の構図が必要だ。重要な制約はアイコンだ。プラットフォームが描画する最小サイズでマークが読めなければ、どんな大きい書き出しも救えない。
Twitch のプロフィール画像は動かせる？
Twitch のプロフィール画像は静止画像だ。だから動くバージョンは、動画や GIF を受け付ける配置——オフライン画面、アラート、オーバーレイ、チャンネルトレーラー——に置く。アイコンを、自分のアニメーションの静止フレームとして扱え。そのフレームが完成した構図として読めれば、動くバージョンも読める。静止の要件は妥協ではなくなる。
オフライン画面を動かすべき？
さりげないループは助け、忙しいループは害だ。オフラインカードは多くの場合、訪問者の最初の印象であり、何か別のことが起きている間の2台目のモニターやスマホで見られる。ゆっくりした時折の動きが、目をチャンネル名と予定に戻す。絶え間ない動きはテキストと競り、読み込まれなかった動画に見える。
ゲームプレイの上でロゴを読めるようにするには？
まずコントラストのあるアウトラインを2〜3ピクセル幅で適用し、シーンがまだ忙しすぎるなら40〜60%の不透明度のやわらかいプレートを足す。どちらもオーバーレイレベルの設定なので、1つのファイルがシーンごとではなくすべてのゲームをカバーする。マークがまだ苦しむなら、問題はたいてい扱いではなく絵であり、簡略化して再度試す。
アニメーション付き Twitch ロゴを他のプラットフォームで使える？
使える、しかも使うべきだ。ただし1つの調整を。各プラットフォームの安全領域を守れ。YouTube のバナーの指針が最も明確な例で、2048×1152のアップロードのうち1235×338ピクセルの領域の中だけでテキストとロゴの可視を保証する。Twitch のオフライン画面向けに中央に置いたマークは、テレビでは切り取られる。だから1つのファイルをあちこちで使い回すのではなく、配置ごとに書き出せ。
まとめ
アニメーション付き Twitch ロゴは、それが占める最小の配置から逆に作れ。モノグラムをチャットサイズで読めるようにし、細い線が生き残るまで絵を簡略化し、どのゲームの上でも映るようオーバーレイにアウトラインを付け、オフラインのループを最初のフレームに戻せ。そして詳細版ではなく簡略版を動かせ。32ピクセルで読めるバージョンこそ、1080で読めるバージョンだからだ。それ以外はすべて拡大縮小だ。